En WordPress hay dos etiquetas de WordPress que añaden automáticamente clases CSS de forma condicional. En este tutorial veremos cómo personalizar el diseño de nuestro sitio con estas clases CSS. Podemos utilizarlas para dar un aspecto distinto a algún elemento de la página de inicio, de alguna o todas las categorías, a un artículo concreto, etc.
En este tutorial vamos a centrarnos en los Custom Post Types (CPT) o tipos de entradas personalizadas, digamos que tienes un sitio donde has creado tres tipos de entradas personalizadas llamados «pelicula», «serie» y «libro» y quieres darle un diseño distinto a cada una.
DEMO: Puedes ver un ejemplo de esto en la home de elFinalde.com, los iconos son distintos según se trate de una película, serie o libro.
Clase CSS según la página
Con body_class se añadirá la clase CSS según la página que se sirva, si estamos en la página de una película se añadirá la clase single-{posttype}, en nuestro caso single-pelicula, en la de una serie será serie-tv y en la de libro single-libro
En nuestro tema aparecerá así
<body <?php body_class(); ?>>
Clase CSS en el loop según la entrada
En el loop podemos utilizar post_class que añadirá en forma de clase CSS todas las taxonomías predeterminadas y personalizadas asociadas con cada entrada devuelta, es decir todas sus etiquetas, categorías y todas las que les hayas creado.
<?php post_class(); ?>
De esta forma en un mismo loop donde se muestran diversos Custom Post Types podemos diferenciarlos mediante CSS porque el de la película tendrá la clase type-pelicula, una serie type-serie y un libro type-libro.
Así podemos por ejemplo añadir una imagen o icono distinto según sea una película, serie o libro con un simple CSS.
En este caso uso la técnica de Sprite Image
.type-libro .caption:before {
background-position: 100px 0;
}
El problema es que si tenemos muchas etiquetas por ejemplo, podemos encontrarnos con un HTML muy pesado con muchas clases CSS que no nos van a servir para nada. Además lo normal es que a los Custom Post Types les creemos también taxonomías personalizadas.
En el caso de elFinalde.com cada película por ejemplo tendrá una clase CSS por cada actor puesto que tiene una taxonomía de actores, otra para los personajes, guionistas, etc.
Para solucionar esto puedes crear una función que sustituya a post_class en tu archivo functions.php.
Con un condicional imprimimos el nombre de la clase que queramos según sea un tipo u otro de entrada personalizada.
function elfinalde_class_CPT () {
if ( 'serie' == get_post_type() ) {
echo "type-serie";
} elseif ( 'libro' == get_post_type() ) {
echo "type-libro";
} elseif ( 'pelicula' == get_post_type() ) {
echo "type-pelicula";
}
}
Espero que os sea útil, si tenéis cualquier duda podéis dejarla en los comentarios.
Deja una respuesta