![\"Modificar](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-164647-61e7698060b2e.png\")
<\/a><\/p>\nAgora, voc\u00ea pode ou n\u00e3o precisar de espa\u00e7o entre eles. Isso realmente n\u00e3o importa porque voc\u00ea tem controle sobre isso via CSS. Mas voc\u00ea tem controle sobre como isso \u00e9 enviado pela rede para o lado do cliente.<\/p>\n
Para fazer isso, voc\u00ea precisa de algumas coisas:<\/p>\n
- \n
- Acesso \u00e0 biblioteca DOMDocument do PHP,<\/li>\n
- Compreens\u00e3o de como manipular conte\u00fado atrav\u00e9s do gancho the_content do WordPress,<\/strong><\/li>\n
- Uma estrat\u00e9gia de como voc\u00ea deseja envolver as imagens.<\/li>\n<\/ul>\n
Vou percorrer cada uma delas no c\u00f3digo, mas basta dizer que vou envolver cada imagem em um elemento de par\u00e1grafo. Obviamente, voc\u00ea pode optar por fazer o que quiser.<\/p>\n
Como fazer isso<\/h3>\n
Primeiro, certifique-se de ter declarado que est\u00e1 usando o conte\u00fado do documento DOM acima de sua classe<\/a><\/strong> :<\/p>\n
<?php\n\nnamespace Acme;\n\nuse DOMDocument;\n\nclass AcmeContentSubscriber\n{\n \/\/ ...\n}\n<\/code><\/pre>\nEm seguida, v\u00e1 em frente e crie um gancho para the_content<\/a>. Como voc\u00ea faz isso depender\u00e1 de como voc\u00ea organizou seu c\u00f3digo (seja OOP<\/a> ou n\u00e3o). Para este exemplo, vou mostrar um exemplo muito simples de como fazer isso<\/a><\/strong> :<\/p>\n
<?php\n\npublic function contentSubscriber()\n{\n add_action( 'the_content', [$this, 'addImageAttributes']);\n}\n<\/code><\/pre>\nDepois disso, voc\u00ea precisar\u00e1 fazer um pouco de trabalho (tudo o que est\u00e1 abaixo, mas fora do escopo deste post). Isso inclui:<\/p>\n
- \n
- convertendo a codifica\u00e7\u00e3o das entidades HTML,<\/li>\n
- criando uma inst\u00e2ncia do documento DOM,<\/li>\n
- carregando o HTML da postagem do conte\u00fado recebido<\/li>\n<\/ul>\n
No c\u00f3digo, deve ficar assim<\/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>\nEm seguida, voc\u00ea precisa percorrer os\u00a0 elementos img<\/strong> e certificar-se de que est\u00e1 configurando um atributo adequado. Voc\u00ea pode optar por usar uma classe, pode optar por usar um atributo de dados ou pode optar por usar outra coisa. Essa parte n\u00e3o importa.<\/p>\n
Observe que, para uma determinada imagem, voc\u00ea desejar\u00e1 verificar se o pr\u00f3ximo elemento n\u00e3o \u00e9 um elemento de par\u00e1grafo, pois \u00e9 isso que estou optando por envolver a imagem. Em outras palavras, se o pr\u00f3ximo elemento n\u00e3o for um par\u00e1grafo, envolveremos o elemento em um elemento de par\u00e1grafo.<\/p>\n
Para fazer isso, o esqueleto da fun\u00e7\u00e3o principal deve ficar assim<\/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>\nEnt\u00e3o a fun\u00e7\u00e3o respons\u00e1vel por realmente envolver o elemento em um elemento de par\u00e1grafo deve ficar assim<\/a><\/strong> :<\/p>\n
<?php\n\n\/**\n * This function is used to wrap individual images in a paragraph element.\n *\n * @param $document The DOM Document which is to be rendered.\n * @param $image The image to wrap with the new paragraph element.\n *\/\nprivate function wrapImage($document, $image)\n{\n if (null === $image) {\n return;\n }\n $wrapper = $document->createElement('p');\n $wrapper->setAttribute('class', 'acme-image');\n\n $image->parentNode->replaceChild($wrapper, $image);\n if (null !== $image) {\n $wrapper->appendChild($image);\n }\n}\n<\/code><\/pre>\nCertifique-se de ler o DocBlock do c\u00f3digo para entender como a fun\u00e7\u00e3o funciona. Basta colocar:<\/p>\n
- \n
- ele aceita uma inst\u00e2ncia do documento e o elemento de imagem,<\/li>\n
- cria um elemento de par\u00e1grafo,<\/li>\n
- adiciona um atributo de classe<\/li>\n
- substitui o elemento da imagem original pelo par\u00e1grafo,<\/li>\n
- e adiciona a imagem como um elemento filho<\/li>\n<\/ul>\n
E como baseamos o objeto de documento no m\u00e9todo, n\u00e3o precisamos retornar nada.<\/p>\n
- Uma estrat\u00e9gia de como voc\u00ea deseja envolver as imagens.<\/li>\n<\/ul>\n