WordPress: HTML-Code in Artikeln einbinden

Von am 20. September 2010 um 11:39

Nehmen wir mal an du musst innerhalb eines WordPress-Artikels oder einer Seite ein iframe einbinden. Bei den iframes handelt es sich um eingebettete Frames, die es einem ermöglichen, Inhalte anderer Quellen bzw. Websites in eigener Website einzubinden.

Ein Beispiel dafür ist der Google Kalender. Wir haben neulich auf unserer Herr der Ringe Website einen Tolkien-Kalender mit verschiedenen Daten, Events und Terminen eingebunden.

Google Kalender im Einsatz

Beispiel eines Kalenders

Man hat mehrere Möglichkeiten so einen Kalender einzubinden, unter anderem per iframe. Nutzt man wie ich, hauptsächlich den HTML-Editor von WordPress, dann hat man kein Problem. Man kann ohne Probleme beliebigen HTML-Code einbinden und alles bleibt erhalten.

Nutzt man aber parallel auch den visuellen Editor, dann hat man ein Problem. Spätestens wenn man von der HTML- auf die visuelle Ansicht umschaltet ist der Code futsch und weg. Bindet man es direkt im visuellen Editor ein, dann gibt WordPress im Frontend den Code als Quelltext aus … der Code wird nicht "ausgeführt".

Es gibt hier, wie meistens bei WordPress, mehrere Möglichkeiten um das Problem zu lösen.

Disziplin und Einsatz des HTML-Editors

Die einfachste Möglichkeit, ist es, zumindest bei dem Beitrag wo der Code eingebunden werden soll, auf den visuellen Editor zu verzichten. Artikel oder Seite erstellen, in die HTML-Ansicht wechseln, Code einfügen, abspeichern und gut ist. Bearbeitet man den Artikel erneut, dann immer schön in der HTML-Ansicht bleiben.

Diese Lösung ist natürlich nicht für jeden geeignet, daher folgt jetzt eine Alternative.

Elegante WordPress Themes

WordPress-Plugin: Simple Code Embed

Eine einfache Möglichkeit um das obene beschriebene Problem zu umgehen stellt das Plugin Simple Code Embed dar. Diese Plugin nutzt die Funktion der benutzerdefinierten Felder, die zum Umfang von WordPress gehören.

Zuerst das Plugin installieren und aktivieren. Wie das geht haben wir ausführlich sowohl im Einsteigerseminar als auch im Praxisbuch beschrieben.

Einfach unter dem Artikel in Benutzerdefinierte Felder auf den Knopf Benutzerdefiniertes Feld hinzufügen klicken.

Als Name gibst du beim ersten Mal CODE1 ein und als Wert den HTML-Code ein:

HTML-Code einbinden

HTML-Code im benutzerdefinierten Feld

Anschließend einfach %CODE1% innerhalb des Artikels oder der Seite eintragen. Dabei ist es egal ob du gerade in der HTML- oder der visuellen Ansicht bist. Mit diesem Plugin hast du die Möglichkeit bis zu 20 verschiedene HTML-Schnippsel einzubinden. Nummerieren musst du diese entsprechend mit CODE1 bis CODE20.

Diese Nummerierung bezieht sich allerdings pro Artikel oder Seite. Der Vorteil: du hast in jedem neuen Beitrag die Möglichkeit bis zu 20 neue Code-Fragmente einzufügen. Der Nachteil: du musst das gleiche Fragment im neuen Artikel auch neu angeben.

Meine Lösung

Da ich immer schaue, so wenig Plugins wie möglich einzusetzen, habe ich für mich eine eigene Lösung gesucht. Zuerst habe ich ein Seiten-Template erstellt. Wie das geht, haben wir sowohl im Einsteigerseminar als auch im Praxisbuch beschrieben. Eine Anleitung findest du auch hier auf dieser Website: Templates für Seiten (Pages) in WordPress.

Dieses Seiten-Template habe ich Kalender benannt und es angepasst:

<div class="der-beitrag">
    <?php the_content(); ?>
    <iframe>[Der Rest des Codes]</iframe>
</div><!-- Ende des jeweiligen Beitrags -->

