Post navigation

Im Handumdrehen: Eigene WordPress Shortcodes erstellen

Tutorials · · 5 Kommentare

Was wäre, wenn ich Dir sagen würde, dass Du jeden HTML-Schnipsel innerhalb von nur 60 Sekunden in WordPress Shortcodes verwandeln kannst? Du glaubst mir nicht? Dann lies weiter und Du wirst erstaunt sein.

Jedes Snippet lässt sich innerhalb kürzester Zeit in einen Shortcode umwandeln. Du kannst ihn dann sogar mit einem komfortablen Generator nutzen. Dafür benötigst Du ein Plugin, das Dir dabei hilft. Es nennt sich Post Snippets.

Eigene WordPress Shortcodes erstellen mit Post Snippets

Eigene WordPress Shortcodes erstellen: Das WordPress Plugin Post Snippets

Post Snippets: Shortcodes erstellen im Handumdrehen.

Wenn Du das Plugin installiert und aktiviert hast, findest Du im Schreibeditor einen zusätzlichen Button vor. Dieser Button steuert den Generator für die von Dir erstellten Shortcodes.

➜ Meine Empfehlung für Dich:Raidboxes Managed WordPress Hosting

Der komfortable Generator für die Shortcodes

Der Button für den Shortcode-Generator.

Der Button für den Shortcode-Generator.

Ein Beispiel: So kannst Du das Plugin optimal einsetzen

Am Anfang steht ein Code-Schnipsel, der zu einem Shortcode werden soll. Das kann jeder beliebige Schnipsel sein. In unserem Beispiel nehmen wir selbst entworfene Buttons, die wir zu Shortcodes umwandeln werden.

Teil eins: Das CSS für die Buttons

div.blue-button a { 
 background-color:#337ab7;
 background-image: none !important;
 -moz-border-radius:4px;
 -webkit-border-radius:4px;
 border-radius:4px;
 display:inline-block;
 cursor:pointer;
 color:#fff !important;
 padding:8px 45px;
 text-decoration:none;
 border: none !important;
 text-decoration: none !important;
 margin: 10px 0;
}

div.green-button a { 
 background-color:#30AC38;
 background-image: none !important;
 -moz-border-radius:4px;
 -webkit-border-radius:4px;
 border-radius:4px;
 display:inline-block;
 cursor:pointer;
 color:#fff !important;
 padding:8px 45px;
 text-decoration:none;
 border: none !important;
 text-decoration: none !important;
 margin: 10px 0;
}

div.red-button a {
 background-color:#bc3315;
 background-image: none !important;
 -moz-border-radius:4px;
 -webkit-border-radius:4px;
 border-radius:4px;
 display:inline-block;
 cursor:pointer;
 color:#fff !important;
 padding:8px 45px;
 text-decoration:none;
 border: none !important;
 text-decoration: none !important;
 margin: 10px 0;
}

div.red-button a:hover, 
div.blue-button a:hover, 
div.green-button a:hover {
opacity: .8; 
text-decoration: none !important; 
border: none !important; 
color: #fff !important
}

Intelligent wäre es nun ein Child-Theme zu erstellen, das CSS in eine von Dir erstellte CSS-Datei zu kopieren und diese dann über deine functions.php in den Header Deines Themes zu laden.

<?php
 
// Ab hier kopieren
function ah_custom_styles() {
wp_enqueue_style( 'custom-style', get_stylesheet_directory_uri().'/custom-style.css');
}
add_action( 'wp_enqueue_scripts', 'ah_custom_styles' );

Teil zwei: Die Shortcodes erstellen

Rufe das Menü »Einstellungen => Post Snippets« auf. Klicke auf »Neues Snippet hinzufügen«. Danach kannst Du deinen HTML-Code eingeben. Das erste Feld ist für den Namen des Shortcodes. Leerzeichen sind nicht erlaubt, wenn Du aus Deinem Snippet einen Shortcode machen möchtest.

Im Feld zwei gibst Du die Variablen ein, die Du für die spätere Eingabe im Generator nutzen möchtest. Du erstellst zum Beispiel eine Variable für die URL, auf die der Button verlinkt sein soll und eine weitere für den Text des Buttons.

