WordPress Shortcodes verstehen

Wenn Sie WordPress schon längere Zeit verwenden, haben Sie wahrscheinlich bereits einige Shortcodes verwendet.

Shortcodes sind praktische kleine Schnipsel, mit denen Sie spezielle Funktionen in Ihre Inhalte einfügen können, die sonst nicht möglich wären. Als Beispiel: Viele Bildergalerie- und Slider-Plugins geben Ihnen einen Shortcode, den Sie einfach überall in Ihren Inhalt einfügen können, damit die richtigen Bilder dort erscheinen. Shortcodes sehen normalerweise so aus:

[example shortcode]

Mit anderen Worten: Shortcodes bewirken, wo immer sie in Ihrem Text platziert werden, etwas Besonderes.
Aber Sie sind nicht auf vordefinierte Shortcodes beschränkt; Sie können benutzerdefinierte Shortcodes definieren, um zu tun, was Sie wollen! Sie können einfach, komplex oder alles dazwischen sein.

In dieser Serie beginnen wir mit einem einfachen Shortcode und arbeiten uns bis zu einigen komplizierteren (und noch nützlicheren!) Beispielen vor.

Hinweis: Wir werden hier hauptsächlich mit PHP arbeiten, insbesondere in der Datei functions.php Ihres Themes. Wenn Sie kein untergeordnetes Design verwenden (oder ein benutzerdefiniertes / Starter-Design, das bearbeitet werden kann, ohne befürchten zu müssen, dass Aktualisierungen Ihre Änderungen überschreiben), sollten Sie ein untergeordnetes Design erstellen, bevor Sie beginnen.

Beachten Sie auch: Sie benötigen keine PHP-Kenntnisse, um diesen Beitrag durchzuarbeiten, aber zumindest die Grundlagen zu kennen, hilft. Der hier verwendete Code ist ziemlich einfach, und wir haben versucht, ihn so einfach wie möglich zu kopieren und anzupassen. Wir werden jedes Stück des Codes erklären, während wir fortfahren, aber wenn Sie völlig neu in WordPress Theme PHP sind, seien Sie sich bewusst, dass ein bisschen schlechter Code in Ihrer functions.php Datei die Website beschädigen kann.

Ein nützliches einfaches Shortcode-Beispiel

Nehmen wir an, wir wollen einen Shortcode, der einen speziellen Abschnitt mit Autoreninformationen in einen Beitrag einfügt, wie dieser:

Anstatt die Box, das Bild und den Text im visuellen Editor von WordPress zu erstellen und zu gestalten, erstellen wir einfach einen Shortcode, um das Ganze mit einem einfachen Snippet auszugeben!

(Nebenbemerkung: WordPress hat bessere Möglichkeiten, mit Autorenprofilen zu arbeiten, aber wir bleiben bei diesem Beispiel, weil es schön demonstriert, wie einfach es ist, Shortcodes zu verwenden, um bestimmte Inhaltsblöcke auf einer Seite zu platzieren.)

Schritt 1: Fügen Sie den Shortcode in der Datei functions.php Ihres Themes hinzu

Sie verwenden die Funktion add_shortcode , um Ihrem Shortcode einen Namen zu geben und WordPress mitzuteilen, was es tun soll, wenn der Shortcode verwendet wird. Fügen Sie diese Zeile zur Datei functions.php Ihres Themes hinzu:

 [php]add_shortcode( 'author_bio', 'create_author_bio' );[/php]

Es spielt eigentlich keine Rolle, wo in functions.php , aber um Konflikte zu vermeiden, empfehlen wir, es ganz am Ende zu platzieren. (Wenn die Datei jedoch mit einem schließenden ?>-Tag endet, sollte sie direkt davor stehen, nicht danach.)

Bevor wir weitermachen, lassen Sie uns diese Zeile ein wenig aufschlüsseln, damit wir verstehen, was hier eigentlich vor sich geht. Die zwei Textstücke oder „Argumente“ in den Klammern sind eigentlich nichts Besonderes; es sind nur Namen. Lassen Sie uns durchgehen, was jeder bedeutet:

1. Das erste Argument: in diesem Fall author_bio – teilt WordPress den tatsächlichen Namen Ihres Shortcodes mit. Dies ist der Text, den Benutzer in Klammern eingeben können, um den Shortcode zu verwenden. Mit diesem geschriebenen Code ist [author_bio] also unser Shortcode, um unsere Autoren-Bio-Box auszulösen.
   Dieser Text kann alles sein, aber es ist immer am besten, zu versuchen, einzigartig zu sein. Auf diese Weise laufen Sie nicht Gefahr, dass Ihr Shortcode-Name mit dem Namen einer anderen Person aus einem anderen installierten Plugin oder Thema in Konflikt gerät.
2. Das zweite Argument: in diesem Fall create_author_bio – weist WordPress auf die eigentliche PHP-Funktion hin, die es ausführen sollte, wenn dieser Shortcode verwendet wird. Wir werden diese Funktion im nächsten Schritt erstellen; Im Moment teilen wir WordPress nur mit, wie es heißen wird. (Dieser Name sollte ebenfalls eindeutig sein, um Konflikte zu vermeiden.)

Also, wenn es hilft, könntest du dir den Code so vorstellen:

 [php]add_shortcode( 'when_you_see_THIS_shortcode', 'do_THIS' );[/php]

Wenn Sie an weiteren Einzelheiten interessiert sind, sehen Sie sich den Codex-Eintrag add_shortcode an.

Schritt 2: Erstellen Sie die Funktion zur Handhabung des Shortcodes

Jetzt müssen wir die Funktion, die wir gerade genannt haben, tatsächlich erstellen!

