Alles über WordPress Shortcodes

Wenn Sie jemals mit einem WordPress-Theme gearbeitet haben, sind Sie wahrscheinlich auf einen WordPress-Shortcode gestoßen … etwas, das in etwa so aussieht:

 [button type="twitter"]

Ob Sie verstanden haben, was ein Shortcode ist und wie er funktioniert, ist jedoch eine andere Sache! Themenautoren verwenden Shortcodes ausgiebig, nehmen aber manchmal einfach an, dass Benutzer wissen, was sie sind und wie sie funktionieren, obwohl sie in Wirklichkeit ziemlich verwirrend sein können!

Die gute Nachricht ist, dass Shortcodes sowohl einfach zu verstehen als auch zu verwenden sind. In diesem Artikel werfen wir einen Blick auf Shortcodes, um herauszufinden, wie Sie das Beste aus ihnen machen können, bevor wir uns ansehen, wie Sie Ihren ganz eigenen Shortcode erstellen können!

Steigen wir ein!

Was sind WordPress-Shortcodes?

WordPress hat Shortcodes bereits vor langer Zeit eingeführt, als v2.5 von WordPress veröffentlicht wurde (das war im Jahr 2008), und seitdem werden sie in den meisten Themen und Plugins ausgiebig verwendet.

Also, was genau sind Shortcodes? Nun, kurz gesagt (sorry, konnte nicht widerstehen), Shortcodes sind ein bisschen Code, der so ziemlich überall auf Ihrer Website verwendet werden kann, um ein Feature oder eine Funktion einzufügen. Anstatt also z. B. mühsam ein Social-Media-Symbol mit HTML codieren zu müssen, können Sie stattdessen einen Shortcode einfügen, der WordPress „anweist“, ein Social-Media-Symbol dort einzufügen, wo Sie einen bestimmten Shortcode einfügen. Der Stil und die Funktion (in diesem Beispiel) des Social-Media-Icons wird vom Theme-Entwickler vordefiniert, sodass die gesamte schwere Arbeit aus Programmierperspektive für Sie erledigt wurde.

Vielleicht möchten Sie also ein Facebook-Symbol am Ende eines Blogbeitrags platzieren. Anstatt dies manuell einzufügen, einen Hyperlink hinzuzufügen, die Größe des Symbols zu aktualisieren usw., müssen Sie möglicherweise nur einen Shortcode eingeben, der vom Themenautor „vorprogrammiert“ wurde und wie folgt aussehen könnte:

 social icon="facebook"]

Es ist wichtig, an dieser Stelle zu wiederholen, dass Sie nicht einfach Shortcodes Ihrer eigenen Entwicklung hinzufügen und erwarten können, dass sie funktionieren. Sie müssen als Option zu Ihrem Thema hinzugefügt worden sein. In der Regel werden Themes mit vielen vorgefertigten Shortcodes geliefert, und die Theme-Anweisungen enthalten eine Liste der verfügbaren Shortcodes, aus denen Sie auswählen können.

Shortcodes sind eine großartige Abkürzung für Nicht-Entwickler, um viele Arten von Inhalten anzuzeigen, ohne Code schreiben zu müssen, und ein Tool, das auch Entwicklern Zeit sparen kann.

Was können Sie mit WordPress-Shortcodes machen?

Shortcodes werden verwendet, um eine breite Palette von Inhalten einzufügen, von einem Call-to-Action (CTA)-Button, einem dynamischen Werbefeld, einem Kontaktformular, Bildergalerien, Schiebereglern und vielem mehr … aber, wie oben erwähnt, welche Shortcode-Optionen sind die Ihnen zur Verfügung stehenden Optionen hängen von dem Thema und den Plugins ab, die Sie verwenden.

Ein Shortcode-Beispiel mit dem Contact Form 7 Plugin

Es sind nicht nur Themen, die Shortcodes verwenden. Eines der beliebtesten heute verfügbaren Kontaktformular-Plugins, Contact Form 7, verwendet Shortcodes, damit Benutzer ein Kontaktformular schnell und einfach an einem Ort ihrer Wahl einbetten können.

Dazu müssen Sie nach der Installation von Contact Form 7 nur noch Folgendes tun, um ein Formular zu einer Seite hinzuzufügen oder auf Ihrer Website zu posten.

