Wiki

für WordPress-Entwickler

Anleitungen, Snippets und mehr…

WordPress ACF-WYSIWYG Klassen hinzufügen zu allen p-Tags (inkl. robuster DOMDocument-Lösung)

Lesezeit: ca. 3 Minuten

Einführung

In vielen WordPress-Projekten ist es erforderlich, das Inhalte CSS-Klasen erhalten – z. B. zur gezielten Gestaltung oder SEO-Optimierung. Dabei stellt sich die Frage: Wie kann man allen <p>-Tags in ACF-WYSIWYG Klassen hinzufügen – unabhängig davon, ob bereits eine Klasse vorhanden ist oder nicht?

In diesem Beitrag zeige ich dir:

• Eine schnelle Lösung mit preg_replace

• Eine saubere, fehlerfreie Alternative mit DOMDocument

• Eine wiederverwendbare PHP-Funktion für dein Theme oder Plugin

Erste Idee: <p>-Tags mit preg_replace modifizieren

Der erste Lösungsansatz bestand darin, den ACF-WYSIWYG-Content per preg_replace zu manipulieren:

if ($text_content):
    echo preg_replace('/<p(.*?)>/', '<p class="text-content"$1>', $text_content);
endif;

Verbesserte Version mit preg_replace (auch bei vorhandener Klasse)

Um sicherzustellen, dass die CSS-Klasse text-content auch bei vorhandener class ergänzt wird, wurden zwei preg_replace-Aufrufe kombiniert:

if ($text_content):
    // 1. class ergänzen
    $text_content = preg_replace('/<p([^>]*?)class=["\']([^"\']*)["\']/', '<p$1class="$2 text-content"', $text_content);

    // 2. class hinzufügen, wenn noch keine vorhanden ist
    $text_content = preg_replace('/<p((?!class)[^>]*)>/', '<p$1 class="text-content">', $text_content);

    echo $text_content;
endif;

Diese Lösung funktioniert zuverlässig – jedoch ist Regex für HTML nie ganz narrensicher, besonders bei verschachtelten Inhalten.

Die optimale Lösung: DOMDocument statt Regex

Der saubere, robuste Ansatz nutzt DOMDocument:

if ($text_content) {
    $dom = new DOMDocument();
    libxml_use_internal_errors(true);
    $dom->loadHTML('<?xml encoding="utf-8" ?>' . $text_content, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
    libxml_clear_errors();

    foreach ($dom->getElementsByTagName('p') as $p) {
        $existingClass = $p->getAttribute('class');
        $p->setAttribute('class', $existingClass ? $existingClass . ' text-content' : 'text-content');
    }

    echo $dom->saveHTML();
}

✅ Vorteile:

• keine kaputten Tags

• korrekter Umgang mit Attributen

• besser für SEO & saubere Ausgabe

Wiederverwendbare PHP-Funktion: add_class_to_p_tags()

Um die DOMDocument-Lösung projektweit nutzen zu können, wurde eine praktische Hilfsfunktion erstellt:

/**
 * Fügt allen <p>-Tags im HTML-Inhalt eine bestimmte CSS-Klasse hinzu.
 *
 * @param string $html Der HTML-Inhalt.
 * @param string $className Die hinzuzufügende CSS-Klasse.
 * @return string Der modifizierte HTML-Code.
 */
function add_class_to_p_tags($html, $className = 'text-content') {
    if (empty($html)) return '';

    $dom = new DOMDocument();
    libxml_use_internal_errors(true);
    $dom->loadHTML('<?xml encoding="utf-8" ?>' . $html, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
    libxml_clear_errors();

    foreach ($dom->getElementsByTagName('p') as $p) {
        $existingClass = $p->getAttribute('class');
        $classes = $existingClass ? explode(' ', $existingClass) : [];

        if (!in_array($className, $classes)) {
            $classes[] = $className;
        }

        $p->setAttribute('class', implode(' ', $classes));
    }

    return $dom->saveHTML();
}


Anwendung im Template:

if ($text_content) {
    echo add_class_to_p_tags($text_content, 'text-content');
}

Fazit

Die Verwendung von DOMDocument ist der cleane und nachhaltige Weg, um HTML-Inhalte aus ACF-Feldern sicher zu manipulieren – ideal für bessere Wartbarkeit, SEO-Tuning und barrierefreie Frontends. Mit der hier vorgestellten Funktion hast du ein flexibles Werkzeug an der Hand, das du in jedem Projekt einfach wiederverwenden kannst.