Con la llegada de la versión 6.2, WordPress ha enriquecido su repertorio con una clase de gran impacto en el desarrollo web, conocida como la API HTML (WP_HTML_Tag_Processor), marcando un cambio significativo en la edición de HTML.
La manipulación de HTML en WordPress siempre ha sido un desafío, con opciones que iban desde las complejas expresiones regulares hasta la clase PHP DOMDocument, conocida por su alto consumo de recursos y limitaciones con el HTML moderno.
En esta publicación, nos sumergimos en ejemplos prácticos que ilustran cómo la API HTML simplifica y agiliza la modificación de atributos en las etiquetas HTML. A través de estos dos ejemplos, veremos la capacidad única de WP_HTML_Tag_Processor para permitir ajustes precisos y mejorar la experiencia de desarrollo en WordPress.
Automatización de atributos en etiquetas <a> con la API HTML de WordPress
A veces, cuando heredas proyectos, hay que buscar soluciones a situaciones nuevas que no se habían contemplado. En este escenario específico, nos enfrentamos a un campo personalizado: un editor visual de HTML (WYSIWYG) donde los usuarios pueden insertar enlaces. Siguiendo las directrices clave de nuestro equipo de SEO, necesitamos añadir los atributos target=”_blank” rel=”noreferer noopener nofollow” a dichos enlaces.
Dado que ya contamos con varios contenidos previamente creados, y conocemos el módulo (template-parts) responsable de su inserción, la solución más eficiente es añadir estos atributos mediante código. Esto nos permite evitar la tediosa tarea de editar manualmente cada contenido existente, y asegura la consistencia en caso de que los gestores de contenido olviden aplicar estas modificaciones.
Para abordar este desafío, recurrimos a la API HTML de WordPress (WP_HTML_Tag_Processor), aplicándola de la siguiente manera:
// Si el texto del editor Wysiwyg (ACF) no esta vacío.
if ( $html_campo = get_sub_field('html_campo') ) {
$html = new WP_HTML_Tag_Processor($html_campo);
if ( $html->next_tag( 'A' ) ) {
// Si no tiene el atributo rel, se lo añadimos con los parámetros.
if ( empty( $html->get_attribute( 'rel' ) ) ) {
$html->set_attribute( 'rel', 'noreferer noopener nofollow' );
}
// Si no tiene el atributo target, se lo añadimos con los parámetros.
if ( empty( $html->get_attribute( 'target' ) ) ) {
$html->set_attribute( 'target', '_blank' );
}
echo $html->get_updated_html();
}
}Este bloque de código PHP utiliza la clase WP_HTML_Tag_Processor de WordPress para modificar los atributos de las etiquetas <a> dentro de un campo personalizado del tipo editor WYSIWYG (por ejemplo, un campo creado con Advanced Custom Fields – ACF).
- Verificación del Contenido del Campo: El código primero verifica si hay contenido en el campo
html_campocon subfield de ACF. Si está vacío, no se ejecutará ninguna acción. - Creación del Objeto
WP_HTML_Tag_Processor: Se crea un objeto WP_HTML_Tag_Processor, pasándole el HTML del campohtml_campo. Este objeto facilita la manipulación de las etiquetas HTML. - Búsqueda de la Etiqueta
<a>: Se busca la primera etiqueta<a>en el contenido del campo. Si se encuentra una, se procede con las siguientes instrucciones. - Modificación del Atributo
rel: El código verifica si la etiqueta<a>actual tiene un atributo rel. Si no lo tiene, se añade el atributorelcon los valores «noreferer noopener nofollow». - Modificación del Atributo
target: De manera similar, se verifica si la etiqueta<a>tiene un atributotarget. Si está ausente, se añade el atributotargetcon el valor «_blank». - Impresión del HTML Modificado: Finalmente, se imprime el HTML actualizado con las modificaciones realizadas a los enlaces.
Este código automatiza la adición de atributos importantes a las etiquetas <a> en un campo WYSIWYG, asegurando que todos los enlaces cumplan con las recomendaciones del equipo de SEO sin necesidad de editar manualmente cada enlace existente.
Añadiendo Automáticamente el Atributo ALT a Imágenes con WP_HTML_Tag_Processor
Además de mejorar enlaces, la API de WordPress WP_HTML_Tag_Processor también puede ser una herramienta valiosa para aumentar la accesibilidad de tu sitio web, específicamente a través de la gestión de imágenes. Un uso crucial de esta API es la implementación automática de textos descriptivos en el atributo ALT de las imágenes, especialmente cuando este se encuentra vacío.
Por ejemplo, consideremos el siguiente código:
$html = '<img src="/wordpress.jpg">';
$img = new WP_HTML_Tag_Processor( $html );
if ( $img->next_tag( 'img' ) && empty( $img->get_attribute( 'alt' ) ) {
$img->set_attribute( 'alt', 'Texto descriptivo' );
}
echo $img->get_updated_html();
// Output: <img src="/wordpress.jpg" alt="Texto descriptivo" >En este caso, utilizamos WP_HTML_Tag_Processor para buscar una etiqueta <img> y verificar si el atributo ALT está vacío. Si es así, automáticamente añadimos un texto descriptivo. Este enfoque no solo mejora la accesibilidad, sino que también beneficia al SEO.
Adicionalmente, esta técnica puede extenderse para ajustar otros atributos de las imágenes, como loading y fetchpriority, optimizando así la carga de la página y mejorando la experiencia del usuario. Estas modificaciones pueden ser fundamentales para sitios web que buscan maximizar su rendimiento y accesibilidad.
Para complementar estas prácticas, es útil tener una visión clara de la situación actual de tu sitio en cuanto a la implementación de atributos ALT en imágenes.
En este sentido, ofrecemos una solución práctica. Hemos desarrollado un plugin que permite identificar de manera sencilla cuántas imágenes en tu sitio WordPress tienen el atributo ALT vacío. Este plugin está diseñado para ofrecerte una perspectiva rápida y precisa, facilitando así la gestión eficiente de la accesibilidad y el SEO de tu sitio.
Conclusión
La API HTML WP_HTML_Tag_Processor de WordPress ofrece una solución robusta y eficiente para mejorar aspectos cruciales de tu sitio web, como la accesibilidad y el rendimiento de SEO.
A través de ejemplos prácticos como la adición automática de atributos a las etiquetas <a> y <img>, hemos visto cómo esta herramienta puede simplificar y automatizar tareas que de otra manera serían más laboriosas y propensas a errores.
Al adoptar este enfoque no solo mejoraremos los tiempos de desarrollo, sino que también aseguramos una mayor coherencia y calidad en todo el sitio web.
Entendemos que la manipulación del código puede ser un desafío, especialmente si prefieres centrarte en otros aspectos de tu negocio.
Si estás buscando asistencia profesional sin tener que involucrarte en detalles técnicos, nuestro servicio de desarrollador WordPress para empresas está aquí para ayudarte. Con un enfoque personalizado y experto, nos encargamos de todas tus necesidades de desarrollo web, permitiéndote concentrarte en lo que mejor sabes hacer.
