Currently browsing: September 2009

WooFunction: 178 iconos gratuitos

This post was published 9 years ago. It may be exremely outdated.

Vía InfectedFX descubro WooFunction, un paquete de 178 iconos totalmente gratuitos que seguro que serán del agrado de más de uno.

Podéis descargarlos aquí.

Sumolari.com recibe unas mejoras en el diseño

This post was published 9 years ago. It may be exremely outdated.

Rediseño del blog

Al ver los fantásticos iconos de FatCow me decidí a actualizar el diseño del blog e incorporar el paquete de iconos Farm Fresh. Aprovechando el cambio, he arreglado un par de cosas y he añadido algunas otras que espero que os gusten. Pero primero analizaré las novedades.

Nueva búsqueda instantánea

Nueva búsqueda instantánea

He cambiado el buscador del blog, a partir de ahora la búsqueda es instantánea, sin necesidad de cargar una página adicional. Antes los resultados que salían en la búsqueda inmediata no eran muy exactos y la búsqueda no era nada útil. Sin embargo, a partir de ahora la búsqueda inmediata muestra los artículos que tienen títulos o contenidos relacionados con la búsqueda, además, al hacer clic en el título accederemos directamente al artículo que queremos.

Paginación mejorada

Paginación mejorada

Al final del contenedor principal del blog y antes del pie de página a partir de ahora se mostrará un listado de la paginación del blog. Antes sólo nos dejaba ver la siguiente (o la anterior) página de artículos, mientras que con este sistema podremos acceder a cualquiera de las siguientes (o anteriores) 2 páginas. También veremos un indicador de nuestra posición en la paginación, que nos indica en qué página nos encontramos y el total de páginas que tiene el blog.

Nuevos iconos

Nuevos iconos

Como he dicho al principio del artículo, todos los iconos son nuevos y tienen un tamaño mayor. Sinceramente, me encantan estos nuevos iconos y espero que os gusten tanto como a mí. Otro pequeño cambio ha sido el color de los links al pasar el cursor sobre ellos. Ahora se iluminan en un color más oscuro que el anterior, lo que facilita la lectura. También he cambiado el efecto que había al cambiar de pestaña del pie de página. Antes el cambio era instantáneo, ahora hay un leve efecto de desaparición y aparición.

Comentarios rediseñados

Comentarios rediseñados

Los comentarios han sido totalmente rediseñados. Ahora tienen un color entre gris y negro de fondo y al comienzo y al final del listado podemos ver tres enlaces rápidos: uno al inicio de la lista de comentarios, uno al inicio de la lista de pingbacks y trackbacks y otro al formulario de publicar un comentario. Otra novedad es que he separado los comentarios de los pingbacks y trackbacks, así es más fácil seguir lo que comentan los usuarios y dejar de lado las referencias al artículo.

Y estos son las principales novedades del diseño del blog, sin embargo, también he hecho algunos cambios menores en el diseño.

Por ejemplo, ahora al final de cada artículo se puede ver una barra con los enlaces a los comentarios y al artículo, de forma que se unifican ambos enlaces en una misma línea horizontal.

Otros cambios

Otros cambios

Otro cambio está en los enlaces para compartir el artículo. He renovado los iconos y he eliminado muchas páginas que me parecían innecesarias, dejando sólo 7 enlaces y el de votar el artículo. Por otro lado, ahora el listado de artículos relacionados muestra la primera imagen en miniatura a la izquierda del enlace.

Sin embargo todos estos cambios tienen su parte mala, y es que a partir de ahora y hasta que los detecte y los arregle, el blog tendrá algunos fallos en el diseño que no he visto aún. Así que os pido por favor que cualquier cosa extraña que veais en el blog la comentéis en los comentarios de este artículo, así podré arreglar cuanto antes los fallos y será más cómoda la navegación por el blog.

Otro problema que he tenido (y que aún no sé cómo solucionarlo, aunque supongo que en unos días lo tendré arreglado) es que al navegar con Firefox y ver artículos cortos, se deforma el diseño y no se ven las fechas de los siguientes artículos. Este error no se da en Safari, por lo cual he modificado el diseño que se ve en Firefox, y ahora siempre veréis las fechas de los artículos al navegar con este navegador, al menos hasta que lo consiga arreglar (aunque no lo veo demasiado molesto).

Muestra una alerta a los usuarios de Internet Explorer

This post was published 9 years ago. It may be exremely outdated.

