Lo que vas a crear

En el tutorial anterior, le mostré cómo aplicar estilo a las publicaciones en la página principal de su blog según su categoría, creando códigos de colores por categoría..

Muchos de los sitios que utilizan esta técnica también lo llevan más lejos al agregar un estilo diferente a cada sección de su sitio, de manera que se coordinen con el estilo en la página principal del blog o en la página principal. Solo puede usar un esquema de color simple o agregar un estilo completamente diferente a cada sección, tal vez con un logotipo o marca diferente para diferentes partes de su organización, o incluso un diseño diferente.

Un ejemplo es el sitio web del London Times, que utiliza un color diferente para cada sección de su sitio. La página principal utiliza estos colores en un banner encima de cada publicación, como se muestra en la captura de pantalla:

Y a medida que navega por el sitio, cada sección tiene su propio color:

En este tutorial trabajaremos con el estilo agregado a la página de inicio en el tutorial anterior y agregaremos un estilo similar a cada archivo de categorías. Modificaremos el color de los títulos de los post y el título del archivo en sí..

Lo que necesitarás

Para seguir este tutorial, necesitarás:

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

Si ya tienes un tema sobre el que deseas utilizar esta técnica, estarás trabajando en la hoja de estilos de tu tema. Voy a crear un tema infantil del tema Twenty Fifteen y editaré la hoja de estilos en mi tema infantil.

Su sitio probablemente ya estará poblado con publicaciones; para que mi sitio tenga algunas publicaciones, voy a descargar los datos de prueba del tema de WordPress.

Si ya ha estado siguiendo el tutorial anterior y también está agregando estilos basados ​​en categorías a la página principal de su blog, puede usar el tema de ese tutorial como punto de partida; esto es lo que haré. Alternativamente, puedes trabajar con tu tema existente o crear un tema nuevo de Twenty Fifteen.

Creando el tema

Si está trabajando con su propio tema o el del tutorial anterior, puede omitir esta sección, pero esto es lo que debe hacer para crear un tema secundario de Twenty Fifteen.

En su sitio wp-contenido / temas carpeta, crea una nueva carpeta y dale un nombre. Estoy llamando al mio tutsplus-style-posts-by-category.

Dentro de esa carpeta, crea un archivo CSS vacío llamado style.css y añádele lo siguiente:

/ * Nombre del tema: Tuts + Estilo Publicaciones por categoría Tema URI: http://code.tutsplus.com/tutorials/style-posts-by-category-on-your-main-blog-page--cms-23684 Descripción: Theme para apoyar tuts + tutorial sobre el estilo de publicaciones por categoría. Tema infantil para el tema Twenty Fifteen. Autor: Rachel McCollin Autor URI: http://rachelmccollin.co.uk/ Plantilla: veinte y catorce Versión: 1.0 * / @import url ("... /twentyfifteen/style.css");

Esto le dice a WordPress todo lo que necesita saber para crear un tema secundario e importa la hoja de estilos de Twenty Fifteen. Probablemente querrá agregar su propio nombre y detalles en lugar del mío, pero esto le da una idea.

Ahora activa tu tema.

Importando los datos

Si su sitio ya tiene publicaciones, puede omitir esta sección, pero aquí le explicamos cómo importar los datos de prueba de la unidad temática a su sitio..

1. Vaya a la página Prueba de unidad temática y descargue el xml archivo que está vinculado a.
2. En su sitio, vaya a Herramientas> Importar. Haga clic en el WordPress enlazar.
3. Haga clic en el Elija el archivo y selecciona el archivo que acabas de descargar. Haga clic en el Subir archivo e importar botón.
4. Siga las indicaciones y espere a que WordPress importe los datos..

Identificando estilos para apuntar

WordPress tiene un par de etiquetas de plantilla que generan clases para sus páginas y publicaciones cuando se visualizan en el navegador. Estos son:

• body_class (), que añades a la cuerpo etiqueta en un tema header.php archivo: agrega clases a la cuerpo Elemento según el tipo de página que se visualiza..
• post_class (), que funciona de manera similar pero se usa con publicaciones en el bucle.

Si está trabajando con su propio tema y aún no ha agregado estas etiquetas de plantilla, deberá hacerlo. Este tutorial sobre cómo trabajar con clases e identificaciones generadas por WordPress le muestra cómo.

Si está trabajando con un hijo del tema Twenty Fifteen, estas etiquetas ya se habrán agregado al tema Twenty Fifteen, por lo que no necesita hacer nada..

