subwaydesign diseño web - Expertos en wordpress

WordPress: mostrar noticias con diferentes formatos en la portada

Con tan solo unas pequeñas modificaciones a los archivos de nuestros templates, podemos hacer grandes diferencias en la parte visual de nuestra web, lo que no sólo se traduce en una mejor estética, si no que también afecta a la usabilidad de nuestro sitio.

En WordPress, los templates utilizan el archivo index.php para mostrar las noticias en el home de la forma en que ahí se definen.
Además de poder modificar las queries que se producen en el home (consultas a la base de datos que traen como resultados las noticias pedidas), está la posiblidad de trabajar diferentes formatos para las novedades a medida que se van mostrando.

Un ejemplo se encuentra en el inicio de nuestro sitio. Allí las primeras noticias ocupan el 100% del ancho disponible, mientras que un grupo más abajo se divide en 2 columnas las más antiguas.

Para obtener este efecto, utilizamos una variable que se irá incrementando con cada noticia mostrada. Luego, podemos definiar rangos basados en esos valores.

Comenzamos buscando este famoso código en el archivo que queramos modificar (ya que esta técnica puede usarse para el index.php, o archivos más específicos como category.php, searchresults.php, etc)

if ( have_posts() ) :
while (have_posts()) : the_post();

Arriba de esas líneas añadimos una variable con el nombre que querramos, que será la que cuente los posts. Nos quedará algo así.

$NumeroNoticia = 0;
if ( have_posts() ) :
while (have_posts()) : the_post();

A continuación comenzamos a trabajar con las noticias recibidas en el loop.
Tomamos el valor de la variable y vamos mostrando de acuerdo a ese número. Por ejemplo, podemos mostrar los primeros 4 artículos con un título grande como < h2 > y el texto principal (hasta donde se encuentre la etiqueta < !-- more -- > si es que existe)

if ($NumeroNoticia<4) {
	// título de la noticia
	echo '<h2><a href="'.the_permalink().'">'.the_title().'</a></h2>';
	// texto principal
	the_content('Ampliar informaci&oacute;n');
	// insertar un separador
	echo '<div class="separador"></div>';
	// aumentar el valor de la variable en 1
	$NumeroNoticia++;
}

A continuación, mostramos el resto de las noticias con el título definido como < h3 > y sin el texto principal (esto es sólo un ejemplo, es conveniente siempre mostrar aunque sea el extracto de la noticia)

else {
	// título de la noticia
	echo '<h2><a href="'.the_permalink().'">'.the_title().'</a></h2>';
	// insertar un separador
	echo '<div class="separador"></div>';
	// aumentar el valor de la variable en 1
	$NumeroNoticia++;
}

De esa forma ya estamos mostrando las últimas 6 noticias con un formato distinto. También podríamos usar condicionales dobles entre los códigos anteriores si quisiéramos tener 3 tipos de formatos.

if ($NumeroNoticia<8 && $NumeroNoticia>4) {
	// aquí va el formato
}

Y luego aplicaríamos un if ($NumeroNoticia>8) { } para mostrar las siguientes.
Este ejemplo está pensado para el estándar de 10 noticias en el frente, pero pueden alterarse los números de acuerdo a como se seleccionó la opcion correspondiente en Lectura -> Mostrar páginas del Blog como máximo.

Para completar el ejemplo, el css del separador podría ser algo como

.separador {
	clear:both;
	border-bottom:1px dotte #ccc;
	margin:2em 0;
	height:1px;
}

En el próximo tutorial voy a publicar el método para trabajar con dos columnas a partir de un número determinado de posts.

¡Espero que les sirva el tutorial!

Comentarios: