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

Trabajar con clases e IDs generados por WordPress

by
Length:LongLanguages:

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

Una útil característica de WordPress es la forma en que genera clases e IDs. Algunos de estos son generados por el propio sistema, mientras que en otros casos insertas algo de PHP en tu tema que WordPress utilizará para añadir clases e IDs al marcado de la página.

En este tutorial, demostraré tres maneras en las que WordPress hace esto y te proporcionaré prácticos casos de usos y ejemplos para cada uno. Las tres áreas con las que trataré son las siguientes:

  • Clases e IDs generados para las imágenes que se cargan en WordPress a través del cargador de medios
  • Etiquetas de plantilla que se utilizan en los archivos de plantilla de un tema para generar clases e IDs basados en el contenido y la página que se esté visualizando
  • Parámetros que puedes establecer al registrar widgets y menús (o que ya están establecidos en un tema bien escrito), que generarán clases e IDs relevantes para tipos específicos de widgets, widgets concretos y elementos de menú

Para cada uno de ellos, explicaré cómo funcionan y luego demostraré cada uno con algunos ejemplos.


Lo que vas a necesitar para completar este tutorial

Para seguir los ejemplos prácticos de este tutorial, necesitarás lo siguiente:

  • Una instalación de desarrollo de WordPress
  • Un tema que puedas editar

Yo voy a estar trabajando con un tema hijo de Twenty Twelve, se puedes acceder a los archivos del tema desde el paquete de código.


Clases e IDs generados para las imágenes por el cargador de medios

Cuando cargas imágenes a través del Cargador de Medios, se te da la opción de especificar cómo se debe alinear la imagen, como puedes ver en la captura de pantalla. También se te pedirá que elijas qué tamaño de imagen deseas mostrar: miniatura, tamaño medio, grande o completo.

wordpress-generated-classes-IDs-0-image-uploader

En función de tu selección, WordPress asigna a la etiqueta <img> de las imágenes que cargues varias clases. Las clases relacionadas con la alineación de las imágenes son las siguientes:

  • .alignnone
  • .aligncenter
  • .alignright
  • .alignleft

Además, WordPress asigna la clase .wpcaption a cualquier leyenda o pie de foto que añadas a una imagen. Las leyendas tendrán esta clase, así como una de las anteriores clases de alineación, en función de cómo elijas alinear la imagen.

WordPress también añade clases para cada tamaño de imagen:

  • .size-full
  • .size-large
  • .size-medium
  • .size-thumbnail

Puedes utilizarlas para aplicar estilo a las imágenes de cada tamaño de archivo.

La mayoría de los temas incluirán CSS para aplicar estilo adecuadamente a cada una de estas clases, por ejemplo, el tema Twenty Twelve incluye lo siguiente:

El anterior CSS alinea cualquier elemento (no solo imágenes) con las clases .alignleft, .alignright o .aligncenter, lo que significa que también puedes utilizarlas si lo deseas para aplicar estilo a otro tipo de contenido aunque no sean imágenes.

También añade márgenes a las imágenes que tengan estas clases y garantiza que las imágenes a tamaño completo y grande no se desborden fuera de su elemento contenedor, utilizando max-width: 100%.

Puedes ver el efecto de esto en la siguiente captura de pantalla. La primera imagen está alineada a la derecha y la segunda está centrada y está a tamaño completo.

wordpress-generated-classes-IDs-1-images-twenty-twelve

Añade tu propio estilo usando estas clases e IDs

Además de establecer la alineación y los márgenes para cada una de estas clases, puedes usarlas para añadir estilos extra.

La primera imagen de la anterior captura de pantalla está alineada a la derecha. Si se cambia el tamaño de la pantalla, permanece del mismo tamaño y el texto se ajusta desordenadamente alrededor de ella:

wordpress-generated-classes-IDs-2-images-screen-resized-twenty-twelve

Puedes añadir estilo para asegurarte de que cualquier imagen alineada a la derecha no ocupe más del 50% del ancho de la pantalla, de modo que el texto contornee la imagen de forma más adecuada, añadiendo el siguiente CSS a tu hoja de estilos:

Ahora, cuando la página se vea en una pantalla estrecha, la imagen será menos dominante:

wordpress-generated-classes-IDs-3-images-screen-resized-with-styling