A raíz de un comentario de JaimePG se me ha ocurrido volver a tratar un tema del que ya hablé hace casi un año: Detectar a Internet Explorer. Aunque el tema quedó bastante claro, esta vez haré un recopilatorio de dos métodos para mostrar un cartel a los usuarios de Internet Explorer.

En todos los modos partiremos de un código CSS preestablecido (que deberéis añadir a vuestro CSS):

#usuarios-ie {
width:100%;
font-family:Verdana, Geneva, sans-serif;
background: #FFFFDE;
border-bottom:1px solid #666;
color:#000;
position:fixed;
top:0px;
left:0px;
z-index:999999;
}
#usuarios-ie p { font-size: 13px; margin: 0; padding:2px 10px; }
#usuarios-ie a  {text-decoration: underline; font-weight: bold; color: #D64411; }

Y también partiremos del mismo código HTML cada vez:

<br />
&lt;div id=&quot;usuarios-ie&quot;&gt;&lt;p&gt;El navegador que est&amp;aacute;s utilizando no es recomendable para navegar en Internet.  Te recomiendo te cambies a &lt;a href=&quot;http://www.mozilla.com&quot; title=&quot;Firefox web browser&quot;&gt;Firefox&lt;/a&gt;, &lt;a href=&quot;http://www.opera.com/&quot; title=&quot;Opera Browser&quot;&gt;Opera&lt;/a&gt;, &lt;a href=&quot;http://www.apple.com/es/safari/&quot; title=&quot;Apple Safari&quot;&gt;Safari&lt;/a&gt; o &lt;a href=&quot;http://www.google.com/chrome&quot; title=&quot;Google Chrome&quot;&gt;Google Chrome&lt;/a&gt;&lt;/p&gt;&lt;/div&gt;<br />

Usando HTML

Este método es el más fácil de implementar y consiste en utilizar un estilo CSS especial para Internet Explorer que muestre el cartel de aviso. Básicamente usaremos un comentario condicional que sólo analiza Internet Explorer y que nos permite distinguir cada versión de Internet Explorer. Este comentario, al ser código HTML, nos funcionará en cualquier servidor, sin necesidad de que tenga instalado PHP.

La estructura del comentario condicional es la siguiente:

<br />
&lt;!--[if IE]&gt;<br />
Código especial para IE<br />
&lt;![endif]--&gt;<br />
&lt;!--[if IE N]&gt;<br />
Código especial para IE, donde N es el número de la versión de Internet Explorer<br />
&lt;![endif]--&gt;<br />
&lt;!--[if IE 6]&gt;<br />
Código especial para IE 6<br />
&lt;![endif]--&gt;<br />
&lt;!--[if IE 7]&gt;<br />
Código especial para IE 7<br />
&lt;![endif]--&gt;<br />
&lt;!--[if lt IE 6]&gt;<br />
Código espcial para versiones anteriores a IE 6<br />
&lt;![endif]--&gt;<br />
&lt;!--[if lte IE 6]&gt;<br />
Código especial para versiones anteriores o iguales a IE 6<br />
&lt;![endif]--&gt;<br />
&lt;!--[if gt IE 6]&gt;<br />
Código especial para versiones posteriores a IE 6<br />
&lt;![endif]--&gt;<br />
&lt;!--[if gte IE 6]&gt;<br />
Código espcial para IE 6 y versiones posteriores<br />
&lt;![endif]--&gt;<br />

Como podréis imaginar, situaremos el código entre los comentarios condicionales, dependiendo de a quién queramos mostrarle el cartel. Si por ejemplo nos basta con IE6 y anteriores, usaremos el siguiente código:

<br />
&lt;!--[if lte IE 6]&gt;<br />
&lt;div id=&quot;usuarios-ie&quot;&gt;&lt;p&gt;El navegador que est&amp;aacute;s utilizando no es recomendable para navegar en Internet.  Te recomiendo te cambies a &lt;a href=&quot;http://www.mozilla.com&quot; title=&quot;Firefox web browser&quot;&gt;Firefox&lt;/a&gt;, &lt;a href=&quot;http://www.opera.com/&quot; title=&quot;Opera Browser&quot;&gt;Opera&lt;/a&gt;, &lt;a href=&quot;http://www.apple.com/es/safari/&quot; title=&quot;Apple Safari&quot;&gt;Safari&lt;/a&gt; o &lt;a href=&quot;http://www.google.com/chrome&quot; title=&quot;Google Chrome&quot;&gt;Google Chrome&lt;/a&gt;&lt;/p&gt;&lt;/div&gt;<br />
&lt;![endif]--&gt;<br />

