p-Tag bei Bilden in WordPress ersetzen

Nicht immer sollen Bilder innerhalb des Content in p-Tags eingebettet werden. In meinem Fall war die Semantik des figure-Tag gefragt und so blieb nur eine Lösung via Filter auf den Content, den ich hier kurz vorstellen möchte.

Die Nutzung von HTML5 halte ich persönlich für sinnvoll und ich mag die neuen Möglichkeiten, auch im Bereich der Semantik.

WordPress hat eine Besonderheit beim Ausliefern von Inhalten, die aus dem Editor kommen – das Setzen von Breaks und Absätzen. Historisch bedingt kümmert sich WordPress darum und nicht der TinyMCE; gleiches gilt bei der Integration von Bildern oder anderen Elementen dieser Art.

Um die Nutzung von HTML5 sauber abzubilden musste in einem Projekt der p-Tag durch den figure-Tag ersetzt werden und so ist folgender kleiner Filter entstanden.

Als kleiner Hintergrund zum figure-Tag lasse ich das folgenden Zitat stehen oder ihr nutzt das Web mit seinen vielfältigen Antwortformen.

HTML5 <figure> Tag
Viele Medien können nicht von Suchmaschinen oder behinderten Menschen erfasst werden. Um diese Medien textlich zugänglich zu machen, kann man sie per <figure> Tag an eine Beschreibung binden.
Robert Agthe

Ich bin nicht sonderlich begabt bei Regex-Ausdrücken und würde mich freuen, wenn es Verbesserungen und Ideen zur Lösung gibt, da diese Art des öfteren genutzt wird und die Nutzung von HTML5 geht voran. Inwieweit WordPress darauf reagiert, ist aktuell nicht abzusehen und an dieser Stelle konnte ich auch keinen Filter erkennen, so dass man ohne einen Regex an diese Stelle kommt und die Vorgabe von WordPress ändert. In diesem Zusammenhang gibt es einige Themen, die einer Überarbeitung von WordPress bedarf um den Editor sauber mittels HTML5 zu nutzen; im Basis Theme habe ich in der HTML5 Version schon einige Sachen integriert.


// unautop for images
function fb_unautop_4_img( $content ) {
    
    $content = preg_replace( 
        '/<p>\\s*?(<a rel=\"attachment.*?><img.*?><\\/a>|<img.*?>)?\\s*<\\/p>/s',
        '<figure>$1</figure>',
        $content
    );
    
    return $content;
}
add_filter( 'the_content', 'fb_unautop_4_img', 99 );

Kommentare sind geschlossen.