Wie sich Shortcodes, alleine oder verschachtelt mit p und br Tags besser vertragen

WP wrap shortcodes around and between p Tags
Shortcodes und p Tags eine unendliche Geschichte
WordPress liebt p Tags. Egal wo. Sie kommen: gefragt, ungefragt, geliebt, gehasst Kopfweh erzeugend, wenn Du Shortcodes verschachtelst oder wenn Du mit einem Shortcode ein span losschickst, dass mitten im Satz auf einmal von p Tags umrahmt ist.

Selten brauche ich verschachtelte Shortcodes, doch wenn verzweifelt man als erster an p Tags gleich nach einem Div oder vor diesem. Das Layout präsentiert sich höchst kreativ, vom Quelltext rede ich da noch gar nicht. :-)

Um WordPress daran zu hindern, jedes geöffnete oder geschlossene Div oder jeden anderen HTML Tag , den ein Shortcode erzeugt, mit einem p Tag zu versehen, hilft folgende Lösung

//move wpautop filter to AFTER shortcode is processed
remove_filter( 'the_content', 'wpautop' );
add_filter( 'the_content', 'wpautop' , 99);
add_filter( 'the_content', 'shortcode_unautop',100 );

Diese schreib ich an den Beginn „meiner“ Shortcode.php, die entweder als Plugin oder Modul in der Toolbox (Sergej Müller) landet.

Shortcodes, die span Tags liefern brechen auf einmal die Zeile um

Obige Lösung hilft. Sie repariert was WP aus „weiß nicht welche Idee dahinter“ mit Shortcodes macht. Daher staunte ich nicht schlecht, dass folgendes Konstrukt

[roterText]Wichtig[/roterText] und ich bin [gruenerText]weniger wichtig[/gruenerText]

auf einmal in drei Zeilen sich präsentierte. Den die beiden Shortcodes liefer span Tags, die 100% nicht als Blockelement deklariert waren.

Liefern sollten folgende Shortcodes


<p><span class="col1">Wichtig</span> und ich bin <span class="col3">weniger wichtig </span></p>

Im Quelltext stand jedoch

<p><span class="col1">Wichtig</span>/p>
<p> und ich bin</p>
<p> <span class="col3">weniger wichtig </span></p>

Im Quelltext fand ich, dass jedes span wunderbar mit p Tags absolut korrekt versehen war. Und der Text zwischen den beiden Shortcodes auch. HTML mäßig also richtig und dennoch absolut falsch.

Ich war zur Fehlersuche quasi eingeteilt und wie ich diesen fand ist eine längere oder kürzere Geschichte, die ich aber gern erzähle, weil nicht immer passiert solch eine Geschichte nur mir… .

Meine Geschichte bis ich die Lösung fand

1. Ich zweifelte an der Lösung (move wpautop filter ) und die bekannte Suchmaschine lief heiß.
=> die Erkenntnis nach gut 20-30 Beiträgen zum Thema, da suchte ich sogar bis zur Seite 3 der Suchergebnisse, ergab, dass es offensichtlich keine bessere Lösung gibt als den Filter zu verschieben, damit WP seine p-Hinzufügerei bei Shortcodes aufhört.
Also konnte ich meinen Wissen wieder vertrauen.

2. Ich studierte zum x-ten Male diese vor mir liegende Datei in der die Shortcodes beschrieben waren. Da fand ich keinen Fehler.
Er musste aber da drin wo sein, das sagte mir meine Vernunft.

3. Ich ließ das alles stehen und machte mir einen Kaffee => hilft immer.

4. Ich schrieb die Shortcodes selbst komplett neu. Und der Fehler war weg.
Ich bin eine lausige Code-tipperin, am liebsten tät ich alles in einer einzigen Zeile schreiben und mit meinen von mir geschriebenen PHP Dateien gewinn ich 100 keinen Ästhetik Wettbewerb im Coden, sicher niemals.

Aber der Fehler war weg. Ich habe 100% alles 1:1 abgetippt und die p Tags waren weg.

Und dann endlich wirkte der zuvorhin getrunkene Kaffee.

Die Lösung wieso ein Shortcode auf einmal alles mit p Tags umgibt

Es war der so wunderbar anzusehende Originalcode den ich vor mit hatte, alles in einzelne Zeilen aufgeteilt.

Es stand also in der Originaldatei

...do_shortcode($content) . '</span>