Atención: Este método funciona debido a que el motor de renderizado de Internet Explorer (Trident) analiza estos comentarios, así que este método no funcionará alterando el User Agent del navegador con el que accedemos.

Usando PHP

Ahora sí que usaremos PHP, y por tanto necesitaremos un servidor capaz de ejecutarlo para poder detectar a Internet Explorer. Lo que haremos será leyendo el User Agent del navegador buscaremos la cadena identificatoria de Internet Explorer y si la encontramos, le daremos true al valor de la variable $ie.

Con este método podemos llegar a falsos positivos, ya que si el navegador con el que accedemos a la página tiene el User Agent cambiado por el de Internet Explorer, lo detectaremos como si de él se tratase.

El código PHP que usaremos será:

$user_agent = $_SERVER['HTTP_USER_AGENT'];
$posicion = strrpos($user_agent, "MSIE");
if ($posicion === false) {
$ie = false;
} else {
$ie = true;
}

Ahora basta con comprobar si $ie es true o false y actuar en consecuencia. El código necesario para hacerlo sería:

<?php if ($ie) { ?>
<div id="usuarios-ie"><p>El navegador que est&aacute;s utilizando no es recomendable para navegar en Internet.  Te recomiendo te cambies a <a href="http://www.mozilla.com" title="Firefox web browser">Firefox</a>, <a href="http://www.opera.com/" title="Opera Browser">Opera</a>, <a href="http://www.apple.com/es/safari/" title="Apple Safari">Safari</a> o <a href="http://www.google.com/chrome" title="Google Chrome">Google Chrome</a></p></div>
<?php } ?>

Con este código estaríamos detectando a Internet Explorer, sea cual sea su versión. Si queremos buscar una única versión, basta con modificar la cadena MSIE, por ejemplo, para buscar a IE6, utilizaríamos MSIE 6 en lugar de MSIE.

Lo malo de este método es que no podemos detectar a Internet Explorer 6 o inferiores, tan sólo a IE6 (o IE7, o IE8, etc).

Yo por mi parte a partir de ahora mostraré un cartel de aviso a los usuarios de Internet Explorer 6 o inferior en el blog, lo siento por los usuarios de IE6, pero hay alternativas mejores, multiplataforma y gratuitas, así que no veo motivo alguno para no cambiarse.

Descarga phpBB 3.0.6 RC2

This post was published 9 years ago. It may be exremely outdated.

phpBB LogoHace un par de semanas ya comenté que se había liberado la primera versión candidata (RC) de phpBB 3.0.6. Pues bien, hace un par de días se libero la segunda versión candidata de phpBB 3.0.6, una versión que está un paso más cerca de la versión estable final.

Los cambios entre ésta y la anterior versión candidata no deben ser muy abundantes, ya que no se comentan demasiado en el anuncio oficial. De todos modos, los links para descargar esta versión están disponibles aquí.

Farm-Fresh: 900 iconos gratuitos increíbles

This post was published 9 years ago. It may be exremely outdated.

Vía InfectedFX descubro Farm-Fresh, un conjunto de 900 iconos gratuitos creados por la empresa de hosting FatCow. Tienen un estilo muy similar a los de fam³ (silk icons), aunque tienen la ventaja de estar tanto en 16x16px como en 32x32px, por lo que es más adecuado para proyectos que requieran iconos más grandes.

Puedes descargarlos desde aquí.

Carga el theme por defecto de WordPress al navegar con IE6

This post was published 9 years ago. It may be exremely outdated.

Internet Explorer 6 es el terror de todo diseñador web. Es capaz de transformar cualquier código estándar y convertirlo en el mayor desastre jamás visto, aunque claro está, creando una versión especial del diseño para él podemos conseguir que se vea de una forma más o menos decente.

Sin embargo, si no tienes ganas de seguir diseñando para un navegador obsoleto y que no sigue los estándares, tienes la opción de usar un pequeño truco que ha publicado en aNieto2k. Lamentablemente este truco sólo funciona en WordPress y se basa en usar los filtros y acciones de WordPress para modificar la variable que define el theme que se usa, y en el caso de navegar con IE6, devolver el theme por defecto. El código es el siguiente y basta con ponerlo en el archivo functions.php de nuestro theme:

