Aplicar estilo a secciones en un sitio basado en páginas de forma distinta

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

En un tutorial anterior te mostré cómo aplicar estilo a las categorías de tu sitio de manera diferente para que si tu sitio tiene secciones para cada categoría de entradas, puedas hacer que tengan un aspecto muy diferente.

Pero, ¿qué pasa si tu sitio está basado en páginas estáticas? No es raro ver sitios grandes que se basan en una estructura jerárquica de páginas, entonces ¿podrías usar estas técnicas para un sitio de este tipo?

La respuesta es sí. WordPress te proporcionará algunas clases CSS relacionadas con la estructura de páginas de tu sitio que puedes utilizar para apuntar a sus estilos y crear secciones para tu sitio basado en páginas que tengan un aspecto muy diferente.

En este tutorial trabajaremos con un sitio basado en páginas jerárquicas y aplicaremos estilo a cada sección del sitio usando un color diferente para cada sección. También veremos una técnica alternativa basada en la asignación de categorías a las páginas.

Lo que necesitarás

Para seguir este tutorial, necesitarás lo siguiente:

una instalación de desarrollo de WordPress
un editor de código

Si ya tienes un tema en el que quieras usar esta técnica, trabajarás en el archivo de las hojas de estilos y en el de funciones de tu tema. Voy a crear un tema hijo del tema Twenty Fifteen y editaré el archivo de las hojas de estilo y el de las funciones en ese tema hijo.

Probablemente tu sitio ya estará lleno de entradas; para que mi sitio tenga algunas de ellas voy a descargar los datos de prueba de temas de WordPress.

Crear el tema

Si estás trabajando con tu propio tema puedes omitir esta sección, en la cual mostramos qué necesitas hacer para crear un tema hijo de Twenty Fifteen.

En la carpeta wp-content/themes de tu sitio, crea una nueva carpeta y dale un nombre. Yo llamo a la mía tutsplus-style-pages-by-section.

Dentro de esa carpeta, crea un archivo CSS vacío denominado style.css y añádele lo siguiente:

/*
Theme Name:     Tuts+ Style Pages by Section
Theme URI:      https://code.tutsplus.com/tutorials/style-posts-by-category-on-your-main-blog-page--cms-23684
Description:    Theme to support tuts+ tutorial on styling pages differently in each section of a site. Child theme for the Twenty Fifteen theme.
Author:         Rachel McCollin
Author URI:     http://rachelmccollin.co.uk/
Template:       twentyfifteen
Version:        1.0
*/

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

Esto le indica a WordPress todo lo que necesita saber para crear un tema hijo e importa la hoja de estilo de Twenty Fifteen. Probablemente querrás añadir tu propio nombre y detalles en lugar de los míos, pero esto te da una idea.

Ahora activa tu tema.

Importación de los datos

Si tu sitio ya tiene páginas configuradas, puedes omitir esta sección, pero a continuación se explica cómo importar los datos de prueba de la unidad de tema en tu sitio.

Dirígete a la página de Theme Unit Test (Prueba de unidad de tema) en el Códice y descarga el archivo xml que está enlazado.
En tu sitio, dirígete a Herramientas > Importar. Haz clic en el enlace de WordPress.
Haz clic en el botón Elegir archivo y selecciona el archivo que acabas de descargar. Haz clic en el botón Cargar archivo e importar.
Sigue las indicaciones y espera a que WordPress importe los datos.

De forma predeterminada, WordPress asignará un menú de navegación que contiene todas las categorías de blog al menú principal, y establecerá la página del blog como la página de inicio. Como estamos trabajando con páginas estáticas, debes cambiar esto en el administrador de WordPress.

En Ajustes > Lectura, cambia la página principal a una página estática y selecciona la página "Página principal". Selecciona la página "Blog" como página de entradas.
En Apariencia > Menús, selecciona el menú "Todas las páginas" y marca la casilla de verificación "Menú principal" para que se implemente como el menú principal de tu sitio.

Identificar los estilos a lo que apuntar

WordPress utiliza la etiqueta de plantilla body_class() para generar clases según el tipo de página que se esté mostrando. Añade esta etiqueta al archivo header.php del tema: esto añade clases al elemento body según el tipo de página que se esté visualizando.

