Eigenen Code einbetten

Mit dem Code Snippets Plugin PHP & HTML per Shortcode in WordPress einbinden

Hier lernst du

Was Code Snippets ist

Du verstehst, warum das Plugin sicherer ist als das direkte Bearbeiten von functions.php.

Shortcodes erstellen

Du kannst einen PHP-Shortcode schreiben, aktivieren und mit ob_start() HTML ausgeben.

Code auf Seiten einbetten

Du kannst deinen Shortcode im Gutenberg-Editor oder einem Page Builder platzieren.

1 Warum Code Snippets statt functions.php?

Stell dir vor, du möchtest in WordPress eigenen PHP-Code hinzufügen – zum Beispiel ein kleines Tool, das Daten berechnet oder anzeigt. Die klassische Methode wäre, den Code direkt in die functions.php deines Theme-Ordners zu schreiben. Das ist aber riskant: Ein einziger Tippfehler kann die gesamte Website unzugänglich machen, und beim nächsten Theme-Update wird dein Code einfach überschrieben.

functions.php direkt bearbeiten

Ein Tippfehler bringt die gesamte Website zum Absturz. Code geht beim Theme-Update verloren.

Code Snippets Plugin

Snippets können einzeln ein- und ausgeschaltet werden. Fehler werden abgefangen. Theme-Updates überschreiben nichts.

Das Plugin Code Snippets löst dieses Problem elegant: Du schreibst deinen PHP-Code in einem sicheren Editor im WordPress-Dashboard, kannst ihn jederzeit aktivieren und deaktivieren, und er bleibt vollständig unabhängig vom verwendeten Theme.

2 Was ist ein Shortcode?

Ein Shortcode ist wie ein Stempel: Du entwirfst ihn einmal, und kannst ihn dann beliebig oft auf deinen WordPress-Seiten einsetzen. Im Editor tippst du einfach [mein_code] – WordPress ersetzt diesen Platzhalter beim Laden der Seite automatisch durch den fertigen HTML-Output deines PHP-Codes.

Was WordPress intern aus deinem Shortcode macht

[mein_code]
<div>Dein HTML</div>

3 Schritt 1 – Neues Snippet anlegen

Nach der Installation und Aktivierung des Plugins erscheint im WordPress-Dashboard ein neuer Menüpunkt:

  1. Melde dich im WordPress-Dashboard an.
  2. Klicke links in der Navigation auf Snippets → Add New.
  3. Gib deinem Snippet oben einen beschreibenden Titel (z. B. „Mein Seitencode").

4 Schritt 2 – Code schreiben (Shortcode-Vorlage)

Wähle oben den Tab Functions (PHP). Um Inhalte auf einer Seite anzuzeigen, musst du deinen Code in eine Shortcode-Funktion verpacken. Das folgt immer demselben Schema – du kannst diese Vorlage direkt kopieren und anpassen:

add_shortcode( 'mein_code', 'mein_code_ausgeben' );

function mein_code_ausgeben() {
  // Output Buffering starten – alles was ab hier gedruckt wird, wird gesammelt
  ob_start();
  ?>

  <div class="meine-klasse">
    <p>Das ist mein eigener Code – er läuft jetzt auf der Seite!</p>
  </div>

  <?php
  // Hier kann auch PHP-Logik stehen:
  // echo "Hallo Welt!";

  // Gesammelten Inhalt zurückgeben (nie echo verwenden!)
  return ob_get_clean();
}

Die drei wichtigsten Teile erklärt

add_shortcode()

Registriert den Shortcode-Namen bei WordPress. Erster Parameter = Name in eckigen Klammern, zweiter = Name der Funktion, die aufgerufen wird.

ob_start() / ob_get_clean()

Output Buffering: Sammelt alles, was zwischen den PHP-Tags ausgegeben wird, und gibt es als String zurück – so kann WordPress es korrekt an der richtigen Stelle einbetten.

return statt echo

Shortcode-Funktionen müssen den HTML-String zurückgeben, nicht direkt ausgeben. Direktes echo würde den Code an der falschen Stelle der Seite ausgeben.

Shortcode-Namen: Diese Regeln gelten

Den Namen mein_code kannst du frei wählen – aber keine Leerzeichen, nur Kleinbuchstaben, Zahlen und Unterstriche. Wähle einen eindeutigen Namen, damit er nicht mit anderen Plugins kollidiert (z. B. prattes_kontaktbox statt nur kontakt).

5 Schritt 3 – Scope festlegen & aktivieren

Scrolle unterhalb des Code-Editors zum Bereich Scope (Geltungsbereich):

  1. Wähle Run snippet everywhere. Shortcodes müssen global registriert sein, damit WordPress sie beim Laden einer Seite kennt – egal auf welcher Seite sie eingesetzt werden.
  2. Klicke auf Save Changes and Activate.

Wenn der Snippet aktiv ist, erscheint neben dem Titel ein grüner Punkt. Ab sofort ist dein Shortcode [mein_code] auf der gesamten Website einsetzbar.

6 Schritt 4 – Shortcode auf einer Seite platzieren

Gehe zu Seiten → Alle Seiten und öffne die Seite, auf der dein Code erscheinen soll.

Gutenberg Block Editor

  1. Klicke auf das +-Symbol für einen neuen Block.
  2. Suche nach Shortcode und füge den Block ein.
  3. Tippe deinen Shortcode in das Textfeld.
[mein_code]

Page Builder (Elementor, Divi …)

  1. Ziehe das Widget Shortcode in dein Layout.
  2. Tippe deinen Shortcode in das Eingabefeld.
  3. Speichere – dein Code erscheint genau an dieser Stelle.

Klicke abschließend auf Aktualisieren (oder Veröffentlichen) – dein Code ist jetzt live auf der Seite eingebettet.

7 Pro-Feature: Direkter HTML-Code (Code Snippets Pro)

Falls du die kostenpflichtige Code Snippets Pro-Version verwendest, gibt es einen noch einfacheren Weg für reines HTML oder JavaScript – ganz ohne PHP-Funktion schreiben zu müssen:

  1. 1 Gehe zu Snippets → Add New.
  2. 2 Wähle den Tab Content (HTML) statt „Functions (PHP)".
  3. 3 Schreibe dein HTML oder JavaScript direkt in das Eingabefeld – kein PHP-Wrapper nötig.
  4. 4 Code Snippets Pro generiert automatisch einen Shortcode (z. B. [snippet id="123"]) – einfach kopieren und auf der gewünschten Seite einsetzen.

Kurzübersicht: Der Ablauf auf einen Blick

1. Anlegen

Snippets → Add New → Titel vergeben

2. Code schreiben

Shortcode-Funktion mit ob_start()

3. Aktivieren

Scope: „Run everywhere" → Save & Activate

4. Einbetten

Shortcode-Block → [mein_code] tippen