Planeta WordPress

Cada vez se usan menos en blogs, pues parece que todos nos hemos puesto un poco serios, pero los smileys siguen totalmente en vigor, especialmente en las redes sociales.

Esas pequeñas caritas nos ayudan a transmitir emociones en los textos, a hacer un poco más humana la publicación, aunque sea ayudándonos de iconos simples como son los smileys.

Ahora bien, a veces los smileys no se muestran integrados en el texto – que es su objetivo – ya que al ser imágenes heredan el mismo estilo del resto de imágenes de tu tema, y si tienes definido un borde o sombreado para las imágenes, los smileys también se mostrarán con esos bordes y demás florituras, y seguro que no es lo que te gustaría.

Afortunadamente solucionarlo es muy fácil, pues solo tienes que definir una clase CSS para los smileys, de modo que no tengan nada de adorno alrededor y así se integren mejor en los textos donde los incluyas.

Abre la hoja de estilos de tu tema WordPress, normalmente denominada style.css y añade la siguiente clase:

/* Clase CSS para quitar adornos a los smileys */
img.wp-smiley {
	background: transparent;
	border: none;
	margin: 0;
	padding: 0;
}

En el código hacemos que el fondo sea transparente, que no tenga borde, sin márgenes que separen el smiley del texto y sin borde de ningún tipo.

Guardas los cambios y ya lo tienes

El “bounce rate” o “porcentaje de rebote” es un concepto utilizado por los buscadores que viene a definir, dicho de manera burda, lo que tardan tus visitantes en abandonar tu web.

A modo de explicación sencilla el porcentaje de rebote se obtiene de dividir los visitantes a una sola página entre los visitantes de toda tu web. Hay un estándar establecido en 30 segundos y el “bounce rate” se mide en el porcentaje sobre esos 30 segundos (70% de bounce rate o similar). El ideal sería un “bounce rate” de 0% pero lo normal son porcentajes del 40% 0 50%.

Al final viene a ser una medida de la fidelidad de los visitantes a las publicaciones de tu web, que por supuesto podemos mejorar … y en WordPress es relativamente fácil con un poco de ayuda …

Si estamos hablando de bajar el “bounce rate“, o sea, de conseguir que los visitantes sigan viendo páginas de nuestra web, entonces habrá que fidelizarlos. Esto nos ayudará …

1. Lista de categorías

Asegúrate de que siempre hay en tus entradas la lista de las categorías a las que pertenece cada entrada, a ser posible al final de cada entrada, de modo que si tu publicación ha gustado quizás tu visitante quiera saber que más sabes sobre esa temática.

Normalmente esto se consigue a través de la función wp_list_categories y el código, que encontrarás en la mayoría de los temas en su portada (index.php) y la página de entrada (single.php) será algo así:

<?php wp_list_categories(); ?>

También puedes mostrarlas con esta la función get_the_category_list:

<?php echo get_the_category_list(); ?>

2. Lista de etiquetas

También cerciórate de que hay una lista de las etiquetas (tags) usadas en cada entrada. Esta lista es, si quieres, más potente, pues suele estar más íntimamente relacionada con el contenido concreto de la publicación.

Si tu tema no incluye un modo de mostrar las etiquetas utilizadas usa la función the_tags que, en su versión más sencilla sería algo así:

<?php the_tags('Etiquetas:', ', ', '<br />'); ?>

3. Entradas relacionadas

Un modo muy potente de conseguir que tus visitantes vean más páginas de tu web es colocar al final de cada entrada una lista de entradas relacionadas con la actual, que ofrecen la promesa de ampliar conocimientos sobre un mismo tema.

Hay muchos modos de ofrecer este tipo de recurso, estos son los que recomiendo:

• Entradas relacionadas sin plugin
• Opción de entradas relacionadas del plugin Simple Tags: funciona mejor que la mayoría de plugins especializados, en mi experiencia, y se integra de maravilla con tu tema sin tener que tocar código
• Entradas relacionadas con miniatura: un modo más potente de atraer a tus visitantes a tu contenido relacionado, valiéndote de miniaturas de imagen

4. Enlaces a entradas anteriores/siguientes

Otro modo habitual de mantener a los visitantes para que no se pierdan nada es ofrecer navegación hacia las entradas anteriores y siguientes a la que están viendo.