Si estás trabajando con tu propio tema y aún no has añadido estas etiquetas de plantilla, deberás hacerlo. Este tutorial sobre cómo trabajar con clases e ID generados por WordPress te explica cómo.

Si estás trabajando con un tema hijo del tema Twenty Fifteen, estas etiquetas ya han sido añadidas al propio tema Twenty Fifteen, así que no necesitas hacer nada.

Si abres una de las páginas de tu sitio en un explorador y usas herramientas de desarrollo para inspeccionar el HTML de salida, verás que la etiqueta de plantilla body_class() ha añadido un montón de clases a tu página. Aquí tengo abierta una página hija:

El elemento body se genera con varias clases:

1	<body class="page page-id-1133 page-child parent-pageid-5 page-template-default logged-in admin-bar no-customize-support">

Estas le indican al navegador que estamos en una página estática, el ID de la página, el hecho de que es una página hija y de qué es hija, y su plantilla de página, entre otras cosas.

Vamos a usar dos de estas clases para apuntar a páginas pertenecientes a diferentes partes del sitio: aquellas relacionadas con el ID de página y a la página padre de esta última.

Aplicar estilos a las páginas de nivel superior y a sus hijas

Para apuntar a las páginas de una sección de un sitio jerárquico, usamos dos clases: el ID de la página para la página de nivel superior y el ID de la página padre para las páginas hijas.

Primero debes identificar los ID de tus páginas de nivel superior. Para ello, abre cada una de ellas por turno en las pantallas de administración y comprueba la URL de tu pantalla de edición. La dirección URL contendrá el texto 'post=X', donde X es el identificador único de la página. Ignora el hecho de que dice 'post' en lugar de 'page' (las páginas son en realidad un tipo de publicación) y usa ese ID para apuntar tu estilo.

En mi sitio las ediciones de las páginas de nivel superior con páginas hijas son 5 y 17, y las páginas sin páginas hijas tienen los ID 146, 701, 703, 733 y 735. Voy a usar un color para cada una de las dos secciones jerárquicas y otra para las páginas sin páginas hijas. Si las páginas están todas en secciones, podrías usar un color diferente para cada sección.

Abre la hoja de estilos de tu tema y añádele el siguiente CSS:

1	.page-id-5 h1,
2	.parent-pageid-5 h1 {
3	color: #6cd2c8;
4	}
5	.page-id-17 h1,
6	.parent-pageid-17 h1 {
7	color: #e5572f;
8	}
9	.page-id-146 h1,
10	.page-id-701 h1,
11	.page-id-703 h1,
12	.page-id-733 h1,
13	.page-id-735 h1 {
14	color: #933bbe;
15	}

Nota: tendrás que cambiar los ID de las páginas y de las páginas padres de acuerdo con tu propio sitio, y es posible que quieras cambiar los colores para que coincidan con tu diseño.

Ahora guarda tu hoja de estilos y echa un vistazo a tu sitio. Mi sitio está usando distintos colores para cada sección. Aquí tienes una página sin jerarquía:

Y una página de nivel superior (con jerarquía):

Aquí tienes una página hija de esa página de nivel superior:

Sin embargo, hay un par de problemas con este enfoque. Lo primero es que tuve que añadir manualmente clases a cada una de las páginas de nivel superior, lo que significa que si alguien añade más secciones o páginas de nivel superior a mi sitio en el futuro, o mueve una de mis páginas de nivel superior a un lugar diferente en la jerarquía, no habrá ningún estilo para ellas. La segunda es que esto solo funciona para las páginas que sean hijas directas de mis páginas de nivel superior. Ninguno de mis estilos se aplica a las páginas "nietas" de las páginas.

Esto significa que si tu sitio tiene una jerarquía de múltiples niveles, este enfoque será muy difícil de implementar, ya que tendrías que apuntar a los elementos hijos de cada uno de los elementos hijo de tus páginas de nivel superior. ¡Es algo imposible si se añaden nuevas páginas regularmente!

Así que necesitaré un método alternativo, que consiste en usar categorías.

Aplicar estilo a las páginas con base en su categoría

