CSS objetivo para contenido específico con etiquetas de plantillas de WordPress

Una de las cosas que amo en WordPress es su flexibilidad. Puede usarlo para ejecutar un blog simple, como un sistema de gestión de alta potencia o para impulsar aplicaciones personalizadas. Dentro del desarrollo del tema, un aspecto que le brinda mucha flexibilidad es el uso de etiquetas de plantilla. Tomarán los datos dinámicamente y le permitirán eliminar el contenido de una manera que funcione para su diseño. Me centraré en dos etiquetas de plantillas muy específicas: body_class () y post_class (). Le mostraré cómo WordPress los usa para generar dinámicamente clases CSS en su sitio y cómo puede usarlas para atacar su blog o sitio web.
Específicamente, le mostraré cómo usar estas clases para estilizar el contenido de diferentes categorías, agregando colores específicos, texto o efectos de estilo a cada uno. De esta manera, puede darle a las diferentes secciones de su sitio un aspecto diferente y también puede animar las páginas del archivo, dando a las diferentes categorías su propio estilo, para que los usuarios puedan encontrar el tipo de contenido que están buscando. Lo que necesitará para seguir esta publicación, necesitará lo siguiente:
Una instalación de desarrollo de WordPress (no haga nada de todo esto en su sitio en vivo hasta que esté completamente satisfecho).
Propio tema o un tema secundario de un tercer tema. No edite un tercero directamente, porque cuando se actualice más adelante, todos sus cambios se perderán.
Un editor de código.
Identificación y uso de etiquetas de plantilla primero, echemos un vistazo a las etiquetas de plantilla. Estos deben estar presentes en cada tema: si no están en el suyo, ¡asegúrese de agregarlos! La etiqueta de plantilla Body_Class (). La primera etiqueta de plantilla es la etiqueta de plantilla Body_Class (). Esto va al archivo Header.php de su base, con la apertura del elemento del cuerpo. O Codificado de la siguiente manera:
La idea de FA1AA4761C930017C5454D62B657DE25 está cargada.
Una vez que haya hecho esto, descubrirá que WordPress elimina una serie de clases para el elemento del cuerpo en cada página de su sitio, dependiendo del tipo de pantalla de contenido y el archivo de plantilla utilizado. Aquí está el código generado para la página principal de mi sitio:
Body_class final en html de mi página inicial

Echemos un vistazo a lo que cada una de estas clases nos dice:
Inicio: esta es la página de inicio del sitio web.
Page-Template: use una plantilla de página porque es una página estática.
Page-Template-Page-Full-Width: la plantilla que usa la página.
Page-Template-Page-Fell-Width.php: Nombre completo del archivo de plantilla usado.
Página: Tipo de contenido. Si mi página inicial fuera la página principal del blog, sería diferente.
Page-ID-7: ID de esta página específica.
Y aquí está el código que se genera para una página de archivo de categorías:
El HTML final de la clase del cuerpo para la página de archivo de categoría

Esto nos dice algunas cosas diferentes:
Archivo: esta es una página de archivo en lugar de una sola publicación o página.
Categoría: es un archivo de categorías.
Categorías-base: Archivo de categoría específico que se muestra.
Categoría-154: ID de esta categoría.
Es posible que ya imagine el tipo de contenido que puede usar para apuntar usando esas clases de CSS: una publicación o página individual
un cierto archivo de categoría
página de inicio
Todos los archivos de categoría o todos los archivos para cierta taxonomía personalizada.
Pero antes de seguir adelante, echemos un vistazo a la segunda de nuestras etiquetas de plantilla.
Etiqueta de plantilla post_class (). Esta siguiente etiqueta de plantilla se usa en el bucle. Entonces, si tiene más archivos de bucle en su tema (ya sea que los archivos incluyen múltiples o más bucles codificados en archivos de plantilla), deberá agregarlos a cada uno de ellos. Normalmente lo agrega con la apertura del elemento que contendrá su publicación:
La idea de FA1AA4761C930017C5454D62B657DE25 está cargada.
Tenga en cuenta que he agregado dos cosas a mi elemento aquí: no solo la etiqueta Post_class (), sino también una ID usando la ID de publicación. Como veremos, ese valor se genera como clase y ID para el elemento.
Echemos un vistazo a cómo se muestra esto en la página inicial:
Salida de publicación de clase
Tenemos algunas clases con las que podemos trabajar aquí:

Post-7: ID de publicación
Página: Tipo de publicación. La página inicial de mi sitio es una página estática.
Escriba-pagina: otra forma de mostrar el tipo de publicación
Estado Publish: esta página se publica (no esbozado o programado)
HAT-Post-Thumbnail: esta página tiene una miniatura de publicación (no es algo que siempre verá, pero agregué imágenes presentadas en mis páginas en este sitio).
Hentry: una clase que se usa para estilizar las publicaciones en flujos RSS.
Ahora echemos un vistazo a nuestro archivo de categorías: salida de la clase para el archivo de categorías
Esto nos da muchas clases de salida. Echemos un vistazo a ellos.
Post-2522: ID de publicación.

