holt Bootstrap in euer WordPress

Allgemein Schlagwörter: , 0 Kommentare

Bootstrap ist das beliebteste Framework mit HTML, CSS und JS für die Entwicklung von anpassungsfähigen Projekten für das moderne Web. Bootstrap ist ein anpassungsfähiges und zuerst für mobile Geräte entwickeltes Framework. Egal, wie gut du dich auskennst, kannst du damit einfacher und schneller kleine wie große Projekte entwickeln, die auf Geräten in allen erdenklichen Formen funktionieren.

Los geht’s!

Bootstrap (zurzeit v3.3.7) bietet einige einfache Wege, um schnell loszulegen. Jeder davon passt zu anderen Kenntnissen und Anwendungen. Lies weiter, um herauszufinden, was zu dir passt.

holt Bootstrap in euer WordPress

1. Blank Theme erstellen

Zum Testen benötigst Du als Erstes ein möglichst einfaches Theme ohne Schnick-Schnack. Für diesen Zweck stellen wir Dir auf Basis von _s ein Blank Theme zur Verfügung. Einfach einen Namen eingeben (in unserem Beispiel „myoos“) und generieren lassen. Für ein funktionierendes Theme reicht die Angabe des Namens. Für das Hochladen in ein Theme-Verzeichnis müssen allerdings mehr Informationen eingetragen werden. Empfehlenswert sind die folgenden Angaben:
erstelle-dein-blank-theme

1. Theme Name – der Name des Themes.
2. Theme Slug – der Name der Text Domain
3. Autor – dein Name.
4. Autor URI – der Link zu deiner WebSite
5. Beschreibung – eine kurze Beschreibung des Themes.

Das als .zip-Datei gepackte Theme kann dann über das Dashboard von hochgeladen und aktiviert werden.

2. Bootstrap einrichten

Im zweiten Schritt laden wir Bootstrap in der aktuellen Version (3.3.7) herunter. Wir entpacken die Datei, legen sie in das Verzeichnis unseres gerade erstellten Themes (/wp-content/themes/myoos) und benennen das Verzeichnis in „bootstrap“ um. Das Verzeichnis sieht auf dem FTP-Server dann so aus:

Blank Theme mit Bootstrap auf dem FTP-Server

3. Bootstrap und WordPress verknüpfen

Damit WordPress die JavaScript- und CSS-Dateien von Bootstrap nutzen kann, musst Du nun die functions.php des Themes anpassen. Fangen wir mit JavaScript an. Für die Einbindung unserer Scriptdateien stellt WordPress uns die Funktionen wp_register_script() und wp_enqueue_script() zur Verfügung.

wp_register_script() teilt WordPress das Vorhandensein einer Scriptdatei mit, dadurch wird die Datei aber noch nicht im HTML eingebunden.
wp_enqueue_script() sorgt dafür, dass eine Scriptdatei wirklich geladen wird. Das Wort enqueue bedeutet etwa „in die Reihe stellen“. Damit nutzt man eine sehr praktische wordpress-eigene Funktion: WordPress reiht die Script aneinander und prüft, ob irgendetwas zweimal geladen wird.

Für CSS Dateien gibt es gesonderte Funktionen in WordPress, da an diese natürlich andere Anforderungen gestellt werden. Für die Einbindung von Stylesheets stellt WordPress uns auch zwei eigene Funktionen wp_register_style() und wp_enqueue_style() zur Verfügung.

Die Funktionalität ist hier dieselbe wie bei den Pendants für JavaScript mit einem kleinen Unterschied: der letzte Parameter stellt nicht die Position im Header oder Footer dar sondern das media-Attribut des Stylesheets.

Um Zeile 104 befindet sich function myoos_scripts() ( statt „myoos“ steht dort der Name Deines Themes)

In die functions.php-Datei eingefügter Code
In die functions.php-Datei eingefügter Code

Nach dem Upload ist das Theme mit Bootstrap verknüpft. Damit können wir Bootstrap-Elemente in unserem Blog verwenden: einfach die vorgefertigten Code-Blöcke von http://holdirbootstrap.de/komponenten/ kopieren und in den WordPress-Editor (Text-Ansicht) einfügen. Nach der Veröffentlichung erscheinen die Elemente im Frontend unseres Blogs.

4. Navigationsleiste einfügen

Bootstrap wurde in der dritten Iteration komplett auf Mobile First ausgerichtet. Wer die Stärken des beliebten Frontend-Frameworks auch in seinem WordPress nutzbar machen möchte, der kann dank der PHP-Klasse wp-bootstrap-navwalker die Navigation von WordPress in Responsive Design tauchen.

Dazu lädst Du zunächst die wp-bootstrap-navwalker.php-Datei von unserem GitHub Respository herunter und legst sie in das Theme-Verzeichnis /inc ab.

wp-bootstrap-navwalker

Füge folgende Zeilen ganz ans Ende der functions.php ein

In die functions.php-Datei eingefügter Code

In die functions.php-Datei eingefügter Code

 

Danach löschen wir die aktuelle WordPress-Navigation in der header.php-Datei, die sich im Theme-Verzeichnis befindet. Wir entfernen erst den kompletten Code zwischen

<header id=“masthead“ class=“site-header“ role=“banner“> und <!– #site-navigation –></header>

An gleicher Stelle fügen wir den hier Code-Block aus der Readme – Datei ein

 

Nachdem Du die aktualisierten Dateien hochgeladen hast, kannst Du im Dashboard unter Design → Menüs ein Menü erstellen.

Navs sind einfache Komponenten in Bootstrap, mit denen du verschiedene Bereiche deines Projekts verlinken kannst. Ausgehend von der grundlegenden .nav-Klasse kannst du verschiedene zusätzliche Klassen hinzufügen und austauschen, um verschiedene Designs anzuwenden.

Bootstrap ist Open Source.

Es wird auf GitHub gehostet, entwickelt und gepflegt und alle können dabei zusehen und mitmachen.
GitHub: Bootstrap

GitHub: Blank Theme von r23
GitHub: Navigationsleiste

Jetzt bist du gefragt!

Hast du Anregungen, Verbesserungsvorschläge, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Ich bin dir für jede Unterstützung dankbar!

Schreibe einen Kommentar

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

Business Shooting

Mit dem visuellen Erscheinungsbild beginnt alles. Egal ob Du Freelancer, langjähriger Unternehmer oder Verantwortlicher eines Start-ups bist – Du musst nach außen kommunizieren, für welche Kompetenzen und Botschaften Du stehst.
Imagefördernde Fotos unterstützen ein Unternehmen dabei, sich erfolgreich und attraktiv zu präsentieren und damit neue Kunden anzusprechen.
Bei meiner Arbeit geht es mir sowohl um die ausdrucksstarke und kompetente Darstellung der Führungskräfte und Mitarbeiter als auch um die repräsentative Abbildung der Produkte.

Aktuell

Blog via E-Mail abonnieren

Gib Deine E-Mail-Adresse an, um diesen Blog zu abonnieren und Benachrichtigungen über neue Beiträge via E-Mail zu erhalten.

Chatten Sie jetzt mit uns