A este respecto, aunque son muy efectistas, los sistemas de paginación no son lo más recomendable, pues no informan de lo que se va a encontrar el lector, requieren de una fidelización previa.

Lo mejor es ofrecer los típicos enlaces (o no) a la entrada anterior y la siguiente, normalmente al final de la actual, para animar al visitante a que no se pierda “esa interesante entrada que puede no hayan visto”, sobre todo si llegan a tu web desde un buscador.

Lo puedes conseguir de varias maneras:

1. Con código – añadiendo al final del “loop” del fichero single.php el siguiente código (si tu tema no lo incluye ya):
   Entrada anterior:

   <?php previous_post_link(); ?>

   Entrada siguiente:

   <?php next_post_link(); ?>

2. Con plugin – y aunque hay muchos para esta utilidad el más potente que conozco es el upPrev Animation, una joya que anima a leer la entrada anterior/siguiente mediante un popup animado al final de la entrada actual. Igualito que en la web del New York Times, para que fardes de nivelazo.

5. Evita demasiada publicidad

Sobre todo evita los molestos anuncios en popup, que harán que la visita a tu web WordPress sea una experiencia desagradable, y puede que hasta dejen de visitarte, por muy interesante que sea tu contenido.

6. Enlaces externos en nueva pestaña/ventana

Esto también es consejo personal, pero creo que a nadie se le escapa que los enlaces externos a tu sitio, si quieres un “bounce rate” controlado, es mejor que no hagan perder el foco de tu web. Para eso usa en los enlaces externos el atributo de que se abra en nueva ventana/pestaña, que en código html sería así:

Target _blank:

<a target="_blank" href="http://sitioexterno.com">Sitio externo</a>

Target new:

<a target="new" href="http://sitioexterno.com">Sitio externo</a>

7. Buenos titulares

De nada sirve casi que pongas enlaces de entradas anteriores o relacionadas si no sabes atraer a tus visitantes al nuevo contenido con un buen titular, que incite a leer por si solo. Además, que sobre esto ya está casi todo escrito, y solo basta con aplicar algo de periodismo para escribir online.

8. Contenido de calidad y actualizado

Y, siguiendo en la línea del consejo anterior, pero ahondando en el mismo, de nada servirá – esto es seguro – si engañas o no convences a tus visitantes con el contenido. Es más, si ofreces una gran expectativa en el titular que no se refleja en una publicación de calidad y con información actual, estarás prácticamente echando de tu web a los visitantes, al sentirse manipulados.

Ofrecer contenido actualizado es especialmente importante, pues dirá muchas cosas a tus visitantes, como cuanto interés pones en mantener al día tu web, o si merece la pena volver para “estar al día”

9. Acelera tu WordPress

Por supuesto, si tu web carga lenta, si dispones de un mal hosting, o sobrecargas demasiado tu sitio con plugins innecesarios, la experiencia del visitante será mala, con tiempos de carga lentos, que – literalmente – le echarán de tu web, quizás para no volver.

Actualmente, con sistemas de Cloud hosting avanzados, no tiene sentido ofrecer contenido – y mucho menos alojar tu negocio – en un alojamiento barato y malo.

Así que ¡acelera WordPress!. Te dejo unos cuantos trucos:

• Comprime el contenido mediante htaccess
• Como acelerar WordPres
• Acelera WordPress definiendo llamadas a funciones
• Acelera la carga de WordPress con zlib
• Organiza y adelgaza tu CSS
• Comprime el CSS de tu tema
• Optimiza WordPress desde la base de datos
• 13 tags que puedes quitar para acelerar WordPress

10. Diseño

Vale que el aspecto es una característica subjetiva, que lo que para uno es bonito a otro le parece horrible, pero un diseño bien estructurado, con la navegación bien definida, con colores homogéneos y enfocado a la usabilidad, ofrecerá a tus lectores una visita agradable en tu web.

Bueno, espero que con estos consejos mejores tu “bounce rate”, o porcentaje de rebote. Seguro que en cualquier caso vas a mejorar la experiencia de tus visitantes, no te quepa duda. Lo que creo que ya sabrás de sobra es que WordPress y el SEO se llevan de maravilla.

¡Ah!, y si se me ha pasado algún buen consejo, nos lo cuentas en los comentarios.

