Buttons verwenden – Ganz ohne Plugin
Zuletzt aktualisiert am 25. August 2019 um 03:39 Uhr
Kürzlich fragte mich ein Mitglied meines Erfolgsteams ob es wohl eine Möglichkeit gibt, Buttons in einer WordPress-Seite auch ohne Plugin zu erstellen. Und weil ich mir gedacht habe, dass die Antwort auf diese Frage auch für viele meiner Leser interessant sein könnte zeige ich heute eine kleine Anleitung dafür.
Inhaltsverzeichnis
Button per CSS definieren
Um einen Button ohne Plugin zu generieren müssen wir zunächst eine sogenannte „Klasse“ für den Button im Stylesheet definieren:
.wpb_button {
padding: 7px;
background: red;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: white;
border: 1px solid darkred;
border-radius: 10px;
}
Diesen Code tragen Sie bitte in die die Custom CSS-Sektion Ihres Themes ein. Falls es einen solchen Bereich für Ihr Theme nicht gibt können Sie das Plugin „PC Custom CSS“ installieren, das unter „Design“ einen neuen Menüpunkt „Custom CSS“ einfügt, in dem Sie den Code einfügen können.
Nur wenn Sie ein Child-Theme verwenden können Sie diesen Code auch direkt in die style.css einfügen, die Sie unter „Design“ – „Editor“ finden.
Bedeutung der CSS-Regel
.wpb_button -> Das ist der sogenannte „Selektor“ der Regel.
Der vorangestellte Punkt definiert eine sogenannte CSS-Klasse, die mit class=“wob_button“ in das HTML-Element eingefügt wird.
padding -> Dieser Wert definiert den Innenabstand des Elementes.
Je größer dieser Wert ist, desto größer wird der Abstand des Buttontextes zu den Rändern des Buttons.
background -> Das definiert die Farbe des Hintergrundes, also die eigentliche Buttonfarbe.
Der Einfachheit halber verwende ich im Beispiel die Farben mit Klarnamen. Sie können aber selbstverständlich jede beliebige Farbe über den Hex-Code definieren.
font-family -> Die Schriftart des Buttontextes
Der erste Wert definiert die Schriftart, die gewünscht ist (Arial). Ist Arial auf dem Rechner, mit dem die Website aufgerufen wird, nicht installiert wird eine Ausweichschrift (Helvetica) aufgerufen.
Sind beide Schriften nicht verfügbar wird eine beliebige serifenlose Schrift (sans-serif) angezeigt.
font-weight -> legt fest, wie fett eine Schrift angezeigt wird
„bold“ heißt, dass die Schrift fett angezeigt werden soll.
color -> Die Farbe der Schrift
Auch hier gilt: Sie können jede beliebige Schriftfarbe über den 6-stelligen HexCode definieren. Achten Sie auf ausreichend starke Kontraste um eine gute Lesbarkeit zu gewährleisten.
border -> Rahmen um den Button
Wenn Sie Ihrem Button einen Rahmen verpassen möchten, dann können Sie das mit diesem Wert erreichen.
Je größer die angegebene Pixelzahl, desto breiter wird der Rahmen.
„solid“ heißt, dass der Rahmen in einer durchgehenden Linie angezeigt wird. Alternativen wären z.B. „dotted“, „dashed“ oder „double“
Der letzte Wert definiert die Farbe der Umrandung
border-radius -> definiert runde Ecken
Wenn Sie sich für Ihren Button abgerundete Ecken wünschen, dann können Sie diese über border-radius definieren. Je größer der Wert, desto runder die Ecken.
Button im HTML-Code einfügen
Damit der Button angezeigt wird, müssen Sie zunächst wie gewohnt einen Link erstellen.
Dann wechseln Sie in den Text-Editor von WordPress und suchen Sie nach dem Code für diesen Link, der in etwa so aussieht:
<a href="https://example.com/link">Linktext</a>
Diesen Code ändern Sie bitte wie folgt ab:
<a class="wpb_button" href="https://example.com/link">Linktext</a>
Wenn Sie möchten, dass der Link sich in einem neuen Fenster öffnet, können Sie den Code auch wie folgt ergänzen:
<a class="wpb_button" href="https://example.com/link" target="_blank">Linktext</a>
So sieht der Button dann am Ende aus (Link zur Startseite des WordPress-Bistros in einem neuen Fenster):
Willst Du WordPress noch besser verstehen?
Werde Stammgast im WP Bistro und erhalte künftig alle Infos zu neuen Tutorials, Blogbeiträgen sowie Kursen und Webinaren - direkt in Dein Postfach.Ja, ich will dabei sein!
Varianten
Sie können selbstverständlich auch noch weitere Varianten anlegen. Zum Beispiel können Sie verschiedene Farben im Stylesheet definieren:
.green {background: green;} /* Button mit grüner Hintergrundfarbe */
.blue {background: blue;} /* Button mit blauer Hintergrundfarbe */
.large {padding: 15px;} /* Button mit größerem Innenabstand */
.square {border-radius: 0;} /* Button ohne abgerundete Ecken */
Diese Zusatzklassen können Sie ganz einfach im HTML-Code einfügen:
<a class="wpb_button green" href="#" target="_blank">Grüner Button</a>
<a class="wpb_button blue" href="#" target="_blank">Blauer Button</a>
<a class="wpb_button large" href="#" target="_blank">Großer Button</a>
<a class="wpb_button square" href="#" target="_blank">Eckiger Button</a>
Hat Ihnen dieses kleine Tutorial gefallen? Dann teilen Sie es gern in Ihrem Netzwerk, einfach durch Klick auf die Buttons direkt unter diesem Beitrag 🙂
Bildquelle:
© masterzphotofo – Fotolia.com
