WordPress eigene Shortcodes erstellen

Christian Böttger 22 Mrz 2014 0 Kommentare
30 Stimmen (4.03 von 5.00)

Wie Ihr sicher mitbekommen habt, wird dieser Blog auch mit WordPress betrieben und da ich auch eigene Shortcodes für meine Artikel benötige, möchte ich euch gleich mal zeigen wie ich das gelöst habe.

Was wird benötigt:

Man kann mit dem WordPress integrierten Template Editor arbeiten aber da das ein wenig vom Code her unübersichtlich ist, arbeite ich mit externen Programmen.

WordPress eigene Shortcodes:

Wenn wir die oben genannten Sachen runter geladen und installiert haben, können wir jetzt anfangen unsere eigenen Shortscodes zu erstellen. Dazu öffnen wir jetzt erst mal unser FTP Client und verbinden mit Ihm unseren Webserver und öffnen das Verzeichnis unseres aktiven Template.

Wordpress eigene Shortcodes

WordPress eigene Shortcodes

Wenn Ihr das Verzeichnis eures Template gefunden habt dann öffnet Ihr die Datei „functions.php“ im Hauptverzeichnis eures Template. Falls diese Datei bei euch nicht existiert dann erstellen wir diese auf dem Server und bearbeiten diese dann mit unserem Editor.

Nun müssen wir eine neue Funktion in unser „functions.php“ erstellen, dafür geben wir diesen Code ein.

function my_shortcode() {
    return '';
}

Jetzt haben wir eine Funktion mit dem Namen my_shortcode erstellt aber mit dieser passiert noch nicht viel. Nun müssen wir unseren Text der per Shortcode in unserem Artikel eingefügt werden soll noch in diese Funktion einfügen und dies machen wir in dem wir zwischen den zwei ‚ ‚ unseren Text eingeben. Hier ist Text oder auch html möglich.

function my_shortcode() {
    return '<div id="shortcode">Hier kommt mein Text für meinen Shortcode rein.</div>';
}

Wenn wir das haben müssen wir diesen Shortcode noch laden so das dieser auch von dem Artikel Editor aus aufgerufen werden kann und das machen wir mit dieser Zeile.

add_shortcode( 'Mein_Shortcode', 'my_shortcode' );
  • Mein Shortcode ist der Titel
  • my_shortcode ist die Funktion die wir erstellt haben

Unsere „functions.php“ ist soweit fertig und sieht so aus.

<?php
function my_shortcode() {
    return '<div id="shortcode">Hier kommt mein Text für meinen Shortcode rein.</div>';
}

add_shortcode( 'Mein_Shortcode', 'my_shortcode' );
?>

Nun können wir diese Datei speichern und zurück auf unseren Webserver laden. Jetzt haben wir einen Shortcode erstellt aber können diesen nur manuell eingeben um uns die ganze Sache zu erleichtern und uns nicht die ganzen Shortcodes merken zu müssen, können wir diese mit unserem WordPress Plugin Better Tinymce Shortcodes List in unseren Editor einfügen.

Dazu öffnen wir unsere Administrations Seite und gehen Links im Menü auf den Punkt Einstellungen -> Shortcodes.

Wordpress eigene Shortcodes

WordPress eigene Shortcodes

 

Dort können wir nun unseren Shortcode eintragen und dieser wird dann in unserem Editor angezeigt.

Wordpress eigene Shortcodes

WordPress eigene Shortcodes

Nun speichern wir unsere Eingabe mit dem Klick auf Save Settings und können nun einen neuen Artikel erstellen oder bearbeiten einen wo wir diesen Shortcode einfügen wollen. Wenn wir den Artikeleditor nun geöffnet haben müsste oben in der Leiste nun eine neues Feld sein mit unserem Shortcode.

Wordpress eigene Shortcodes

WordPress eigene Shortcodes

Nun haben wir unseren ersten Shortcode erstellt und können so viele weitere und auch komplexere Codes in unsere Beiträge einfügen, möglich ist normaler Text aber auch HTML oder Java Script.

Artikel drucken

Kommentare (0)