Aparte de una bonita frase, es una declaración que nos hacen en WordPress.com para animarnos a la actualización de CSS para su servicio de sitios con WordPress.

Y es que si haces la actualización de CSS no solo tendrás la posibilidad de aplicar un CSS preparado previamente por ti en tu editor favorito sino que también te ofrecen un par de funcionalidades extra por si quieres modificar el CSS desde WordPress.com.

La primera es el “selector de fuentes“, con el que puedes definir fácilmente las tipografías a emplear en tu CSS, eligiéndolas de entre más de 50, sin tener que “picar” código manualmente, y la segunda es un editor CSS integrado, con el que puedes guardar reglas de estilo utilizadas o incluso previsualizar como quedará tu sitio antes de hacer el pago por la actualización o los cambios a tu diseño.

Para rematar, si quieres aprender CSS, puedes visitar la página especialmente creada de CSS Basics, con los selectores y clases principales para dar tus primeros pinitos en este bonito “arte” del CSS.

Si te animas solo tienes que ir al escritorio de tu WordPress.com en el menú “Apariencia -> Custom design” y empezar a diseñar tu sitio con CSS.

Ya casi no queda nada que no se pueda hacer con WordPress pero ¿un juego?, pues si. Eso es WordPress Jeopardy, una idea que surgió en WordCamp Suiza este año, la de hacer un juego con una instalación de WordPress, usando sus funciones y hooks.

Y, ni cortos ni perezosos, en Septiembre de este año empezó la primera tanda del WordPress Jeopardy, que para el que no lo sepa es un juego basado en un popular concurso de televisión norteamericano que surgió allí por 1964, hace nada menos que 47 años.

La idea es genial; cada respuesta es una entrada, con sus metadatos como preguntas y puntos de cada pregunta. El sitio es una instalación de WordPress simple, con un tema personalizado. Lo único que necesita es una lista de categorías de entradas y las entradas, que van en la categoría correspondiente de este modo:

<?php
$x = 1;
$cat_args = array( 'parent' => 0 );
$categories = get_categories( $cat_args );
foreach ( $categories as $category ) :
	// Muestra la cabecera de la categoría
	$y = 1;
	$post_args = array( 'category' => $category -> term_id );
	$posts = get_posts( $post_args );
	foreach ( $posts as $post ) :
		// Muestra la entrada de respuesta, aquí va la pregunta y los puntos
	endforeach;
endforeach;
?>

Luego se aplica un poco de CSS y a correr.

Ya hace tiempo que se introdujeron las miniaturas de entrada en WordPress, en concreto en la versión 2.9. Y, posiblemente, te haya pasado como a mi, que actualizaste tu tema para que soportara las miniaturas de entrada y ¡mira por donde que putada!, ahora resulta que todas tus entradas anteriores no tienen miniatura y quedan feuchas en tu sitio recién tuneado.

Bueno, pues no te preocupes, que es fácil arreglar ese pequeño problema, como siempre … 

Si te ha pasado algo así, o simplemente no quieres andar metiendo miniaturas manualmente en cada entrada sino que prefieres poner una por defecto, hay solución sencilla.

Puedes hacerlo de dos maneras, como siempre:

1. Añadir miniatura por defecto mediante código

Aquí la idea es como añadir una especie de gravatar por defecto. Lo que tienes que hacer es localizar el “loop” y añadir lo siguiente, por supuesto con el CSS que más te guste o se adapte a tu tema:

<?php if ( has_post_thumbnail() ) {
the_post_thumbnail();
} else { ?>
<img src="<?php bloginfo('template_directory'); ?>/imagenes/miniatura-por-defecto.png" alt="<?php the_title(); ?>" />
<?php } ?>

2. Añadir miniatura por defecto mediante plugin

Si no te apañas con el código, o simplemente prefieres la facilidad de gestionar visualmente la miniatura por defecto, puedes usar el plugin Default post thumnbail, que te facilita la tarea.

Una vez activo tiene una página de ajustes en la que elegir la miniatura que irá por defecto, y cambiarla cuando te apetezca.

¡Hala, ya está!, que lo disfrutes

Si quieres animarte a empezar a programar, o tocar, código en tu WordPress no estará de más conocer al menos los básicos, y esta entrada va de eso.

