Willkommen im STRATO Blog. Hier gibt es News und Tipps rund ums Hosting.

 

Menu

Veröffentlicht am: 23. Februar 2018

Bootstrap und WP Logos

Dein eigenes WordPress-Theme (Teil 2): Bootstrap-Komponenten einbauen

WordPress und Bootstrap sind ein starkes Team. Darum zeigen wir Dir, wie Du WordPress-Funktionen und Bootstrap-Komponenten für die Entwicklung Deines eigenes Themes verwendest.

Im ersten Teil hast Du erfahren, wie Du eine einfache Testumgebung für WordPress baust und Bootstrap einbindest. Nun geht es darum, das Basis-Theme mit Leben zu füllen – etwa durch Vorschau- und Beitragsbilder. Außerdem erfährst Du, wie Du auf Basis von Bootstrap eine Navigation erstellst und Icons und Buttons einfügst.

Wichtig: Diese Anleitung richtet sich an erfahrene Nutzer mit PHP-Kenntnissen. Voraussetzung ist eine lokale WordPress-Installation bzw. ein Hosting-Paket für den Live-Betrieb.

Bilder anzeigen

Standardmäßig zeigt das Theme Underscores weder Vorschaubilder noch Beitragsbilder an. Für die Darstellung der Beiträge ist vor allem die Datei single.php zuständig. Um Beitragsbilder einzublenden, fügst Du dort diesen Code ein:

In diesem Beispiel werden die Bilder mit einer maximalen Größe von 1.170 x 658 Pixel angezeigt, was einem Seitenverhältnis von 16:9 entspricht.

Die Bilder sollen natürlich auch auf der Startseite erscheinen. Dazu schreibst Du nach dem gleichen Prinzip innerhalb des Loops (um Zeile 34) die folgenden Zeilen in die index.php:

Jetzt musst Du nur noch die Vorschaubilder auf die jeweiligen Beiträge verlinken. Das funktioniert mit den folgenden Zeilen, die Du am Ende der functions.php einfügen kannst:

Tipp: Hilfe zum Thema Funktionen, Methoden, Klassen und Hooks findest Du bei der Code Reference. Hier kannst Du einfach Code eingeben – die oben gezeigte Funktion the_post_thumbnail zum Beispiel – und erhältst eine Beschreibung, Parameter, Quellen und Beispiele.

Bootstrap Menü einbauen

Im Originalzustand besteht die Navigation von Underscores aus einfachen Textlinks. Deutlich schöner sieht das mit einem Bootstrap-Menü aus:

Navigation

Links ist das Standard-Menü von Underscores zu sehen, rechts die integrierte Bootstrap-Navigationsleiste.

In der ersten Folge dieser Beitragsserie haben wir WordPress bereits mit Bootstrap verknüpft. Wie Du die Bootstrap-Navigation integrierst, erfährst Du in diesem Beitrag. Hier brauchst Du nur den Schritten 4 und 5 zu folgen.

Glyphicons verwenden

Zu den Bootstrap-Komponenten gehört neben den Navigationsleisten unter anderem auch ein umfangreicher Icon-Satz, die sogenannten Glyphicons. Um das Theme grafisch aufzulockern, kannst Du die Links für Datum, Autor, Kategorien, Tags, Kommentare und Edit (bzw. Bearbeiten) mit passenden Symbolen versehen. Dazu musst Du die entsprechenden PHP-Dateien anpassen.

Content Meta Vergleich

Das Theme Underscores ohne (links) und mit integrierten Glyphicons.

Kalender-Icon
Zum Datum passt das Kalender-Icon. Trage zu diesem Zweck in die content.php (im Hauptverzeichnis) unterhalb von

Folgendes ein (um Zeile 23):

Weil das „Posted on“ vor der Datumsangabe durch das Kalender-Icon nun überflüssig ist, kannst Du die Wörter in der Datei /inc/template-tags.php löschen (um Zeile 29). Die Zeile sieht anschließend so aus:

Nutzer-Icon
Alle folgenden Anpassungen betreffen ebenfalls die template-tags.php. Um das User-Icon vor den Autorenamen zu platzieren, fügst Du um Zeile 39 diesen Code ein (mit Leerzeichen am Anfang):

Die Zeile sieht danach so aus:

Das Wort „by“ wird nun nicht mehr benötigt. Lösche das Wort einfach (um Zeile 35), sodass die Zeile wie folgt aussieht:

