WordPress-Shortcodes werden verwendet, um 1) die Menge an Code zu reduzieren, die Sie schreiben müssen; 2) Vereinfachen Sie die Verwendung von WordPress-Plugins, Themes und anderen Funktionen. Sie verhalten sich wie Makros, wenn Sie einen Shortcode einfügen, wird er durch einen Codeausschnitt ersetzt. Es könnte alles sein.

WordPress kommt mit einigen vordefinierten Shortcodes, wie und , und sie sind auch in vielen beliebten Plugins und Themes enthalten. Sie können auch Ihre eigenen benutzerdefinierten Shortcodes erstellen, um beispielsweise Spalten auf Ihrer WordPress-Website zu erstellen.

In diesem Beitrag führen wir Sie Schritt für Schritt durch den Prozess der Erstellung und Verwendung Ihrer eigenen benutzerdefinierten Shortcodes. Wir führen Sie durch den gesamten Prozess der Erstellung eines neuen Shortcodes und zeigen Ihnen, wie Sie die Shortcode-Attribute und -Funktionen ändern und steuern können.

Bitte beachten Sie, dass dies ein fortgeschrittener Beitrag ist, in dem detailliert beschrieben wird, wie Shortcodes erstellt werden. Wenn die Arbeit mit Code Ihre technischen Kenntnisse übersteigt und Sie nur den einfachsten Weg zum Erstellen und Verwenden von Shortcodes suchen, sollten Sie mit einem Shortcode-Plugin beginnen.

Wenn Sie Ihre eigenen Shortcodes erstellen, müssen Sie zwei Dinge tun:

1. Erstellen Sie die Shortcode-Handler-Funktion. Eine Shortcode-Funktion ist eine Funktion, die optionale Parameter (Attribute) verwendet und ein Ergebnis zurückgibt.
2. Registriert die Shortcode-Handler-Funktion. Verwenden Sie die integrierte WordPress add_shortcut -Funktion, um benutzerdefinierte Shortcodes zu registrieren.

WordPress für benutzerdefinierte Shortcodes vorbereiten

Obwohl dies nicht erforderlich ist, ist es eine gute Idee, Ihre benutzerdefinierten Shortcodes in einer eigenen Datei zu speichern. Alternativ können Sie sie der functions.php -Datei Ihres Themas hinzufügen.

Erstellen Sie zunächst eine neue Datei mit dem Namen custom-shortcodes.php und speichern Sie sie im selben Ordner wie die functions.php-Datei Ihres Themas.

Fügen Sie dann in der neu erstellten Datei den folgenden Codeblock hinzu:

<?php ?>

Öffnen Sie als Nächstes die functions.php Datei und fügen Sie die folgende Codezeile hinzu:

include('custom-shortcodes.php');

Sie können nun mit dem Hinzufügen Ihrer benutzerdefinierten Shortcodes beginnen.

Grundlegende Shortcodes

In diesem ersten Beispiel erstellen wir einen grundlegenden WordPress-Shortcode, der das Bild des Tages des Indie-Avatars unten einfügt.

Erstellen des Shortcodes

Der erste Schritt besteht darin, die Shortcode-Funktion zu erstellen. Fügen Sie in der Datei custom-shortcodes.php den folgenden Codeblock hinzu:

function dotiavatar_function() { return '<img src="http://dayoftheindie.com/wp-content/uploads/avatar-simple.png" alt="doti-avatar" width="96" height="96" class="left-align" />';}

Im obigen Codebeispiel gibt die Funktion dotiavatar_function ein vorbestimmtes Bild mit dem Namen avatar-simple.png zurück.

Der nächste Schritt besteht darin, den Shortcode mit der integrierten Funktion add_shortcode bei WordPress zu registrieren. Fügen Sie noch in custom-shortcodes.php die folgende Codezeile hinzu:

add_shortcode('dotiavatar', 'dotiavatar_function');

Wenn Sie einen Shortcode mit der Funktion add_shortcode registrieren, übergeben Sie das Shortcode-Tag ($tag) und die entsprechende Funktion ($func)/hook, die ausgeführt wird, wenn die Verknüpfung verwendet wird.

In diesem Fall ist das Shortcut-Tag dotiavatar und der Hook ist dotiavatar_function.

Hinweis: Verwenden Sie beim Benennen von Tags nur Kleinbuchstaben und keine Bindestriche.

Verwendung des Shortcodes

Nachdem Sie den Shortcode erstellt und registriert haben, ist es Zeit, ihn auszuprobieren! Wann immer Sie möchten, dass der DOTI-Avatar im Inhalt des Beitrags angezeigt wird, können Sie stattdessen den Shortcode verwenden:

Shortcodes mit Parametern (Attributen)

Im vorherigen Beispiel gab es es gab nicht viel Raum, um die Dinge zu ändern. Nehmen wir an, anstatt ein einzelnes Bild zu pushen, möchten wir in der Lage sein, mithilfe eines Parameters festzulegen, welches Bild verwendet werden soll. Sie können dies tun, indem Sie einige Attribute hinzufügen ($atts ).