Lo que tienes a continuación es una relación de las clases CSS utilizadas por defecto por WordPress, que encontrarás en la inmensa mayoría de los temas WordPress que uses, así que toma nota y empieza a practicar. Si te animas a crear un tema WordPress luego me lo cuentas y lo promocionamos aquí.

Clases por defecto para el “body”

La etiqueta más importante en el contenido es body, y aquí hay ejemplos de las clases más comunes que WordPress suele añadir a este elemento:

.rtl {}
.home {}
.blog {}
.archive {}
.date {}
.search {}
.paged {}
.attachment {}
.error404 {}
.single postid-(id) {}
.attachmentid-(id) {}
.attachment-(mime-type) {}
.author {}
.author-(user_nicename) {}
.category {}
.category-(slug) {}
.tag {}
.tag-(slug) {}
.page-parent {}
.page-child parent-pageid-(id) {}
.page-template page-template-(template file name) {}
.search-results {}
.search-no-results {}
.logged-in {}
.paged-(page number) {}
.single-paged-(page number) {}
.page-paged-(page number) {}
.category-paged-(page number) {}
.tag-paged-(page number) {}
.date-paged-(page number) {}
.author-paged-(page number) {}
.search-paged-(page number) {}

Si quieres añadir estilo a la página de resultados de búsqueda, por ejemplo, puedes usar la clase “search-results” para añadir tu estilo ahí. WordPress solo añade esta clase a la etiqueta body cuando la página de resultados de búsqueda está activa, de modo que no afecta a otras páginas.

Estilos de entrada por defecto

Al igual que con el body, WordPress añade también clases dinámicas a los elementos de las entradas. En esta lista tienes los más utilizados:

.post-id {}
.post {}
.page {}
.attachment {}
.sticky {}
.hentry {}
.category-misc {}
.category-example {}
.tag-news {}
.tag-wordpress {}
.tag-markup {}

La idea es mostrar las entradas de manera dinámica, de acuerdo al formato que elijas. WordPress, de este modo, añade clases dinámicas usando la función post_class (), la cual te permite crear tus propios estilos para cada formato. Esta función añadirá una clase del tipo “.format-cosa” donde “cosa” es cualquier formato de entrada que hayas elegido, ya sea galería, minientrada, etc:

.format-image {}
.format-gallery {}
.format-chat {}
.format-link {}
.format-quote {}
.format-status {}
.format-video {}

Estilos por defecto para menús

De nuevo, podemos personalizar los estilos, en este caso para los menús de navegación:

#header .main-menu{} // clase del contenedor
#header .main-menu ul {} // clase del contender de la primera lista no ordenada (ul)
#header .main-menu ul ul {} //lista no ordenada (ul) dentro de una lista no ordenada (ul)
#header .main-menu li {} // cada elemento de navegación
#header .main-menu li a {} // cada texto de enlace de los elementos de navegación
#header .main-menu li ul {} // lista no ordenada si hay elementos desplegables
#header .main-menu li li {} // cada elemento de navegación desplegable
#header .main-menu li li a {} // cada texto de enlace de los elementos de navegación desplegables

.current_page_item{} // class para la página actual
.current-cat{} // class para la categoriá actual
.current-menu-item{} // class para cualquier otro elemento del menú
.menu-item-type-taxonomy{} // clase para una categoría
.menu-item-type-post_type{} // clase para las páginas
.menu-item-type-custom{} // clase para cualquier elemento personalizado que añadas
.menu-item-home{} // clase para el enlace a la portada

Observa que cuando creas un menú en WordPress automáticamente se envuelve en un div. Este div solo tiene un nombre de clase si lo especificas (por ejemplo main-menu). A partir de ahí ya puedes tu añadir estilo a cada elemento.

Estilos por defecto para el editor visual

El editor visual WYSIWYG es quizás uno de los elementos más utilizados de WordPress, y también de los más queridos. Así que no parece mala idea disponer de estilos por defecto para lo que añadimos en nuestro WordPress, como imágenes, citas, esas cosas. Las siguientes clases CSS son las que añade automáticamente WordPress a estos elementos y que, por supuesto, puedes identificar en tu hoja de estilos – normalmente style.css – y modificar a tu gusto:

.entry-content img {}
.alignleft, img.alignleft {}
.alignright, img.alignright {}
.aligncenter, img.aligncenter {}
.alignnone, img.alignnone {}

.wp-caption {}
.wp-caption img {}
.wp-caption p.wp-caption-text {}

