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:
<?php
if (has_post_thumbnail()) {
the_post_thumbnail( array(1170,658) );
}
while ( have_posts() ) : the_post();
get_template_part( 'template-parts/content', get_post_type() );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:
/* Start the Loop */
while ( have_posts() ) : the_post();
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}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:
function wpdocs_post_image_html( $html, $post_id, $post_image_id ) {
$html = '<a href="' . get_permalink( $post_id ) . '" alt="' . esc_attr( get_the_title( $post_id ) ) . '">' . $html . '</a>';
return $html;
}
add_filter( 'post_thumbnail_html', 'wpdocs_post_image_html', 10, 3 );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
<div class="entry-meta">
Folgendes ein (um Zeile 23):
<span class="glyphicon glyphicon-calendar"></span>
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:
esc_html_x( '%s', 'post date', 'meintheme' ),
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):
<span class="glyphicon glyphicon-user">
Die Zeile sieht danach so aus:
echo '<span class="posted-on">' . $posted_on . '</span><span class="byline"> <span class="glyphicon glyphicon-user"></span> ' . $byline . '</span>'; // WPCS: XSS OK.
Das Wort „by“ wird nun nicht mehr benötigt. Lösche das Wort einfach (um Zeile 35), sodass die Zeile wie folgt aussieht:
esc_html_x( '%s', 'post author', 'meintheme' ),
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:
printf( '<span class="cat-links"><span class="glyphicon glyphicon-folder-open"></span>' . esc_html__( ' %1$s ', 'meintheme' ) . '</span>', $categories_list ); // WPCS: XSS OK.
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):
printf( '<span class="tags-links"><span class="glyphicon glyphicon-tags"></span>' . esc_html__( ' %1$s ', 'meintheme' ) . '</span>', $tags_list ); // WPCS: XSS OK.
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:
echo '<span class="comments-link"><span class="glyphicon glyphicon-comment"></span> ';
Edit-Icon
Für ein Edit-Icon ergänzt Du die Zeile 98 um die Klasse glyphicon glyphicon-edit (mit Leerzeichen vor <span):
'<span class="edit-link"> <span class="glyphicon glyphicon-edit"> </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:
// Formularfelder anpassen
add_filter( 'comment_form_default_fields', 'bootstrap3_comment_form_fields' );
function bootstrap3_comment_form_fields( $fields ) {
$commenter = wp_get_current_commenter();
$req = get_option( 'require_name_email' );
$aria_req = ( $req ? " aria-required='true'" : '' );
$html5 = current_theme_supports( 'html5', 'comment-form' ) ? 1 : 0;
$fields = array(
'author' => '<div class="form-group comment-form-author">' . '<label for="author">' . __( 'Name' ) . ( $req ? ' <span class="required">*</span>' : '' ) . '</label> ' .
'<input class="form-control" id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></div>',
'email' => '<div class="form-group comment-form-email"><label for="email">' . __( 'Email' ) . ( $req ? ' <span class="required">*</span>' : '' ) . '</label> ' .
'<input class="form-control" id="email" name="email" ' . ( $html5 ? 'type="email"' : 'type="text"' ) . ' value="' . esc_attr( $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></div>',
'url' => '<div class="form-group comment-form-url"><label for="url">' . __( 'Website' ) . '</label> ' .
'<input class="form-control" id="url" name="url" ' . ( $html5 ? 'type="url"' : 'type="text"' ) . ' value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" /></div>'
);
return $fields;
}
// Eingabefeld anpassen
add_filter( 'comment_form_defaults', 'bootstrap3_comment_form' );
function bootstrap3_comment_form( $args ) {
$args['comment_field'] = '<div class="form-group comment-form-comment">
<label for="comment">' . _x( 'Comment', 'noun' ) . '</label>
<textarea class="form-control" id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea>
</div>';
$args['class_submit'] = 'btn btn-primary';
return $args;
}
// Submit Button erstellen
add_action('comment_form', 'bootstrap3_comment_button' );
function bootstrap3_comment_button() {
echo '<button class="btn btn-primary" type="submit">' . __( 'Submit' ) . '</button>';
}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:
.form-submit {
display: none;
}
.comment-form-author,
.comment-form-email,
.comment-form-url {
width: 50%;
}Damit auch die Reply-Links als Buttons erscheinen, ersetzt Du in der functions.php die originale Klasse durch die Bootstrap-Klasse:
add_filter('comment_reply_link', 'replace_reply_link_class');
function replace_reply_link_class($class){
$class = str_replace("class='comment-reply-link", "class='btn btn-primary", $class);
return $class;
}
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:
<?php
/**
* The template for displaying search forms in Underscores.me
*
* @package Underscores.me
* @since Underscores.me 1.0
*/
?>
<form method="get" id="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>" role="search">
<label for="s" class="assistive-text"><?php _e( 'Search', 'underscoresme' ); ?></label>
<input type="text" class="field" name="s" id="s" placeholder="<?php esc_attr_e( 'Search …', 'underscoresme' ); ?>" />
<input type="submit" class="submit" name="submit" id="searchsubmit" value="<?php esc_attr_e( 'Search', 'underscoresme' ); ?>" />
</form>
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:
the_post_navigation();
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.