Publicación: El tipo de publicación.
Tipo-post: Publicación Tipo de nuevo.
Publicación de estado: esta publicación ha sido publicada.
Formato estándar: formato de publicación para esta publicación.
Tiene post-pulgada: esta publicación tiene una miniatura o imagen presentada. Particularmente útil para estilizar las páginas de archivo en las que desea incluir imágenes presentadas, de modo que esas publicaciones que no se pueden ajustar.
Hentry: para RSS.
Base de categoría, con la categoría: las categorías en las que aparece esta publicación.
Tag-admin etc.: Etiquetas para esta publicación.
Le recomiendo que se tome un tiempo para explorar su propio sitio y echar un vistazo a las clases de salida. No son solo las publicaciones y archivos individuales que los tienen: puede usarlos para apuntar a sus 404 páginas, por ejemplo.
Esto nos da mucha flexibilidad para el estilo de publicaciones individuales, ya sea en su propia página o en archivos. Pasemos a una forma de hacer esto. Usando body_class () y post_class () para estilo ahora sabes cómo se codifican estas etiquetas de plantilla y qué hacen, veamos cómo podemos usarlas. Le mostraré un ejemplo que da un color diferente a diferentes categorías y lo usa para publicaciones y archivos elegantes. Este es uno de los usos más comunes de estas etiquetas que hemos visto, aunque otro popular es dar su propio estilo.
Haga todo esto en la hoja de estilo de su base, por lo que si usa un tema de tercera parte, no olvide crear un tema infantil. También tendrá que adaptar mi código para apuntar a las categorías específicas de su propio sitio, ya sea que elija usar la ID o el Slog (de las cuales más pronto). [Blog] Blog de color Learn-WP
Notará que esto usa publicaciones azules de publicaciones de acuerdo con el estilo del encabezado y las barras laterales de mi sitio. Este es el estilo que uso para cualquier página de archivo general. Aquí están el CSS que los acolzan:

La idea de FA1AA4761C930017C5454D62B657DE25 está cargada.
Estilización usando la etiqueta Body_Class bastante simple. Pero notará en esa captura de pantalla que hay cuatro categorías principales relacionadas con la barra lateral y que cada una tiene su propio color. Quiero usar esto para archivos de categorías elegantes para cada una de estas cuatro categorías. Aquí está el estilo para la categoría básica:

La idea de FA1AA4761C930017C5454D62B657DE25 está cargada.
¿Dónde sabemos a qué me dirigo con ese estilo? Puede decir esto usando la clase .Category-Basics antes de #Content ID. Así que me dirigiré a la categoría de clase básica de categoría que es Body_Class () con la etiqueta del cuerpo Body_class (). Nota: Utilicé la clase que incluye la babosa de categoría. Si tiene más usuarios en su sitio y cree que podría cambiar la babosa, en su lugar, use la clase de categoría de identificación. Aquí está la página de archivo resultante:
Archivo de categoría Learn-WP con colores personalizados
Puede ver que usa el color de la categoría para publicaciones, el borde en cada publicación y el fondo de la descripción de la categoría. También agregué un estilo similar para las otras tres categorías: Cargue la idea de FA1AA4761C930017C5454D62B657D25
Esto me da tres colores más. Verde para elementos esenciales:
El archivo de categorías esenciales de Learn-WP

Rojo para el final:
Learn-WP Ultimate Category Archive Página con rojo
Y finalmente amarillo para aplicaciones:
Aprender a las aplicaciones de WP Página de categoría ACHOVY con amarillo

Eso se ve genial. Pero echemos un vistazo a la etiqueta post_class () y cómo puede usarla para llevar las cosas más allá. Estilización Usando la etiqueta Post_Class En este momento, mi sitio solo tiene estilos de color coordinado en las páginas de archivo de categorías. Pero podría agregar un estilo que se dirige a las publicaciones individuales en la página del blog principal y usa el color para resaltar la categoría a la que pertenezco. Para hacer esto, agrego lo siguiente a mi hoja de estilo:
La idea de FA1AA4761C930017C5454D62B657DE25 está cargada.

Y aquí está el efecto que tiene en la página de mi blog:
Página de blog Learn WP con colores personalizados en categorías

También podría agregar estilo al borde inferior de cada publicación, si quiero, o incluso dar a las publicaciones un color de fondo para su categoría. Usted solo está limitado por su imaginación (y los límites de un buen diseño). Dirigir el cuerpo y las clases de publicación le brindan más control sobre el diseño Esta técnica le brinda más control sobre cómo está diseñando. Si tiene categorías claras que separan diferentes secciones de su sitio (como para sus departamentos comerciales o secciones, puede usarlo para crear un aspecto o marca diferente para cada sección de su sitio. Si lo lleva lo suficientemente lejos, puede Incluso ahórrese utilizando una red multisit con sitios separados para cada división de su empresa. ¡Dinos en los comentarios!
Etiquetas:
temas infantiles
CSS

personalización
diseño