.wp-smiley {}

blockquote.left {}
blockquote.right {}

.gallery dl {}
.gallery dt {}
.gallery dd {}
.gallery dl a {}
.gallery dl img {}
.gallery-caption {}

.size-full {}
.size-large {}
.size-medium {}
.size-thumbnail {}

Estilos por defecto de los widgets de WordPress

Otro elemento muy popular, y nunca suficientemente valorados, son los widgets. Normalmente se adaptan de maravilla al CSS de tu tema pero si no fuera así no está de más saber que clases CSS les afectan y poder cambiarlas. Las habituales son estas:

.widget {}

#searchform {}
.widget_search {}
.screen-reader-text {}

.widget_meta {}
.widget_meta ul {}
.widget_meta ul li {}
.widget_meta ul li a {}

.widget_links {}
.widget_links ul {}
.widget_links ul li {}
.widget_links ul li a {}

.widget_archive {}
.widget_archive ul {}
.widget_archive ul li {}
.widget_archive ul li a {}
.widget_archive select {}
.widget_archive option {}

.widget_pages {}
.widget_pages ul {}
.widget_pages ul li {}
.widget_pages ul li a {}

.widget_links {}
.widget_links li:after {}
.widget_links li:before {}
.widget_tag_cloud {}
.widget_tag_cloud a {}
.widget_tag_cloud a:after {}
.widget_tag_cloud a:before {}

.widget_calendar {}
#calendar_wrap {}
#calendar_wrap th {}
#calendar_wrap td {}
#wp-calendar tr td {}
#wp-calendar caption {}
#wp-calendar a {}
#wp-calendar #today {}
#wp-calendar #prev {}
#wp-calendar #next {}
#wp-calendar #next a {}
#wp-calendar #prev a {}

.widget_categories {}
.widget_categories ul {}
.widget_categories ul li {}
.widget_categories ul ul.children {}
.widget_categories a {}
.widget_categories select{}
.widget_categories select#cat {}
.widget_categories select.postform {}
.widget_categories option {}
.widget_categories .level-0 {}
.widget_categories .level-1 {}
.widget_categories .level-2 {}
.widget_categories .level-3 {}

.recentcomments {}
#recentcomments {}
#recentcomments li {}
#recentcomments li a {}
.widget_recent_comments {}

.widget_recent_entries {}
.widget_recent_entries ul {}
.widget_recent_entries ul li {}
.widget_recent_entries ul li a {}

.textwidget {}
.widget_text {}
.textwidget p {}

Al aplicar estilos a los widges es probable que siempre necesites las mismas clases. Es por ello que es buena idea combinar clases en tu hoja de estilos usando comas. Por ejemplo, puedes combinar .widget_pages ul y .widget_archive ul haciendo algo así:

.widget_pages ul, .widget_archive ul {}

Estilos por defecto del formulario de comentarios

Una de las partes normalmente más feas en cualquier tema WordPress es el formulario de comentarios. Si quieres algo realmente chulo mejor que lo modifiques. Estas son las clases que encontrarás habitualmente en WordPress:

.commentlist .reply {}
.commentlist .reply a {}

.commentlist .alt {}
.commentlist .odd {}
.commentlist .even {}
.commentlist .thread-alt {}
.commentlist .thread-odd {}
.commentlist .thread-even {}
.commentlist li ul.children .alt {}
.commentlist li ul.children .odd {}
.commentlist li ul.children .even {}

.commentlist .vcard {}
.commentlist .vcard cite.fn {}
.commentlist .vcard span.says {}
.commentlist .vcard img.photo {}
.commentlist .vcard img.avatar {}
.commentlist .vcard cite.fn a.url {}

.commentlist .comment-meta {}
.commentlist .comment-meta a {}
.commentlist .commentmetadata {}
.commentlist .commentmetadata a {}

.commentlist .parent {}
.commentlist .comment {}
.commentlist .children {}
.commentlist .pingback {}
.commentlist .bypostauthor {}
.commentlist .comment-author {}
.commentlist .comment-author-admin {}

.commentlist {}
.commentlist li {}
.commentlist li p {}
.commentlist li ul {}
.commentlist li ul.children li {}
.commentlist li ul.children li.alt {}
.commentlist li ul.children li.byuser {}
.commentlist li ul.children li.comment {}
.commentlist li ul.children li.depth-{id} {}
.commentlist li ul.children li.bypostauthor {}
.commentlist li ul.children li.comment-author-admin {}

