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.
|
1 |
<body> |
Para añadir la etiqueta de plantilla, edítala de manera que tenga el siguiente aspecto:
|
1 |
<body <?php body_class(); ?>> |
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:
|
1 |
<body class="home page-template page-template-page-full-width page-template-page-full-width-php page page-id-7"> |
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.
|
1 |
<body class="archive category category-basics category-154"> |
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:
|
1 |
de entrada con clase añadida. " ><body class="post-template-default single single-post postid-3522 single-format-standard"> |
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:
|
1 2 3 4 5 6 7 |
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <article> <!-- contents of loop --> </article> <?php endwhile; endif; ?> |
Pero tras añadir las etiquetas de plantilla, su aspecto será el siguiente:
|
1 2 3 4 5 6 7 |
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <!-- contents of loop --> </article> <?php endwhile; endif; ?> |
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 abody_class().
Echemos un vistazo al código que generan.
Primero, en la página de inicio:
|
1 |
<article id="post-7" class="post-7 page type-page status-publish has-post-thumbnail hentry"> |
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-pagenos indica que es el tipo de entrada ‘page’.status-publishnos indica que esta página ha sido publicada.has-post-thumbnailnos 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.hentryes 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:
|
1 |
<article id="post-3522" class="post-3522 post type-post status-publish format-standard has-post-thumbnail hentry category-basics category-featured category-roundups tag-admin tag-content-management tag-hosting tag-installing-wordpress tag-performance tag-plugins tag-security tag-seo tag-site-management tag-themes tag-wordpress-com">¡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:
|
1 |
<article id="post-3522" class="post-3522 post type-post status-publish format-standard has-post-thumbnail hentry category-basics category-featured category-roundups tag-admin tag-content-management tag-hosting tag-installing-wordpress tag-performance tag-plugins tag-security tag-seo tag-site-management tag-themes tag-wordpress-com"> |
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.
Lo que te queda por leer:
-
Usar estilos generados en tu hoja de estilos
-
Las etiquetas de plantilla de WordPress combinadas con CSS pueden ser muy potentes
Deja una respuesta