Publicaciones de estilo por categoría en tu página principal del blog

Lo que vas a crear

Los grandes sitios basados ​​en noticias a veces usan algún tipo de estilo para diferenciar las secciones de su sitio. A menudo esto toma la forma de diferentes colores para cada sección..

Un buen 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:

Usar el estilo para las secciones de su sitio de esta manera puede hacer que su página de inicio sea más atractiva y ayudar a los visitantes a encontrar contenido en las categorías que leen regularmente. En este tutorial, te mostraré cómo identificar los estilos proporcionados por WordPress para hacer precisamente esto, diseñando las publicaciones en tu página principal del blog por categoría.

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 en 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.

Creando el tema

Si está trabajando con su propio tema, puede omitir esta sección, pero ¿qué 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 la página de inicio de su sitio en un navegador y usa herramientas de desarrollador para inspeccionar el resultado HTML, verá que estas etiquetas han agregado un montón de clases a su página..

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

La etiqueta del cuerpo se muestra como:

los casa y Blog las clases me dicen que esta es la página de inicio del sitio y que es la página principal del blog. Puedo usar estas clases para apuntar a CSS en mi página de inicio.

Algo similar sucede con las publicaciones:

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

¡Eso es un montón de clases! Estos nos dicen algunas cosas acerca de la publicación: su ID, tipo de publicación, estado, formato, categoría y etiquetas. Puede utilizar todos estos para apuntar a su estilo. Lo que vamos a usar aquí es el categoría de marcado clase.

Estilo de los mensajes

Ahora que he identificado las clases a las que debo dirigirme, es hora de agregar un poco de estilo. Lo mantendré sutil y solo cambiaré el color del texto del título de cada publicación, que se encuentra dentro de un enlace en una

etiqueta.

Abra la hoja de estilos de su tema y agregue esto:

.blog .category-markup .entry-title a: link, .blog .category-markup .entry-title a: visitó color: # 6cd2c8;  .blog .category-markup .entry-title a: hover, .blog .category-markup .entry-title a: active color: # 120e5b; 

He usado un tono de cian para el enlazar y visitó estados, y una armada para el flotar y activo Estados: puedes cambiarlos por colores que se ajusten a tu diseño..

Ahora guarda tu hoja de estilo y actualiza la página de tu blog. Verás que las publicaciones con la categoría a la que te diriges ahora tienen un encabezado de color diferente:

Ahora agregue algunos colores más para las otras categorías en su blog:

.blog .category-template-2 .entry-title a: link, .blog .category-template-2 .entry-title a: visitó color: # e5572f;  .blog .category-template-2 .entry-title a: hover, .blog .category-template-2 .entry-title a: active color: # 120e5b;  .blog .category-media-2 .entry-title a: link, .blog .category-media-2 .entry-title a: visitó color: # 933bbe;  .blog .category-media-2 .entry-title a: hover, .blog .category-media-2 .entry-title a: active color: # 120e5b; 

De nuevo, ajusta los colores para que se adapten a tu marca. Ahora tendrás una gama de colores para tus títulos de post..

Si lo desea, puede agregar bordes, ya sea en lugar de o así como cambiar el color de los títulos:

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

Ahora mis publicaciones tienen un borde sutil, así como el cambio de color para el título de la publicación:

Esto guía a los visitantes hacia diferentes categorías en mi sitio sin ser demasiado llamativo..

Resumen

Porque WordPress nos da la body_class () y post_class () etiquetas de plantilla, es posible orientar una página específica en su sitio y luego orientar publicaciones en cada categoría, y personalizarlas de forma diferente.

En este tutorial, aprendió a identificar las clases a las que dirigirse y agregar estilos para cada categoría, para brindar a los visitantes algunas pistas visuales sobre la estructura de su sitio..

En el siguiente tutorial, le mostraré cómo ampliar esto y usarlo para diseñar las diferentes secciones de su sitio de manera diferente..