WordPress Theme anpassen Teil 3: Eigene Shortcodes erstellen mit Plugin Post Snippets

Im dritten Teil unserer Artikelreihe „WordPress Theme anpassen wie ein Profi“ geht es darum, gestalterische Website Elemente wie Buttons, Boxen, Textbausteine oder Ähnliches so aufzubereiten, dass sie wiederholt angewendet werden können. Dafür gibt es in WordPress die Möglichkeit, aus dem vordefinierten Content einen Shortcode zu erstellen und diese „Abkürzung“ an jede beliebige Stelle im Editor einzusetzen.

Inhaltsverzeichnis der Artikelserie:

• Teil 1 – Theme Optionen & Theme Customizer
• Teil 2 – Eigenes CSS und Browser Entwicklertools
• Teil 3 – Eigene Shortcodes erstellen mit Plugin Post Snippets
• Teil 4 – WordPress Child Theme erstellen mit Plugin
• Teil 5 – WordPress Template Dateien bearbeiten
• Teil 6 – WordPress Page Template erstellen
• Teil 7 – WordPress Hooks verstehen und anwenden

Die nützlichen Shortcodes eignen sich aber nicht nur dafür, den Website Inhalt wieder verwendbar zu machen. Du wirst auch einen Einsatzfall kennenlernen, bei dem die Verwendung von Shortcodes ein Muss ist. Der Beitrag zeigt außerdem, wie du dein eigenes Produkt (z. B. ein E-Book oder einen Online Kurs) mit Hilfe von Shortcodes überall auf deiner Website promoten kannst und wie eine mögliche WordPress Zukunft im Bezug auf Shortcodes aussehen könnte.

Artikelinhalt für die Schnellauswahl:

• Shortcodes Anwendungen – Warum sollte man einen Shortcode erstellen?
• Eigene Shortcode erstellen mit Plugin Post Snippets (Promotion Box)
• Mögliche Fehler bei der Anwendung von Shortcodes
• Zukunft der Shortcodes in WordPress

Shortcodes Anwendungen – Warum sollte man einen Shortcode erstellen?

Im Folgenden sind ein paar Anwendungsfälle mit Beispielen für Shortcodes aufgeführt. Richtig angewendet können die vorprogrammierten Makros sowohl den eigenen Workflow beschleunigen als auch den Kunden und Usern eine bessere Usability bieten. Zu jedem Anwendungsfall empfehle ich dir außerdem den passenden Shortcode Typen. Die unterschiedlichen Shortcode Arten sind auf der zugehörigen Lexikon Seite vorgestellt.

1. Einzelne Bereiche einer Webseite anders stylen

Manchmal möchte man bestimmte Artikelbereiche (z. B. einen Absatz) anders darstellen als den Rest des Beitrags. Mit dem neuen WordPress Editor Gutenberg wird man das in Zukunft über eine einfache Benutzeroberfläche umsetzen können. Bis es soweit ist, muss man einen CSS-Code für eine Klasse (class) schreiben und jedem Absatz, den man umstylen möchte, in den Text-Editor wechseln, um ihm die entsprechende CSS-Klasse zuzuweisen. Oder man erstellt einfach einen Shortcode. Ich habe z. B. für meine WPC Tipps auch einen Shortcode „wpc“ erstellt:

[wpc title=“Warum sind manche Wörter auf WPC blau gefärbt?“]Wenn du mit der Maus über die blauen Wörter auf diesem Blog fährst, wird dir die Begriffsdefinition mit zusätzlichen Informationen in einem Tooltip angezeigt. Mit einem Klick auf „weiterlesen“ gelangst du zu der verlinkten WordPress Lexikon Seite.“[/wpc]

Weitere Anwendungsgebiete, die in diese Kategorie fallen, sind z. B. Zitate, Tabs, Buttons, Links, Accordions etc.

Empfohlener Shortcode Typ: (Enclosed) Shortcode mit Attributen

2. Textbausteine wiederholt anwenden

Für diesen Use Case nehmen wir an, wir möchten den folgenden Absatz an das Ende unserer Blog Beiträge hinzufügen:

„Ich bin mir sicher, du kennst jemanden, dem dieser Beitrag auch gefallen könnte. Er/sie würde sich bestimmt freuen, wenn du den Beitrag mit ihm/ihr teilst.“

Das ist jetzt nur ein Beispiel, aber nur für den Fall, dass du dich angesprochen fühlst, findest du am Ende des Beitrags ein paar Buttons zum Teilen. 😉

Der entscheidende Punkt ist jedoch, dass wir diesen Absatz nicht an jeden Blog Beitrag anheften möchten (dazu gibt es nämlich in WordPress bessere Möglichkeiten, wie z. B. die Hooks), sondern an ganz bestimmte. Wir können nun daraus einen Shortcode erstellen (z. B. [social]) und diesen nur bei den von uns ausgewählten Beiträgen hinzufügen.

Empfohlener Shortcode Typ: Einfacher Shortcode

3. Javascript Code im WordPress Editor verwenden

Die meisten Use Cases für Shortcodes lassen sich mit dem in diesem Beitrag vorgestellten Plugin über einfache Snippets umsetzen. Die Erstellung eines Shortcodes ist nicht unbedingt nötig. Bei der Verwendung von Javascript im WordPress Editor ist das nicht der Fall. Komischerweise ist die Tatsache, dass der WordPress Editor den Javascript Code nicht so gut handeln kann, gar nicht so weit verbreitet. Das liegt wahrscheinlich daran, dass Javascript selten Anwendung im WP Editor findet.

Falls du z. B. ein Google Analytics User bist und deine Datenschutzerklärung im visuellen Modus des Editors gespeichert hast, ist die Gefahr groß, dass WordPress den erforderlichen Javascript Code aus deinem Rechtstext entfernt hat.

Empfohlener Shortcode Typ: Einfacher Shortcode

4. Daten aus der Datenbank holen

Was mit HTML, CSS und Javascript geht, geht natürlich auch mit PHP. Einen möglichen Use Case hierfür findest du im WPC Tutorial: WordPress Shortcode erstellen – Top Related Post. Dort holen wir mittels eines Shortcodes und einer Beitrags-ID einen beliebigen Artikel aus der Datenbank und präsentieren ihn an der gewünschten Stelle im Beitrag unserer Wahl. Damit werden die einzelnen Artikel thematisch besser miteinander verbunden und der Leser zum „Weiterstöbern“ eingeladen.

Aber es gibt natürlich viele andere Beispiele für diesen Anwendungsfall. Beliebte Membership und E-Commerce Plugins stellen ihren Usern Shortcodes zur Verfügung, um beispielsweise einfach eine Warenkorb- oder eine Login-Seite umzusetzen.

Empfohlener Shortcode Typ: Alle Arten möglich

[stay id=“2224″]

WordPress Shortcode erstellen mit dem Plugin Post Snippets

Wie bereits erwähnt, findest du auf WPC auch die übliche Erstellungsmethode, um einen Shortcode zu generieren. Der Funktionsumfang des Plugins Post Snippets ist jedoch so mächtig und die Handhabung so einfach, dass sich selbst WordPress Einsteiger nicht davor abschrecken lassen müssen, die Funktionalität ihres WordPress Themes mit Shortcodes zu erweitern.

Schauen wir uns nun an, wie man einen einfachen und einen etwas aufwendigeren Shortcode mit dem Plugin Post Snippets erstellen kann. Nachdem du das Post Snippets Plugin installiert und aktiviert hast, klicke einfach unter dem Menüpunkt Einstellungen > Post Snippets auf den Button „Neues Snippet hinzufügen“.

1. Einfacher Shortcode

Gebe den Link mit dem Javascript Code ein, aktiviere die Checkbox „Shortcode“, trage optional eine Beschreibung ein und klicke auf „Snippets aktualisieren“.

Im WordPress Editor findest du eine Schaltfläche, über die du ganz einfach deinen zuvor erstellten Shortcode an die passende Stelle (in diesem Fall in der Datenschutzerklärung) eintragen kannst.

2. Shortcode mit Attributen erstellen