De forma predeterminada, WordPress no asigna categorías a las páginas, pero puedes añadir fácilmente categorías a páginas con una función. Para ello tienes que usar la función register_taxonomy_for_object_type(), que se explora en este tutorial sobre la asignación de categorías a datos adjuntos.

Abre el archivo functions.php de tu tema o, si aún no tienes uno, créalo. Añáde lo siguiente en él:

1	function tutsplus_add_categories_to_pages() {
2	register_taxonomy_for_object_type( 'category', 'page' );
3	}
4	add_action( 'init' , 'tutsplus_add_categories_to_pages' );

Esto agregará la taxonomía 'category' al tipo de objeto 'page', lo que significa que podrás asignar categorías a las páginas.

Sin embargo, esto no significa que la etiqueta body_class() vaya a generar la categoría como una de las clases de una página con categorías, porque las páginas no tienen categorías de forma predeterminada.

Puedes cambiar esto escribiendo una función y adjuntándola al gancho de filtro body_class. De nuevo en el archivo de funciones, añade esto:

function tutsplus_add_categories_to_body_class( $classes ) {
    if ( is_page() ) {		
		$categories = get_the_category( $post->ID );				
		foreach ( $categories as $category ) {
			$classes[] = 'category-' . $category->slug;
		}
	}     
    return $classes;     
}
add_filter( 'body_class','tutsplus_add_categories_to_body_class' );

Esto crea una función llamada tutsplus_add_categories_to_body_class() con la variable $classes como su objeto. Esta comprueba si estamos en una página y, si es así, crea una variable denominada $categories que contiene todas las categorías en las que se encuentra la página. A continuación, para cada categoría, añade el slug de la categoría (prefijado por 'category-' para mantener la consistencia) a la matriz $classes y devuelve aquellos. Por último, enganchando la función al filtro body_class, añade la matriz de salida de los slugs a las clases de salida con base en la etiqueta de plantilla body_class().

Ahora intenta añadir algunas categorías a las páginas de tu sitio para crear secciones en él. Yo estoy añadiendo las categorías Sección 1, Sección 2 y Sección 3. Asegúrate de que cada página esté en una única sección.

Así es como se ven mis páginas en las pantallas de administración con categorías añadidas:

El siguiente paso consiste en añadir algo de estilo a las páginas de cada sección. No voy a cambiar el color de la cabecera como ya hice usando la jerarquía de páginas. En su lugar, añadiré un borde.

En la hoja de estilos de tu tema, añade lo siguiente (o algo similar usando los slugs de tus categorías y los colores que estés usando):

.page.category-section-1 h1 {
    border-bottom: 2px solid #933bbe;
	padding: 0.5em;
}
.page.category-section-2 h1 {
	border-bottom: 2px solid #6cd2c8;
	padding: 0.5em;
}
.page.category-section-3 h1 {
	border-bottom: 2px solid #e5572f;
	padding: 0.5em;
}

Ahora guarda tu hoja de estilos y revisa tus páginas.

Aquí tienes una página en la Sección 1:

Si revisas tu sitio, verás que cada página que hayas asignado a una de las categorías con estilo aplicado tendrá el estilo correcto, independientemente de dónde esté en la jerarquía de páginas. Esto te proporciona un control más preciso sobre el estilo y la capacidad de aplicar estilo a las secciones de un sitio con una jerarquía de varios niveles.

La otra ventaja de este enfoque basado en categorías es que puedes usarlo para páginas y entradas en tu sitio web: por lo que si ya has usado estilos basados en categorías para las entradas de tu blog, también puedes aplicarlo fácilmente a tus páginas estáticas.

Resumen

Si tu sitio se basa en una estructura jerárquica de páginas, es probable que tenga secciones a las que podrías querer dar alguna identidad propia y distinta.

En este tutorial has aprendido dos formas de apuntar al estilo de las páginas de tu sitio pertenecientes a diferentes secciones.

Primero usaste la jerarquía de páginas, que tiene la ventaja de trabajar con la configuración predeterminada de WordPress, pero que tiene la desventaja de no trabajar con una jerarquía de más de dos niveles de profundidad.

Finalmente aprendiste a aplicar categorías a las páginas, a añadir categorías a la etiqueta body_class() para las páginas y, a continuación, escribir CSS que apunte a las clases que genera WordPress.