Modifica i contenitori di immagini sul lato server in WordPress
Ogni volta che crei soluzioni personalizzate per altre persone, potresti trovarti a dover affrontare casi sfumati di come WordPress sta visualizzando il contenuto.
Questo di solito dipende dal tema, almeno un plug-in o dalla combinazione di entrambi. E se hai bisogno di lavorare con le immagini individualmente, allora può essere un po’ una sfida. Il problema anche solo nel provare a scrivere un post come questo è che è difficile persino descrivere una situazione in cui potresti aver bisogno di qualcosa del genere.
Comunque, farò del mio meglio. Cioè, voglio condividere come modificare i contenitori di immagini sul lato server prima di eseguirne il rendering sul lato client e farlo utilizzando la libreria DOMDocument di PHP.
Suona come molto? Spero di poterlo scomporre abbastanza facilmente.
Prima di entrare nel codice, supponiamo che tu ne abbia uno che esegue il rendering di immagini in un singolo elemento di paragrafo (o qualsiasi tipo di elemento a livello di blocco) e devi racchiudere ogni elemento in un tipo di classe in modo da poter accedere tramite CSS o JavaScript.
Dove siamo
Quindi, per cominciare, diciamo che le immagini vengono renderizzate in questo modo:
E devi renderli in questo modo:
Ora, potresti aver bisogno o meno di spazio tra di loro. Non importa perché hai il controllo su questo tramite CSS. Ma hai il controllo su come questo viene inviato attraverso il filo al lato client.
Per fare ciò, hai bisogno di alcune cose:
- Accesso alla libreria DOMDocument di PHP,
- Comprensione di come manipolare i contenuti tramite l’ hook the_content di WordPress,
- Una strategia per come vuoi avvolgere le immagini.
Illustrerò ciascuno di questi nel codice, ma è sufficiente dire che avvolgerò ogni immagine in un elemento di paragrafo. Ovviamente puoi scegliere di fare quello che vuoi.
Come farlo
Innanzitutto, assicurati di aver dichiarato che stai utilizzando il contenuto del documento DOM sopra la tua classe :
<?php
namespace Acme;
use DOMDocument;
class AcmeContentSubscriber
{
// ...
}
Quindi, vai avanti e crea un hook a the_content. Il modo in cui lo fai dipenderà da come hai organizzato il tuo codice (che sia OOP o meno). Per questo esempio, mostrerò un esempio molto semplice di come farlo :
<?php
public function contentSubscriber()
{
add_action( 'the_content', [$this, 'addImageAttributes']);
}
Dopodiché, dovrai fare un po’ di lavoro (che è tutto sotto ma fuori dallo scopo di questo post). Ciò comprende:
- convertire la codifica delle entità HTML,
- creando un’istanza del documento DOM,
- caricamento dell’HTML del post dal contenuto in arrivo
Nel codice dovrebbe apparire così :
<?php
public function addImageAttributes($content)
{
$content = mb_convert_encoding($content, 'HTML-ENTITIES', "UTF-8");
$document = new DOMDocument();
libxml_use_internal_errors(true);
$document->loadHTML(utf8_decode($content));
// ...
}
Successivamente, devi scorrere gli elementi img 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.
Nota che per una determinata immagine, ti consigliamo di verificare che l’elemento successivo non sia un elemento di paragrafo poiché è quello che sto optando per avvolgere l’immagine. In altre parole, se l’elemento successivo non è un paragrafo, avvolgeremo l’elemento in un elemento paragrafo.
Per fare ciò, lo scheletro della funzione principale dovrebbe assomigliare a questo :
<?php
public function addImageAttributes($content)
{
$content = mb_convert_encoding($content, 'HTML-ENTITIES', "UTF-8");
$document = new DOMDocument();
libxml_use_internal_errors(true);
$document->loadHTML(utf8_decode($content));
$images = $document->getElementsByTagName('img');
foreach ($images as $image) {
$image->setAttribute('class', 'acme-iamge');
if ($image->nextSibling->tagName !== 'p') {
$this->wrapImage($document, $image);
}
}
// ...
}
Quindi la funzione responsabile per avvolgere effettivamente l’elemento in un elemento di paragrafo dovrebbe assomigliare a questa :
<?php
/**
* This function is used to wrap individual images in a paragraph element.
*
* @param $document The DOM Document which is to be rendered.
* @param $image The image to wrap with the new paragraph element.
*/
private function wrapImage($document, $image)
{
if (null === $image) {
return;
}
$wrapper = $document->createElement('p');
$wrapper->setAttribute('class', 'acme-image');
$image->parentNode->replaceChild($wrapper, $image);
if (null !== $image) {
$wrapper->appendChild($image);
}
}
Assicurati di leggere il DocBlock del codice per capire come funziona la funzione. In poche parole:
- accetta un’istanza del documento e l’elemento immagine,
- crea un elemento paragrafo,
- aggiunge un attributo di classe
- sostituisce l’elemento dell’immagine originale con il paragrafo,
- e aggiunge l’immagine come elemento figlio
E poiché abbiamo basato l’oggetto del documento nel metodo, non dobbiamo restituire nulla.
La versione finale della funzione originale dovrebbe assomigliare a questa :
<?php
public function addImageAttributes($content)
{
$content = mb_convert_encoding($content, 'HTML-ENTITIES', "UTF-8");
$document = new DOMDocument();
libxml_use_internal_errors(true);
$document->loadHTML(utf8_decode($content));
$images = $document->getElementsByTagName('img');
foreach ($images as $image) {
$image->setAttribute('class', 'acme-image');
if ($image->nextSibling->tagName !== 'p') {
$this->wrapImage($document, $image);
}
}
return $document->saveHTML();
}
E il tuo output dovrebbe assomigliare all’immagine sopra. Ricorda, però; devi restituire i risultati dell’istanza del documento a WordPress, quindi esegue correttamente il rendering dell’HTML. Ed è ciò che sta facendo la funzione saveHTML nel codice sopra.