Unser Affiliate Theme ist da! Spare 10% mit dem Gutschein DRWP10 - mehr erfahren!
Achtung! Dieser Artikel wurde nach dem Relaunch von wpsnippets.de noch nicht überarbeitet und kann fehlerhaft in der Formatierungen sein.

Bootstrap Buttons – Shortcode, CSS und Generatoren

Heute kümmern wir uns mal um die Bootstrap Buttons und wie ihr diese, auch ohne jegliche Programmier- / HTML-Kenntnisse, in eurer WordPress Seite nutzen könnt. Wir stellen euch zunächst ein kleines, aber dennoch umfangreiches Shortcode-Snippet vor, das direkt in die functions.php eingebunden werden kann und mit dem ihr im Handumdrehen schöne Buttons in eure Artikel oder Unterseiten einbinden könnt. Am Ende gibt es dann noch einen kleinen Exkurs bzw. kleinen Überblick über verschiedene Bootstrap Button Generatoren am Markt.

Bootstrap Buttons Snippet für WordPress

Zunächst einmal haben wir für euch folgendes Snippet erstellt, welches ihr in die functions.php eurer WordPress Installation einbinden müsst. Hierzu geht ihr in eurem Dashboard auf Design » Editor » Theme-Funktionen (functions.php) und fügt den folgenden Code an einer beliebigen Stelle, z.B. am Ende, ein.

@ini_set('pcre.backtrack_limit', 5000000);

function endcore_run_shortcode( $content ) {
    global $shortcode_tags;
    $orig_shortcode_tags = $shortcode_tags;
    $shortcode_tags = array();
	add_shortcode('btn', 'endcore_button_shortcode');
	$content = preg_replace('/][/im', "] [", $content);
    $content = do_shortcode( $content );
    $shortcode_tags = $orig_shortcode_tags;
    return $content;
} 

add_filter( 'the_content', 'endcore_run_shortcode', 7 );
add_filter( 'widget_text', 'endcore_run_shortcode', 7 );

/* =================================================================
 * Bootstrap Buttons for WordPress v1.0 by wpsnippets.de
 * wpsnippets.de/bootstrap-buttons-shortcode-css-und-generatoren/
 * Credits: endcore.com, getbootstrap.com, wordpress.org, twitter.com
 * ================================================================= */
function endcore_button_shortcode($atts, $content=null) {  
	extract(shortcode_atts(array(  
		"name" => '',
		"link" => '',
		"class" => '',
		"icon" => '',
		"size" => '',
		"disabled" => '',
		"type" => ''
	), $atts));  
	if($disabled == "true") { $_disabled = " disabled"; }
	if($icon != "") {$_icon = '<i class="'.$icon.'"></i> ';}
	$output = '<a href="'.$link.'" class="btn btn-'.$class.' btn-'.$size.''.$_disabled.'">'.$_icon.''.$name.'</a>';
	return $output;
}

Bootstrap Buttons Shortcode

Sobald ihr die functions.php gespeichert habt, könnte ihr den Shortcode ab sofort in eurem Blog, innerhalb von Artikeln, aber auch auf verschiedenen Seiten oder anderen Post Types benutzen. Bevor ich euch im Detail erkläre, wie der Shortcode genau funktioniert, hier erst mal das „rohe“ Template:

[btn name="" link="" class="" icon="" size="" disabled="" /]

Name des Buttons

Ich denke hierzu ist nicht allzu viel zu erklären. Zwischen die beiden Anführungszeichen hinter name fügt ihr den Namen eures Buttons (z.B. „Pusteblumen kaufen“) ein. Nun müsste es so aussehen:

[btn name="Pusteblumen kaufen" link="" class="" icon="" size="" disabled="" /]

Link im Bootstrap Button anpassen

Für den entsprechenden Link fügt ihr bitte im Shortcode bei dem link-Attribut die URL als Wert ein, auf welcher der Button bei einem Klick verweisen soll. Ich nehme nun als Beispiel einfach mal Google.de mit der Suche nach Pusteblumen kaufen. Für die interne Nutzung reicht es, wenn ihr den Pfad angebt, z.B. /produkte/pusteblumen.html – für Links die nach außen gehen natürlich mit http:// und allem Drum und Dran.

[btn name="Pusteblumen kaufen" link="https://www.google.de/search?q=Pusteblumen+kaufen" class="" icon="" size="" disabled="" /]

Bootstrap Buttons CSS

Nun wird‘s bunt! Nein, nicht weil ich von noch mehr Blumen reden werde, sondern wegen den Styles der Buttons. Bootstrap hat hier einige vordefinierte Klassen für die Buttons, aber natürlich kann man diese auch anpassen und eigene erstellen. Aber erst mal zu den Vordefinierten. Es gibt folgende Klassen, die ihr auf einen Button in Bootstrap anwenden könnt:

  • btn-primary
  • btn-info
  • btn-success
  • btn-warning
  • btn-danger
  • btn-inverse
  • btn-link

Diese sehen wie folgt aus:

Bootstrap Buttons Vorschau

Vordefinierte Bootstrap Button Styles

