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.
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:
CSS: -
.category-dancing{background: #97c3e1; border: 1px solid #84aac4;}
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:
PHP: -
<?php post_class('class-1 class-2'); ?>
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:
PHP: -
<?php $author = get_the_author_meta('display_name'); ?>
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:
PHP: -
<?php post_class('class-1 class-2 ' . $author); ?>
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:
PHP: -
<div id="post-4564" class="post post-4564 category-48 category-dancing logged-in class-1 class-2 Pedro">
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í:
CSS: -
.Pedro{border: 1px solid #000;}
-
.Luis{border: 1px solid #d88b3d;}
-
.Fernando {border: 1px solid #4781a8;}
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:
PHP: -
<?php
-
$postid = get_the_ID();
-
$total_comment_count = wp_count_comments($postid);
-
$my_comment_count = $total_comment_count->approved;
-
if ($my_comment_count <10) {
-
$my_comment_count = 'nuevo';
-
} elseif ($my_comment_count>= 10 && $my_comment_count <20) {
-
$my_comment_count = 'emergente';
-
} elseif ($my_comment_count>= 20) {
-
$my_comment_count = 'popular';
-
}
-
?>
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:
PHP: -
<?php post_class('class-1 class-2 ' . $my_comment_count); ?>
A continuación creamos las clases siguientes en el fichero style.css:
CSS: -
.nuevo {border: 1px solid #FFFF00;}
-
.emergente {border: 1px dashed #FF9933;}
-
.popular {border: 1px dashed #CC0000;}
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:
PHP: -
<?php $custom_values = get_post_meta($post->ID, 'post-class'); ?>
Asegúrate de pegar el código anterior DENTRO del loop. Ahora añadiremos la variable $custom_values a la función post_class.
PHP: -
<?php post_class('class-1 class-2 ' . $custom_variable); ?>
Una vez hecho esto ya podemos añadir a nuestro archivo style.css una clase como esta:
CSS: -
.aniversario{Tu Estilo va aquí}
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.
PHP: -
<?php if (have_posts()) : ?>
-
<?php $count = 0; ?>
-
<?php while (have_posts()) : the_post(); ?>
-
<?php $count++; ?>
-
<?php if ($count == 1) : ?>
-
Añade aquí tus divs personalizados de entrada para la primera entrada.
-
<?php elseif ($count == 2) : ?>
-
Añade aquí tus divs personalizados de entrada para la segunda entrada
-
<?php elseif ($count == 3) : ?>
-
Añade aquí tus divs personalizados de entrada para la tercera entrada
-
<?php elseif ($count == 4) : ?>
-
Añade aquí tus divs personalizados de entrada para la cuarta entrada
-
<?php else : ?>
-
Añade aquí tus divs personalizados de entrada para el resto de entradas
-
<?php endif; ?>
-
<?php endwhile; ?>
-
<?php endif; ?>
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:
Guía Domina tu Blog
