Modifier les conteneurs d’images côté serveur dans WordPress
Chaque fois que vous créez des solutions personnalisées pour d’autres personnes, vous devrez peut-être faire face à des cas nuancés de la façon dont WordPress rend le contenu.
Cela se résume généralement au thème, au moins un plugin, ou à la combinaison des deux. Et si vous devez travailler avec des images individuellement, cela peut être un peu difficile. Le problème même d’essayer d’écrire un message comme celui-ci est qu’il est même difficile de décrire une situation dans laquelle vous pourriez avoir besoin de quelque chose comme ça.
Même quand même, je vais faire du mieux que je peux. Autrement dit, je veux partager comment modifier les conteneurs d’images côté serveur avant de les rendre côté client et le faire en utilisant la bibliothèque DOMDocument de PHP.
Cela vous semble beaucoup ? J’espère que je peux décomposer cela assez facilement.
Avant d’entrer dans le code, disons que vous avez un eux qui rend les images dans un seul élément de paragraphe (ou tout type d’élément de niveau bloc) et que vous devez envelopper chaque élément dans un certain type de classe afin que vous puissiez accéder via CSS ou JavaScript.
Où nous sommes
Donc, pour commencer, disons que les images s’affichent comme ceci :
Et vous devez les rendre comme ceci :
Maintenant, vous pouvez ou non avoir besoin d’espace entre eux. Cela n’a pas vraiment d’importance car vous avez le contrôle sur cela via CSS. Mais vous avez le contrôle sur la façon dont cela est envoyé sur le réseau côté client.
Pour ce faire, vous avez besoin de quelques éléments :
- Accès à la bibliothèque DOMDocument de PHP,
- Compréhension de la manipulation de contenu via le crochet the_content de WordPress,
- Une stratégie pour la façon dont vous voulez envelopper les images.
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 élément de paragraphe. Vous pouvez évidemment choisir de faire ce que vous voulez.
Comment faire
Tout d’abord, assurez-vous que vous avez déclaré que vous utilisez le contenu du document DOM au-dessus de votre classe :
<?php
namespace Acme;
use DOMDocument;
class AcmeContentSubscriber
{
// ...
}
Ensuite, allez-y et créez un crochet vers the_content. La manière dont vous procéderez dépendra de la manière dont vous avez organisé votre code (que ce soit en POO ou non). Pour cet exemple, je vais montrer un exemple très simple de la façon de le faire :
<?php
public function contentSubscriber()
{
add_action( 'the_content', [$this, 'addImageAttributes']);
}
Après cela, vous devrez faire un peu de travail (tout cela est ci-dessous mais en dehors de la portée de cet article). Ceci comprend:
- convertir l’encodage des entités HTML,
- créer une instance du document DOM,
- charger le HTML de la publication à partir du contenu entrant
Dans le code, cela devrait ressembler à ceci :
<?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));
// ...
}
Ensuite, vous devez parcourir les éléments img et vous assurer que vous définissez un attribut approprié. Vous pouvez choisir d’utiliser une classe, vous pouvez choisir d’utiliser un attribut de données ou vous pouvez choisir d’utiliser autre chose. Cette partie n’a pas d’importance.
Notez que pour une image donnée, vous voudrez vérifier que l’élément suivant n’est pas un élément de paragraphe puisque c’est ce que j’opte pour envelopper l’image. En d’autres termes, si l’élément suivant n’est pas un paragraphe, nous envelopperons l’élément dans un élément paragraphe.
Pour ce faire, le squelette de la fonction main devrait ressembler à ceci :
<?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);
}
}
// ...
}
Ensuite, la fonction chargée d’envelopper réellement l’élément dans un élément de paragraphe devrait ressembler à ceci :
<?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);
}
}
Assurez-vous de lire le DocBlock du code pour comprendre le fonctionnement de la fonction. Tout simplement:
- il accepte une instance du document et de l’élément image,
- crée un élément de paragraphe,
- ajoute un attribut de classe
- remplace l’élément original de l’image par le paragraphe,
- et ajoute l’image en tant qu’élément enfant
Et puisque nous avons basé l’objet document dans la méthode, nous n’avons rien à renvoyer.
La version finale de la fonction originale devrait ressembler à ceci :
<?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();
}
Et votre sortie devrait ressembler à l’image ci-dessus. Rappelez-vous, cependant; vous devez renvoyer les résultats de l’instance de document à WordPress, afin qu’il restitue correctement le code HTML. Et c’est ce que fait la fonction saveHTML dans le code ci-dessus.