• Autor: Franz Neumeier
  • Datum: 1. Februar 2010
  • Kategorie: wordpress

WordPress davon abhalten, automatisch Code zu ändern

Der in WordPress integrierte Editor Tiny MCE ändert HTML-Code automatisch, wenn er findet, dass der Code so nicht in Ordnung ist. Eigentlich ist es sehr praktisch, dass sich WordPress damit um sauberen HTML-Code kümmert und Fehler automatisch korrigiert. Doch fortgeschrittene Anwender treibt das gerne mal in den Wahnsinn. Nach stundenlangem Suchen habe ich für mich jetzt eine recht praktikable Lösung gefunden.

<div>-Container verschwinden, <p> wird eingefügt an Stellen, wo man es definitiv nicht will, clear:both ist gänzlich unmöglich, und damit zerschießt WordPress jeden individuellen Code, jedes spezielle Design in einzelnen Postings – es sei denn, man verzichtet komplett auf den visuellen Editor und arbeitet rein in HTML; nicht sehr praktikabel.

Kurz und gut: Mich haben diese Code-Änderungen so zur Weißglut gebracht, dass ich am Wochenende wieder einmal stundenlang nach einer Lösung gesucht habe – und letztlich auch fündig geworden bin. Nicht natürlich, ohne mehrere Irrwege auszuprobieren wie manuelles Ersetzen von TincMCE durch CKEditor oder Dean’s FCKEditor Plugin (unterstützt NextGen Gallery nicht) das Plugin TinyMCE Advanced (löst einige Probleme, hat mir aber mehr Kummer als Freude gemacht) und das Mini-Plugin WP-AllowTags (ebenfalls bei mir neue Probleme, statt die alten zu lösen). Von Lösungen, die in den Core-Code von WordPress beziehungsweise TinyMCE eingreifen, möchte ich gar nicht schreiben – denn bei jedem WordPress-Update die Änderungen wieder von Hand nachzuholen scheidet für mich definitiv aus.

Code-Änderungen unterbinden mit Shortcodes

Ron Rinaldi hat nun vor ein paar Tagen bei WPGarage in einem Kommentar eine Lösung präsentiert, die ich genial finde – einfach weil sie für meine Zwecke ohne Wenn und Aber funktioniert. Der Trick: Ron packt die Code-Teile, die WordPress auf keinen Fall ändern soll, einfach in Shortcodes. Ich zeige weiter unten an meinem persönlichen Beispiel, wie’s geht.

Shortcode, nur kurz erklärt, sind die Kurzanweisungen in WordPress, die man in eckige Klammern setzt. Eine entsprechende Funktion in die functions.php des jeweiligen Themes beziehungsweise in entsprechenden Plugins ersetzen diese Shortcodes beim Ausliefern der Seite mit entsprechendem Inhalt. In der WordPress-Datenbank werden also die Shortcodes gespeichert, so dass der WordPress-Editor keine Chance hat, da etwas zu ändern. Mit diesem Trick unterbindet man, das WordPress eigenmächtig HTML-Code verändert.

Allerdings sollte man Shortcodes aus Performance-Gründen nicht allzu exzessiv verwenden, denn natürlich dauert das Ersetzen von Shortcode länger als einfach schon in der Datenbank fertig vorhandenen Content auszuliefern. Caching sollte das aber wiederum einigermaßen abpuffern.

Beispiel: clear:both und verschachtelte div-Container in Postings

In meinem speziellen Fall wollte ich auf meinem Kreuzfahrt-Blog (www.cruisetricks.de) eine Seite mit Kreuzfahrt-Webcam-Links der Übersicht halber mit Hilfe von div-Containern zweispaltig und mit Kästen gestalten. Doch sobald ich die Seite aus dem visuellen Editor heraus abspeicherte, war das Layout durch die automatischen Code-Änderungen von WordPress zerstört.

Mit der Shortcode-Lösung ist das Problem schlagartig aus der Welt und der WordPress-Editor ändert den Code nicht mehr eigenmächtig. Ich habe für meine Zwecke drei Short-Codes definiert: [clear_both], [div] mit den Parametern id, style und class sowie [end_div] als End-Tag für div-Container. Ron hat in seinem Vorschlag das End-Tag in den [div]-Shortcode integriert, dann funktionieren aber verschachtelte Container nicht; deshalb bei mir separat.

Der Code, um diese drei Shortcodes zu definieren, sieht also aus wie folgt und muss in der functions.php des verwendeten Themes ergänzt werden.

// The [clear_both] shortcode
function shortcode_clear_both() {
return '<div style="clear:both"></div>';
}
add_shortcode( 'clear_both', 'shortcode_clear_both' );


// The [div] shortcode function shortcode_div( $atts, $content=null ) { extract(shortcode_atts(array( 'class' => ”, 'style' => ”, 'id' => ”, ), $atts)); $ret = '<div'; if (!empty($style)) $ret .= ' style="'.$style . '" '; if (!empty($class)) $ret .= ' class="'.$class . '" '; if (!empty($id)) $ret .= ' id="'.$id . '" '; $ret .= '>'; //$ret .= $content . '</div>'; return $ret; } add_shortcode( 'div', 'shortcode_div' );
// The [end_div] shortcode function shortcode_end_div() { return '</div>'; } add_shortcode( 'end_div', 'shortcode_end_div' );

Beim Schreiben des WordPress-Beitrags im WordPress-Editor verwende ich dann einfach die definierten Shortcodes

[div class="klasse"]


... Content ...
[end_div]
[clear_both]

statt

<div class="klasse"> ... Content ... </div>
<div style="clear:both;"></div>

und schon klappt alles wie am Schnürchen und der WordPress-Editor läßt die Finger von meinem Code. Zu beachten ist lediglich, dass vor und nach dem Shortcode jeweils eine Leerzeile steht, weil sonst wieder automatische Code-Änderungen des WordPress-Editors zuschlagen und Zeilenumbruch-Tags ergänzt werden.

  • Comments: 3

Tags: , , ,

3 Kommentare zu “WordPress davon abhalten, automatisch Code zu ändern”


  1. Marc
    on Mrz 3rd, 2010
    @ 14:56

    Moin,

    einen Tipp hätte ich da für Dich. Bisher bin ich ganz zufrieden, vielleicht lohnt es sich, diesen einmal zu testen. Und zwar gibt es zu Dean’s FCKEditor einen „Fork“:

    http://pwwang.com/technology/wp-wp-plugins/deans-fckeditor-with-pwwangs-code-plugin-for-wordpress/
    Derzeit habe ich nur ein Problem, der Output (wenn ich beispielsweise php Code darstellen möchte) ignoriert mein Stylesheet und läuft teilweise bis in das rechte Menü rein. Aber eventuell lässt sich das auch noch in den Griff bekommen.

    Beste Grüße
    Marc


  2. Franz
    on Mrz 3rd, 2010
    @ 15:02

    Hey, vielen Dank. Das klingt vielversprechend. Werde ich ausprobieren, sobald hier nicht mehr ganz so „Land unter“ ist. Gestern nach einer Woche USA wieder zuhause, und natürlich ist in der Zeit die ganze Arbeit liegen geblieben …


  3. cemoi
    on Apr 2nd, 2010
    @ 11:13

    Vielen Dank für Deinen Blogbeitrag. Sehr interessant!
    Frohe Ostern

© 2013 Franz Neumeier's "Ceterum Censeo" Blog. Alle Rechte vorbehalten.

Powered by Wordpress and Magatheme by Bryan Helmig.