Als Beispiel für diese Art Shortcode werde ich eine „Promotion Box“ für meinen gerade erst fertiggestellten WordPress Online Kurs erstellen. Diese „Promotion Box“ lässt sich dann problemlos per Shortcode in jeden beliebigen Beitrag und auf jeder beliebigen Seite einsetzen. Hätte ich die Box immer gleich darstellen wollen, wäre auch für diesen Anwendungsfall ein einfacher Shortcode ausreichend gewesen. Ich möchte jedoch die verschiedenen Schwerpunkte des Kurses passend zu dem jeweiligen Beitrag hervorheben. Das ermöglichen mir die Attribute bzw. die Variablen, wie wir gleich sehen werden.

Du kannst den Code gerne verwenden, um auch deine Produkte wie z. B. E-Books, PDFs oder eben auch Kurse auf deinem Blog bzw. deiner Website zu promoten.

Damit die „Promotion Box“ auch nach etwas aussieht, benötigen wir erst einmal ein wenig CSS:

.wpc-kurs {
  position: relative;
  width: 91%;
  background: #EAEAEA; /* Fallback */
  background: linear-gradient(-150deg, transparent 1.5em, #EAEAEA 0);
  min-height: 250px;
  padding: 1em 2em;
  border-radius: .5em;
  margin-bottom: 1em;
}

.wpc-kurs::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 1.73em; height: 3em;
  background: linear-gradient(to left bottom, transparent 50%, rgba(0,0,0,.2) 0, rgba(0,0,0,.4)) 100% 0 no-repeat;
  transform: translateY(-1.3em) rotate(-30deg);
  transform-origin: bottom right;
  border-bottom-left-radius: .5em;
  box-shadow: -.2em .2em .3em -.1em rgba(0,0,0,.15)
}

.wpc-kurs img {
  float: left;
  margin-right: 20px;
  width: 30%;
}

.wpc-kurs-btn {
  color:#fff;
  font-size: 1em;
  letter-spacing: 1px;
  font-weight: 500;
  background-color: #D75C37;
  padding: 5px 10px;
  border-radius: 3px;
  transition: background-color 0.5s linear;
}

.wpc-kurs-btn:hover,
.wpc-kurs-btn:focus {
  background-color: #6991AC;
  color: #fff;
}

Zusätzlich zu dem CSS Code kann man natürlich noch ein paar Media Queries für den „responsiven Feinschliff“ hinzufügen.

Der erforderliche Code für das Post Snippets Plugin sieht wie folgt aus:

Wir haben nun einen neuen Shortcode erstellt mit dem Namen „WPCKurs“ und zwei Variablen (Attributen) – Titel und Text. Die Variablen sind Platzhalter, die bei der Anwendung des Shortcodes durch einen Text ersetzt werden können.

Falls du den gleichen Code verwendest, solltest du natürlich die URL zu deinem Bild in den „src-Attribut“ einfügen.

Um den gerade erstellten Code anzuwenden, wähle den entsprechenden Button im WP Editor aus, gebe einen Titel und den Inhalt ein und deine „Promotion Box“ ist fertig.

Es gibt allerdings ein kleines Problem: Wenn du den Shortcode auf diese Art und Weise erstellst, hast du nicht die Möglichkeit, HTML-Code in den Inhaltsbereich (anstelle der Variablen „text“) einzusetzen – nicht einmal einen Link. Vor einiger Zeit dachte ich noch, ich hätte einen Use Case für die ursprüngliche Shortcode Erstellungsmethode ohne Plugin gefunden. Aber Post Snippets kann sogar dieses Problem lösen. Wir müssen nur unseren Code Schnipsel leicht anpassen:

3. Shortcode mit Attributen sowie einem Anfangs- und End-Tag erstellen (enclosed Shortcode)

Wenn wir nun den Shortcode über den Button im WordPress Editor einfügen, können wir aus einem einfachen Shortcode einen sogenannten enclosed Shortcode machen. Dafür müssen wir jedoch den End-Tag, in unserem Fall [[/WPCKurs]] manuell hinzufügen. Damit wird der komplette Inhalt, den wir zwischen den Anfangs- und den End-Tag einfügen, in unserer „Promotion Box“ angezeigt. Nun können wir sogar Links und anderen HTML-Code verwenden und unsere Box damit noch variabler gestalten.