Si abre una de las páginas de categoría de su sitio en un navegador y usa herramientas de desarrollador para inspeccionar el resultado HTML, verá que body_class () etiqueta de plantilla ha añadido un montón de clases a tu página.

Aquí el cuerpo La etiqueta tiene clases que nos dicen qué tipo de página es:

Estas clases nos dicen que estamos en una página de archivo de categorías para la categoría de marcado, entre otras cosas. La clase a la que vamos a apuntar es la categoría de marcado clase.

Diseño de títulos de post en la lista de archivos

Comenzaremos agregando un color a los títulos de las publicaciones según su categoría. En la hoja de estilo de tu tema, agrega esto:

/ * publica títulos en las páginas del archivo * / .archive.category-markup .entry-title a: link, .blog .category-markup .entry-title a: visited color: # 6cd2c8;  .archive.category-markup .entry-title a: hover, .blog .category-markup .entry-title a: active color: # 120e5b;  .archive.category-template-2 .entry-title a: link, .archive.category-template-2 .entry-title a: visited color: # e5572f;  .archive.category-template-2 .entry-title a: hover, .archive.category-template-2 .entry-title a: active color: # 120e5b;  .archive.category-media-2 .entry-title a: link, .archive.category-media-2 .entry-title a: visitó color: # 933bbe;  .archive.category-media-2 .entry-title a: hover, .archive.category-media-2 .entry-title a: active color: # 120e5b; 

Es posible que desee cambiar los colores para que funcionen con su diseño..

Ahora guarde su hoja de estilo y abra una página de categorías en su navegador. Mi página de categoría de marcas ahora tiene títulos de publicaciones en color:

Y mi archivo de medios tiene títulos de post de un color diferente:

Tenga en cuenta que en las capturas de pantalla, hay una publicación que aparece en ambos archivos, porque está en muchas categorías. Es por esto que es importante apuntar a la clase para la categoría en la etiqueta del cuerpo de su página de archivo, y no solo a las clases de categoría para las publicaciones en el bucle.

Ahora vamos a agregar un borde también. Agregue esto a su hoja de estilo:

.archive.category-markup .entry-title padding-top: 0.5em; borde superior: 2px # 6cd2c8 sólido;  .archive.category-template-2 .entry-title padding-top: 0.5em; borde superior: 2px # e5572f sólido;  .archive.category-media-2 .entry-title padding-top: 0.5em; borde superior: 2px # 933bbe sólido; 

Esto agrega un poco de relleno sobre los títulos de las publicaciones, así como un borde en el mismo color que el texto. Así es como se ve en mi página de archivo de plantillas:

Estilo del título del archivo

Además de diseñar las listas de publicaciones individuales, quiero agregar mi color al título del archivo..

Primero identificaré los elementos y las clases a las que apuntar, usando herramientas de desarrollo:

El título del archivo se imprime de la siguiente manera:

 
Categoría: Plantilla
 
 
Publicaciones con pruebas relacionadas con plantillas
 
 

Así que tendremos que apuntar al encabezado de página y Título de la página clases, así como las clases en el cuerpo etiqueta para el archivo.

En su hoja de estilo, agregue lo siguiente:

.archive.category-markup .page-header .page-title color: # 6cd2c8;  .archive.category-template-2 .page-header .page-title color: # e5572f;  .archive.category-media-2 .page-header .page-title color: # 933bbe; 

Esto agrega el color al título del archivo:

Ahora vamos a cambiar el color del borde para que coincida. Agregue esto a su hoja de estilo:

.archive.category-markup .page-header border-left: 7px solid # 6cd2c8;  .archive.category-template-2 .page-header border-left: 7px solid # e5572f;  .archive.category-media-2 .page-header border-left: 7px solid # 933bbe; 

Esto cambia el color del borde para que coincida:

Resumen

Usar las clases generadas por WordPress para apuntar a las páginas de archivo de la categoría y diseñarlas implica identificar las clases de salida y luego escribir CSS para apuntar.

En este tutorial, ha aprendido cómo hacer esto para crear secciones codificadas por colores de su sitio por categoría.

Podrías llevar esto más lejos, por ejemplo:

• Usar los colores de la sección para otros elementos de la página, como el título del sitio y el menú de navegación.
• agregar fondos en la sección de colores, por ejemplo en el pie de página
• Usando diferentes imágenes de fondo para cada sección en lugares clave.
• Cambiando el diseño para diferentes secciones del sitio.
  

Hay muchas posibilidades, y si lleva esta técnica al límite máximo, puede crear diferentes secciones de su sitio que se vean completamente diferentes entre sí, dando la impresión de tener sitios completamente separados..