WordPress das Einfügen von <p>-Tags bei Bildern abgewöhnen
Eines vorweg: ich finde WordPress wirklich klasse: einfache Installation, unzählige Themes und Plugins usw. Heute bin ich jedoch über einen Effekt gestolpert, den ich ziemlich merkwürdig finde. Wenn man beim Verfassen eines Artikels ein Bild einfügt, fügt WordPress beim Speichern automatisch ein <p>-Tag um das Bild herum ein.
“Na und?” werden viele jetzt denken. Image-Tags sind Inline-Elemente und müssen innerhalb eines Block-Elements vorkommen. Richtig! Aber warum muss es denn ein <p>-Tag sein und nicht z.B. ein <div>. Und warum darf ich das nicht selbst entscheiden, wenn ich schon in der HTML-Ansicht bin. Mit dieser Meinung bin ich übrigens nicht alleine.
Also warum stört mich das jetzt? Das Problem sind die Abstände (margin und padding), die ich meinen Absätzen zugewiesen habe. Und das zerschießt mein Layout. Ich möchte, dass das Bild oben bündig mit dem “floatenden” Absatz abschließt (wie auf dem Beispielbild oben links). Durch ein zusätzliches <p>-Tag würde auch ein zusätzlicher Abstand erzeugt.
Natürlich könnte ich manuell das <p> durch ein <div> austauschen. Aber was ist mit den Bloggern, die sich nicht um html scheren oder Autoren, die WordPress als CMS benutzen? Genau das ist nämlich bei einem anderen Blog, den ich technisch betreue, der Fall. Es musste also eine Lösung her.
Ein simpler “Würgaround” findet sich direkt auf der WordPress-Seite: Einfach beim Bild einen “Title” angeben, da dann automatisch ein div-wrapper (.wp-caption) hinzugefügt wird. Hier reicht ggf. auch ein Leerzeichen aus.
Leider funktioniert das bei mir nicht, da ich das Plugin “image-caption” aktiviert habe, das bei der Angabe eines “Titles” diesen unter das Bild setzt (siehe Bild rechts). Nur möchte man diesen Effekt eben nicht immer.
Die Lösung: JQuery
Wie so oft, wenn alle Stricke reißen, hilft einem JQuery aus der Patsche. Hier erstmal der Code, die Erklärung folgt dann weiter unten.
$(document).ready(function()
{
$(".deineKlasse img:not(.wp-smiley)").each(function()
{
var parentTag = $(this).parent().get(0).tagName;
if(parentTag == "P")
{
$(this).unwrap();
$(this).wrap("<div></div>");
}
});
});
Mit Hilfe von Javascript bzw. JQuery wird also nachträglich das <p> mit einem <div>-Tag ausgetauscht. Dabei kommen die Funktionen unwrap() und wrap() zum Einsatz.
In Zeile 3 begrenzen wir das ganze auf Bilder innerhalb einer bestimmten Klasse. Außerdem schließen wir die Klasse .wp-smiley aus. Dies würde dazu führen, dass Smileys in die nächste Zeile rutschen. Für jedes Bild ermitteln wir in Zeile 5 den “Tagnamen” des Elternelements (parent). Wenn es sich dabei um ein “P” handelt (wichtig: ein großes P!), entfernen wir das Bild umschließende <p>-Tag (unwrap()) und fügen im Anschluss mittels wrap() ein <div> hinzu.
Den Javascript-Code sowie die JQuery-Bibliothek müsst Ihr natürlich noch einbinden.
Wahrscheinlich gibt es auch eine einfachere Lösung und ich schieße mal wieder mit Kanonen auf Spatzen, aber so funktioniert es für mich. Vielleicht hilft es Euch ja auch. Wer eine einfachere Lösung kennt, kann sie ja in den Kommentaren posten.
verfasst von Michael am 31. Juli 2010 um 11:20
nächster Artikel: Nützliche Android-Apps für Admins
es gibt auch ein nettes plugin dafür!
http://wordpress.org/extend/plugins/disable-wpautop/
Danke für den Hinweis (auch wenn er für mich zu spät kommt). Das Plugin gibt es tatsächlich schon seit 2005. Wenn man nur immer wüsste, nach was man sucht, bevor man was eigenes zusammenschustert…