den jeweiligen Wert einfach hinter class setzen. Oftmals aber reichen gegebenen Bedingungen natürlich nicht aus und man brauch z.B. einen pinken Button. Dann muss man natürlich erst mal wissen welche Attribute und Werte eine normale btn-Klasse von Bootstrap hat. Hierzu nehmen wir als Beispiel einfach mal die des „primary-btn“ und die sieht so aus:

.btn-primary {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #006dcc;
	*background-color: #0044cc;
	background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
	background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
	background-image: -o-linear-gradient(top, #0088cc, #0044cc);
	background-image: linear-gradient(to bottom, #0088cc, #0044cc);
	background-repeat: repeat-x;
	border-color: #0044cc #0044cc #002a80;
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0);
	filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary.disabled,
.btn-primary[disabled] {
	color: #ffffff;
	background-color: #0044cc;
	*background-color: #003bb3;
}

.btn-primary:active,
.btn-primary.active {
	background-color: #003399 9;
}

Für einen eigenen Button, der nun z.B. btn-pink heißt, müsste das ganze nun wie folgt aussehen:

.btn-pink {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #bd1baf;
	*background-color: #bd1baf;
	background-image: -moz-linear-gradient(top, #e84ce8, #bd1baf);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#e84ce8), to(#bd1baf));
	background-image: -webkit-linear-gradient(top, #e84ce8, #bd1baf);
	background-image: -o-linear-gradient(top, #e84ce8, #bd1baf);
	background-image: linear-gradient(to bottom, #e84ce8, #bd1baf);
	background-repeat: repeat-x;
	border-color: #bd1baf;
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe84ce8', endColorstr='#ffbd1baf', GradientType=0);
	filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.btn-pink:hover,
.btn-pink:focus,
.btn-pink:active,
.btn-pink.active,
.btn-pink.disabled,
.btn-pink[disabled] {
	color: #ffffff;
	background-color: #bd1baf;
	*background-color: #bd1baf;
}
.btn-pink:active,
.btn-pink.active {
	background-color: #bd1baf 9;
}

Um eine genaue Übersicht zu bekommen, was beim 2. Button geändert wurde, habe ich hier einmal beide Klassen in einen Vergleich gesetzt http://www.diffnow.com/?report=8sk7b.

Wem das ganze nun etwas spanisch vorkommt und mit CSS so rein Garnichts am Hut hat, den verweise ich am Ende des Beitrages noch auf zwei Seiten für verschiedene Generatoren um schöne Bootstrap Buttons zu erzeugen. Für diesen Button-Code habe ich ebenfalls einen Generator genommen und den Code noch ein klein wenig angepasst, dazu aber später mehr.

Wie dem auch sei, unser Shortcode müsste aktuell (mit dem pinken Button) so aussehen:

[btn name="Pusteblumen kaufen" link="https://www.google.de/search?q=Pusteblumen+kaufen" class="btn-pink" icon="" size="" disabled="" /]

Achja, das standardmäßig „btn“, womit in Bootstrap ein Button an sich definiert wird, da btn-primary ja eigentlich nur die Farblichen Anpassungen sind, könnt ihr auch ignorieren – diese Klasse ist ebenfalls in unserem Shortcode vordefiniert.

Bootstrap Buttons mit einem Icon verschönern

Bilder sagen ja bekanntlich mehr als tausend Wort. Kleine Icons schaffen nicht ganz so viel, aber verstärken einen Button doch auch immens. Natürlich können mit unserem Shortcode auch die in Bootstrap verwendeten Glyphicons genutzt werden. Hierzu müsst ihr im Shortcode unter icon einfach nur die jeweilige Klasse für das von euch gewünscht Icon verwenden. Jegliche HTML Elemente wie das <i>-Tag etc. werden durch unseren Shortcode vordefiniert. Hier findet ihr eine Übersicht der Icons.

Nun also nur noch das Icon auswählen und überlegen ob es zu eurem Button besser in schwarz oder weiß passt und je nachdem in das Feld „icon“ die entsprechende(n) Klasse(n) eintragen. Ich nehme nun einfach mal den „icon-thumbs-up“ und als Farbe Weiß, also noch ein icon-white übergeben.

[btn name="Pusteblumen kaufen" link="https://www.google.de/search?q=Pusteblumen+kaufen" class="btn-pink" icon="icon-white icon-thumbs-up" size="" disabled="" /]

Bootstrap Button Size

Es kommt nicht auf die Größe an, aber ist doch schön wenn man diese verändern könnte kann. Ok ok, nun reicht‘s mit den Sprüchen. :P

Auf jeden Fall könnt ihr eure Button verschieden groß darstellen und zwar durch das angeben folgender Werte unter dem size-Attribut:

  • large
  • small
  • mini
  • und block

..das Ganze sieht dann in etwa so aus.

Bootrstrap Button Size

Wobei sich „block“ immer auf die gesamte Breite der Seite bezieht, also quasi „fullwidth“. Ich nehme nun einfach mal btn-large als Beispiel.

[btn name="Pusteblumen kaufen" link="https://www.google.de/search?q=Pusteblumen+kaufen" class="btn-pink" icon="" size="btn-large" disabled="" /]

Bootstrap Button Disabled

Je nach Bedarf braucht man manchmal einen Button, der dennoch nicht klickbar ist. Klingt komisch ist aber so…. Wenn unser Button nun also nicht klickbar sein soll, muss zu disabled ein „true“ übergeben werden. Ansonsten ist hierzu glaube ich nicht viel zu sagen. Den Link könnt ihr trotzdem immer drin lassen, der Button wird nicht klickbar sein.

[btn name="Pusteblumen kaufen" link="https://www.google.de/search?q=Pusteblumen+kaufen" class="btn-pink" icon="" size="btn-large" disabled="true" /]

Das war es dann auch schon mit dem Shortcode. Einfach mal ein wenig mit rumspielen und bei Problemen stehen wir euch natürlich wie immer mit Rat und Tat über die Kommentarfunktion zur Verfügung.

Ich weiß, dass man den Shortcode noch um so vieles erweitern könnte, wie z.B. das Button Icon rechts statt links oder die Farben bereits im Shortcode definieren usw., aber für den Anfang sollte die aktuelle Variante erstmal reichen. :)

Bootstrap Buttons Generator

Sooo, nun genug technisches Gequake. Kommen wir nun zu den Links auf die ihr sicherlich schon lange wartet. Die Bootstrap Button Generatoren. Tools und Ressourcen gibt es hierzu eigentlich wie Sand am Meer. Es gibt ein paar ganz gut, die dennoch Verbesserungspotenzial haben und einige, die man nicht weiter erwähnen muss. Ich geh nun mal auf 2 ein, die ich ganz gut finde ich zeige aber zeitgleich die Nachteile.

Bootstrap Button Generator by koalite.com

Bootstrap Button Generator
Der Generator von koalite.com gefällt mir relativ gut, wobei es hier zu ein paar „Problemen“ mit der Ausgabe kommt. So fehlen diverse Kleinigkeiten die jedoch im „laufenden Betrieb“ nicht weiter ins Gewicht fallen. Dennoch müsste man hier den generierten Code nochmal anfassen. Nach dem nächsten Beispiel ist nochmal ein Vergleich. Das positive an dem Generator ist zudem, dass hier mit HEX-Werten gearbeitet werden kann und man diverse Farben via Colorpicker oder direkte Eingabe selbst definieren kann um die Buttons somit bestmöglich an sein Design anpassen zu können.

Beautiful Buttons for Bootstrappers by charliepark.org

Beautiful Buttons for Bootstrappers
Als zweites kommt der Generator von charliepark.org. Von der Ausgabe her ähnlich, aber hat man hier ganz klar einige Nachteile. Zwar sind die Farbregler und die teilweise automatische Berechnung des Verlaufes ein klares Vorteil gegenüber dem 1., aber bis man mit den HSL Reglern auf eine passende Farbe kommt können doch ein paar Minuten ins Land gehen. Daher tendiere ich persönlich eher zum ersten von koalite.com. Ansonsten kann man aber auch immer auf einen RGB <=> HSL Converter zurückgreifen.

Hier die Ausgabe im Vergleich: http://www.diffnow.com/?report=igyu8

Auuus! Auuus! Das Spiel ist aus!!!

Nein, das Spiel geht hoffentlich noch laaange weiter, aber der Artikel ist nun zu Ende. Wie ihr seht, ein kleiner Button kann ein ganz schön großes Thema werden. Deswegen mache ich an dieser Stelle auch erstmal einen Cut und schreibe demnächst, in einem zweiten Artikel, noch ein wenig mehr über Bootstrap Buttons. Dann aber nicht mehr über den normalen Button, da das Thema m.M.n. durch ist, aber über Sachen wie: Bootstrap Button Group, die Implementierung eines (File) Upload Buttons, sowie Dropdown Buttons und auch die Einbindung eines Buttons in die Navigation.

Wenn ihr Ideen, Verbesserungsvorschläge, Probleme mit dem Artikel / Shortcode hier habt, freue ich mich wie immer über eure Kommentare.

Über André

Als Web- und Grafikdesigner arbeite ich täglich mit WordPress. Auf DRWP.de veröffentliche ich in unregelmäßigen Abständen immer wieder kleinere Snippets und Artikel, die mir bei meiner täglichen Arbeit helfen und auch für den ein oder anderen Suchenden von nicht unerheblichem Interesse sein könnten.

WordPress Affiliate ThemeAnzeige

2 Kommentare

Avatar von Christine Pfeil

Christine Pfeil 14. Mai 2013 um 15:16

Super Artikel – danke – gleich gebookmarkt!

Antworten
Avatar von André Köbel

André Köbel 14. Mai 2013 um 15:24

Das freut mich. Ich plane bereits eine komplette Serie zum Thema Bootstrap & WordPress. Also darfst du gerne wieder kommen. :)

Antworten

Hinterlasse eine Antwort

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

Du kannst folgende HTML-Tags benutzen: <strong>, <em>, <u>, <a href="">, <del>, <ul>, <ol>, <blockquote>. Für Code benutze bitte pastebin.com und kopiere den Link in dein Kommentar.
*
*