Kategorien-Icon
Die weiteren Meta-Angaben werden unterhalb des Inhalts angezeigt. Trotzdem bleibst Du in der gleichen Datei, um auch die Kategorien mit einem Glyphicon zu versehen. Die entsprechende Bootstrap-Klasse glyphicon glyphicon-folder-open fügst Du um die Zeile 55 ein. Außerdem kannst Du wieder überflüssige Wörter streichen („Posted in“). Füge vor und hinter „%1$s“ ein Leerzeichen ein, damit die Abstände passen:

Tags-Icon
Wie bei den Kategorien kannst Du überflüssige Schrift entfernen („Tagged“) entfernen und vor und hinter „%1$s“ Leerzeichen setzen (um Zeile 62):

Kommentare-Icon
In der Zeile 67 fügst Du die Klasse glyphicon glyphicon-comment hinzu (mit Leerzeichen nach dem schließenden Tag), damit vor dem Kommentare-Link eine Sprechblase angezeigt wird:

Edit-Icon
Für ein Edit-Icon ergänzt Du die Zeile 98 um die Klasse glyphicon glyphicon-edit (mit Leerzeichen vor <span):

Bootstrap-Buttons in den Kommentarbereich integrieren

Buttons sehen nicht nur besser aus als Textlinks, sondern animieren auch eher zu einer Aktion – etwa zum Kommentieren. Von den Bootstrap-Varianten entscheiden wir uns für den klassischen Primary-Button. Damit der Button im Kommentarbereich erscheint, fügst Du folgenden Code in das Ende der functions.php ein:

Nun erscheint im Kommentarbereich unterhalb des grauen Kommentar-Buttons das blaue Bootstrap-Pendant. Mit den folgenden Anweisungen für die style.css blendest Du den alten Button aus und verkürzt die Eingabefelder auf die Hälfte:

Damit auch die Reply-Links als Buttons erscheinen, ersetzt Du in der functions.php die originale Klasse durch die Bootstrap-Klasse:

Bootstrap-Suche einbauen

Weil es so schön ist, kannst Du auch der Suchfunktion das Bootstrap-Layout verpassen. Lege dazu eine Datei namens searchform.php mit diesem Inhalt an:

Nachdem Du die Datei ins Hauptverzeichnis geladen hast, sieht das Ganze so aus:

Suche vorher - nachher

Oben siehst Du das ursprüngliche Eingabefeld, unten das gleiche im Bootstrap-Layout.

Post Navigation entfernen

Mit der Post-Navigation unterhalb des Content-Bereichs gelangst Du zum vorherigen oder nächsten Beitrag. Für Bildergalerien ist das sinnvoll, im Normalfall nicht unbedingt. Wenn Du keine Lust auf die Post Navigation hast, kannst Du die entsprechende Funktion einfach aus der single.php entfernen:

Fast grenzenlose Möglichkeiten

WordPress bietet so viele Optionen, dass diese unmöglich alle in einen Beitrag passen. Die Beispiele helfen Dir, die Funktionen des CMS in Kombination mit Bootstrap für Dein eigenes Theme zu nutzen. Um tiefer in die Materie einzusteigen, ist neben der erwähnten Referenz das Theme-Handbuch eine gute Adresse. Im letzten Beitrag unseres Dreiteilers werden wir Dir zeigen, wie Du das Design Deines Themes per CSS anpasst.

Der Autor:

Autor: Christian Lingnau

Ich heiße Christian Lingnau und bin freier Redakteur für Hosting-Themen, insbesondere WordPress.

Hinterlasse eine Antwort

Bitte beachte, dass sich Dein Kommentar auf den Artikel beziehen sollte. Wenn Du ein persönliches Kundenanliegen besprechen möchtest, wende Dich bitte an unseren Kundenservice auf Facebook, Twitter oder über Hilfe & Kontakt.
Wir freuen uns, wenn Du uns Deinen Namen hinterlässt. So wissen wir, wie wir Dich bei unserer Antwort ansprechen können.
Wenn Du Deine E-Mail-Adresse einträgst, wirst Du per Mail über unsere Antwort informiert. Sie wird zum Schutz Deiner Daten aber nicht veröffentlicht. Beide Angaben sind freiwillig.

Hier bloggen

Lisa Kopelmann
Ist Ansprechpartnerin für den Blog und berichtet über aktuelle STRATO Themen

Michael Poguntke
Schreibt über den Online-Speicher HiDrive, den Homepage-Baukasten, Webshops und Server

Thomas Ritter
Berichtet über Neuigkeiten aus dem Unternehmen

Bianca Restorff-Adrion
Schreibt über Karriere & die Menschen bei STRATO

Christian Lingnau
Bloggt über WordPress & andere CMS

Franz Neumeier
Gibt Tipps zum erfolgreichen Bloggen

Sven Hähle
Kennt sich bei Domains hervorragend aus

Patrick Schroeder
Erzählt die Stories unserer Kunden