Was wäre, wenn ich Dir sagen würde, dass Du jeden HTML-Schnipsel innerhalb von nur 60 Sekunden in eigene 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
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.
Der komfortable Generator für die Shortcodes
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.
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.
Folgenden Button erzeugt unser Beispiel
Diesen Code fügt der Generator in den Editor ein:
[Roter-Button url="https://seoagentur-hamburg.com/" text="Ein cooler Button" klasse="nomargins"]
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.
