![\"Modifier](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-164647-61e7698060b2e.png\")
<\/a><\/p>\nMaintenant, vous pouvez ou non avoir besoin d’espace entre eux. Cela n’a pas vraiment d’importance car vous avez le contr\u00f4le sur cela via CSS. Mais vous avez le contr\u00f4le sur la fa\u00e7on dont cela est envoy\u00e9 sur le r\u00e9seau c\u00f4t\u00e9 client.<\/p>\n
Pour ce faire, vous avez besoin de quelques \u00e9l\u00e9ments :<\/p>\n
- \n
- Acc\u00e8s \u00e0 la biblioth\u00e8que DOMDocument de PHP,<\/li>\n
- Compr\u00e9hension de la manipulation de contenu via le crochet the_content de WordPress,<\/strong><\/li>\n
- Une strat\u00e9gie pour la fa\u00e7on dont vous voulez envelopper les images.<\/li>\n<\/ul>\n
Je vais passer en revue chacun d’entre eux dans le code, mais il suffit de dire que je vais envelopper chaque image dans un \u00e9l\u00e9ment de paragraphe. Vous pouvez \u00e9videmment choisir de faire ce que vous voulez.<\/p>\n
Comment faire<\/h3>\n
Tout d’abord, assurez-vous que vous avez d\u00e9clar\u00e9 que vous utilisez le contenu du document DOM au-dessus de votre classe<\/a><\/strong> :<\/p>\n
<?php\n\nnamespace Acme;\n\nuse DOMDocument;\n\nclass AcmeContentSubscriber\n{\n \/\/ ...\n}\n<\/code><\/pre>\nEnsuite, allez-y et cr\u00e9ez un crochet vers the_content<\/a>. La mani\u00e8re dont vous proc\u00e9derez d\u00e9pendra de la mani\u00e8re dont vous avez organis\u00e9 votre code (que ce soit en POO<\/a> ou non). Pour cet exemple, je vais montrer un exemple tr\u00e8s simple de la fa\u00e7on de le faire<\/a><\/strong> :<\/p>\n
<?php\n\npublic function contentSubscriber()\n{\n add_action( 'the_content', [$this, 'addImageAttributes']);\n}\n<\/code><\/pre>\nApr\u00e8s cela, vous devrez faire un peu de travail (tout cela est ci-dessous mais en dehors de la port\u00e9e de cet article). Ceci comprend:<\/p>\n
- \n
- convertir l’encodage des entit\u00e9s HTML,<\/li>\n
- cr\u00e9er une instance du document DOM,<\/li>\n
- charger le HTML de la publication \u00e0 partir du contenu entrant<\/li>\n<\/ul>\n
Dans le code, cela devrait ressembler \u00e0 ceci<\/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>\nEnsuite, vous devez parcourir les\u00a0 \u00e9l\u00e9ments img<\/strong> et vous assurer que vous d\u00e9finissez un attribut appropri\u00e9. Vous pouvez choisir d’utiliser une classe, vous pouvez choisir d’utiliser un attribut de donn\u00e9es ou vous pouvez choisir d’utiliser autre chose. Cette partie n’a pas d’importance.<\/p>\n
Notez que pour une image donn\u00e9e, vous voudrez v\u00e9rifier que l’\u00e9l\u00e9ment suivant n’est pas un \u00e9l\u00e9ment de paragraphe puisque c’est ce que j’opte pour envelopper l’image. En d’autres termes, si l’\u00e9l\u00e9ment suivant n’est pas un paragraphe, nous envelopperons l’\u00e9l\u00e9ment dans un \u00e9l\u00e9ment paragraphe.<\/p>\n
Pour ce faire, le squelette de la fonction main devrait ressembler \u00e0 ceci<\/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>\nEnsuite, la fonction charg\u00e9e d’envelopper r\u00e9ellement l’\u00e9l\u00e9ment dans un \u00e9l\u00e9ment de paragraphe devrait ressembler \u00e0 ceci<\/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>\nAssurez-vous de lire le DocBlock du code pour comprendre le fonctionnement de la fonction. Tout simplement:<\/p>\n
- \n
- il accepte une instance du document et de l’\u00e9l\u00e9ment image,<\/li>\n
- cr\u00e9e un \u00e9l\u00e9ment de paragraphe,<\/li>\n
- ajoute un attribut de classe<\/li>\n
- remplace l’\u00e9l\u00e9ment original de l’image par le paragraphe,<\/li>\n
- et ajoute l’image en tant qu’\u00e9l\u00e9ment enfant<\/li>\n<\/ul>\n
Et puisque nous avons bas\u00e9 l’objet document dans la m\u00e9thode, nous n’avons rien \u00e0 renvoyer.<\/p>\n
- Une strat\u00e9gie pour la fa\u00e7on dont vous voulez envelopper les images.<\/li>\n<\/ul>\n