✅ Noticias, temas, complementos de WEB y WordPress. Aquí compartimos consejos y las mejores soluciones para sitios web.

Agregar atributos de imagen de WordPress personalizados

20

Cuando se trata de trabajar con the_content, es sencillo.

  1. Configura un filtro que esté conectado a the_content,
  2. definir una función que acepte el contenido de la publicación entrante,
  3. haz tus cambios,
  4. devolver el contenido modificado.

Y la mayoría de las veces, esto es todo lo que se necesita. Pero hay momentos en los que quizás quieras hacer cosas más avanzadas.

Por ejemplo, tal vez desee incluir contenido de una plantilla externa. O tal vez desee agregar atributos a las imágenes que encuentre en la publicación.

Puede ser difícil hacer esto usando una expresión regular (porque HTML es un lenguaje no regular), pero con la ayuda de DOMDocument de PHP, no está tan mal.

La idea detrás de ese código que estoy a punto de mostrar es la siguiente:

  1. busque  etiquetas img en la publicación,
  2. recorrer todo lo que se encuentre,
  3. agregar los atributos,
  4. guardar el HTML,
  5. devolver el resultado.

Tenga en cuenta que es posible que deba ajustar esto según sus propias necesidades, pero el código básico que necesitará es :

<?php

private function addImageAttributes($content)
{

  $content  = mb_convert_encoding($content, 'HTML-ENTITIES', "UTF-8");
  $document = new DOMDocument();

  libxml_use_internal_errors(true);
  $document->loadHTML(utf8_decode($content));

  $images = $document->getElementsByTagName('img');
  foreach ($images as $image) {
      $image->setAttribute('data-example', 'true');
  }

  return $document->saveHTML();
}

Para aquellos que no están familiarizados con DOMDocument y lo que sucede en el código anterior (como por qué se llaman ciertas funciones antes de procesar el marcado), aquí hay un resumen rápido:

  • mb_convert_encode. Esto tomará la codificación de caracteres de los datos entrantes y la convertirá a UTF-8 (según el código anterior, pero puede ser algo diferente).
  • libxml_use_internal_errors. Esto desactivará cualquier informe de error y todos nosotros, como programadores, recuperaremos los errores por nuestra cuenta.
  • utf8_decodificación. Esto decodifica la información en una cadena de UTF-8 a ISO-8859-1. La razón por la que hacemos esto es que la mayoría de las páginas tendrán un conjunto de caracteres definido como el segundo y lo necesitamos codificado para el primero para procesarlo.

Dicho esto, también recomiendo leer DOMDocument para obtener más información sobre todo lo que sucede arriba.

No obstante, una vez que use la función como la de arriba, tendrá un atributo de ejemplo de datos personalizado con un valor de verdadero en las imágenes a lo largo de su publicación.

Fuente de grabación: tommcfarlin.com

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More