Das Ergebnis unseres selbst-erstellten Shortcodes sieht im Backend wie folgt aus:

Und in der Frontansicht erhalten wir dieses Ergebnis:

Jetzt jedes WordPress Theme einfach selbst anpassen!

Mit dem WordPress Kurs von WPC lernst du, wie du ganz einfach Shortcodes, Child Themes und Page Templates selbst erstellst, um jedes WordPress Theme nach deinen Wünschen anzupassen.

ZUM KURS

Wie bereits erwähnt, ermöglicht das Plugin Post Snippets auch PHP Snippets zu verwenden. Falsch angewendet, kann jedoch PHP Code in WordPress großen Schaden anrichten. Falls du verhindern möchtest, dass deine User PHP Code in Post Snippets verwenden, trage die folgende Code-Zeile in die wp-config.php Datei ein:

define('POST_SNIPPETS_DISABLE_PHP', true);

Mögliche Fehler bei der Anwendung von Shortcodes

Shortcodes funktionieren nicht in Widgets

Seit der Version 4.9 gibt es in WordPress auch ein HTML Widget. Seltsamerweise funktionieren aber die Shortcodes nicht in dem neuen HTML Widget. Wenn du jedoch Shortcodes mit einem Widget verwenden möchtest, kannst du ab der Version 4.9 das Text-Widget verwenden. Falls du noch eine ältere Version von WordPress verwendest (shame on you ;-)), kannst du den folgenden Code in die functions.php Datei deines Child Themes einfügen. Damit werden die Shortcodes auch in den Widgets richtig ausgeführt.

add_filter('widget_text', 'do_shortcode');

Shortcodes funktionieren nicht im RSS Feed

Hast du schon mal deine Beiträge, die einen Shortcode enthalten in einem RSS Reader wie z. B. Feedly angesehen? Die Möglichkeit besteht, dass die Shortcodes nicht ausgeführt werden und du dort die eckigen Klammern mit dem Shortcode-Namen entdeckst. Damit der hinterlegte Code auch in RSS Readern richtig ausgeführt wird, kannst du die folgenden Zeilen Code in die functions.php Datei deines Child Themes eintragen:

add_filter('the_content_feed', 'do_shortcode');
add_filter('the_excerpt_rss', 'do_shortcode');

Verwende als Shortcode Name nicht die bereits existierenden Namen

Wenn du neue Shortcodes generierst, achte darauf, nicht die bereits verwendeten Namen wie audio, video, embed, gallery, caption und playlist zu verwenden.

Ausblick: Zukunft der Shortcodes

Machen wir eine Reise in die WordPress Zukunft. Gutenberg und Elementor haben sich die Editierung des Inhalts untereinander aufgeteilt. Die Gutenberg Blocks übernehmen aufwendige Formatierungen der einzelnen Beiträge im Backend (Adminbereich) und die Elementor Elements kümmern sich um das Aussehen und das Layout der Seite im Frontend. Selbst das „Shortcode“-Element von Elementor wurde schon vor einiger Zeit durch einen „Gutenberg Block“-Element ersetzt. Da Gutenberg selbst aus Javascript besteht, kann er auch reinen Javascript Code besser handeln als sein Vorgänger.

Das WordPress Team wehrt sich immer noch dagegen, „nested Blocks“ für Gutenberg anzubieten, was die Tür für die Shortcodes wieder einen kleinen Spalt öffnet. Allerdings wird die Tür gleich wieder geschlossen, da man durch gewisse Plugins von Drittanbietern nun auch Blocks in andere Blocks platzieren kann.

Abgesehen von ein paar speziellen Anwendungsfällen, wird die Luft also ganz schön dünn für den Code hinter den eckigen Klammern, der uns seit 2008 begleitet. Bleibt abzuwarten, ob vielleicht auch ein paar WordPress Gallier sich weigern werden, ihre Plugins und Addons auf das neue WordPress Zeitalter umzustellen.

[stay id=“2388″]