Ändern Sie Image-Container auf der Serverseite in WordPress
Wann immer Sie benutzerdefinierte Lösungen für andere erstellen, müssen Sie sich möglicherweise mit nuancierten Fällen auseinandersetzen, wie WordPress den Inhalt wiedergibt.
Dies hängt normalerweise vom Thema, mindestens einem Plugin oder der Kombination aus beidem ab. Und wenn Sie mit Bildern einzeln arbeiten müssen, kann dies eine kleine Herausforderung sein. Das Problem beim Versuch, einen Beitrag wie diesen zu schreiben, ist, dass es schwierig ist, eine Situation zu beschreiben, in der Sie so etwas brauchen könnten.
Trotzdem werde ich mein Bestes geben. Das heißt, ich möchte mitteilen, wie Bildcontainer auf der Serverseite geändert werden, bevor sie auf der Clientseite gerendert werden, und zwar mit der DOMDocument-Bibliothek von PHP.
Klingt nach viel? Hoffentlich kann ich das leicht genug brechen.
Bevor wir uns mit dem Code befassen, nehmen wir an, Sie haben ein them, das Bilder in einem einzelnen Absatzelement (oder einem beliebigen Element auf Blockebene) rendert, und Sie müssen jedes Element in eine Art Klasse einschließen, damit Sie darauf zugreifen können es über CSS oder JavaScript.
Wo wir sind
Nehmen wir für den Anfang an, die Bilder werden wie folgt gerendert:
Und Sie müssen sie so rendern:
Jetzt brauchen Sie vielleicht Platz zwischen ihnen oder auch nicht. Es spielt keine Rolle, weil Sie dies über CSS steuern können. Sie haben jedoch die Kontrolle darüber, wie dies über die Leitung an die Clientseite gesendet wird.
Dazu benötigen Sie ein paar Dinge:
- Zugriff auf die DOMDocument-Bibliothek von PHP,
- Verständnis dafür, wie Inhalte über den the_content – Hook von WordPress manipuliert werden,
- Eine Strategie, wie Sie die Bilder umschließen möchten.
Ich werde diese im Code durchgehen, aber es genügt zu sagen, dass ich jedes Bild in ein Absatzelement einschließen werde. Sie können natürlich entscheiden, was Sie möchten.
Wie es geht
Stellen Sie zunächst sicher, dass Sie angegeben haben, dass Sie den Inhalt des DOM-Dokuments über Ihrer Klasse verwenden :
<?php
namespace Acme;
use DOMDocument;
class AcmeContentSubscriber
{
// ...
}
Fahren Sie als Nächstes fort und erstellen Sie einen Hook zu the_content. Wie Sie dies tun, hängt davon ab, wie Sie Ihren Code organisiert haben (ob OOP oder nicht). Für dieses Beispiel werde ich ein sehr einfaches Beispiel zeigen, wie es geht :
<?php
public function contentSubscriber()
{
add_action( 'the_content', [$this, 'addImageAttributes']);
}
Danach müssen Sie ein wenig arbeiten (was alles weiter unten, aber außerhalb des Rahmens dieses Beitrags liegt). Das beinhaltet:
- Konvertieren der Codierung der HTML-Entitäten,
- Erstellen einer Instanz des DOM-Dokuments,
- Laden des HTML des Beitrags aus dem eingehenden Inhalt
Im Code sollte es so aussehen :
<?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));
// ...
}
Als Nächstes müssen Sie die img- Elemente durchlaufen und sicherstellen, dass Sie das richtige Attribut festlegen. Sie können sich entscheiden, eine Klasse zu verwenden, Sie können sich entscheiden, ein Datenattribut zu verwenden, oder Sie können sich entscheiden, etwas anderes zu verwenden. Dieser Teil spielt keine Rolle.
Beachten Sie, dass Sie für ein bestimmtes Bild überprüfen möchten, ob das nächste Element kein Absatzelement ist, da ich mich dafür entscheide, das Bild einzuschließen. Mit anderen Worten, wenn das nächste Element kein Absatz ist, packen wir das Element in ein Absatzelement.
Dazu sollte das Skelett der main-Funktion so aussehen :
<?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);
}
}
// ...
}
Dann sollte die Funktion, die dafür verantwortlich ist, das Element tatsächlich in ein Absatzelement einzufügen, so aussehen :
<?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);
}
}
Lesen Sie unbedingt den DocBlock des Codes, um zu verstehen, wie die Funktion funktioniert. Einfach gesagt:
- es akzeptiert eine Instanz des Dokuments und des Bildelements,
- erstellt ein Absatzelement,
- fügt ein Klassenattribut hinzu
- ersetzt das ursprüngliche Bildelement durch den Absatz,
- und fügt das Bild als untergeordnetes Element hinzu
Und da wir das Dokumentobjekt auf der Methode basieren, müssen wir nichts zurückgeben.
Die endgültige Version der ursprünglichen Funktion sollte so aussehen :
<?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();
}
Und Ihre Ausgabe sollte wie im obigen Bild aussehen. Denken Sie jedoch daran; Sie müssen die Ergebnisse der Dokumentinstanz an WordPress zurückgeben, damit es den HTML-Code richtig rendert. Und genau das macht die saveHTML – Funktion im obigen Code.