#cancel-comment-reply {}
#cancel-comment-reply a {}

Bueno, creo que esta lista es genial para empezar a perderle el miedo a programar, CSS en este caso. ¡Que lo pases bien!, y acuérdate de hacer las pruebas siempre en un WordPress destinado a tal efecto, no enredes en tu tema activo.

Este maravilloso resumen lo publicaron en WP beginner

Bueno, pues ya está aquí la versión final del plugin de creación de foros automáticos para WordPress: bbPress 2.0. Si aún no has probado como incorporar un foro en un par de clics en tu web este es el momento.

Instalarlo es tan fácil como cualquier otro plugin: lo instalas, lo activas, creas unos cuantos foros y empiezas a usarlo. Lo único que es posible que tengas que retocar sea tu tema activo, sobre todo CSS, para que se adapte al mismo, pero igual hasta tienes suerte en este aspecto porque se adapta bastante bien a muchos temas actuales.

Otra cosa es importar desde un foro bbPress previo, algo que en mis pruebas aún da algunos fallos, sobre todo si ya tenías mucha actividad, pero lo sigo intentando y ya te avisaré cuando termine los experimentos. Por supuesto, si tienes experiencia en este aspecto coméntalo.

Ea, nada más, a probarlo se ha dicho, olvídate de configuraciones imposibles, de administración engorrosa e instalaciones tediosas como en otros sistemas de foros, ¡esto es WordPresss!

Contenido exclusivo para suscriptores al Feed

¡Gracias por seguirnos a diario!. Premiamos tu fidelidad ofreciéndote habitualmente contenidos exclusivos. Hoy puedes descargar:

Guía Domina tu Blog

Si recuerdas a Nekko, que ya ha publicado varias entradas en Ayuda WordPress, sabrás que es alguien a quien seguir, que le gusta compartir conocimientos.

Pues bien, ahora está elaborando un taller de creación de temas WordPress en su blog, del que va por la tercera sesión. Y como es de vital importancia la participación para la elaboración de los siguientes temarios os animo a aprender con lo ya publicado y participar para que al final se cree un estupendo tutorial.

El temario es el siguiente:

Clase 1: Introducción: Instalar WordPress en un servidor local
XAMPP
Generar una base de datos desde PhpMyAdmin
Contenido de pruebas para la plataforma

Clase 2: Cómo encarar el diseño a partir de un archivo PSD
Presentamos nuestra plantilla.
Introducción a las partes de un theme.

Clase 3: ¡Comenzamos a maquetar!
Comenzamos a maquetar el index.php
Funciones básicas de header.php
El archivo de estilos CSS

Clase 4: El bucle. ¿Qué es? ¿Cómo y dónde se usa?

Clase 5: Jerarquía de templates.

Clase 6: Header.php. Funciones, composición, barra de navegación.

Clase 7: Sidebar.php. Composición, elaborar una sección de Widgets.

Clase 8: Footer.php. Funciones, composición y widgets.

Clase 9: Single.php y Page.php.

Clase 10: Page template con una segunda sidebar.

Clase 11: archive.php y plantillas por categoría, fecha, autor, taxonomía, etiqueta.

Clase 12: Páginas personalizadas: Consultas personalizadas.

Clase 13: Página de búsquedas: search.php e integración con Google CSE

Clase 14: Insertar anuncios

Clase 15: Páginas de error personalizadas

Clase 16: Implementar un slider para el inicio: Nivo-slider sin plugins.

Clase 17: Paginación y breadcrumbs.

Clase 18: Comentarios.

Clase 19: Plantilla para una sección de portafolio.

¡Genial, no te lo pierdas!

Actualizado 17-9-2011

El viernes que viene inauguraremos en Blogpocket la sección “La semana en imágenes” que será un resumen gráfico de los más significativo que hemos publicado en los últimos 7 días.

Hoy, dedico esta entrada a explicar cómo lo he implementado.

Para poder mostrar un listado de imágenes (una por cada post), evidentemente lo primero que hay que tener en cuenta es que cada entrada debe llevar asociada una. Para ello, utilizaremos las imágenes en miniatura (thumbnails) que, desde la versión 2.9, es capaz de gestionar WordPress.