Schritt eins:

Gehen Sie zum Menü Kontakt > Kontaktformulare und erstellen Sie ein neues Formular oder verwenden Sie das vorhandene, mit dem das Plugin geliefert wird.

Kopieren Sie den Shortcode [contact-form-7 title="Contact form 1"] , der dem Formular entspricht.

Schritt zwei:

Fügen Sie den Shortcode an der Stelle ein, an der das Formular wie unten gezeigt angezeigt werden soll:

Speichern Sie die Seite und Sie sollten dann Folgendes sehen:

Und das ist es! Sie haben gerade erfolgreich einen Shortcode verwendet, um ein Kontaktformular auf Ihrer Website einzubetten. Wie Sie sehen können, sind Shortcodes unglaublich einfach zu verwenden und können Aufgaben beschleunigen, die andernfalls komplex und zeitaufwändig wären.

Verwenden von Standard-WordPress-Shortcodes

Obwohl die meisten Shortcodes, die Sie wahrscheinlich verwenden werden, als Ergebnis der Installation eines Designs oder Plugins eingeführt werden. WordPress selbst hat jedoch eine Handvoll „Standard“-Shortcodes, die Sie verwenden können. Diese beinhalten:

• Audio
• Bildbeschriftung
• Einbetten
• Galerie
• Wiedergabeliste
• Video

Diese Shortcodes können auf Ihrer gesamten Website verwendet werden, um eine Reihe von Inhalten hinzuzufügen, z. B. einen Audioplayer. In der Abbildung unten zeigen wir die Verwendung in einem Fußzeilen-Widget.

Um herauszufinden, wie Sie diese Shortcodes im Detail verwenden können, lesen Sie den WordPress-Support-Artikel zu diesen.

Was tun Sie also, wenn entweder WordPress oder das von Ihnen verwendete Theme/Plugin nicht den Shortcode bietet, den Sie für Ihren speziellen Zweck benötigen? Einfach ... erstellen Sie Ihre eigenen!

Erstellen Sie Ihren eigenen WordPress-Shortcode

WordPress verfügt über eine Shortcode-API, die genutzt werden kann, um relativ einfach eigene Shortcodes zu entwickeln. Lassen Sie uns die grundlegenden Schritte durchgehen, die Sie ausführen müssen, um jetzt Ihren eigenen Shortcode zu erstellen.

Schritt eins:

In diesem Beispiel erstellen wir eine CTA-Schaltfläche (Call to Action), auf die der Leser klicken kann, um zu einem Kontaktformular weitergeleitet zu werden.

Um die Dinge organisiert zu halten, empfehlen wir Ihnen, alle Ihre Shortcodes in einer separaten Datei zu speichern (anstatt Code zu einer vorhandenen Datei hinzuzufügen). Erstellen Sie dazu eine neue leere Datei im selben Ordner wie die Datei functions.php Ihres Themes und nennen Sie sie etwa my-shortcodes.php . Danach fügen Sie diese Datei wie folgt in Ihre functions.php -Datei ein:

 include('my-shortcodes.php');

Während wir, wie wir gerade gesagt haben, empfehlen, Ihre Shortcodes in einer separaten Datei zu erstellen, werden wir für die Zwecke dieses Artikels direkt fortfahren und unseren neuen Code direkt in unsere Datei functions.php einfügen, um das Beispiel beizubehalten so klar wie möglich.

Wir werden die Funktion add_shortcode verwenden, die in der Datei wp-includes/shortcodes.php shortcodes.php eingeführt wird. Diese Funktion benötigt zwei Parameter, das Shortcode-Tag und die Callback-Funktion.

 add_shortcode( string $tag, callable $callback )

Schritt zwei:

Hier ist das Stück Code, das Sie in Ihre Datei functions.php einfügen können:

 add_shortcode( 'my_cta_button', 'my_cta_function' ); function my_cta_function() { return '<span class="cta_button"><a href="THE_CONTACT_FORM_URL">Let us know you are interested</a></span>'; }

Beachten Sie, dass die Tag- und Funktionsnamen nur Kleinbuchstaben und Unterstriche enthalten.

Vergessen Sie nicht, „THE_CONTACT_FORM_URL“ durch die URL des Kontaktformulars zu ersetzen, zu dem Sie den Benutzer umleiten möchten.

