Shortcodes f├╝r WordPress

Noch immer verwende ich den Texteditor von WordPress. Mit Gutenberg habe ich mich ehrlich gesagt noch nicht angefreundet. Als alter WP-Hase ist es mir lieber, mit selbstgebautem Code zu arbeiten. Bspw. brauche ich individuelle Elemente, die mehrmals wiederkehren. Shortcodes mit den eckigen Klammern, bekannt aus der WordPress-Galerie, sind daf├╝r eine feine L├Âsung, da ich sie schnell einf├╝gen kann.

Zun├Ąchst aber sollte ich erw├Ąhnen, dass bei aller Einfachheit der Verwendung ein Nachteil entsteht: Die individuell programmierten Shortcodes funktionieren nur solange, bis man sein Theme wechselt. Der Grund: Shortcodes werden in der functions.php definiert und an WordPress angebunden. Ich muss also in einem neuen Theme entweder die Shortcodes in die neue functions.php ├╝bertragen oder zumindest eine PHP-Datei, die man extra nur f├╝r Shortcodes angelegt hat, wieder ins neue Theme einbinden.

Alternativ gibt es auch Shortcodes-Plugins, die die Programmierarbeit weitgehend abnehmen. Wo Licht ist, ist auch hier Schatten: Zwar kann ich das Plugin bei verschiedenen Themes einsetzen, also auch beim Wechsel der Vorlage. Wird aber das Plugin nicht weiterentwickelt oder vertr├Ągt es sich nicht mit einer anderen Erweiterung, bleiben die Codes in der W├╝ste stehen. Das sieht dann beispielsweise so aus:

[textbox]Das ist der Text in einer gr├╝nen Textbox mit schattiertem Rand[/textbox].

Einfaches Beispiel f├╝r einen Shortcode
Aufgabe: Ich m├Âchte einen Tipp-Text schnell und unkomliziert mit [ tipp ]Hier steht der Tipptext.[ /tipp ] einf├╝gen k├Ânnen, und zwar fix und fertig formatiert.

1) Das geht nat├╝rlich auch ohne Shortcode mit den Styles, die ich in der style.css definiert habe (Auszug):
.tipp
{background:#c4c4c4;
color:#202020;
}
.

Ich schreibe also bspw.:
HTML-Code f├╝r einen Style

Die „Ersparnis“ an Zeichen ist hier noch nicht besonders auff├Ąllig.

Brauche ich so einen fertig formatierten Text aber ├Âfter, geht das mit Shortcodes schneller.
Die Stylesheet-Angaben muss man f├╝r beide Varianten definieren.

2) Shortcode definieren
Dazu gebe ich in der functions.php folgenden Code ein:

So sieht der fertige Tipp-Text aus, den ich wie in der Aufgabe beschrieben mit eckigen Klammern umschlie├če.
Nat├╝rlich geht das auch noch viel sch├Âner, z. B. mit Grafiken, die als Background eingebunden werden.

Um nun mit einem Klick im Editor schnell darauf zugreifen zu k├Ânnen, nutze ich das Plugin „AddQuickTag“ von Frank B├╝ltge. Damit lege ich mir die Codes an, die dann im Editor als Schnelltags zur Verf├╝gung stehen sollen.

Viel Spa├č beim Nachmachen und Stylen!

Tags: ,

Nichts verpassen und neue Beiträge abonnieren

Privatsphäre garantiert! Jederzeit abbestellbar!

einen Kommentar schreiben

Deine E-Mail-Adresse wird nicht ver├Âffentlicht. Erforderliche Felder sind mit * markiert.

Top