Share
En un tutorial anterior, le mostré cómo aplicar un estilo diferente a las categorías en su sitio, de modo que si su sitio tiene secciones para cada categoría de publicación, puede hacer que se vean bastante diferentes..
¿Pero qué pasa si su sitio está basado en páginas estáticas? No es raro ver sitios grandes basados en una estructura de página jerárquica, por lo que puede utilizar estas técnicas para un sitio como este.?
La respuesta es sí. WordPress le dará algunas clases de CSS relacionadas con la estructura de la página de su sitio que puede usar para dirigir el estilo y crear secciones para su sitio basado en páginas que se ven bastante diferentes..
En este tutorial trabajaremos con un sitio basado en páginas jerárquicas y diseñaremos cada sección del sitio con un color diferente para cada sección. También veremos una técnica alternativa basada en agregar categorías a las páginas.
Para seguir este tutorial, necesitarás:
Si ya tiene un tema en el que desea utilizar esta técnica, estará trabajando en la hoja de estilos y el archivo de funciones de su tema. Voy a crear un tema secundario del tema Twenty Fifteen y editaré la hoja de estilos y el archivo de funciones en el tema de mi hijo.
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 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-pages-by-section.
Dentro de esa carpeta, crea un archivo CSS vacío llamado style.css y añádele lo siguiente:
Accentsconagua
/ * Nombre del tema: Tuts + Páginas de estilo por sección URI de tema: http://code.tutsplus.com/tutorials/style-posts-by-category-on-your-main-blog-page--cms-23684 Descripción: Theme para apoyar tuts + tutorial sobre páginas de estilo de manera diferente en cada sección de un sitio. 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.
Si su sitio ya tiene páginas configuradas, puede omitir esta sección, pero a continuación se explica cómo importar los datos de prueba de la unidad temática a su sitio..
xml archivo que está vinculado a.De forma predeterminada, WordPress asignará un menú de navegación que contiene todas las categorías de blog al menú principal, y establecerá la página del blog como la página de inicio. Mientras trabajamos con páginas estáticas, debe cambiar eso en el administrador de WordPress.
WordPress utiliza el body_class () etiqueta de plantilla a las clases de salida según el tipo de página que se muestra. Usted agrega esta etiqueta a su tema header.php archivo: agrega clases a la cuerpo Elemento según el tipo de página que se visualiza..
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 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 su página. Aquí tengo una página infantil abierta:
los cuerpo El elemento se emite con varias clases:
Estos le dicen al navegador que estamos en una página estática, el ID de la página, el hecho de que es un niño y de qué es un niño, y su plantilla de página, entre otras cosas..
Vamos a utilizar dos de estas clases para orientar páginas en diferentes partes del sitio: las relacionadas con la ID de página y la página principal.
Para orientar páginas en una sección de un sitio jerárquico, usamos dos clases: la ID de página para la página de nivel superior y la ID de página principal para las páginas secundarias.
Primero necesitas identificar las ID de tus páginas de nivel superior. Haga esto abriendo cada uno de ellos en las pantallas de administración y revisando la URL para su pantalla de edición. La URL contendrá el texto 'post = X', donde X es el ID único de la página. Ignore el hecho de que dice 'publicar' no 'página' (las páginas son en realidad un tipo de publicación) y use esa ID para orientar su estilo.
En mi sitio, las ID de las páginas de nivel superior con niños son 5 y 17, y las páginas sin niños tienen ID de 146, 701, 703, 733 y 735. Voy a usar un color para cada una de las dos secciones jerárquicas Y otra para las páginas sin hijos. Si tus páginas están todas en secciones, podrías usar un color diferente para cada sección.
Abra la hoja de estilos de su tema y agregue el siguiente CSS a ella:
.page-id-5 h1, .parent-pageid-5 h1 color: # 6cd2c8; .page-id-17 h1, .parent-pageid-17 h1 color: # e5572f; .page-id-146 h1, .page-id-701 h1, .page-id-703 h1, .page-id-733 h1, .page-id-735 h1 color: # 933bbe;
Nota: deberá cambiar las ID de publicación y padre en línea con su propio sitio, y es posible que desee cambiar los colores para que coincidan con su diseño.
Ahora guarde su hoja de estilo y eche un vistazo a su sitio. Mi sitio está usando los colores en cada sección. Aquí hay una página sin jerarquía:
Y una página de nivel superior:
Aquí hay un hijo de esa página de nivel superior:
Sin embargo, hay un par de problemas con este enfoque. La primera es que tuve que agregar clases manualmente para cada una de las páginas de nivel superior, lo que significa que si alguien agrega más secciones o páginas de nivel superior a mi sitio en el futuro, o mueve una de mis páginas de nivel superior a un lugar diferente en el jerarquía, no habrá ningún estilo para ellos. La segunda es que esto solo funciona para niños directos de mis páginas de nivel superior. Ninguno de mis estilos se aplica a los nietos de las páginas..
Esto significa que si su sitio tiene una jerarquía de varios niveles, este enfoque será muy difícil de implementar, ya que tendría que apuntar a los hijos de cada uno de los hijos de sus páginas de nivel superior. Imposible si se agregan nuevas páginas regularmente!
Así que necesitaré un método alternativo, que es utilizar categorías..
De forma predeterminada, WordPress no asigna categorías a las páginas, pero puede agregar categorías fácilmente a las páginas con una función. Para ello utiliza el register_taxonomy_for_object_type () función, que se explora en este tutorial sobre la asignación de categorías a archivos adjuntos.
Abre tu tema funciones.php archivo, o si aún no tiene uno, cree uno. Agregue lo siguiente a esto:
función tutsplus_add_categories_to_pages () register_taxonomy_for_object_type ('category', 'page'); add_action ('init', 'tutsplus_add_categories_to_pages');Esto agregará la 'categoría' taxonomía a la 'página' tipo de objeto, lo que significa que puede asignar categorías a las páginas.
Sin embargo, esto no significa que el body_class () La etiqueta mostrará la categoría como una de las clases en una página con categorías, porque las páginas no tienen categorías de forma predeterminada.
Puede cambiar esto escribiendo una función y adjuntándola a la body_class gancho de filtro. De nuevo en su archivo de funciones, agregue esto:
función tutsplus_add_categories_to_body_class ($ classes) if (is_page ()) $ categories = get_the_category ($ post-> ID); foreach ($ categories como $ categoría) $ clases [] = 'categoría-'. $ category-> slug; devolver $ clases; add_filter ('body_class', 'tutsplus_add_categories_to_body_class');Esto crea una función llamada tutsplus_add_categories_to_body_class () con la variable $ clases como su objeto. Comprueba si estamos en una página y si es así, crea una variable llamada $ categorías que contiene todas las categorías en las que se encuentra la página. Luego, para cada categoría, agrega la categoría slug (prefijada por 'categoría-' por consistencia) a la $ clases array y devuelve esos. Finalmente, enganchando la función a la body_class filtro, agrega la matriz de salida de slugs a la salida de clases por el body_class () etiqueta de plantilla.
Ahora intente agregar algunas categorías a las páginas de su sitio para darle secciones. Estoy agregando una Sección 1, Sección 2 y Sección 3 categoría. Asegúrate de que cada página esté en una sola sección..
Así es como se ven mis páginas en las pantallas de administración con categorías agregadas:
El siguiente paso es agregar algunos estilos a las páginas de destino en cada sección. No voy a cambiar el color del encabezado como ya lo hice usando la jerarquía de páginas. En su lugar voy a añadir un borde.
En la hoja de estilo de su tema, agregue lo siguiente (o algo similar usando las barras para sus categorías y los colores que está usando):
.page.category-section-1 h1 border-bottom: 2px solid # 933bbe; relleno: 0.5em; .page.category-section-2 h1 border-bottom: 2px solid # 6cd2c8; relleno: 0.5em; .page.category-section-3 h1 border-bottom: 2px solid # e5572f; relleno: 0.5em;
Ahora guarda tu hoja de estilos y revisa tus páginas.
Aquí hay una página en la Sección 1:
Si revisa su sitio, encontrará que cada página que ha asignado a una de las categorías con estilo específico tendrá el estilo correcto, independientemente de dónde se encuentre en la jerarquía de páginas. Esto le brinda un mayor control sobre el estilo y la capacidad de diseñar secciones de un sitio con una jerarquía de múltiples niveles.
La otra ventaja de este enfoque basado en categorías es que puede usarlo para páginas y publicaciones en su sitio: por lo tanto, si ya ha utilizado un estilo basado en categorías para sus publicaciones de blog, también puede aplicar esto fácilmente a sus páginas estáticas..
Si su sitio se basa en una estructura jerárquica de páginas, es probable que tenga secciones a las que le puede dar cierta identidad distinta..
En este tutorial, ha aprendido dos formas de enfocar el estilo en las páginas en diferentes secciones de su sitio..
Primero usó la jerarquía de páginas, que tiene la ventaja de trabajar con la configuración de WordPress predeterminada, pero la desventaja de no trabajar con una jerarquía de más de dos niveles..
Finalmente, aprendió a aplicar categorías a las páginas, agregue categorías a la body_class () etiqueta para las páginas, y luego escriba CSS orientado a las clases que genera WordPress.
