Cuando tienes una web en HTML y tienes que modificar o añadir atributos a cualquier parte del código es sencillo, simplemente abres el archivo .html y lo editas. Fin de la película.
Ahora bien, ¿qué pasa con WordPress o cualquier otro CSMS?
Lo que pasa es que WordPress no crea archivos .html, de hecho el HTML que lee el navegador de tus visitantes no existe hasta el preciso momento en el que visitan una URL, y entonces WordPress, mediante su programación, crea en tiempo real el HTML que el navegador del visitante puede leer, interpretar, y mostrar al usuario.
La única salvedad de esta situación es cuando usas caché, pues se generan previamente los ficheros HTML, pero sigue siendo sobre una base única, y conjunta, en principio no existe un fichero .html para cada URL de tu web.
Otra situación que se suele dar es que necesites modificar las páginas o entradas para añadir o modificar elementos de las mismas, en cuyo caso lo que haremos habitualmente es modificar la plantilla (single.php, page.php) pertinente del tema activo, o incluso crear una nueva plantilla de página o plantilla de entrada.
Eso está muy bien, pero ¿y si tengo que modificar o añadir atributos a la cabecera o cualquier otra parte del HTML de una página en concreto, no de todas?
En este caso, es verdad, podríamos crear una plantilla de página que únicamente usemos para «esa» página pero es una demasía, sobre todo si podemos usar ganchos para añadir atributos a la cabecera – y cualquier parte – de una página, entrada o lo que haga falta.
Igual piensas que esto no se usa mucho pero no es así, en montones de ocasiones hay que añadir atributos personalizados a la cabecera (head) o cuerpo (body) de una página concreta, a efectos de seguimiento, para mostrar ciertos scripts, y montones de situaciones más, que con el tiempo te encontrarás.
Añadir atributos a la cabecera de una única página
Una vez que tenemos claro el objetivo, y lo que queremos, solo quedaría crear una función que «filtre» con la parte del HTML en la que queremos añadir los atributos, indicarle en qué página queremos que se añadan, y añadirlos.
En este ejemplo voy a añadir 2 atributos personalizados (destacados en rojo) al body de una página. Para ello engancharemos con el filtro body_class de WordPress, al que añadiremos mediante el comando echo los atributos. Solo hay que añadirle antes el condicional indicando a qué página (slug o ID) añadirlo y lo tenemos.
Un código como el siguiente lo conseguirá:
/* Añade atributos personalizados a pagina específica */
add_filter('body_class', 'ayudawp_atributos_personalizados_en_body');
function ayudawp_atributos_personalizados_en_body ($classes) {
if (is_page("slug-de-mi-pagina")){echo 'data-region="direct-book" data-channelcode="WebCursosWP"';}
return $classes;
}El código anterior podemos agregarlo al archivo functions.php del tema activo, como plugin personalizado o mediante un plugin de inserción de fragmentos de código.
Una vez guardes los cambios, los atributos se añadirán al body de la página indicada, pudiendo comprobarlo viendo el código fuente.
Ah, perdona, que me lo he pensado mejor ¿se puede usar este truco para añadir atributos a la cabecera de toda la web?
Pues claro, simplemente no incluyas el condicional, o sea, que sería algo así:
/* Añade atributos personalizados a todas las páginas */
add_filter('body_class', 'ayudawp_atributos_personalizados_en_body');
function ayudawp_atributos_personalizados_en_body ($classes) {
{echo 'data-region="direct-book" data-channelcode="WebCursosWP"';}
return $classes;
}Ah, que lo que yo quiero es añadir clases personalizadas, no atributos
Si en vez de añadir atributos lo que necesitas es añadir clases CSS específicas, entonces un código que te servirá de referencia sería el siguiente:
/* Clases CSS personalizadas a tag body */
function ayudawp_clase_css_body($wp_classes, $classes)
{
$post = get_post();
//Clase CSS a toda la web
$classes[] .= 'mi-clase-css';
// Clase CSS solo a las páginas
if (is_page()) {
$classes[] = 'mi-clase-css-paginas';
}
// Clase CSS solo para entradas y otros cpt
if (is_singular()) {
$classes[] = 'mi-clase-css-posts';
}
return array_merge($wp_classes, (array)$classes);
}
add_filter('body_class', 'ayudawp_clase_css_body', PHP_INT_MAX, 2);En estos ejemplos se añadirán nuestras clases a la etiqueta class= de la tag body de nuestra web.
Fácil ¿verdad?
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
