Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

Usa las Etiquetas de Plantilla de WordPress para Modificar Contenido Específico con CSS

by
Difficulty:IntermediateLength:MediumLanguages:

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

Final product image
What You'll Be Creating

Aprender desarrollo WordPress no consiste únicamente en aprender a codificar PHP.

Si quieres que los sitios, los temas y/o los plugins que crees funcionen bien, también necesitas conocer HTML y CSS.

En este tutorial, te mostraré una característica de WordPress tremendamente útil que combina PHP con algo de CSS sencillo. Es una técnica fácil de usar pero muy potente que te proporcionará mayor control sobre la forma en la que se presenta tu contenido.

La función a la que me refiero son las etiquetas de plantilla  body_class(), the_ID(), y post_class(). Si las añades a las plantillas de tu tema (o a los archivos de tu loop) en los lugares correctos, generarán clases CSS que podrás usar posteriormente para aplicar estilo a tu contenido con la precisión de un láser.

En este tutorial, te mostraré cómo y dónde añadir estas etiquetas en tu tema, y cómo escribir, a posteriori, estilos CSS para esas clases e IDs generados.

Añadir la Etiqueta body_class() a Tu Tema

La primera etiqueta es body_class(). Como te habrás imaginado, se aplica al elemento body.

En el archivo header.php de tu tema, localiza la línea que abre el elemento body.

Para añadir la etiqueta de plantilla, edítala de manera que tenga el siguiente aspecto:

Guarda el archivo y ciérralo. Ahora abre un sitio que use tu tema y echa un vistazo al código de tus páginas.

Aquí tienes algunos ejemplos de código generado en mi sitio de muestra.

Primero, la página de inicio:

Esto nos indica algunas cosas sobre la página:

  • Que se trata de la página de inicio (home).
  • Que usa una plantilla de página (page-template).
  • Que es una página cuyo contenido ocupa todo el ancho de la pantalla (page-template-page-full-width).
  • Que es una página (page), en oposición a una entrada personalizada (custom post type).
  • Que su ID es 7 (page-id-7).

Esto nos dice bastantes cosas sobre la página. Ahora echemos un vistazo a un archivo de categoría.

Esto nos indica que estamos en un archivo, que además es un archivo de categoría, y en concreto que se trata del archivo de la categoría 'basics' con el ID 154.

Es posible que te estés preguntando porqué son necesarias todas estas clases: ¿por qué tener una clase archivo y otra categoría, por ejemplo? El motivo es para que puedas configurar tus estilos CSS de forma tan precisa como necesites. De manera que si quisieras aplicar estilo a todas tus páginas de archivo, usarías la clase archive. Si quisieses modificar todos los archivos de categoría, podrías usar la clase category, y si quisieses modificar una categoría en concreto, usarías su slug o su ID.

Por último, echemos un vistazo a una entrada del blog:

Ahora obtenemos más información:

  • Está usando la plantilla predeterminada para las entradas (post-template-default).
  • Es una entrada única perteneciente al tipo de entradas post (single-post).
  • Su ID es 3522 (postid-3522).
  • Está usando la plantilla predeterminada (single-format-standard).

De nuevo, podrías usar cualquiera de estos para modificar el nivel que desees: las entradas de cualquier tipo de entrada (incluidas las páginas y los tipos de entradas personalizadas), las entradas pertenecientes al tipo de entrada post, las entradas que usan un determinado formato, e incluso esta entrada concreta.

Más adelante en este tutorial, te demostraré cómo añadir estilo a través de estas clases. Pero antes, veamos cómo puedes añadir otra etiqueta de plantilla para aplicar tus estilos.

Añadir las Etiquetas de Plantilla post_class y the_ID a Tu Tema

De la misma manera que puedes añadir clases a toda la página en conjunto, también puedes añadir una clase a cada entrada que ésta contenga. En una entrada o página, esto añadiría un conjunto de clases, pero en una página de archivo, generarías distintas clases para cada entrada del archivo.

Añades este código al loop, cuando abres el elemento article de cada entrada.

El código sin las etiquetas de plantilla es este:

Pero tras añadir las etiquetas de plantilla, su aspecto será el siguiente:

Aquí hay dos etiquetas de plantilla:

  • La etiqueta the_ID() añade el ID de la entrada como ID CSS, es decir, será un selector o identificador único para la entrada.
  • La etiqueta post_class() añade una lista de clases dependiendo de las propiedades de la entrada, de forma similar a body_class().