Außerdem können Sie diesen CSS-Code optional in Ihrer style.css -Datei verwenden, um die Schaltfläche optisch ansprechender aussehen zu lassen:

 .cta_button a { color: white; text-decoration: none; } .cta_button { text-align: center; color: #fff !important; text-transform: uppercase; text-decoration: none; background: #ed3330; padding: 20px; border-radius: 5px; display: inline-block; border: none; transition: all 0.4s ease 0s; } .cta_button:hover { background: #434343; letter-spacing: 1px; -webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57); -moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57); box-shadow: 5px 40px -10px rgba(0,0,0,0.57); transition: all 0.4s ease 0s; }

Schritt drei:

Die Anzeige Ihres Shortcodes im Inhalt der Website erfolgt wie bei jedem anderen Shortcode. In diesem Beispiel wäre unser [my_cta_button] . Fügen Sie dies zu einem Beitrag oder einer Seite hinzu und Sie sollten so etwas sehen, wenn Sie die Seite anzeigen:

Dieses Beispiel gibt Inhalte aus, die in dem von uns bereitgestellten PHP-Code vordefiniert sind. Mal sehen, wie Sie dem Admin-Benutzer erlauben können, die Shortcode-Ausgabe bei Bedarf anzupassen.

Ein Shortcode, der Benutzerattribute akzeptiert

Um einen Shortcode mit vom Benutzer bearbeitbaren Attributen zu erstellen, müssen Sie ein Array der Attribute definieren, die Sie dem Benutzer erlauben möchten, innerhalb Ihrer Callback-Funktion zu ändern. Beispielsweise möchten Sie möglicherweise den Standardtitel und die URL der Schaltfläche ändern können.

 add_shortcode( 'my_cta_button', 'my_cta_function' ); function my_cta_function( $atts ) { $params = shortcode_atts( array( 'title' => 'Let us know you are interested', 'url' => 'THE_CONTACT_FORM_URL' ), $atts ); return '<span class="cta_button"><a href="' . $params['url'] .'">' . $params['title'] .'</a></span>'; }

Im obigen Code haben wir die Funktion shortcode_atts verwendet, um die benutzerdefinierten Attribute mit bekannten Attributen zu kombinieren. Auf diese Weise müssen Sie für jede benötigte CTA-Schaltfläche eine andere Shortcode-Funktion erstellen, aber nur eine, die jedes Mal an eine vom Benutzer angegebene Stelle weiterleitet.

Die Verwendung dieses Codes sollte wie folgt angegeben werden: [my_cta_button title='My Custom Title' url='MY_URL']

Fügen Sie einen Shortcode in einer Vorlagendatei hinzu

Aus Entwicklersicht gibt es auch eine schnelle Möglichkeit, den Shortcode zwangsweise an einer vordefinierten Position auf Ihrer Website einzufügen, indem Sie ihn in der entsprechenden Vorlagendatei aufrufen. Wenn wir beispielsweise möchten, dass die CTA-Schaltfläche im unteren Abschnitt jedes einzelnen Beitrags oder jeder einzelnen Seite angezeigt wird, können wir die einzelne Vorlage bearbeiten und die do_shortcode Funktion verwenden. Im Design Twenty Twenty haben wir die Datei singular.php bearbeitet und diese Zeile unter dem Schließen des Haupt-Div-Containers eingefügt:

 <?php echo do_shortcode('[my_cta_button]'); ?>

Das Ergebnis wird unter dem Beitragsinhalt und vor den Fußzeilen-Widgets angezeigt.

Fazit

Bevor wir diesen Artikel abschließen, denken Sie daran, dass, wenn Sie Shortcodes verwenden, die von Ihrem Design oder einem Plugin bereitgestellt werden, und Sie dieses Design/Plugin später deaktivieren, diese Shortcodes nicht mehr funktionieren (es wird nur die Shortcode-Klammer angezeigt). das Frontend Ihrer Website).

Mit dieser einen kleinen Einschränkung sind Shortcodes eine wirklich hilfreiche Funktion beim Erstellen einer Website. Sie werden in WordPress häufig verwendet, und wenn Sie sie noch nicht verwenden möchten, ist es jetzt vielleicht an der Zeit, Shortcodes einen anderen Blick zu geben!