Aplicar Estilos Diferentes Según Categoría en la Página Principal de Tu Blog

Los grandes sitios basados en la difusión de noticias usan en ocasiones algún tipo de estilo que acentúe las distintas secciones que lo componen. A menudo lo hacen aplicando diferentes colores a cada sección.

Un buen ejemplo es la web del London Times, que utiliza un color diferente para cada sección del sitio. La página principal usa estos colores en un baner sobre cada artículo, como muestra la siguiente captura de pantalla:

Y si continúas navegando más en el sitio, comprobarás que cada sección tiene su propio color:

Emplear estilo para las secciones de tu sitio de este modo podría añadir atractivo a tu página de inicio y ayudar a los usuarios a encontrar contenidos en las categorías que leen con regularidad. En este tutorial te mostraré cómo localizar los estilos proporcionados por WordPress para hacer justamente esto, aplicar estilo a los posts de la página principal de tu blog según su categoría.

Lo Que Necesitarás

Para seguir este tutorial, necesitarás lo siguiente:

• una instalación de desarrollo de WordPress
• un editor de código

Si ya tienes un tema en el que desees usar esta técnica, trabajarás con la hoja de estilo de dicho tema. Voy a crear un tema hijo para el tema Twenty Fifteen y a editar la hoja de estilos de mi tema hijo.

Tu sitio probablemente ya estará repleto de entradas; para que mi sitio disponga de algunos artículos voy a descargar los datos de prueba para el tema de WordPress.

Crear el Tema

Si estás trabajando con tu propio tema, podrías omitir esta parte, pero, dónde está lo que necesitas hacer para crear un tema hijo a partir del Twenty Fifteen.

En la carpeta de wp-content/themes de tu sitio, crea una nueva carpeta y asígnale un nombre. Yo he llamado al mío tutsplus-style-posts-by-category.

Dentro de esa carpeta, crea un archivo CSS vacío denominado style.css y agrega lo siguiente en él:

1

/*

2

Theme Name:     Tuts+ Style Posts by Category

3

Theme URI:      http://code.tutsplus.com/tutorials/style-posts-by-category-on-your-main-blog-page--cms-23684

4

Description:    Theme to support tuts+ tutorial on styling posts by category. Child theme for the Twenty Fifteen theme.

5

Author:         Rachel McCollin

6

Author URI:     http://rachelmccollin.co.uk/

7

Template:       twentyfifteen

8

Version:        1.0

9

*/

10

11

@import url("../twentyfifteen/style.css");

Esto le indica a WordPress todo lo necesita saber para crear un tema hijo e importar la hoja de estilos de Twenty Fifteen. Probablemente querrás añadir tus propios nombres y detalles en lugar de los míos, pero esto te dará una idea.

Ahora activa tu tema.

Importar los Datos

Si tu sitio tiene ya entradas puedes omitir esta parte, aquí te explico cómo importar los datos de muestra proporcionados por theme unit en tu sitio.

1. Dirígete a la página de Theme Unit Test y descarga el archivo xml al que está vinculado.
2. En tu sitio, ves a Herramientas > Importar. Haz clic en el enlace WordPress.
3. Haz clic en el botón Elegir archivo y selecciona el archivo que acabas de descargar. Haz clic en el botón Subir Archivo e Importar.
4. Sigue las instrucciones y espera a que WordPress importe los datos.

Identificar los Estilos de Destino

WordPress tiene un par de etiquetas de plantilla que se encargan de crear las clases para tus páginas y entradas para cuando se vean en el navegador. Estos son:

• body_class(), que se agrega a la etiqueta body en el archivo header.php del tema: añade las clases para el elemento body según el tipo de página que se esté visualizando.
• post_class(), que funciona de manera similar pero se usa para los posts en el loop.

Si estás trabajando en tu propio tema y todavía no has añadido estas etiquetas de plantilla, deberías hacerlo. Este tutorial sobre el trabajo con las clases e IDs generados por WordPress te muestra cómo hacerlo.

Si está trabajando con un tema hijo creado a partir de Twenty Fifteen, estas etiquetas habrán sido añadidas al propio tema Twenty Fifteen, por lo que no será necesario hacer nada más.