Fügen Sie noch einmal innerhalb von custom-shortcodes.php eine weitere Funktion hinzu:

function dotirating_function( $atts = array() ) { // set up default parameters extract(shortcode_atts(array( 'rating' => '5' ), $atts)); return "<img src=\"http://dayoftheindie.com/wp-content/uploads/$rating-star.png\" alt=\"doti-rating\" width=\"130\" height=\"188\" class=\"left-align\" />";}

Die obige Funktion akzeptiert einen einzelnen Parameter: rating. Wenn ein rating -Wert nicht übergeben wird, wird ein Standardzeichenfolgenwert von 5 verwendet. Dazu wird das Array von Attributen mithilfe der integrierten Funktion shortcode_atts entpackt und die Standardwerte mit Werten kombiniert, die möglicherweise an die Funktion übergeben wurden.

Vergessen Sie nicht, den Shortcode zu registrieren:

add_shortcode('dotirating', 'dotirating_function');

Nachdem die Shortcode-Funktion erstellt und der Hook hinzugefügt wurde, kann der Shortcode jetzt in Ihrem Post-Inhalt verwendet werden:

Alternativ können Sie die rating, und gehen Sie einfach mit dem Standardwert:

Und das war’s! Sie wissen jetzt, wie Sie selbstschließende WordPress-Shortcodes erstellen. Aber es gibt eine andere Art, die Sie erstellen können.

Shortcodes einschließen

Bisher haben wir mit selbstschließenden Shortcodes gearbeitet. Es gibt jedoch eine andere Art von Shortcode: das Einschließen von Shortcodes.

Mit umschließenden Shortcodes können Sie ein Format im BBCode-Stil verwenden. Das heißt, ein Stil, der so aussieht:

content

Umschließende Shortcodes sind nützlich, wenn Sie den umschlossenen Inhalt bearbeiten müssen. Angenommen, Sie haben einen bestimmten Schaltflächenstil, den Sie auf Ihrer Website verwenden; sie können den HTML-Code verwenden, um diese Schaltfläche / diesen Stil jedes Mal zu generieren, wenn Sie ihn verwenden müssen, oder Sie können stattdessen einen benutzerdefinierten umschließenden Shortcode einrichten.

Durch die Verwendung eines umschließenden Shortcodes können Sie den Fokus auf den Inhalt und nicht auf den Code legen.

Shortcode erstellen

Fügen Sie in der custom-shortcodes.php -Datei erneut den folgenden Codeblock hinzu:

function dotifollow_function( $atts, $content = null ) { return '<a href="https://twitter.com/DayOfTheIndie" target="blank" class="doti-follow">' . $content . '</a>';}

Im obigen Codeblock wird die $content = null verwendet, um diese Funktion als einschließenden Shortcode zu identifizieren. Und innerhalb dieser Funktion wickeln Sie Ihren Inhalt ($content ) in den HTML-Code ein.

OK, jetzt ist es Zeit, den Shortcode zu registrieren:

add_shortcode('dotifollow', 'dotifollow_function');

Und das war’s! Ihr Shortcode kann verwendet werden.

Verwendung des Shortcodes

Die Verwendung eines umschließenden Shortcodes unterscheidet sich nicht wesentlich von der Verwendung eines selbstschließenden. Wie bei HTML müssen Sie nur sicherstellen, dass Sie eine öffnende und eine schließende Anweisung haben:

Follow us on Twitter!

Natürlich ist dies nur ein grundlegendes Beispiel. Sie können einem umschließenden Shortcode auch Parameter hinzufügen, wie Sie es bei einem selbstschließenden Shortcode tun.

Fügen Sie in custom-shortcodes.phpeine weitere Funktion hinzu:

function dotibutton_function( $atts = array(), $content = null ) { // set up default parameters extract(shortcode_atts(array( 'link' => '#' ), $atts)); return '<a href="'. $link .'" target="blank" class="doti-button">' . $content . '</a>';}

Und registrieren Sie dann den Shortcode:

add_shortcode('dotibutton', 'dotibutton_function');

Mit dieser neuen Funktion können Sie einen Link für die Schaltfläche mit der folgenden Syntax festlegen:

Shop Now!

Mit umschließenden Shortcodes können Sie mit sehr wenig Code viel erreichen.

Ein Wort zu Widgets

Standardmäßig werden Shortcodes nur in Beiträgen, Seiten oder benutzerdefinierten Beitragstypen unterstützt. Um Unterstützung für Widgets hinzuzufügen, müssen Sie der functions.php -Datei den folgenden Code hinzufügen:

add_filter( 'widget_text', 'shortcode_unautop' );add_filter( 'widget_text', 'do_shortcode' );

Sobald Sie dies getan haben, können Sie Shortcodes in Widgets verwenden – genau wie in Posts / Seiten.

Dinge einpacken

Das Hinzufügen eigener Shortcodes erfordert nicht viel Aufwand – insbesondere, wenn Sie verstehen, wie sie implementiert sind. Wenn Sie mehr erfahren möchten, lesen Sie den WordPress-Codex.