Da wir WordPress gerade im letzten Schritt mitgeteilt haben, dass der Name unserer Funktion create_author_bio ist, sollte unser Code nun so aussehen, sobald wir die neue Funktion hinzugefügt haben:

 [php]add_shortcode( 'author_bio', 'create_author_bio' ); function create_author_bio(){ //Code goes here! }[/php]

Sie werden vielleicht bemerken, dass diese Funktion noch nichts tut; alles, was drin ist, ist ein Kommentar. Darum kümmern wir uns im nächsten Schritt. Im Moment möchten wir nur darauf hinweisen, dass es hier wirklich nur zwei Teile gibt: die Registrierung des Shortcodes und die Funktion, die immer dann ausgeführt wird, wenn er verwendet wird. WordPress PHP kann einschüchternd aussehen, aber es ist wirklich so einfach!

Nebenbemerkung: Es spielt keine Rolle, ob die create_author_bio Funktion nach der add_shortcode Funktion kommt oder davor. Die Reihenfolge ist in diesem Fall nicht wichtig.

Schritt 3: Lassen Sie die Funktion etwas tun

Jetzt müssen wir nur noch unsere Funktion dazu bringen, das zu tun, was wir wollen!

Eine Funktion wie diese könnte alles tun, aber egal was, sie sollte schließlich einen einzelnen Wert zurückgeben (z. B. eine Zeichenfolge oder eine Zahl). Dieser Wert kann beliebig lang oder komplex sein, aber was auch immer die Funktion zurückgibt, es wird überall dort angezeigt, wo unser Shortcode verwendet wird.

Für unsere Zwecke wird dies nur ein einfacher HTML-Code sein. Hier ist das Markup, um unser Autorenbild und unsere Biografie in ein <aside> -Element mit einer benutzerdefinierten Klasse einzufügen (aber fügen Sie dies noch nicht irgendwo ein; wir betrachten es im Moment nur als Vorschau):

 [html]<aside class="author-bio-box"></span> <img src="https://upload.wikimedia.org/wikipedia/en/1/1f/Bilbo_Baggins_Tolkien_illustration.jpg"> <p>Bilbo Baggins is the author of <cite>The Hobbit</cite>, translator of various works from the elvish, and author of a number of poems and songs.</p> <p>He is the oldest Hobbit ever in Middle Earth, and spends his days in his Tol Eressea home across the sea.</p> </aside>[/html]

Schließlich verwenden wir diese Autor-Bio-Box-Klasse in der ersten Zeile, um die Biografie mit CSS zu gestalten. (Wir verwenden eine Klasse anstelle einer ID, nur für den Fall, dass Sie mehr als einen Autoren-Shortcode für Inhalte hinzufügen möchten, die von mehreren Autoren geschrieben wurden.) Aber denken Sie daran, dies könnte alles sein, was wir in die Seite einfügen möchten!

Jetzt müssen wir nur noch die Funktion unseres Shortcodes den obigen HTML-Code zurückgeben lassen!

Da die Datei functions.php nur … na ja, PHP-Funktionen enthalten sollte (und auch aus Gründen der Ordnung), haben wir die Zeilenumbrüche und Leerzeichen zwischen den HTML-Elementen entfernt, die wir uns gerade angesehen haben, und sie in eine Zeichenfolge eingefügt (innerhalb von einfachen Anführungszeichen). . Aber funktional ist es immer noch das gleiche HTML-Snippet, das wir gerade oben gesehen haben, und so sollte unser endgültiger PHP-Code aussehen:

 [html]add_shortcode( 'author_bio', 'create_author_bio' ); function create_author_bio(){ return '<aside class="author-bio-box"><img src="https://upload.wikimedia.org/wikipedia/en/1/1f/Bilbo_Baggins_Tolkien_illustration.jpg"><p>Bilbo Baggins is the author of <cite>The Hobbit</cite>, translator of various works from the elvish, and author of a number of poems and songs.</p><p>He is the oldest Hobbit ever in Middle Earth, and spends his days in his Tol Eressea home across the sea.</p></aside>'; }[/html]

Wir sind mit PHP fertig! Sobald wir unsere functions.php Datei mit dem obigen endgültigen Code darin gespeichert haben, kann jeder Autor einfach [author_bio] auf jeder Seite oder in jedem Beitrag eingeben, und der obige HTML-Code wird anstelle des Shortcodes angezeigt!

Außerdem ist das wirklich Coole: Wenn wir jemals unsere Biografie aktualisieren müssen, müssen wir nicht jeden einzelnen Ort bearbeiten, an dem sie erscheint! Stattdessen müssen wir nur den Code in unserer Datei functions.php bearbeiten, und er wird überall auf einmal aktualisiert. Ordentlich, oder?

Um jedoch das Beste daraus zu machen, möchten wir der Bio-Box wahrscheinlich ein spezielles Styling hinzufügen.

Schritt 4: Etwas CSS hinzufügen

Der Shortcode ist ohne etwas Styling nicht großartig, also fügen wir ihn hinzu! Möglicherweise müssen Sie einige der Werte ein wenig anpassen, abhängig von den Schriftarten Ihrer eigenen Website (die im obigen Bild ist Fanwood Text) und welche CSS-Regeln bereits vorhanden sind. Oder Sie möchten einfach mal etwas anderes ausprobieren!

Dieses CSS könnte in die style.css Datei deines (untergeordneten) Themes kopiert werden, oder wenn du WordPress 4.7 oder höher verwendest (was du sein solltest!), kannst du dieses CSS einfach in das Feld „Zusätzliches CSS“ im Anpassen einfügen Bildschirm:

 [css].author-bio-box { background: #d4ead9; padding: 2em; overflow: auto; font-family: Fanwood Text; font-size: 1.2em; line-height: 1.4em; } .author-bio-box img { float: left; max-width: 128px; height: auto; margin: 0 1em 0 0; } .author-bio-box > p:first-of-type:first-letter { font-size: 3.1em; line-height: 1; float: left; margin-bottom: -.2em; } .author-bio-box > p:last-of-type { margin: 0; }[/css]

Jetzt sollte es schon viel besser aussehen. Aber Sie können gerne mit dem CSS herumspielen, um die Autorenbox zu Ihrer eigenen zu machen und sich auf Ihrer Website wie zu Hause zu fühlen!

Empfehlung: Funktion „pluggable“ machen

Dies ist nicht spezifisch für Shortcodes, und es ist nicht unbedingt erforderlich, damit der Code funktioniert, aber es ist eine bewährte Methode, und dies ist ein guter Zeitpunkt, es zu erwähnen.

Zunächst ein kleiner Hintergrund zur Funktionsweise von PHP :

Erinnern Sie sich, wie wir unsere create_author_bio Funktion selbst benennen konnten? Nun, an dem Namen create_author_bio; wir hätten unsere Funktion genauso gut benennen können, wie wir wollten (obwohl es am besten ist, wenn der Funktionsname Ihnen zumindest einen kleinen Hinweis darauf gibt, was er tut, weshalb wir uns für create_author_bio entschieden haben).

Aber hier ist die Sache: Wenn zwei PHP-Funktionen denselben Namen haben, wird das Ergebnis ein fataler Fehler sein, der das Laden der Seite verhindert, da PHP keine Ahnung hat, welche Funktion die richtige ist. PHP rät nicht, also stoppt es einfach.

Und es ist nicht nur unser Code, um den wir uns Sorgen machen müssen; Eine WordPress-Site kann Code von Dutzenden oder vielleicht sogar Hunderten verschiedener Entwickler verwenden, abhängig von den installierten Plugins und Themes. Wenn derselbe Funktionsname zweimal verwendet wird, bricht alles zusammen!

Das ist schlecht, und natürlich wollen wir sicherstellen, dass das nie passiert.

Wir können das tun, indem wir unsere Funktion „pluggable“ machen; mit anderen Worten, WordPress anweisen, unsere Funktion nicht zu erstellen, wenn bereits eine andere mit demselben Namen existiert. Es ist elegant einfach; Wir packen unseren vorhandenen Code einfach in diese einfache bedingte Anweisung:

 [php]if( !function_exists( 'create_author_bio' ) ){ //Our existing PHP goes here! }[/php]

Dieser bedingte if-Ausdruck prüft nur, ob eine Funktion namens create_author_bio nicht bereits existiert. Unser gesamter PHP-Code, den wir bisher verwendet haben, kann einfach innerhalb dieser Anweisung zwischen die geschweiften Klammern { } verschoben werden.

Es ist jedoch immer noch am besten, Funktionen so eindeutig wie möglich zu benennen! Unsere Funktion steckbar zu machen, vermeidet nur einen fatalen Fehler. Wenn es also einen Namenskonflikt gäbe, würde unser Shortcode immer noch nicht funktionieren, aber zumindest wäre die Seite immer noch aktiv und nichts anderes wäre kaputt.

Abschluss

Das ist es! Ich hoffe, es hat Ihnen Spaß gemacht, einen benutzerdefinierten Autoren-Bio-Shortcode zu erstellen! Wenn Sie mitgemacht haben, müssen Sie nur noch [author_bio] irgendwo auf einer Seite oder einem Beitrag eingeben und Ihr Code wird angezeigt!

Dieser Shortcode kann leicht angepasst werden, um alles auf einer Seite auszugeben. Ein GIF, ein benutzerdefinierter HTML- und/oder JavaScript-Block, ein Bild oder Video … alles, was Sie wollen!

Dieses Beispiel ist zwar nützlich, wenn Sie nur irgendwo einen einzelnen statischen Wert auf der Seite ausgeben müssen, aber es ist nicht sehr flexibel. Es wird immer genau dasselbe zurückgegeben, und wir brauchen oft Shortcodes, um anpassungsfähiger zu sein.

Gute Nachrichten: Wir haben nur die Grundlagen von Shortcodes behandelt, und sie können noch viel, viel mehr!