{"id":229465,"date":"2022-11-12T18:16:00","date_gmt":"2022-11-12T15:16:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229465"},"modified":"2022-11-09T07:12:18","modified_gmt":"2022-11-09T04:12:18","slug":"agregar-atributos-de-imagen-de-wordpress-personalizados","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/agregar-atributos-de-imagen-de-wordpress-personalizados\/","title":{"rendered":"Agregar atributos de imagen de WordPress personalizados"},"content":{"rendered":"

Cuando se trata de trabajar con the_content<\/strong>, es sencillo.<\/p>\n

    \n
  1. Configura un filtro que est\u00e9 conectado a the_content,<\/strong><\/li>\n
  2. definir una funci\u00f3n que acepte el contenido de la publicaci\u00f3n entrante,<\/li>\n
  3. haz tus cambios,<\/li>\n
  4. devolver el contenido modificado.<\/li>\n<\/ol>\n

    Y la mayor\u00eda de las veces, esto es todo lo que se necesita. Pero hay momentos en los que quiz\u00e1s quieras hacer cosas m\u00e1s avanzadas.<\/p>\n

    Por ejemplo, tal vez desee incluir contenido de una plantilla externa<\/a>. O tal vez desee agregar atributos a las im\u00e1genes que encuentre en la publicaci\u00f3n.<\/p>\n

    Puede ser dif\u00edcil hacer esto usando una expresi\u00f3n regular (porque HTML es un lenguaje no regular), pero con la ayuda de DOMDocument<\/a> de PHP, no est\u00e1 tan mal.<\/p>\n

    La idea detr\u00e1s de ese c\u00f3digo que estoy a punto de mostrar es la siguiente:<\/p>\n

      \n
    1. busque\u00a0 etiquetas img<\/strong> en la publicaci\u00f3n,<\/li>\n
    2. recorrer todo lo que se encuentre,<\/li>\n
    3. agregar los atributos,<\/li>\n
    4. guardar el HTML,<\/li>\n
    5. devolver el resultado.<\/li>\n<\/ol>\n

      Tenga en cuenta que es posible que deba ajustar esto seg\u00fan sus propias necesidades, pero el c\u00f3digo b\u00e1sico que necesitar\u00e1 es<\/a> :<\/p>\n

      <?php\n\nprivate function addImageAttributes($content)\n{\n\n  $content  = mb_convert_encoding($content, 'HTML-ENTITIES', \"UTF-8\");\n  $document = new DOMDocument();\n\n  libxml_use_internal_errors(true);\n  $document->loadHTML(utf8_decode($content));\n\n  $images = $document->getElementsByTagName('img');\n  foreach ($images as $image) {\n      $image->setAttribute('data-example', 'true');\n  }\n\n  return $document->saveHTML();\n}<\/code><\/pre>\n
      Para aquellos que no est\u00e1n familiarizados con DOMDocument y lo que sucede en el c\u00f3digo anterior (como por qu\u00e9 se llaman ciertas funciones antes de procesar el marcado), aqu\u00ed hay un resumen r\u00e1pido:<\/p>\n