Si abres la página de inicio de tu web en un navegador y utilizas las herramientas de desarrollo para inspeccionar la salida HTML, verás que estas etiquetas han añadido un montón de clases a tu página.

Esto es lo que obtengo cuando veo la página de inicio de mi sitio:

La etiqueta body se muestra como:

1

<body class="home blog logged-in admin-bar  customize-support">

Las clases home y blog me indican que ésta es la página de inicio del sitio y que es, además, la página principal del blog. Puedo utilizar estas clases como destino para el CSS de mi página de inicio.

Algo similar sucede con las entradas:

El artículo que he seleccionado está etiquetado como:

1

<article id="post-1176" class="post-1176 post type-post status-publish format-standard hentry category-markup tag-alignment-2 tag-content-2 tag-css tag-markup-2">

¡Son un montón de clases! Estos nos dicen algunas cosas sobre el post: su ID, tipo de post, estado, formato, etiquetas y categoría. Puedes utilizar todos estos al aplicar los estilos. Lo que vamos a utilizar aquí es la clase categoría-markup.

Aplicar Estilo a las Entradas

Ahora que he identificado que clases tengo que usar, es el momento de aplicar algún estilo. Voy a ser sutiles y sólo cambiaremos el color del texto correspondiente al título de cada post, que está dentro de un enlace en una etiqueta <h2 class="entry-title"></h2>.

Abre la hoja de estilo de tu tema y agrega lo siguiente:

1

.blog .category-markup .entry-title a:link,

2

.blog .category-markup .entry-title a:visited {

3

    color: #6cd2c8;

4

}

5

.blog .category-markup .entry-title a:hover,

6

.blog .category-markup .entry-title a:active {

7

  color: #120e5b;

8

}

He utilizado una sombra cyan para los estados link y visited, y un azul marino para los estados hover y active: puedes cambiar estos colores para ajustarlos a tu diseño.

Ahora guarda tu hoja de estilo y actualiza la página de tu blog. Verás que los posts con la categoría que has modificado, ahora tienen el titular con un color diferente:

Añade ahora algunos colores más al resto de las categorías de tu blog:

1

.blog .category-template-2 .entry-title a:link,

2

.blog .category-template-2 .entry-title a:visited {

3

    color: #e5572f;

4

}

5

.blog .category-template-2 .entry-title a:hover,

6

.blog .category-template-2 .entry-title a:active {

7

	color: #120e5b;

8

}

9

10

.blog .category-media-2 .entry-title a:link,

11

.blog .category-media-2 .entry-title a:visited {

12

	color: #933bbe;

13

}

14

.blog .category-media-2 .entry-title a:hover,

15

.blog .category-media-2 .entry-title a:active {

16

	color: #120e5b;

17

}

De nuevo, ajusta los colores adaptándolos a tu imagen de marca. Ahora tendrás una gama de colores en los títulos de tus post.

Si te apetece puedes añadir bordes, en vez de o además de cambiar el color de los títulos:

1

.blog .category-markup .entry-title {

2

    padding-top: 0.5em;

3

	border-top: 2px #6cd2c8 solid;

4

}

5

.blog .category-template-2 .entry-title {

6

	padding-top: 0.5em;

7

	border-top: 2px #e5572f solid;

8

}

9

.blog .category-media-2 .entry-title {

10

	padding-top: 0.5em;

11

	border-top: 2px #933bbe solid;

12

}

Ahora mis artículos tienen un sutil borde, además un cambio en el color del título del post:

Esto guiará a los visitantes de mi web entre las diferentes categorías sin resultar demasiado chillones.

Resumen

Como WordPress nos da las etiquetas de plantilla body_class() y post_class(), puedes dirigirte a una página específica de tu sitio y después apuntar como objetivo a los artículos de cada categoría para aplicarles estilos diferentes.

En este tutorial has aprendido a identificar que clases usar y a añadir un estilo para cada categoría, de forma que los visitantes dispongan de pistas visuales sobre la estructura de tu sitio.

En el siguiente tutorial te mostraré cómo ampliar esto y utilizar estilos diferenciados para las distintas secciones de tu sitio.