Si tienes una instalación “multisite” no te debes preocupar porque tienes la función incluida en el editor de posts (un widget en la columna lateral con el que puedes añadir una “Featured image” o “imagen destacada”). Sin embargo, en una instalación normal tienes que añadir la siguiente instrucción en el archivo functions.php para activarla:

add_theme_support( ‘post-thumbnails’ );

Una vez que tenemos definida una imagen en miniatura (mediante el widget “featured image” del editor de posts) solo hay que saber extraerla con el correspondiente código PHP. En el blog Aurea encontrarás una buena explicación acerca de cómo programarlo: Thumbnail en WordPress; Mostrar 5 últimos posts con thumbnails.

Yo he utilizado el plugin Category Thumbnail List para no tener que gastar ninguna neurona. Para mostrar la tabla con las imágenes solo hay que añadir el shortcode siguiente, en cualquier lugar del post:

[categorythumbnaillist September, 10 2011]

Siendo “September, 10 2011″ la fecha a partir de la cual queremos mostrar posts. El plugin originalmente lleva el número ID correspondiente a la categoría de los posts que se quieren mostrar, en lugar de esa fecha. Ese identificativo se obtiene en la página de categorías poniendo el cursor encima de la categoría concreta que se va a utilizar. Esto quiere decir, además, que cuando edites una entrada, cuyo thumbnail va a salir en la galería, tienes que asignarle la categoría con ID “n”. Acuérdate también de poner el nombre del post como título de la imagen, ya que el plugin utiliza el nombre de la imagen para mostrar como descripción cuando se sitúa el cursor encima de ella.

Para configurar el tamaño de las imágenes en miniatura, el plugin añade una página de opciones en la columna de “Settings” del escritorio (yo he escogido 170×170), pero hay que asegurarse de elegir el tamaño miniatura al definir la “featured image“.

WordPress posee una opción de “Media” (galería de elementos multimedia) con la que, una vez definida la “featured image” para cada post, siempre puedes modificar sus características a posteriori (nombre, tamaño, etc.).

El plugin Category Thumbnail List tiene una hoja de estilos CSS con la que puedes adornar la lista totalmente a tu gusto.

Por último, el plugin muestra, debajo de cada imagen, el título del post. Si te parece mejor que la imagen aparezca sola, hay que quitar la siguiente instrucción:

$output .= ‘<a href=”‘ .$link . ‘” title=”‘ .$title . ‘”>’ .$title . ‘</a><br/>’;

Y para mostrar las imágenes que tengan la categoría “n”, hay que cambiar la instrucción:

$myposts = get_posts(‘numberposts=-1&&category=’.$listCatId[1].’&&orderby=’.$categoryThumbnailList_OrderType.’&&order=’.$categoryThumbnailList_Order);

por:

$myposts = get_posts(‘numberposts=-1&&category=n&&orderby=’.$categoryThumbnailList_OrderType.’&&order=’.$categoryThumbnailList_Order);

Si se quieren visualizar solo 9 imágenes, por ejemplo, hay que hacer que el bucle solo se ejecute 9 veces. Para ello, se utiliza la variable $i.

Nótese que para que las imágenes se muestren según el parámetro de fecha del shortcode hay que comparar la fecha del post con la fecha en la que se muestran las imágenes. La del parámetro del shortcode se calcula con la instrucción:

$fecha_lim = $listCatId[1];

Y solo se muestran imágenes si se cumple la condición

($fecha <= $fecha_lim) and ($i<10)

Es decir, cuando la fecha del post es menor que la que lleva el shortcode y todavía no se han visualizado 9 imágenes. La fecha del post es $fecha y se obtiene extrayéndola del post con la sentencia.

$fecha = get_the_date();

Si actualizas alguna vez este plugin, acuérdate de volver a realizar estas dos modificaciones y los posibles cambios en el CSS.

A continuación, puedes descargar el plugin modificado: download.

Un modo de acelerar WordPress es comprimir, mediante gzip, todo el contenido que tu sitio sirve a los navegadores de los usuarios que lo visitan.

Esto reducirá los tiempos de carga de tu web ya que la mayoría del HTML se comprime de maravilla.

Para conseguirlo solo tienes que añadir lo siguiente al fichero .htaccess:

¡A correr!