The Beginner’s Guide to Writing Your Own Custom Shortcode

Shortcodes sind eine beliebte Funktion, die in vielen Plugins und Themes enthalten ist. Wenn du jedoch noch nie eigene Shortcodes erstellt hast, weißt du vielleicht nicht, wie du sie zu deinen eigenen WordPress-Projekten hinzufügen kannst.

Glücklicherweise macht es die Shortcode-API von WordPress ziemlich einfach, eigene Shortcodes zu erstellen. Auf diese Weise können Benutzer die Funktionen Ihres Plugins oder Themes von jedem textbasierten Bereich ihrer WordPress-Website aus nutzen. Die Einbindung von Shortcodes in Ihre Projekte ist eine einfache Möglichkeit, auf den bereits erstellten Funktionen aufzubauen, damit Sie das meiste für Ihr Geld bekommen.

In diesem Artikel werden wir ein wenig mehr darüber sprechen, wie Shortcodes funktionieren. Dann zeigen wir Ihnen, wie einfach es sein kann, in drei Schritten eigene zu programmieren. Los geht’s!

Eine Einführung in Shortcodes und die Shortcode API

Die WordPress Shortcode API ist ein praktisches Werkzeug für Entwickler.

Shortcodes sehen aus wie kleine Textstücke in eckigen Klammern, etwa so: . Jedes Stück steht für eine einmalige Ausführung eines vordefinierten Codes, der bei Bedarf ausgelöst wird. Sie können fast überall verwendet werden, wo Text in WordPress eingefügt werden kann.

Während die meisten Shortcodes von Themes und Plugins hinzugefügt werden, verfügt der WordPress-Kern über ein paar Standard-Shortcodes, die Sie verwenden können. Einige Beispiele dafür sind Audio, Galerie und Beschriftung.

Wenn Sie zum Beispiel ein Bild mit einer Bildunterschrift hinzufügen, generiert WordPress einen bestimmten Shortcode:

Wenn Sie dies im Frontend betrachten, sehen Sie ein Bild mit einer Bildunterschrift:

Glücklicherweise macht es die Shortcode-API relativ einfach, benutzerdefinierte Shortcodes für Ihre eigenen WordPress-Projekte zu erstellen. Das ist oft eine kluge Idee, denn es macht das Leben Ihrer Benutzer einfacher, indem es ihnen ermöglicht, komplexe Funktionen mit nur wenigen Tastendrücken zu nutzen.

Wie Sie Ihren eigenen benutzerdefinierten Shortcode schreiben (in 3 einfachen Schritten)

Nun, da Sie verstehen, wie Shortcodes funktionieren, lassen Sie uns lernen, wie Sie einen zu Ihrem eigenen Theme oder Plugin hinzufügen! Was Ihr Shortcode macht, bleibt natürlich Ihnen überlassen. In diesem Beispiel verwenden wir eine einfache „Hello world!“-Funktion, um dir den Einstieg zu erleichtern.

Schreibe die Shortcode-Funktion

Zuerst öffnest du eine neue Datei in einem Texteditor. Als nächstes schreiben Sie eine Funktion mit einem eindeutigen Namen, die den Code ausführt, den der Shortcode auslösen soll:

function torque_hello_world_shortcode() { return 'Hello world!';}

Wenn wir diese Funktion normal verwenden würden, würde sie Hello world! als String zurückgeben, der in HTML ausgegeben werden kann. Diese Funktion kann auch benutzerdefinierte Parameter annehmen. Wenn Sie zum Beispiel möchten, dass jemand stattdessen Hello Bob! sagt, können Sie einen Namensparameter hinzufügen. Diese Parameter werden Attribute genannt, und sie werden alle mit einem einzigen Array gehandhabt, das von WordPress als $atts vordefiniert ist.

Hier ist ein Beispiel dafür, wie man die Shortcode-Funktion $atts verwendet, um Shortcode-Attribute in WordPress richtig zu behandeln. Sie können mehr darüber erfahren, wie dies für Ihre eigenen Bedürfnisse im WordPress Codex funktioniert:

function torque_hello_world_shortcode( $atts ) { $a = shortcode_atts( array( 'name' => 'world' ), $atts ); return 'Hello ' . $a . !';}

Das Attribut name wird standardmäßig auf world gesetzt, wenn kein anderer Name verfügbar ist. Wenn ein Name angegeben wird, gibt die Funktion diesen stattdessen aus. Hier ist ein Beispiel, wie dies mit einem Shortcode ausgeführt werden würde:

// Outputs "Hello world!" // Outputs "Hello Bob!"

Nachdem Sie fertig sind, kann dies in allen textbasierten Bereichen einer WordPress-Site verwendet werden, auf der das Plugin oder Theme, das diesen Shortcode enthält, installiert ist.

Speichern Sie die Datei und fügen Sie sie zu Ihrem Projekt hinzu

Nachdem Ihr Shortcode fertig ist, können Sie eine neue Datei in Ihrem benutzerdefinierten Theme oder Plugin erstellen, um die Funktion zu speichern. Ein aussagekräftiger Name hilft Ihnen, diese Datei später wiederzufinden (zum Beispiel: shortcode-function-hello-world.php).

Nun ist es an der Zeit, dem Rest Ihres Projekts diese neue Datei mitzuteilen. Wenn Sie mit einem Theme arbeiten, sollten Sie sie in die Datei functions.php einbinden. Wenn Sie ein Plugin erstellen, können Sie die Datei in jede beliebige Datei einfügen, die bereits in das Projekt geladen wurde.

Hier ist ein Beispiel, wie Sie die Datei in ein Theme mit get_stylesheet_directory() laden würden. Achten Sie darauf, den Pfad zu Ihrer Datei so zu ändern, dass er mit der Ordnerstruktur Ihres Themes übereinstimmt:

include( get_stylesheet_directory() . 'path/to/shortcode-function-hello-world.php' );

Auf der anderen Seite sieht es so aus, wenn Sie die Datei in ein Plugin laden, indem Sie plugin_dir_url() verwenden. Auch hier müssen Sie den Pfad zu Ihrer Datei so anpassen, dass er mit der Ordnerstruktur Ihres Plugins übereinstimmt:

include( plugin_dir_url( __FILE__ ) . 'path/to/shortcode-function-hello-world.php' );

Zu diesem Zeitpunkt ist Ihre Funktion nun einsatzbereit! Jetzt muss der Shortcode nur noch aktiv in WordPress registriert werden.

Registrierung des Shortcodes

Der letzte Schritt ist die Registrierung des neuen Shortcodes bei der Shortcode API. Dies geschieht mit der Funktion add_shortcode. Sie benötigt zwei Argumente:

  1. Das Shortcode-Tag, das im Texteditor verwendet werden soll
  2. Der Name der Funktion, die den Shortcode ausführt

Unterhalb der Shortcode-Funktion fügen Sie diese Codezeile ein und passen sie an Ihre eigenen Werte an:

add_shortcode( 'helloworld', 'torque_hello_world_shortcode' );

Der erste Wert wird im Texteditor in eckigen Klammern stehen. Der zweite Wert entspricht dem Funktionsnamen, den Sie in den beiden vorherigen Schritten geschrieben haben. Beide sollten so eindeutig sein, dass sie nicht mit anderen Shortcodes von WordPress Core, Themes oder Plugins kollidieren.

Wenn Sie fertig sind, müssen Sie die Funktion nur noch testen. Loggen Sie sich in den WordPress-Admin ein und versuchen Sie, Ihren Shortcode zu einem Beitrag hinzuzufügen:

Das ist alles! Ihr Shortcode kann so kompliziert oder einfach sein, wie Sie wollen – was Sie damit machen wollen, liegt ganz bei Ihnen! Für fortgeschrittene Situationen, in denen Sie die Ausgabe für verschiedene Situationen anpassen möchten, könnte es sich lohnen, eine eigene PHP-Klasse zu schreiben, um Ihren neuen Shortcode zu handhaben.

Fazit

Mit Shortcodes ist es einfach, WordPress-Beiträgen und -Seiten komplexe Funktionen hinzuzufügen. Sie sind einfach zu programmieren und werten Ihr bestehendes Projekt auf, indem sie einfache Inhalte dynamisch machen.

In diesem Artikel haben Sie gelernt, dass es nur drei einfache Schritte braucht, um einen Shortcode zu erstellen:

  1. Schreiben Sie eine reguläre Funktion, die den gewünschten benutzerdefinierten Code ausführt.
  2. Speichern Sie den Code in Ihrem WordPress-Plugin oder Theme.
  3. Registrieren Sie den Shortcode in WordPress.

Schreibe einen Kommentar