![\"Modifica](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-164647-61e7698060b2e.png\")
<\/a><\/p>\nOra, potresti aver bisogno o meno di spazio tra di loro. Non importa perch\u00e9 hai il controllo su questo tramite CSS. Ma hai il controllo su come questo viene inviato attraverso il filo al lato client.<\/p>\n
Per fare ci\u00f2, hai bisogno di alcune cose:<\/p>\n
- \n
- Accesso alla libreria DOMDocument di PHP,<\/li>\n
- Comprensione di come manipolare i contenuti tramite l’ hook the_content di WordPress,<\/strong><\/li>\n
- Una strategia per come vuoi avvolgere le immagini.<\/li>\n<\/ul>\n
Illustrer\u00f2 ciascuno di questi nel codice, ma \u00e8 sufficiente dire che avvolger\u00f2 ogni immagine in un elemento di paragrafo. Ovviamente puoi scegliere di fare quello che vuoi.<\/p>\n
Come farlo<\/h3>\n
Innanzitutto, assicurati di aver dichiarato che stai utilizzando il contenuto del documento DOM sopra la tua classe<\/a><\/strong> :<\/p>\n
<?php\n\nnamespace Acme;\n\nuse DOMDocument;\n\nclass AcmeContentSubscriber\n{\n \/\/ ...\n}\n<\/code><\/pre>\nQuindi, vai avanti e crea un hook a the_content<\/a>. Il modo in cui lo fai dipender\u00e0 da come hai organizzato il tuo codice (che sia OOP<\/a> o meno). Per questo esempio, mostrer\u00f2 un esempio molto semplice di come farlo<\/a><\/strong> :<\/p>\n
<?php\n\npublic function contentSubscriber()\n{\n add_action( 'the_content', [$this, 'addImageAttributes']);\n}\n<\/code><\/pre>\nDopodich\u00e9, dovrai fare un po’ di lavoro (che \u00e8 tutto sotto ma fuori dallo scopo di questo post). Ci\u00f2 comprende:<\/p>\n
- \n
- convertire la codifica delle entit\u00e0 HTML,<\/li>\n
- creando un’istanza del documento DOM,<\/li>\n
- caricamento dell’HTML del post dal contenuto in arrivo<\/li>\n<\/ul>\n
Nel codice dovrebbe apparire cos\u00ec<\/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>\nSuccessivamente, devi scorrere gli\u00a0 elementi img<\/strong> e assicurarti di impostare un attributo corretto. Puoi scegliere di utilizzare una classe, puoi scegliere di utilizzare un attributo di dati o puoi scegliere di utilizzare qualcos’altro. Questa parte non ha importanza.<\/p>\n
Nota che per una determinata immagine, ti consigliamo di verificare che l’elemento successivo non sia un elemento di paragrafo poich\u00e9 \u00e8 quello che sto optando per avvolgere l’immagine. In altre parole, se l’elemento successivo non \u00e8 un paragrafo, avvolgeremo l’elemento in un elemento paragrafo.<\/p>\n
Per fare ci\u00f2, lo scheletro della funzione principale dovrebbe assomigliare a questo<\/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>\nQuindi la funzione responsabile per avvolgere effettivamente l’elemento in un elemento di paragrafo dovrebbe assomigliare a questa<\/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>\nAssicurati di leggere il DocBlock del codice per capire come funziona la funzione. In poche parole:<\/p>\n
- \n
- accetta un’istanza del documento e l’elemento immagine,<\/li>\n
- crea un elemento paragrafo,<\/li>\n
- aggiunge un attributo di classe<\/li>\n
- sostituisce l’elemento dell’immagine originale con il paragrafo,<\/li>\n
- e aggiunge l’immagine come elemento figlio<\/li>\n<\/ul>\n
E poich\u00e9 abbiamo basato l’oggetto del documento nel metodo, non dobbiamo restituire nulla.<\/p>\n
- Una strategia per come vuoi avvolgere le immagini.<\/li>\n<\/ul>\n