Ich habe sogar noch eine dritte Variable für eine zusätzliche CSS-Klasse definiert, die man vergeben kann, jedoch nicht muss. Setze bei Shortcode einen Haken. Im dritten Feld rechts gibst Du den Code nach dem Muster im folgenden Screenshot ein:

So einfach machst Du aus Snippets eigene WordPress Shortcodes.

So einfach machst Du aus Snippets eigene WordPress Shortcodes.

Nach dem Abspeichern kannst Du Deine Shortcodes bereits nutzen.

WordPress Shortcodes: So einfach kannst Du sie nutzen

Wenn Du nun einen Artikel verfasst, reicht ein einfacher Klick auf den Generator-Button, um Deine Einstellungen aufzurufen:

Rufe den Generator auf und fülle die von Dir erstellten Felder aus.

Rufe den Generator auf und fülle die von Dir erstellten Felder aus.

Folgenden Button erzeugt unser Beispiel

Diesen Code fügt der Generator in den Editor ein:

Das ist das Ergebnis:

Mein Fazit

Wie Du sehen kannst, habe ich ziemlich viele Shortcodes erstellt und nutze sie sehr oft. Das Plugin findet sich in jedem meiner Projekte wieder – egal ob es sich um ein eigenes oder ein Kunden-Projekt handelt. Es ist mein wichtigstes Plugin.

Abonniere meinen Newsletter

Melde Dich für meinen Newsletter "WordPress & Bloggen" an und verpasse keinen Artikel. Als Dankeschön bekommst Du Gratis meine nützliche Checkliste:
»12 Dinge, die Du vor einem Theme-Wechsel beachten solltest«.

Andreas Hecht

ist WordPress-Entwickler und bietet dir WordPress-Sicherheit für deine Website. Zudem entwickelt er WooCommerce Shops mit Ladezeiten von unter einer Sekunde. Er ist ebenfalls Autor von drei richtig guten WordPress E-Books.

5 thoughts on “Im Handumdrehen: Eigene WordPress Shortcodes erstellen

  • Das ist ja genial!
    Ich habe etliche Blogs und habe bis jetzt immer nur Shortcodes Ultimate verwendet. Das ist zwar schon sehr hilfreich aber manche Sachen die ich haben möchte und häufiger brauche gibt es da nicht. Dann muss ich immer rumbasteln.
    Werds mal mit dem PlugIn dass du hier vorstellst ausprobieren!

    Danke für den Tipp
    Grüße Dietrich

  • Hallo Andreas!
    Hast du eine Lösung, um verwendete Shortcodes im Editor von WordPress einzufärben oder mit einem Hintergrund zu hinterlegen? Bei vielen Shortcodes auf einer Seite wird mir das recht unübersichtlich. Bisher habe ich keine komfortable Möglichkeit dafür gefunden. Möchtest du deinen Syntax-Highlighter dementsprechend erweitern oder gibt es bereits eine Möglichkeit? 🙂
    Viele Grüße
    Heiko

      • Hallo Andreas,

        da habe ich leider nichts gefunden – was mich erstaunt hat. Entweder suche ich nach den falschen Dingen oder es gibt dazu einfach nichts. Daher dachte ich, dass ich einfach einen der Top-10-WordPress-Experten frage. 😉
        Von der Leserlichkeit ist eine Seite mit unzähligen Shortcodes nicht besser zu lesen als eine in HTML. Mit wenigen Shortcodes ist das kein Problem, bei vielen fände ich eine farbliche Hervorhebung sehr komfortabel.

        Wenn du über etwas Derartiges stolpern solltest, kannst du mir gerne Bescheid geben.

        Viele Grüße
        Heiko Mitschke

        • Hi Heiko,

          das werde ich auf jeden Fall machen, denn auch ich kenne das Problem mit den Shortcodes. Ich habe für diese Seite tonnenweise Shortcodes entwickelt, die auch keinen visuellen Editor haben…

Schreibe einen Kommentar

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