Además de añadir CSS para el diseño o el tamaño, puedes añadir estilo decorativo a las imágenes que estén alineadas de cierta manera. Para añadir estilo decorativo a imágenes de tamaño completo y centradas, añade lo siguiente a tu hoja de estilos:

Esto añade a la imagen un borde y reduce su tamaño:

wordpress-generated-classes-IDs-4-full-size-image-with-styling

Etiquetas de plantilla para añadir clases e IDs

Las clases e IDs que hemos visto para las imágenes son generadas por el propio WordPress. Otras clases e IDs pueden ser generados en el tema mediante etiquetas de plantilla.

Nota: Si no estás familiarizado con las etiquetas de plantilla, echa un vistazo al artículo Etiquetas de plantilla del Codex.

Hay dos conjuntos de etiquetas de plantilla: uno que se aplica a la etiqueta HTML <body> y dos que se aplican a entradas individuales.

La etiqueta de plantilla body_class()

Un tema bien escrito tendrá la siguiente etiqueta en su archivo header.php:

Esto reemplaza la etiqueta <body> habitual. La etiqueta de plantilla body_class() le indica a WordPress que asigne clases a la etiqueta <body> basándose en la página que se esté visualizando y el archivo de plantilla que se esté utilizando desde el tema activo.

La lista de clases que se pueden generar es larga y las puedes encontrar en el Codex de WordPress.

Entre algunos ejemplos se incluyen las siguientes:

  • .home para la página de inicio
  • .single-postid-{ID} cuando se visualiza una sola entrada, donde ID es el ID numérico de esa entrada
  • .archive para cualquier página de archivo
  • .page-template-{filename}-php cuando se utiliza una plantilla de página personalizada

Si deseas añadir clases adicionales a la etiqueta <body> que no son generadas por WordPress, puedes hacerlo. Por ejemplo, para añadir la clase "hello", el código sería:

De esta manera puedes añadir tantas clases como desees, simplemente, sepáralas unas de otras mediante un espacio en blanco.

Puedes utilizar las clases generadas por la etiqueta body_class() para añadir un estilo específico a una ubicación determinada en el sitio, a un archivo de plantilla concreto, o a ciertos elementos dentro de ese archivo de plantilla.

Por ejemplo, en mi tema hijo he creado una plantilla de página llamada page-full-width-with-sidebar.php, que está diseñada para mostrar páginas con el contenido a ancho completo y la columna lateral bajo el contenido en lugar de a su derecha. Puedes encontrar esta plantilla de página en el paquete de código.

Usando la etiqueta body_class(), WordPress genera una clase .page-template-page-full-width-with-sidebar-php para la etiqueta <body> (entre otras clases).

Por lo tanto, para aplicar estilo a los elementos de una página con esta plantilla, añade lo siguiente a tu hoja de estilos:

