Wenn Sie kein großer Fan der Arbeit mit dem HTML-Editor in WordPress sind oder einige coole Verbesserungen für Ihre Premium-Themen bereitstellen möchten, sind Shortcodes eine großartige Lösung, um die Funktionen Ihres Post-Editors zu erweitern und gleichzeitig die Dinge einfach zu halten.
Ich dachte, es wäre cool, meiner Site eine Art Schaltfläche hinzuzufügen, wenn Links zu kostenlosen Dateien oder anderen Sites bereitgestellt werden (natürlich mit Shortcodes). Nachdem ich den Shortcode zu meinem Thema hinzugefügt hatte, dachte ich, ich würde den Code hier auf der Website teilen Bloggen, damit andere Leute, die daran interessiert sind, Schaltflächen-Shortcodes zu ihrer Website hinzuzufügen, meinen Code einfach kopieren und in ihr Thema einfügen können und nicht zu viel Zeit damit verbringen müssen, den Shortcode zu erstellen und die Schaltfläche zu gestalten.
Contents
Was sind Shortcodes??
Shortcodes wurden bereits in WordPress 2.5 eingeführt und ermöglichen es Ihnen, Makrocodes zur Verwendung in Post-Inhalten zu erstellen. Ein einfacher Shortcode würde ungefähr so aussehen:
[Shortcode]Beim Hinzufügen zum Post-Editor wird der Wert des Shortcodes zurückgegeben, der in Ihren Themendateien definiert ist. Ich werde Ihnen zeigen, wie Sie einen Shortcode erstellen, mit dem Sie Ihrem Post-Editor ganz einfach Schaltflächen hinzufügen können, ohne Code zu berühren.
Hinzufügen eines benutzerdefinierten Shortcodes für Schaltflächen
Als erstes müssen Sie den PHP-Code für Ihren Shortcode zu Ihrem Thema hinzufügen. Mit dem folgenden Code können Sie Ihrer Site eine einfache Schaltfläche hinzufügen. Dieser Code kann in die Datei functions.php eingefügt werden. Wenn Sie ein Thema eines Drittanbieters verwenden, geschieht dies am besten über ein untergeordnetes WordPress-Thema.
Funktion myprefix_button_shortcode ($ atts, $ content = null) {
// Shortcode-Attribute extrahieren
extrahieren (shortcode_atts (Array (
'url' => '',
'title' => '',
'Ziel' => '',
'text' => '',
'Farbe' => 'Grün',
), $ atts));
// Textwert für Elemente ohne Inhalt verwenden
$ content = $ text? $ text: $ content;
// Return Button mit Link
if ($ url) {
$ link_attr = array (
'href' => esc_url ($ url),
'title' => esc_attr ($ title),
'target' => ('blank' == $ target)? '_blank': '',
'class' => 'myprefix-button color-'. esc_attr ($ color),
);
$ link_attrs_str = '';
foreach ($ link_attr als $ key => $ val) {
if ($ val) {
$ link_attrs_str. = ''. $ key. '= "'. $ val. '"';
}}
}}
Rückkehr ''. do_shortcode ($ content). '';
}}
// Kein Link definiert, also Return Button als Span
sonst {
Rückkehr '';
}}
}}
add_shortcode ('button', 'myprefix_button_shortcode'); Verwenden des Shortcodes in Ihrem Post-Editor
Nachdem Sie einen Shortcode haben, können Sie Ihrem Post-Editor den neuen “Button” hinzufügen (der jetzt wie ein einfacher Link aussieht, da wir ihn nicht gestaltet haben).
// Anwendungsbeispiel 1
[button href = "IHR LINK" target = "self"] Schaltflächentext [/ button]
// Anwendungsbeispiel 2
[button href = "IHR LINK" target = "self" text = "Button Text"]
Styling der Taste
Was bringt es, einen Shortcode zu erstellen, wenn er nur wie ein einfacher Link aussieht? Nichts. Deshalb zeige ich Ihnen, wie Sie cooles CSS3 hinzufügen, um den Download-Button zu gestalten und ihn sexy aussehen zu lassen.
Wie Sie im Shortcode bemerkt haben, habe ich die Klasse “myprefix-button” hinzugefügt, damit Sie sie einfach über Ihre style.css-Datei formatieren können. Fügen Sie den folgenden Code in Ihr Stylesheet ein, um eine schöne blaue Schaltfläche wie die im Bild zu erstellen.
/ * Haupttastenstil * /
.myprefix-button {Hintergrund: # 65A343; Textschatten: 1px 1px 1px # 000; -webkit-border-radius: 5px; -moz-border-radius: 5px; Randradius: 5px; -Webkit-Box-Schatten: 1px 2px 1px rgba (0, 0, 0, 0,1); -Moz-Box-Schatten: 1 x 2 x 1 x rgba (0, 0, 0, 0,1); Kastenschatten: 1px 2px 1px rgba (0, 0, 0, 0,1); Cursor: Zeiger; Anzeige: Inline-Block; Überlauf versteckt; Polsterung: 1px; vertikal ausrichten: Mitte; }}
.myprefix-button span {border-top: 1px solid rgba (255, 255, 255, 0,25); -webkit-border-radius: 5px; -Moz-Rand-Radius: 5px; Rand-Radius: 5px; Farbe: #fff; Bildschirmsperre; Schriftdicke: fett; Schriftgröße: 1em; Polsterung: 6px 12px; Textschatten: 1px 1px 1px rgba (0, 0, 0, 0,25); }}
/* Schweben */
.myprefix-button: hover {Hintergrund: # 558938; Textdekoration: keine; }}
/ * Aktiv * /
.myprefix-button: active {Hintergrund: # 446F2D; }}
Unterstützung für mehrere Farben
Wenn Sie bemerkt haben, dass der Shortcode einen Farbparameter enthält, mit dem Sie CSS-Stile für verschiedene Schaltflächenfarben hinzufügen können. Wenn Sie beispielsweise eine blaue Farboption hinzufügen können, indem Sie dieses zusätzliche CSS hinzufügen:
/ * Blauer Knopf * /
.myprefix-button.color-blue {Hintergrund: # 2981e4}
/ * Blue Button Hover * /
.myprefix-button.color-blue: hover {Hintergrund: # 2575cf}
/ * Blaue Taste aktiv * /
.myprefix-button.color-blue: active {Hintergrund: # 0760AD}Verwenden Sie nun einfach den Farbparameter im Shortcode:
[button href = "IHR LINK" target = "self" color = "blue"] Schaltflächentext [/ button]
