El Super Loop – Estilos distintos por tipo de entrada

guru wordpress

El otro día me preguntaba un amigo que como podía aprovechar los tipos de post personalizados para aplicar distintos estilos según el tipo de entrada, sin tener muy claro qué método usar, si los custom post types recién aparecidos en WordPress, algún plugin o algo de código.

Estuve buscando algo que le sirviera y le di varias opciones – plugins incluidos – pero entre todo lo que encontré me gustó especialmente una serie de trucos que comparto a continuación. Creo que es una pieza de museo de código para WordPress y lo merece, para convertirse en un auténtico gurú de WordPress.

Cuando abres tu archivo index.php, u otro archivo con un loop, normalmente verás algún div con un post-id, pero lo que vamos a hacer es añadir una nueva variable post_class al mismo como se muestra en este ejemplo:

Añadiendo esta función al div cada una de las entradas obtendrá una clase CSS específica que te permitirá modificar el aspecto de tus entradas en WordPress a través de CSS. Las siguientes clases se añaden por defecto:

  • .post-id
  • .post
  • .attachment
  • .sticky
  • .hentry (hAtom microformat pages)
  • .category-ID
  • .category-name
  • .tag-name

Un ejemplo de salida sería algo así:

Así que si abres tu archivo style.css y añades la clase .category-dancing podras conseguir que las entradas de la categoría dancing tengan un aspecto diferente, por ejemplo:

Esto hará que las entradas de la categoría dancing tengan fondo azul y un borde azul oscuro. Puedes ir más allá añadiendo una clase diferente para los enlaces de la .category-dancing, lo que quieras. Puedes usar la misma técnica para conseguir que las entradas de una etiqueta (tag) específica tengan un aspecto diferente.

Pero para alguien que quiera personalizar profundamente el aspecto de su sitio puede que necesite controles adicionales a la hora de introducir clases. Bien, si quieres puedes especificar las clases de este modo:

Pero ¿como funciona esto en una plataforma dinámica como es WordPress? Veamos algunos ejemplos de como puedes añadir claes y hacer que tus entradas se vean diferentes.

Aplicar estilo a las entradas basándonos en el autor

Seguro que más de una vez ves blogs en los que los comentarios del autor se ven de manera diferente. Pues bien, seguro que en los blogs multi-autor es una buena idea también dar estilos distintos a las entradas según el autor que las cree. Para ello, en este ejemplo, daremos a cada entrada un estilo distinto, basándonos en el nombre del autor. Para ello, en tu fichero index.php (u otros; archive.php, etc) obtendremos el valor del nombre del autor añadiendo este código ANTES del loop:

El código anterior obtiene la variable display_name del perfil de usuario de cada autor, y se le asigna el valor con la variable $author. Una vez hayamos creado una clase dinámica podemos añadirla en nuestro código post_class de este modo:

Nota: No tienes porque seguir la convención class-1 y class-2. eso es solo si quieres añadir clases estáticas. O sea, que puedes mostrar la salida de este modo:

Date cuenta que Pedro se añade en la salida final. El nombre será diferente en cada entrada basada en el display_name de autor. Ahora ya podemos dar estilo a cada clase en tu CSS así:

Una vez hecho esto cada entrada en el loop de estos autores tendrá un estilo diferente. Pudes aplicar la técnica anterior para dar estilo a otros autores de tu sitio.

Aplicar estilo a las entradas basándonos en la popularidad basada en el conteo de comentarios

¿A que también has visto sitios con widgets de entradas populares, la mayoría de las veces basados en el conteo de comentarios. Pues bien, en este ejemplo vamos a ver como aplicar distintos estilos usando el conteo de comentarios. Lo primero que necesitamos es obtener el conteo de comentarios y asociarle una clase. Para obtener el conteo de comentarios tenemos que pegar el siguiente código DENTRO del loop:

En el código anterior hemos añadido clases basándonos en una escala. Si la entrada tiene menos de 10 comentarios se añade la clase “nuevo”. Si la entrada tiene entre 10 y 20 comentarios le añadimos la clase “emergente”, y si la entrada tiene más de 20 comentarios entonces se le añade la clase “popular”. Puedes cambiar esta escala dependiendo del volumen de comentarios de tu sitio.

Así que ahora tu código post_class se parecería a esto:

A continuación creamos las clases siguientes en el fichero style.css:

Fíjate que en este ejemplo solo estamos cambiando el color del borde, pero puedes ir todo lo lejos que quieras, añadiendo imágenes de fondo, cambiando tipografías, lo que quieras.

¿Aún quieres más control sobre las clases CSS? Pues nada, pasemos a un nivel superior aplicando clases CSS mediante campos personalizados.

Aplicar estilo a las entradas basándonos en campos personalizados

Aquí entramos en material de combate de primera calidad, añadiendo clases específicas mediante los campos personalizados. De este modo, por ejemplo, si es el aniversario de tu blog y quieres que la entrada de aniversario sea distinta, puedes crear un campo personalizado y darle el nombre ‘post-class’ y luego añadirle el valor ‘aniversario’. Una vez añadas este campo personalizado y guardes la entrada este valor se almacena en tu base de datos. A partir de este momento podemos reclamarlo desde el loop usando el siguiente código:

Asegúrate de pegar el código anterior DENTRO del loop. Ahora añadiremos la variable $custom_values a la función post_class.

Una vez hecho esto ya podemos añadir a nuestro archivo style.css una clase como esta:

Esto es, de lejos, el mayor control que puedes obtener de la función post_class en lo que se refiere a estilos CSS. Pero, a veces, puedes que quieras incluso más control. Las clases CSS te permiten cambiar el fondo y otros elementos de estilo pero no puedes cambiar toda la estructura de este modo. Así que echemos un vistazo a algo un poquito más avanzado, que podríamos llamar EL SUPER LOOP.

Lo que hemos hecho en el código anterior es crear un loop que te permite aplicar distintos estilos basándonos en el número de entrada en portada, en su orden, algo que hemos aplicado en otras ocasiones, por ejemplo, para mostrar publicidad solo en ciertas entradas de portada.

Esto también es muy útil cuando quieres que las tres primeras entradas se vean distintas del resto. Por ejemplo, tus tres primeras entradas pueden ser entradas a una columna y el resto serán más pequeñas y a dos columnas. Puedes hacer casi todo con el super loop. Puedes añadir tus propias queries y mucho, mucho más. Si eres desarrollador es un buen punto de partida en el que solo tu pones los límites.

Referencias:

AVISO: esta publicación es de hace dos años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado.

Valora este artículo para mejorar la calidad del blog ...

Al hacer una valoración se recoge una cookie con la IP de tu dispositivo

FlojitoNo está malEstá bienMe ha servidoFantástico (2 votos, promedio: 5,00 de 5)
Cargando…

Autor: Fernando Tellado

Fernando Tellado, apasionado de WordPress, profesor, consultor y ponente. Maquero cansino, padre de tres hijos y de una perrita Beagle, Bilbaíno de nacimiento, Español de corazón y ciudadano de donde me quieran. Autor del libro WordPress - La tela de la araña. Mi blog personal es Navegando con red, donde he crecido como escritor en la red y ofrezco mis visiones acerca de la Web 2.0 y la blogosfera.

Comparte esta entrada en
468 ad

Pin It on Pinterest

Share This