![\"Modificar](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-164647-61e7698060b2e.png\")
<\/a><\/p>\nAhora, puede o no necesitar espacio entre ellos. Realmente no importa porque tienes control sobre esto a trav\u00e9s de CSS. Pero usted tiene control sobre c\u00f3mo se env\u00eda esto a trav\u00e9s del cable al lado del cliente.<\/p>\n
Para hacer esto, necesitas algunas cosas:<\/p>\n
- \n
- Acceso a la biblioteca DOMDocument de PHP,<\/li>\n
- Comprensi\u00f3n de c\u00f3mo manipular el contenido a trav\u00e9s del gancho the_content de WordPress,<\/strong><\/li>\n
- Una estrategia sobre c\u00f3mo desea envolver las im\u00e1genes.<\/li>\n<\/ul>\n
Revisar\u00e9 cada uno de estos en el c\u00f3digo, pero baste decir que voy a envolver cada imagen en un elemento de p\u00e1rrafo. Obviamente, puedes optar por hacer lo que quieras.<\/p>\n
C\u00f3mo hacerlo<\/h3>\n
Primero, aseg\u00farese de haber declarado que est\u00e1 usando el contenido del documento DOM sobre su clase<\/a><\/strong> :<\/p>\n
<?php\n\nnamespace Acme;\n\nuse DOMDocument;\n\nclass AcmeContentSubscriber\n{\n \/\/ ...\n}\n<\/code><\/pre>\nA continuaci\u00f3n, contin\u00fae y cree un gancho para the_content<\/a>. La forma en que lo haga depender\u00e1 de c\u00f3mo haya organizado su c\u00f3digo (ya sea OOP<\/a> o no). Para este ejemplo, voy a mostrar un ejemplo muy simple de c\u00f3mo hacerlo<\/a><\/strong> :<\/p>\n
<?php\n\npublic function contentSubscriber()\n{\n add_action( 'the_content', [$this, 'addImageAttributes']);\n}\n<\/code><\/pre>\nDespu\u00e9s de eso, deber\u00e1 trabajar un poco (todo lo cual se encuentra a continuaci\u00f3n pero fuera del alcance de esta publicaci\u00f3n). Esto incluye:<\/p>\n
- \n
- convertir la codificaci\u00f3n de las entidades HTML,<\/li>\n
- creando una instancia del documento DOM,<\/li>\n
- cargando el HTML de la publicaci\u00f3n desde el contenido entrante<\/li>\n<\/ul>\n
En el c\u00f3digo, deber\u00eda verse as\u00ed<\/a><\/strong> :<\/p>\n
<?php\n\npublic 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 \/\/ ...\n}\n<\/code><\/pre>\nA continuaci\u00f3n, debe iterar a trav\u00e9s de los\u00a0 elementos img<\/strong> y asegurarse de que est\u00e1 configurando un atributo adecuado. Puede optar por utilizar una clase, puede optar por utilizar un atributo de datos o puede optar por utilizar otra cosa. Esta parte no importa.<\/p>\n
Tenga en cuenta que para una imagen dada, querr\u00e1 verificar que el siguiente elemento no sea un elemento de p\u00e1rrafo, ya que eso es lo que estoy optando por envolver la imagen. En otras palabras, si el siguiente elemento no es un p\u00e1rrafo, envolveremos el elemento en un elemento de p\u00e1rrafo.<\/p>\n
Para hacer esto, el esqueleto de la funci\u00f3n principal deber\u00eda verse as\u00ed<\/a><\/strong> :<\/p>\n
<?php\n\npublic 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('class', 'acme-iamge');\n if ($image->nextSibling->tagName !== 'p') {\n $this->wrapImage($document, $image);\n }\n }\n\n \/\/ ...\n}\n<\/code><\/pre>\n
- Una estrategia sobre c\u00f3mo desea envolver las im\u00e1genes.<\/li>\n<\/ul>\n