Echemos un vistazo al código que generan.

Primero, en la página de inicio:

Esto no devuelve lo siguiente:

  • El ID post-7, que usa el ID del post.
  • Una clase similar post-7.
  • Una clase page, que nos indica que se trata de una página, no de una entrada.
  • type-page nos indica que es el tipo de entrada 'page'.
  • status-publish nos indica que esta página ha sido publicada.
  • has-post-thumbnail nos indica que esta página tiene una imagen de miniatura—puedes usar esto para aplicar un estilo diferente a las entradas que la tengan o no, de manera que la imagen destacada se adapte adecuadamente al diseño de página.
  • hentry es una clase diseñada para ayudarte a aplicar estilo a los feeds RSS.

¡Puedes usar un montón de clases!

Veamos ahora una entrada en la anterior página de archivo:

¡Guau! Aquí hay muchas cosas.

No voy a explicar la lista completa en detalle, resumiendo, dispones de clases correspondientes al ID de la entrada, al tipo de entrada, a su estado, su categoría, a su miniatura, a las categorías a las que pertenece y a las etiquetas que se le han asignado.

Por último, una entrada única:

Esto es muy similar a la entrada en la página de archivo, lo que significa que si quieres modificar una entrada única, no usarás estas clases, sino que usarás la clase single generada por body_class.

Usar Estilos Generados en Tu Hoja de Estilos

Una vez conozcas cuales son los estilos y las clases generadas, podrás empezar a aplicar estilo a tu contenido.

Un ejemplo habitual consiste en aplicar estilos distintos a las entradas pertenecientes a distintas categorías.

Aquí tienes la página del blog de mi sitio de ejemplo:

A blog page with blue styling for titles and black for content

Es posible que hayas notado como he usado distintos colores para cada categoría principal en el menú de navegación. En cada página de archivo de categoría, lo he conseguido dirigiéndome al correspondiente archivo de categoría usando las clases de archivo de la categoría generadas por la etiqueta de plantilla body_class().

Aquí tienes el CSS básico de la categoría:

Con esto hacemos que los titulares y los filetes tengan un tono de cyan en la página de archivo de la categoría.

También he añadido estilos a la descripción de la categoría, un fondo cyan con texto en blanco:

El motivo por el que he usado la clase .archive-meta para aplicar estilo al texto y la maquetación es porque quiero que todos los archivos de categoría tengan el mismo estilo en estos elementos. Solo voy a añadir el color de fondo a .category-basics .archive-meta.

Observa que en ambos casos, estoy modificando la presentación de las clases mediante la etiqueta body_class(), ya que quiero aplicar estilo a todas las entradas del archivo de la categoría.

Pero, ¿qué ocurriría si quisiese aplicar estilo al blog principal basándome en las categorías? Lo haría usando las clases generadas por la etiqueta post_class().

Así que para añadir el estilo azul a las entradas de la página principal del blog pertenecientes a la categoría basics, añadiría este estilo:

Esto modificará las entradas que contengan dos clases generadas por nuestras etiquetas de plantilla:

  • La clase blog añadida al elemento body por la etiqueta body_class().
  • La clase category-basics añadida al elemento artículo por la etiqueta post_class().

Después de añadir esto, la página del blog tendrá el siguiente aspecto:

the blog page with cyan styling added to a post from the basics category

Podría ir más allá añadiendo colores distintos a todas las entradas del blog según categoría. En este caso, no lo haré ya que muchas de las entradas pertenecen a varias categorías al mismo tiempo. Pero si tu sitio web tiene entradas pertenecientes a una única categoría, usar las clases de esas categorías te podría ayudar a aplicar un estilo distinto a cada una de ellas.

Las Etiquetas de Plantilla de WordPress Combinadas Con CSS Pueden Ser Muy Potentes

Ahora ya sabes cómo añadir las etiquetas de plantilla body_class(), post_class(), y the_ID() a tu tema para generar clases e IDs en la salida de tus páginas, archivos y entradas.

Puedes usar esto de muy distintas formas para aplicar estilo a tipos de entradas, categorías, o formatos concretos, e incluso a entradas individuales.

Piensa los usos creativos que le puedes dar consiguiendo así añadir una dimensión extra al diseño de tu sitio web.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.