Wenn Sie kein großer Fan der Arbeit mit dem HTML-Editor in WordPress sind oder einige coole Verbesserungen für Ihre Premium-Themes 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, dass es cool wäre, meiner Website eine Art Schaltfläche hinzuzufügen, wenn ich Links zu kostenlosen Dateien oder anderen Websites bereitstelle (natürlich mit Shortcodes). Nachdem ich den Shortcode zu meinem Thema hinzugefügt hatte, dachte ich mir, ich würde den Code hier auf teilen blog, 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.
Was sind Shortcodes?
Shortcodes wurden bereits in WordPress 2.5 eingeführt und ermöglichen es Ihnen, Makrocodes für die Verwendung in Post-Inhalten zu erstellen. Ein einfacher Shortcode würde in etwa so aussehen:
[shortcode]
Wenn es zum Post-Editor hinzugefügt wird, gibt es den Wert des Shortcodes zurück, wie er in Ihren Designdateien 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 „Button“-Shortcodes
Als erstes müssen Sie den PHP-Code für Ihren Shortcode zu Ihrem Theme hinzufügen. Der folgende Code kann verwendet werden, um Ihrer Website eine einfache Schaltfläche hinzuzufügen. Dieser Code kann in die Datei functions.php eingefügt werden. Wenn Sie ein Drittanbieter-Theme verwenden, tun Sie dies am besten über ein WordPress-Child-Theme.
function myprefix_button_shortcode( $atts, $content = null ) {
// Extract shortcode attributes
extract( shortcode_atts( array(
'url' => '',
'title' => '',
'target' => '',
'text' => '',
'color' => 'green',
), $atts ) );
// Use text value for items without content
$content = $text ? $text : $content;
// Return button with 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 as $key => $val ) {
if ( $val ) {
$link_attrs_str .= ' ' . $key . '="' . $val . '"';
}
}
return '<a' . $link_attrs_str . '><span>' . do_shortcode( $content ) . '</span></a>';
}
// No link defined so return button as a span
else {
return '<span class="myprefix-button"><span>' . do_shortcode( $content ) . '</span></span>';
}
}
add_shortcode( 'button', 'myprefix_button_shortcode' );
Verwenden des Shortcodes in Ihrem Post-Editor
Nachdem Sie nun einen Shortcode haben, können Sie die neue „Schaltfläche“ (die jetzt wie ein einfacher Link aussieht, da wir sie nicht gestaltet haben) zu Ihrem Post-Editor hinzufügen.
// Example usage 1
[button href="YOUR LINK" target="self"]Button Text[/button]
// Example usage 2
[button href="YOUR LINK" target="self" text="Button Text"]
Gestalten des Knopfes
Was bringt es, einen Shortcode zu erstellen, wenn er nur wie ein einfacher Link aussieht? Gar nichts. Deshalb zeige ich Ihnen, wie Sie cooles CSS3 hinzufügen, um den Download-Button zu stylen 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 gestalten können. Fügen Sie den folgenden Code in Ihr Stylesheet ein, um einen schönen blauen Button wie den im Bild zu erstellen.
/* Main Button Style */
.myprefix-button{ background:#65A343; text-shadow:1px 1px 1px #000; -webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px;-webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.1); -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.1); box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.1); cursor: pointer; display: inline-block; overflow: hidden; padding: 1px; vertical-align: middle; }
.myprefix-button span { border-top: 1px solid rgba(255, 255, 255, 0.25); -webkit-border-radius: 5px; -moz-border-radius: 5px;border-radius: 5px; color: #fff; display: block; font-weight: bold; font-size: 1em; padding: 6px 12px; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25); }
/* Hover */
.myprefix-button:hover{ background: #558938; text-decoration:none; }
/* Active */
.myprefix-button:active{ background:#446F2D; }
Unterstützung mehrerer Farben
Wenn Sie bemerkt haben, dass der Shortcode einen Farbparameter hat, 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:
/* Blue Button */
.myprefix-button.color-blue { background:#2981e4 }
/* Blue Button Hover */
.myprefix-button.color-blue:hover { background:#2575cf }
/* Blue Button Active */
.myprefix-button.color-blue:active { background:#0760AD }
Jetzt einfach den Farbparameter im Shortcode verwenden:
[button href="YOUR LINK" target="self" color="blue"]Button Text[/button]