add_filter('template', 'serve_default_to_iesix');
add_filter('option_template', 'serve_default_to_iesix');
add_filter('option_stylesheet', 'serve_default_to_iesix');
function serve_default_to_iesix($theme) {
 if(strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE 6') !== false)
    $theme = 'default';
 return $theme;
}

Mejorando nuestro theme de WordPress: Creando columnas con todas nuestras categorías

This post was published 9 years ago. It may be exremely outdated.

Columnas en nuestro theme Default

Lo prometido es deuda, y ya dije que explicaría como mostrar todas las categorías en columnas, así que vamos allá.
En este tutorial partiremos del mismo código CSS que en el anterior, además de que usaremos las mismas clases para las columnas. Así que lo primero que haré es recordar un poco las cosas que tenemos que modificar de style.css y de index.php, para luego comenzar con las categorías y las columnas. Comenzaremos con index.php:

Vamos a la línea 11 y veremos:

<?php if (have_posts()) : ?>

Añadimos antes del ?>: if(is_home()):, dejando el código así:

<?php if (have_posts()) : if(is_home()): ?>

Ahora vamos a la línea 13 y veremos:

<?php while (have_posts()) : the_post(); ?>

Añadimos antes del while: else:, dejando el código así:

<?php else: while (have_posts()) : the_post(); ?>

Ahora pasamos a la línea 26, donde veremos:

<?php endwhile; ?>

Y añadimos antes del ?>: endif;, dejando el código así:

<?php endwhile; endif; ?>

Bien, a partir de ahora el código comprendido entre la línea 11 y la 13 se ejecutará sólo en el inicio del blog. Así que como ya podéis suponer, será aquí donde añadamos el código necesario para mostrar las columnas.

Ahora abrimos style.css y añadimos al final:

.columna-derecha { width:48%; float:right; clear:both; }
.columna-izquierda { width:48%; float:left; }

Bien, estos pasos son idénticos a los del tutorial anterior. Ahora ya pasamos a modificar de nuevo el archivo index.php y a mostrar todas las categorías en columnas. El código que añadamos deberá estar entre las líneas 11 y 13.

Lo primero que haremos será crear una variable que contenga todas las categorías. En realidad lo que haremos será crear una matriz que contenga un objeto por cada categoría, pero realmente las usaremos como si de variables se tratase. Así que añadimos la siguiente línea:

<?php $categorias=  get_categories(); $columna_derecha = true; ?>

Ahora $categorias almacena las categorías del blog. Esta función acepta parámetros, pero no voy a usar ninguno en el ejemplo. Si os interesa, tenéis más información acerca de la función aquí. También he creado la variable $columna_derecha, que nos indicará si estamos ante una columna del lado derecho o no.

Para mostrar todos los elementos de la matriz recurriremos a la función foreach, idónea para estos casos, así que añadimos:

<?php foreach($categorias as $key => $cat):?>
<?php endforeach; ?>

Como veis, he dejado una línea en blanco entre el inicio y el fin del bucle, ahí es donde situaremos el código a partir de ahora.

Lo próximo es hacer una consulta a la Base de Datos, esta vez buscamos artículos que estén en la categoría que se está mostrando en cada punto. Usaremos la misma función para mostrar los artículos y básicamente los mismos parámetros. Resumiendo, tenemos que añadir:

<?php $articulos[$key] = new WP_Query('cat='.$cat->cat_ID.'&showposts=1'); ?>
<div class="<?php if($columna_derecha) { echo 'columna-derecha'; $columna_derecha = false; } else { echo 'columna-izquierda'; $columna_derecha = true; } ?>">
<?php while ($articulos[$key]->have_posts()) : $articulos[$key]->the_post(); ?>
<?php endwhile; ?>
</div>

Creo que el código es bastante simple. $key almacena el índice de cada elemento de la matriz de las categorías, mientras que $cat almacena el valor. Ya he dicho que el valor era en realidad un objeto, así que tenemos que acceder a él como tal, es decir: $cat->variable/función.

A continuación, dependiendo del valor de $columna_derecha, le añadirá la clase correspondiente a la capa (div) que contendrá los artículos y alternará el valor de $columna_derecha.

Bien, después de esto hacemos una consulta a la Base de Datos. Para no repetir nombres de variables y evitar problemas, la variable que contendrá el artículo será una matriz, y el índice será el mismo que el de la categoría, así nos aseguramos de que sea único y no se repita.

El resto es idéntico al tutorial anterior a excepción de que cerraremos la capa (div) correspondiente a la columna. Como antes, he dejado una línea en blanco porque ahí es donde irá el código que mostrará el artículo.

Bien, a continuación ya sólo tenemos que mostrar el artículo, aprovechando la variable $columna_derecha para mostrarlo. Este paso es diferente en cada caso (si quieres mostrar la fecha usarás un código, si no quieres mostrar el título eliminarás una línea, etc), y en mi caso el código que usaré será el siguiente:

<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
<div class="entry">
<?php the_content('Read the rest of this entry &raquo;'); ?>
</div>
<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
</div>

Y después de esto ya tenemos listo el theme y ya se mostrarán todas las categorías en columnas. Es muy recomendable leer el tutorial anterior para acabar de entender este tutorial.

Por último, podéis descargar el theme Default modificado aquí.

Migrando a Simple Machines Forum

This post was published 9 years ago. It may be exremely outdated.

Cuando elegí phpBB3 como sistemas de foro para el foro de Sumolari.com lo hice principalmente pensando en el diseño hoy y de cara al futuro, dejando un poco de lado el tema de la seguridad, los Mods y demás. El argumento con el que me convencí fue: “¿Para qué necesitas Mods si el foro es sólo para dar soporte y ayuda? No lo necesitas” y “Mejor deja SMF que está en desarrollo y te tocará crear el theme dos veces, una para la versión 2.0 RC1 y otro para la 2.0 RC2 y posterior”.

Sin embargo, mi forma de pensar ha cambiado estos últimos dos días, después de una oleada de Spam en el foro. Se me presentaban dos opciones para acabar con el Spam: Buscar un Mod para phpBB3 que me ayude con el Spam e instalarlo o migrar a SMF (con el cual nunca tuve problemas de Spam) y olvidarme del problema o instalar un Mod para SMF que me ayude con el Spam.

Al final me he decantado por la segunda opción. Tengo más experiencia con SMF y puedo crear themes más complejos, además de que los Mods se instalan y actualizan (al igual que el sistema en sí) de forma automática, lo cual me ahorra mucho trabajo y problemas.

Es por esto por lo que a partir de ahora el foro estará gestionado con Simple Machines Forum. De momento (y hasta que esté lista la versión 2.0 RC2) utilizaré el theme por defecto del foro, que a muchos (incluído yo) no me gusta, pero creo que es mucho mejor un foro limpio y feo que uno bonito y lleno de Spam.

Así que durante esta tarde el foro estará semi-accesible hasta que acabe de migrar de sistema. Disculpad las molestias.

Mejorando nuestro theme de WordPress: Creando columnas con diversas categorías

This post was published 9 years ago. It may be exremely outdated.

Columnas en nuestro theme Default

En casi todos los periódicos y en muchísimos portales podemos ver que la página de inicio se compone de algunos artículos de cada sección de la página. Obviamente no se escriben el mismo número de artículos en cada categoría ni se escribe un artículo para cada categoría de forma diaria, así que no sería de extrañar ver que los últimos 10 artículos que se han escrito en una blog sean de dos o tres categorías, seguramente menos de las que tiene en total en blog.

Aún así seguimos viendo como estas páginas tienen una columna para cada categoría y vemos los mismos artículos en cada columna. ¿Cosa de magia? Ni por asomo, y hoy voy a explicar cómo hacer esto en nuestro WordPress.

Durante el tutorial modificaré el theme Default de WordPress, aunque el estilo a dos columnas no será muy legible, así que os aconsejo que a la hora de aplicar estas modificaciones, lo hagáis en otro theme, aunque siempre podéis modificar primero el Default para aprender y coger práctica.

Lo primero que haremos será modificar el archivo index.php del theme Default para mostrar la nueva estructura de la página de inicio sólo si estamos en la página de inicio. Hay que tener en cuenta que si no existen los archivos page.php y single.php, se usará index.php para mostrar el contenido correspondiente. Por eso es muy recomendable añadir esta pequeña condición siempre que queramos mostrar algo en la página de inicio.

Vamos a la línea 11 y veremos:

<?php if (have_posts()) : ?>

Añadimos antes del ?>: if(is_home()):, dejando el código así:

<?php if (have_posts()) : if(is_home()): ?>

Ahora vamos a la línea 13 y veremos:

<?php while (have_posts()) : the_post(); ?>

Añadimos antes del while: else:, dejando el código así:

<?php else: while (have_posts()) : the_post(); ?>

Ahora pasamos a la línea 26, donde veremos:

<?php endwhile; ?>

Y añadimos antes del ?>: endif;, dejando el código así:

<?php endwhile; endif; ?>

Bien, a partir de ahora el código comprendido entre la línea 11 y la 13 se ejecutará sólo en el inicio del blog. Así que como ya podéis suponer, será aquí donde añadamos el código necesario para mostrar las columnas.

En este tutorial mostraremos 4 categorías. En realidad podemos mostrar todas las que queramos, y probablemente mañana o dentro de un par de días publicaré la continuación de este tutorial explicando como mostrar todas las categorías del blog, pero de momento comenzaremos con algo más fácil.

Las 4 categorías que voy a mostrar yo son: Ati (ID: 13), Nvidia (ID: 10), PC (ID: 16), Mac (ID: 14).

El código que usaremos para hacer las consultas es el siguiente:

<?php $consulta = new WP_Query('parámetros'); ?>
<?php while ($consulta->have_posts()) : $consulta->the_post(); ?>
  <!-- Estructura de los artículos, la veremos más adelante  -->
<?php endwhile; ?>

Lo primero que haremos será añadir el código que tenemos arriba en la línea 12. Obviamente el código no funcionará, ya que los parámetros son incorrectos y no mostramos nada, así que tenemos que modificar los parámetros. Los parámetros se separan con &, como en casi todas las funciones de WordPress, en este tutorial vamos a usar dos parámetros.

Bien, el parámetro cat nos permite establecer la ID de la categoría a la cual deben pertenecer los artículos que vamos a mostrar, es decir, nos permite filtrar los artículos, así que usándola podremos mostrar sólo los artículos de cierta categoría.

El segundo parámetro que usaremos es el parámetro showposts, que nos permite establecer el número de artículos que vamos a mostrar, en este tutorial yo mostraré un único artículo por categoría, siendo éste el más reciente de todos los de la categoría.

Así que los parámetros tendrán el siguiente aspecto: cat=ID&showposts=1. Como vamos a usar el mismo código para cada categoría, tendremos que realizar algunos cambios únicos en cada código, y modificar el primer parámetro. Donde pone ID en los parámetros, tenéis que poner la ID de la primera categoría que queréis mostrar, así que en mi caso, y para mostrar la categoría Ati, el código quedaría así:

<?php $articulos_ati = new WP_Query('cat=13&showposts=1'); ?>
<?php while ($articulos_ati->have_posts()) : $articulos_ati->the_post(); ?>
<?php endwhile; ?>

Como podéis ver, he cambiado el nombre de la variable $consulta. Como ya he dicho, cada código tiene que ser único, y aunque en realidad deberíamos poder usar el mismo nombre para la variable de cada consulta, es más recomendable usar nombres diferentes, así que yo usaré siempre un nombre formado de la siguiente forma: artículo_nombrecortodelacategoria. Así que usaré: articulos_ati, articulos_nvidia, articulos_pc y articulos_mac.

Sigamos. Veréis que he dejado una línea en blanco entre el while y el endwhile. En esta línea mostraremos el contenido que queremos de nuestro artículo de forma similar a como lo haríamos de normal, es decir, mediante las funciones: <?php the_title(); ?>, <?php the_content(); ?>, etc.

Para darle el aspecto de columnas y poder maquetar de forma más fácil, crearé una capa (div) que contenga el artículo y dentro de ella mostraré el título y el contenido. Esto es opcional y este paso podéis hacerlo como queráis. Al final en mi caso el código queda así:

<?php $articulos_ati = new WP_Query('cat=13&showposts=1'); ?>
<?php while ($articulos_ati->have_posts()) : $articulos_ati->the_post(); ?>
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
<div class="entry">
<?php the_content('Read the rest of this entry &raquo;'); ?>
</div>
<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
</div>
<?php endwhile; ?>

Ya tenemos una de las categorías listas, nos quedan 3. Para mostrarlas repetimos los pasos anteriores, o copiamos y pegamos el código 3 veces, modificando en cada caso el nombre de la variable $consulta y la ID de la categoría. Al final en mi caso el código queda así:

<?php $articulos_ati = new WP_Query('cat=13&showposts=1'); ?>
<?php while ($articulos_ati->have_posts()) : $articulos_ati->the_post(); ?>
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
<div class="entry">
<?php the_content('Read the rest of this entry &raquo;'); ?>
</div>
<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
</div>
<?php endwhile; ?>
<?php $articulos_nvidia = new WP_Query('cat=10&showposts=1'); ?>
<?php while ($articulos_nvidia->have_posts()) : $articulos_nvidia->the_post(); ?>
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
<div class="entry">
<?php the_content('Read the rest of this entry &raquo;'); ?>
</div>
<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
</div>
<?php endwhile; ?>
<?php $articulos_pc = new WP_Query('cat=16&showposts=1'); ?>
<?php while ($articulos_pc->have_posts()) : $articulos_pc->the_post(); ?>
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
<div class="entry">
<?php the_content('Read the rest of this entry &raquo;'); ?>
</div>
<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
</div>
<?php endwhile; ?>
<?php $articulos_mac = new WP_Query('cat=14&showposts=1'); ?>
<?php while ($articulos_mac->have_posts()) : $articulos_mac->the_post(); ?>
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
<div class="entry">
<?php the_content('Read the rest of this entry &raquo;'); ?>
</div>
<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
</div>
<?php endwhile; ?>

Ahora sólo nos queda el código HTML/CSS para crear las columnas. Vamos a modificar el CSS del theme, hay que tener en cuenta que el código CSS es único en cada theme, por lo que puede que el que pongo aquí no os valga a vosotros en vuestro theme, eso sí, funcionará a la perfección en el theme Default, así que vamos allá.

Después de cada <?php endwhile; ?> que hemos añadido, podremos un </div>, para cerrar las capas que vamos a abrir a continuación.

Además, antes de cada <?php $consulta = new WP_Query… ?> añadiremos <div class=”columna-izquierda”> y <div class=”columna-derecha”>, alternando cada vez una de ellas y comenzando por la columna derecha, de forma que nuestro código quedará así:

<div class="columna-derecha">
<?php $articulos_ati = new WP_Query('cat=13&showposts=1'); ?>
<?php while ($articulos_ati->have_posts()) : $articulos_ati->the_post(); ?>
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
<div class="entry">
<?php the_content('Read the rest of this entry &raquo;'); ?>
</div>
<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
</div>
<?php endwhile; ?>
</div>
<div class="columna-izquierda">
<?php $articulos_nvidia = new WP_Query('cat=10&showposts=1'); ?>
<?php while ($articulos_nvidia->have_posts()) : $articulos_nvidia->the_post(); ?>
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
<div class="entry">
<?php the_content('Read the rest of this entry &raquo;'); ?>
</div>
<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
</div>
<?php endwhile; ?>
</div>
<div class="columna-derecha">
<?php $articulos_pc = new WP_Query('cat=16&showposts=1'); ?>
<?php while ($articulos_pc->have_posts()) : $articulos_pc->the_post(); ?>
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
<div class="entry">
<?php the_content('Read the rest of this entry &raquo;'); ?>
</div>
<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
</div>
<?php endwhile; ?>
</div>
<div class="columna-izquierda">
<?php $articulos_mac = new WP_Query('cat=14&showposts=1'); ?>
<?php while ($articulos_mac->have_posts()) : $articulos_mac->the_post(); ?>
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
<div class="entry">
<?php the_content('Read the rest of this entry &raquo;'); ?>
</div>
<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
</div>
<?php endwhile; ?>
</div>

Ahora tenemos que modificar el código CSS del theme, que está en el archivo style.css (de nuevo, esto depende del theme). Vamos a la última línea y añadimos el estilo necesario para crear las columnas:

.columna-derecha { width:48%; float:right; clear:both; }
.columna-izquierda { width:48%; float:left; }

¡Y listo! Ya tenemos los artículos en dos columnas una para cada categoría. Hace unos cuantos meses publiqué un tutorial similar pero mostrando sólo artículos en dos columnas, es decir, sin el añadido de las categorías. Podéis verlo aquí.

Por último, podéis descargar la versión modificada del theme Default desde aquí.

Aprende a usar los campos personalizados de WordPress

This post was published 9 years ago. It may be exremely outdated.

Hoy han publicado en InfectedFX un excelente tutorial para aprender a usar los Campos Personalizados de WordPress, una manera fácil de hacer cada artículo único.

Curiosamente hace poco estuve trabajando con campos personalizados en WordPress para mostrar una imagen diferente para cada artículo, algo muy similar a lo que proponen en InfectedFX.