WordPress eigenen Code einbinden in Posts


Als ich eigenen Javascript Code einbetten wollte in einen Blog Post, hatte ich das Problem, dass WordPress meinen Code immer automatisch geparst und encodiert hat, wodurch mein Javascript nicht mehr funktioniert hat.

Daraufhin habe ich eine kleine sehr nützliche Funktion geschrieben, mit der man über Shortcodes Inhalt kennzeichnen kann, wie z.B. Javascript oder CSS, der nicht verändert werden soll:

Einfügen von Javascript Code in WordPress Post

[code]<script>alert('Hello');</script>[/code]

Einfügen von CSS Code in WordPress Post

[code]<style>body{width:100px;}</style>[/code]

Einfügen von HTML  in WordPress Post ohne Zeichen zu dekodieren

[code]<p>Hello</p>[/code]

Einfügen von externem Javascript in WordPress Post

[code]<script type="text/javascript" src="//www.google.com/trends/embed.js?hl=de&q=html5&cmpt=q&content=1&cid=TIMESERIES_GRAPH_0&export=5&w=600&h=350"></script>[/code]

Dafür muss nur der folgende Code in die functions.php kopiert werden:

function my_code_handler($atts, $content){

    return  html_entity_decode($content);

}

add_shortcode("code","my_code_handler");

 

Hinterlasse eine Antwort


vier × 5 =

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

  1. Vielen Dank, dass U. Es ist toll!
    Ich suchte nach einer Möglichkeit zum Einfügen von Code ohne plugin. U machen meinen Tag.

  2. Besten Dank für die Lösung. Werde sie heute Abend mal testen.

    Wollte mit der Datenvisualisierung mit d3 demnächst in meinem Blog beginnen und hatte gestern etwas probiert und musste feststellen, dass es nicht so einfach ist. Auch das Plugin WP-D3 hat da nicht wirklich geholfen. Ich konnte noch immer keine wirklich gute Lösung finden.

    Eine fixe Idee kam mir allerdings noch. Für den Übergang (sollte deine Lösung ebenfalls nicht funktionieren), werde ich meine js in einer einzelnen HTML-Dabei speichern, auf meinem Server hochladen und mittels iframe in einen Blogpost einbinden.

    Ist nicht die schönste Lösung, aber immerhin sollte dies funktionieren.

  3. Hammer! Vielen Dank. Ich bin NICHT-Programmierer, aber selbst ich habe das hinbekommen. Evtl. hängst du die Info noch an, dass die Leute sich ein Child-Theme anlegen, in der die functions.php liegen soll. Sonst wird beim nächsten WordPress Update der Custom Code einfach weggespült!

    Grüße vom
    Vince