Spanish (Español) translation by Oscar Abad Folgueira (you can also view the original English article)
En el anterior tutorial te mostré cómo dar estilo a tus entradas en tu página principal de blog de acuerdo a sus categorías, creando código de color por categoría.
Muchos sitios que usan esta técnica también añaden diferente estilo a cada sección de su sitio, de forma que se coordina con el estilo de la página principal del blog o la página de inicio. Puedes usar sólo un sencillo esquema de color o añadir un estilo diferente a cada sección, tal vez con un logo o marca diferente para las diferentes partes de tu organización, o incluso un diseño diferente.
Un ejemplo es la web del London Times, que incluye diferentes colores para cada sección del sitio. La página principal usa estos colores en un banner encima de cada entrada, como se ve en la captura de pantalla.
Y a medida que navegas en el sitio, cada sección tiene su propio color:
En este tutorial vamos a trabajar con el estilo añadido a la página de inicio en el tutorial anterior y añadir etilo similar a cada archivo de categoría. modificaremos el color de los títulos de post y el título del archivo.
Qué Vas a Necesitar
Para seguir este tutorial, necesitarás:
- Una instalación en desarrollo de WordPress
- un editor de código
Si ya tienes un tema y quieres usar esta técnica en el, trabajarás en la hoja de estilo de tu tema. Yo voy a crear un tema hijo del tema Twenty Fifteen y editar la hoja de estilos de mi tema hijo.
Tu sitio probablemente tendrá entradas; mi sitio tiene algunas entradas ya que voy a descargar los datos de prueba de tema de WordPress.
Si has seguido en tutorial anterior y has añadido estilo basado en categoría a la página principal de tu blog, puedes usar el tema de ese tutorial como punto de partida - esto es lo que yo voy a hacer. De manera alternativa puedes trabajar con tu tema o crear un tema hijo de Twenty Fifteen.
Crear el Tema
Si estás trabajando con tu propio tema o uno de tutoriales anteriores puedes saltarte esta sección, pero aquí está lo que necesitas para crear un tema hijo de Twenty Fifteen.
En el directorio wp-content/themes de tu sitio, crea un nuevo directorio y dale un nombre. Yo le he llamado al mío tutsplus-style-posts-by-category.
Dentro de ese directorio crea un fichero CSS vacío llamado style.css y añádele lo siguiente:
1 |
/*
|
2 |
Theme Name: Tuts+ Style Posts by Category
|
3 |
Theme URI: https://code.tutsplus.com/style-posts-by-category-on-your-main-blog-page--cms-23684t
|
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 de dice a WordPress todo lo que necesita saber para crear un tema hijo e importar la hoja de estilos de Twenty Fifteen. Probablemente querrás añadir tu propio nombre y detalles en lugar de los míos, pero es sólo una idea.
Ahora activa tu tema.
Importar los Datos
Si tu sitio ya tiene entradas puedes saltarte esta sección, pero aquí tienes cómo importar los datos de test de temas in tu sitio.
- Ve a la página Theme Unit Test y descarga el fichero
xmlal que está enlazado. - En tu sitio web, ve a Herramientas > Importar. Haz clic en el enlace WordPress.
- Haz clic en el botón Seleccionar Fichero y selecciona el fichero que acabas de descargar. Haz clic en e botón Subir y Comenzar la Importación.
- Sigue los avisos y espera a que WordPress importe los datos.
Identificar los Estilos Objetivo
WordPress tiene un par etiquetas de plantilla que muestran clases para tus páginas y entradas cuando se ven en el navegador web. Son estos:
-
body_class(), que añades a la etiquetabodyen el ficheroheader.phpde tu tema: añade clases al elementobodyde acuerdo con el tipo de página que se esté viendo. -
post_class(), que funciona de manera similar pero que se usa con los posts en el bucle.
Si estás trabajando con tu propio tema y no has añadido todavía estas etiquetas de plantilla, necesitarás hacerlo. Este tutorial de trabajando con clases e IDs generados por Wordpress te muestra cómo.
Si estás trabajando con un tema hijo del tema Twenty Fifteen, estas etiquetas ya estarán añadidas en el tema Twenty Fifteen, por lo que no tienes que hacer nada.
Si abres una página de categoría de tu sitio web en un navegador y usas las herramientas de desarrollador para inspeccionar la salida HTML, verás que la etiqueta de plantilla body_class() ha añadido un montón de clases a tu página.
Aquí la etiqueta body tiene clases que nos dicen qué tipo de página es:
1 |
<body class="archive category category-markup category-29 logged-in admin-bar no-customize-support"> |
Estas clases nos dicen que estamos en una página de archivo de categoría por la categoría de marca, además de otras cosas. La clase en la que nos vamos a centrar es la clase category-markup.
Dar Estilo a los Títulos de Entrada en el Listado de Archivo
Empezaremos añadiendo un color a los títulos de las entradas de cuerdo con su categoría. En la hoja de estilo de tu tema, añade esto:
1 |
/* post titles in archive pages */
|
2 |
.archive.category-markup .entry-title a:link, |
3 |
.blog .category-markup .entry-title a:visited { |
4 |
color: #6cd2c8; |
5 |
}
|
6 |
.archive.category-markup .entry-title a:hover, |
7 |
.blog .category-markup .entry-title a:active { |
8 |
color: #120e5b; |
9 |
}
|
10 |
|
11 |
.archive.category-template-2 .entry-title a:link, |
12 |
.archive.category-template-2 .entry-title a:visited { |
13 |
color: #e5572f; |
14 |
}
|
15 |
.archive.category-template-2 .entry-title a:hover, |
16 |
.archive.category-template-2 .entry-title a:active { |
17 |
color: #120e5b; |
18 |
}
|
19 |
|
20 |
.archive.category-media-2 .entry-title a:link, |
21 |
.archive.category-media-2 .entry-title a:visited { |
22 |
color: #933bbe; |
23 |
}
|
24 |
.archive.category-media-2 .entry-title a:hover, |
25 |
.archive.category-media-2 .entry-title a:active { |
26 |
color: #120e5b; |
27 |
}
|
Podrías querer cambiar los colores para que se ajusten a tu diseño.
Ahora guarda tu hoja de estilos y abre una página de categoría en tu navegador. Mi página de categoría tiene ahora los títulos de las entradas de color.
Y mi archivo de Media tiene los títulos de las entradas de un color diferente:
Nota que en las capturas de pantalla, hay una entrada que aparece en los dos archivos, esto es porque está en muchas categorías. Esto es porque es importante enfocar la clase para la categoría en la etiqueta body de tu página de archivo, y no sólo centrar las clases de categoría en los posts en el bucle.
Ahora añadiremos también un borde. Añade esto en tu hoja de estilos:
1 |
.archive.category-markup .entry-title { |
2 |
padding-top: 0.5em; |
3 |
border-top: 2px #6cd2c8 solid; |
4 |
}
|
5 |
.archive.category-template-2 .entry-title { |
6 |
padding-top: 0.5em; |
7 |
border-top: 2px #e5572f solid; |
8 |
}
|
9 |
.archive.category-media-2 .entry-title { |
10 |
padding-top: 0.5em; |
11 |
border-top: 2px #933bbe solid; |
12 |
}
|
Esto añade un poco de relleno encima de los títulos de las entradas así como un borde del mismo color que el texto. Aquí está cómo se ve en mi página de plantilla de archivo:
Dar Estilo al Título
Así como dar estilo al listado de entradas individuales, quiero añadir mi color al título del archivo.
Primero identificaremos los elementos y clases objetivo, usando las herramientas de desarrollador:
El título del archivo se mostrará así:
1 |
<header class="page-header"> |
2 |
<h1 class="page-title">Category: Template</h1> |
3 |
<div class="taxonomy-description"> |
4 |
<p>Posts with template-related tests</p> |
5 |
</div>
|
6 |
</header><!-- .page-header --> |
Por lo tanto necesitamos centrarnos en las clases page_header y page-tile, así como en las clases en la etiqueta body para el archivo.
En tu hoja de estilos, añade lo siguiente:
1 |
.archive.category-markup .page-header .page-title { |
2 |
color: #6cd2c8; |
3 |
}
|
4 |
.archive.category-template-2 .page-header .page-title { |
5 |
color: #e5572f; |
6 |
}
|
7 |
.archive.category-media-2 .page-header .page-title { |
8 |
color: #933bbe; |
9 |
}
|
Esto añade el color al título del archivo:
Vamos a cambiar el color del borde para que coincida. Añade esto a tu hoja de estilos:
1 |
.archive.category-markup .page-header { |
2 |
border-left: 7px solid #6cd2c8; |
3 |
}
|
4 |
.archive.category-template-2 .page-header { |
5 |
border-left: 7px solid #e5572f; |
6 |
}
|
7 |
.archive.category-media-2 .page-header { |
8 |
border-left: 7px solid #933bbe; |
9 |
}
|
Esto cambia el color del borde para que coincida:
Resumen
Usar las clases generadas por WordPress para elegir las páginas de archivo de categoría y dales estilo conlleva identificar las cases que muestra y escribir CSS.
En este tutorial has aprendido cómo hacer esto para crear secciones codificadas con color para tu sitio por categoría.
Puedes profundizar más en esto, por ejemplo:
- usando tus colores de sección para otros elementos en la página como el título y el menú de navegación
- añadir 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
- cambiando el diseño para secciones diferentes de tu sitio
Hay muchas posibilidades, y si adoptas esta técnica para profundizar en sus límites puedes crear diferentes secciones de tu sitio con un diseño completamente diferente par cada una, dando la impresión de tener sitios completamente separados.
By