Esto establece el ancho del contenido principal y la barra lateral (#secondary) al 100%, y también alinea los widgets en la barra lateral uno al lado del otro. Puedes ver el efecto en la siguiente captura de pantalla:

wordpress-generated-classes-IDs-5-full-width-page-template

Nota: Si el tema es responsivo, asegúrate de realizar cualquier ajuste en la anchura de los widgets para las pantallas estrechas en tus media queries.

Las etiquetas de plantilla post_class() y post_ID()

Estas etiquetas funcionan de forma similar a la etiqueta body_class(), pero las utilizas con entradas individuales en el bucle en lugar del elemento <body>.

Por ejemplo, en el tema Twenty Twelve, cada entrada del bucle se envuelve en un elemento <article> con estas etiquetas aplicadas:

Esto genera un número de clases basadas en la categoría y el tipo de entrada y un ID basado en el ID numérico de la entrada. Por ejemplo, una entrada en mi sitio de demostración con la categoría de 'red' (rojo) tendrá las siguientes clases e ID generados:

Puedes utilizar estas clases para aplicar estilos distintos a las entradas de categorías individuales. En el sitio de demostración hay tres categorías configuradas: 'red', 'blue' e 'important'.

Para aplicarles estilo, añade el siguiente CSS a la hoja de estilos del tema:

Esto añade estilo a cada una de las categorías: un borde de color para cada una de las categorías de color y un margen adicional para la categoría "importante". También utiliza un pseudo-elemento para insertar contenido extra antes de cada entrada perteneciente a la categoría 'important'.

Puedes ver el resultado en la siguiente captura de pantalla.

wordpress-generated-classes-IDs-6-category-styling

Usar clases e IDs con widgets y menús

Cuando los widgets se registran en un tema (o a veces un plugin), las funciones utilizadas pueden incluir código que le indique a WordPress que genere clases e IDs basados en el nombre, el tipo e ID del widget.

Cuando se registran los menús, WordPress puede generar clases basadas en el nombre del menú, la posición de los elementos dentro del menú y la ubicación en el sitio. Puedes utilizar todos estos para aplicar estilo a tus widgets y menús.

Clases e IDs para widgets

Para registrar un área de widgets, utiliza la función register_sidebar() en el archivo functions.php de tu tema. Esto toma los siguientes parámetros:

Existen dos parámetros que generan clases y/o IDs:

  • 'class' => ' '
  • 'before_widget' => '<li id="%1$s">'

El parámetro 'class' permite especificar manualmente una clase para el área del widget. Los ajustes para el parámetro 'before_widget' le indican a WordPress que genere un ID único para cada widget en el área del widget y también una serie de clases para él, que se basará en el tipo de widget que sea.

Por ejemplo, en el sitio de demostración he añadido dos widgets: una lista de entradas y una lista de páginas. Para la lista de entradas se genera el siguiente código HTML:

Para la lista de páginas se genera el siguiente código HTML:

Puede utilizar esto para aplicar estilo a los widgets que muestran las listas de entradas, añadiendo el siguiente CSS a la hoja de estilos del tema:

Esto añade un borde a los widgets que listan páginas, como se muestra en la captura de pantalla:

wordpress-generated-classes-IDs-7-styling-widgets

Nota: Esto funciona en el sitio de demostración porque utiliza un tema hijo del tema twenty twelve, que tiene columnas laterales registradas correctamente. Si estás construyendo tu propio tema, tendrás que añadir la etiqueta register_sidebar() con los anteriores parámetros. Descubre cómo hacerlo en el artículo del Codex asociado.

Clases e IDs para menús

Los menús de navegación se muestran utilizando la etiqueta wp_nav_menu() en el archivo header.php de tu tema. Esto toma una serie de parámetros, como se detalla en el artículo wp_nav_menu.

Uno de estos añade clases e IDs a cada elemento del menú:

Esto añade un ID y varias clases a cada elemento. Las clases se basan en la clase para el propio menú y su ubicación en el sitio. Por ejemplo, cuando el usuario esté en una página del sitio, su entrada en el menú de navegación tendrá la clase .current_page_item.

Puedes usar esto para añadir estilo a la entrada de la página actual en el menú. Por ejemplo, para añadir un subrayado a la página actual, agrega lo siguiente a la hoja de estilos:

Puedes ver el subrayado resultante en la siguiente captura de pantalla (así como el cambio de color que ya está en la hoja de estilos del tema principal):

wordpress-generated-classes-IDs-8-styling-menus

Nota: Como estoy usando un tema hijo del tema twenty twelve, no necesito añadir la etiqueta wp_nav_menu(), ya que esto ya está presente en el tema principal.


Resumen

Como hemos explorado anteriormente, hay una serie de maneras en las que WordPress generará clases e IDs en los elementos de un sitio. Algunas de estas son generadas por WordPress en sí mismo y otras utilizan etiquetas de plantilla o parámetros de función para decirle a WordPress que genere las clases e IDs. Puedes usarlos para aplicar estilo a páginas, menús, widgets, listas de entradas y otros elementos de tu diseño.

Hay muchas otras formas en las que puedes usar estas clases e IDs para aplicar estilo a tus proyectos. Por ejemplo:

  • Puedes crear un sitio con varias secciones distintas, utilizando clases generadas por la etiqueta body_class() para que el contenido de cada sección se vea muy diferente
  • Puedes aplicar un estilo diferente a los listados de entradas individuales en una página de archivo dirigiéndote al ID generado por la etiqueta the_ID()
  • Puedes resaltar los actuales elementos de menú en tu navegación, creando un efecto similar a un botón y usando imágenes, fondos, degradados y más
  • Puedes utilizar una combinación de lo anterior, por ejemplo, aplicar un estilo diferente a ciertos widgets en diferentes áreas del sitio

¡Las posibilidades están únicamente limitadas por tu imaginación!


Recursos

Algunas útiles páginas del Codex sobre los temas tratados en este tutorial:

Advertisement
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.