'
;
}

Und da ich eine so lausige Codeschreiberin bin, schrieb ich alles in einer Zeile…. .

...do_shortcode($content) . '</span>';}

Solltest du also jemals wieder Shortcodes verwenden, nutze unbedingt

//move wpautop filter to AFTER shortcode is processed
remove_filter( 'the_content', 'wpautop' );
add_filter( 'the_content', 'wpautop' , 99);
add_filter( 'the_content', 'shortcode_unautop',100 );

das hilft und du hast nie wieder irgendwelche p oder br Tags mitten unter Divs oder Spans, wenn Du dann auch noch den Code so korrekt schreibst//tippst, dass WordPress gar nie in Versuchung kommt einen p Tag wo hervorzuzaubern.

Anmerkung an mich: gehst du in fremden Dateien auf Fehlersuche, gugg dir die Hochkomata an => meist liegt der Fehler im kleinsten Detail.

Und logisch, sowas passiert nur mir oder?

8

8 Beiträge zu “Wie sich Shortcodes, alleine oder verschachtelt mit p und br Tags besser vertragen

  1. Kommentar Autor
    Connie
    Kommentar

    Wenn ich das richtig verstehe, waren also die Zeilenumbrüche in der Short-Code-Datei innerhalb der Funktion verantwortlich für die hinzugefügten Absatz-Tags?

  2. Kommentar Autor
    Monika
    Kommentar

    @ conny,
    weil nach dem /span das Hochkoma erst in der Zeile danach kam,
    dies erzeugte trotz „verschieben des wpautop“ Filters Absätze im Frontend
    ich habe es zig mal danach gestestet, diese eine shortcode.php als utf-8 gespeichert als nicht utf-8 gespeichert => jedes Mal, wenn das Hochkoma in der nächsten Zeile erst stand kamen die Absätze, stand das Hochkoma direkt nach dem letzten schließenden span Tag war es nicht so.

    [man kann natürlich auch absolut umständlichst Zeilenumbrüche per php verbieten, …]

  3. Kommentar Autor
    Bernhard
    Kommentar

    Hallo Monika,

    deine Vermutung zu dem Hochkomma ist natürlich absolut richtig und auch für einen Programmierer verständlich. Ich frage mich gerade nur, ob deine Lösung nicht eventuell einiges kaputt macht. Würden bei dieser Lösung mit dem umdrehen der Filter nicht alle Umbrüche innerhalb eines Shortcodes ignoriert werden? Oder werden diese dann trotzdem im Anschluss angewendet?

    Gruß
    Bernhard

  4. Kommentar Autor
    Roger Seifert
    Kommentar

    Hallo Monika
    Da stellten sich mir doch noch folgende Fragen als ich dein Bericht gelesen habe:

    1. Blieb es bei nur einem Kaffee, oder wurden es grad deren mehrere?
    2. Hat der Kaffee geschmeckt?
    3. Gab es schlaflose Nächte?

  5. Kommentar Autor
    Monika
    Kommentar

    @Roger
    ad 1 ) es blieb bei einem
    ad 2) sicher tat er das
    ad 3) nein, war doch nur ein Espresso …
    :-)

  6. Kommentar Autor
    Harry Milatz
    Kommentar

    Hi Monika,

    ist das „Problem“ noch aktuell? Bei shortcodes hatte bisher kaum so ein Problem. Eher beim Texteditor in WordPress. Auf einmal ist ein p-tag da wo es nicht hingehört. Da habe ich aber noch nicht herausgefunden woran das liegt. Rein optisch war es bisher auch kein Problem aber plötzlich ist dann ein Fehler laut W3C da und ich sorge dafür, daß ich keine habe;)
    Eine Idee woran das liegt?

    Und noch eine Frage: In der Toolbox von Sergej, gibt es da die Möglichkeit die Reihenfolge zu bestimmen?

    Lieben Gruß
    Harry

  7. Kommentar Autor
    Monika
    Kommentar

    grüß Dich Harry
    ich habe mich um die Reihenfolge der Anzeige der Module noch nie gekümmert :-)
    d.h. ich hab noch nicht getestet nach welcher Reihenfolge sie angezeigt werden,
    war mir bis dato egal :-)

    Wenn ich im Texteditor nicht wirklich 2mal die Entertaste klicke habe ich auch oftmals einen einsamen „p-Tag“ => maybe lag es daran?