aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Hace unos días en el foro, GUAGUAU preguntaba como podíamos hacer que el primer post (el más reciente) quedara resaltado frente a los demás, como ya me lo han preguntado otras veces he pensado hacer un míni tutorial para tenerlo aqui guardado y accesible a todos. Quizas sería interesante que primero tuvieramos unas nociones básicas de como funciona un theme de Wordpress.

El código

Para el ejemplo he usado el theme Kubrick, que es el theme por defecto que Wordpress integra, está en la carpeta wp-content/themes/default/.

Primero hemos de encontrar el punto en el que insertar la marca que nos permita diferenciar un post del resto, para ello vamos a usar un sistema de dos lenguajes, PHP y CSS. Con PHP incorporaremos la funcionalidad necesaria para añadir una clase al post marcado y desde el CSS le daremos es aspecto que deseemos para diferenciarlo. Empezemos

1) Encontrar el punto en el que se pinta el post.

Generalmente los themes de Wordpress, disponen de un fichero index.php en el que se declara el Loop que se encarga de pintar los posts que componen a la petición realizada. Es aqui donde encontraremos la estructura de un post y donde meteremos mano al código para modificar el primer post.

<div class="post" id="post-<?php the_ID(); ?>">

Como podemos ver, la línea anterior nos dice que en este punto comienza el post, con id="post-X" (siendo X el ID de la noticia), y como class indicamos que se trata del típo post, que en nuestro CSS estará definido para otorgarle es aspecto que vemos en el blog. Ahora tenemos que conocer cual es el primero.

Para ello debemos encontrar el punto en el que se empiezan a repetir los posts.

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

Una vez encontrado el comienzo del Loop, empezamos a modificar nuestro código.

2) Añadir un contador de posts

Para añadir un contador, primero debemos definir una variable que, inicializada a 0, se incrementará con el paso de los posts.

<?php
   $contador = 0; 
	if ( have_posts() ) : while ( have_posts() ) : the_post();
	++$contador; //Incrementamos en 1 por cada post
?>

3) Controlamos el primer post

Disponiendo del contado únicamente tendremos que controla que cuando este sea 1, aplique la nueva class al contenedor del post.

<?php
	$contador = 0;
	if ( have_posts() ) : while ( have_posts() ) : the_post();
	$contador; //Incrementamos en 1 por cada post
	if ($contador == 1) $claseResaltado = ” resaltado”; //Dejamos un espacio delante de la palabra

	<div class=”post<?=$claseResaltado?>” id=”post-<?php the_ID(); ?>”>
?>

4) Versión más compacta

Una versión más compacta podría ser algo así.

<?php
	$contador = 0;
	if ( have_posts() ) : while ( have_posts() ) : the_post();

	<div class="post<?=((++$contador == 1)?” resaltado”:”")?>” id=”post-<?php the_ID(); ?>”>
?>

5) Un poco de estilo

Ahora que ya tenemos marcado el post, únicamente tendremos que aplicarle el estilo necesario en nuestro style.css.

.resaltado {
	background-color:#D1E2EF;
	padding:1em;
	margin:1em 0;
	-moz-border-radius: .8em; //Solo Firefox
}

.resaltado h2 {
	margin:0;
}

6) Bonus: Formato CSS exclusivo

Cuando decidí hacer el post, pensé en usar un sistema en el que implicara una modificación en el theme por que debido a la variedad de themes y formatos es imposible crear una forma estandarizada para hacerlo, así que indicando el post que se ha resaltar con una clase desde PHP conseguimos aligerar el problema, además de asegurarnos compatibilidad con los navegadores.

Podríamos hacer uso de selectores CSS para conseguir un efecto similiar. Pese a que el selector :first-child no está soportado por Internet Explorer 6, una solución sin tener que editar el fichero .php sería esta.

Esta solución no es compatible con Internet Explorer 6.0.

#content .post:first-child {
	background-color:#D1E2EF;
	padding:1em;
	margin:1em 0;
	-moz-border-radius: .8em; //Solo Firefox
}

#content .post:first-child h2 {
	margin:0;
}

En el código anterior, aplicamos el estilo al primer hijo con class="post" que se haye dentro del elemento padre con id="content". Consiguiendo el mismo efecto que el descrito anteriormente en los navegadores más modernos.

7) Bonus: Versión sin contador

Alex me da una ida para una versión más compacta aún.

<?php
	$resaltado = ‘ resaltado’;
	if ( have_posts() ) : while ( have_posts() ) : the_post();

	<div class=”post<?=$resaltado;$resaltado = null;?>” id=”post-<?php the_ID(); ?>”>
?>

Compártelo