Um alle Funktionen der Bootstrap-Framework für das neue Theme nutzen zu können, muss es noch gedownloadet und anschließend nach den WordPress-Anforderung in der funktion.php des Themes verknüpft werden. Gehen Sie dazu nun auf die Website von Bootstrap unter getbootstrap.com und wechseln auf die Seite Getting-started. Downloade Dir dort die Bootstrap-Source Codes und entpacke anschließend die ZIP Datei auf deinem Rechner.
Bootstrap Framework integrieren
Nach dem Entpacken den Ordner “dist” zu “bootstrap” umbenennen und in Deinen Theme-Ordner in WordPress (root/wp-content/themes/DeinTemplate/bootstrap) kopieren. Prima! – Als nächstes muss nur noch WordPress mit dem Bootstrap Framework verknüpft werden
Bootstrap in WordPress einbinden
Öffne dazu die /themes/DeinTheme/function.php in einem Editor deiner Wahl. Scroll nach unten bis Zeile 74 zum Abschnitt “Register widget area.“. Ab hier können und müssen wir Bootstrap bei WordPress “anmelden”. Dies geht recht simpel.
Wir suchen uns dazu folgende Zeile:
function my_theme_name_scripts() {
und fügen danach folgende Zeilen ein:
wp_register_script( 'bootstrap-js', get_template_directory_uri() . '/bootstrap/js/bootstrap.min.js', array( 'jquery' ), '3.0.1', true );
wp_register_style( 'bootstrap-css', get_template_directory_uri() . '/bootstrap/css/bootstrap.min.css', array(), '3.0.1', 'all' );
wp_enqueue_script( 'bootstrap-js' );
wp_enqueue_style( 'bootstrap-css' );
Das ganze teilt in der 1. Zeil WordPress mit, dass es ein weiteres Script mit dem Namen “bootstrap.min.js” gibt und wo WordPress es finden kann. Ebenso arbeitet es die CSS Styles durch, die Bootstrap von Haus aus mitbringt.
Abschließend vor dem Speichern der functions.php fügen wir in der Gegend um Zeile 100 bei add_action(... noch folgende Zeile ein:
remove_filter ('the_content', 'wpautop'); danach speichern.
Die Einrichtung und Installation von Bootstrap und WordPress ist damit abgeschlossen. Theoretisch und praktisch kann man nun mit dem eigentlichen Templating beginnen.
6 Kommentare. Hinterlasse eine Antwort
Hallo, entschuldugung fur meine deutsche schrift…
es functioniert in meine hauptthema aber wie mache ich dies in ein child thema, wann mein hauptthema ein update bekommt ist alles weg
Vielen dank
Hallo,
wo genau kommt das “remove_filter (‘the_content’, ‘wpautop’);” denn hin, bzw. wie sieht der Code genau aus.
Meine Zeile in functions.php sieht so aus:
add_action( ‘wp_enqueue_scripts’, ‘mytheme_scripts’ );
Soll ich das in die Klammern einfach reinschreiben? Da hatte icheinf Fehlermeldung.
Vielen Dank schon einmal im Voraus!
Jürgen
Hallo. Nach dieser Anleitung funktioniert das nicht. Ich habe es genauso gemacht. Läuft nicht.
function my_theme_name_scripts() {gibt es in der function.php nicht.Hallo Tom,
das
undbitte weglassen, das war nur zur verdeutlichung des PHP Codes (habe ich jetzt angepasst, damit es besser dargestellt wird.)und bitte “my_theme_name” durch den name deines Themes erstetzen. “my_theme_name” dient hier als Platzhalter.
Ich hoffe ich konnte dir weiterhelfen :)
Hallo Matthias,
vielen Dank für Deine Anleitung.
EIne Frage habe ich:
Ich will WP mit Bootstrap installieren, soweit nehme ich Deine Anleitung.
Jetzt will ich beispielsweise den http://bootstrapformhelpers.com/ installieren.
Hast Du einen Tipp, wie dies funktionieren könnte?
Danke und Gruß
Joachim
Hallo Hans-Joachim,
ich kann leider die Erweiterung nicht beschreiben, da ich sie noch nicht Eingesetzt habe.
Jedoch denke ich, sollte es recht einfach über die function.php zu integrieren sein.
Lt. der Anleitung unter http://bootstrapformhelpers.com/gettingstarted/#jquery-plugins
muss das so erfolgen:
Bootstrap Formhelper downloaden und entpacken. Folgende inhalte dann in ihren Themen-Ordner in einen neuen Ordner “bootstrap-formhelper” kopieren.
| |— css/
| |— bootstrap-formhelpers.css
| |— bootstrap-formhelpers.min.css
| |— img/
| |— bootstrap-formhelpers-countries.flags.png
| |— bootstrap-formhelpers-currencies.flags.png
| |— bootstrap-formhelpers-googlefonts.png
| |— js/
| |— bootstrap-formhelpers.js
| |— bootstrap-formhelpers.min.js
Dann die “function.php” öffnen und die Daten im Theme “registrieren”.
wp_register_script( 'bootstrap-formhelper-js', get_template_directory_uri() . '/bootstrap-formhelper/js/bootstrap-formhelpers.min.js, array( 'jquery' ), '3.0.1', true );wp_register_style( 'bootstrap-formhelper-css', get_template_directory_uri() . '/bootstrap-formhelper/css/bootstrap-formhelpers.min.css', array(), '3.0.1', 'all' );
wp_enqueue_script( 'bootstrap-js' );
wp_enqueue_style( 'bootstrap-css' );
Wichtig ist noch, die jQuery Version 1.10.2 in Dein Projekt einzubauen.