Dort wo jetzt im Beispiel <iframe>[Der Rest des Codes]</iframe> steht kommt dein Code rein. Anschließend habe ich die Unterseite erstellt und der Seite das Template Kalender zugewiesen. Somit kann ich der seite einen einleitenden Text im Editor eingeben und nach dem Abspeichern wird automatisch der Kalender eingebunden, ich muss mir keine Sorgen machen und übersichtlicher ist es auch, da de lange Code nicht im Weg steht.

Diese Lösung ist für die meisten Leute nur dann praktikabel, wenn man den Code nicht oft anpassen muss. Aber im Fall des Kalenders ist dies gegeben.

Meine Lösung hat den Vorteil, dass man auf den Einsatz des Plugins verzichten kann. Was aus Performance-Gründen von Vorteil ist. Da zum einen viele aktive Plugins auch mehr von dem PHP-Speicher benötigen und zum anderen weil die direkte Ausgabe von HTML den Server weniger beansprucht, als wenn das ganze zuerst von PHP, über den Umweg der Datenbank, verarbeitet werden muss.

Diesen Artikel weiterempfehlen:

Deinen XING-Kontakten zeigen
Kategorien:
Kompendium
Tags:
, ,  
Beitrag:
Druckvorschau
Kommentare:
Kommentar abgeben oder Kommentare verfolgen

 — 


11 Reaktionen auf diesen Beitrag

Kommentare

  1. Thomas Scholz sagte am
    Montag, 20. September 2010 um 11:59 folgendes:

    Ich hatte gestern das Problem im Drehlog: Autoren können auch im HTML-Editor keinen Iframe einbinden, selbst wenn man ihnen das Recht »unfiltered HTML« zuweist. Bei Speichern wird der Iframe sofort gelöscht. Als Editor oder Administrator gibt es das Problem nicht, aber alles darunter sieht gerade … schwierig aus.

    • Perun sagte am
      Donnerstag, 23. September 2010 um 16:56 folgendes:

      Hallo Thomas,

      werde mal gleich ausprobieren ob die Autoren mit Hilfe des Plugins weiter kommen.

  2. Ramona sagte am
    Donnerstag, 23. September 2010 um 17:52 folgendes:

    Heißt, man braucht das Plugin, um die benutzerdef. Felder für einen iframe zu nutzen? Ohne Plugin passiert nichts? Die Lösung mit dem Template ist natürlich die bessere, danke für die Anregung.

    • Perun sagte am
      Donnerstag, 23. September 2010 um 22:45 folgendes:

      Hallo Ramona,

      das hängt davon ab. Wenn du mit dem HTML-Editor arbeitest, dann brauchst du das Plugin nicht. Arbeitest du hingegen mit dem visuellen Editor, dann wäre das Plugin zu empfehlen

  3. ichselbst sagte am
    Mittwoch, 29. September 2010 um 13:51 folgendes:

    Guter Beitrag. Danke hierfür…

  4. Patrick sagte am
    Sonntag, 10. Oktober 2010 um 19:11 folgendes:

    Vielen Dank für die Tipps. Bei mir hat alles wunderbar funktioniert.

  5. Frank sagte am
    Samstag, 05. März 2011 um 17:10 folgendes:

    Man kann dem Editor natürlich das iframe beibringen, er wird via Honold in den TinyMCE erlaubt. Dies geht mit allen Wunschen, inklusive steuerung der tags und dessen attribute. Habe dazu einen post im blog und nutze es oft, um den Nutzen gmaps zu ermöglichen.

  6. Frank sagte am
    Montag, 07. März 2011 um 08:25 folgendes:

    Um Code oder jede Form anderer Inhalte mehrfach und an jeder Stelle in WP zu verwenden, kann ich auch mein Plugin Snippet empfehlen, welches die Integration über Custom Post Type lößt und das Inkludieren via Shortcode oder PHP erlaubt.

  7. Ines sagte am
    Dienstag, 13. September 2011 um 16:53 folgendes:

    Danke für en Tipp mit dem Plug-in. Artiss Code Embed (Ist jetzt auf dem Link zu Simple Code Embed) hat bei mir gerade einwandfrei funktioniert, als ich es das erste Mal ausprobiert habe.

Trackbacks und Pingbacks

  1. Welchen WordPress-Editor soll man nutzen? Visuell oder HTML? | WordPress-Buch

Tut mir Leid, die Kommentarfunktion für diesen Beitrag wurde geschlossen.