Twitter Bootstrap Slider einfach in WordPress integrieren

Bootstrap ist ein mächtiges HTML-, CSS- und JavaScript-Werkzeug, welches Web-Entwicklern eine solide Basis bietet, um schnell und einfach ein Responsive-Layout im Sinn des Mobile-First-Ansatz zu erstellen. WordPress ist ein CMS, das ein leicht zu erlernendes Backend bietet. Im nachfolgenden Tutorial wird veranschaulicht, wie man ein Bootstrap-Slider in ein WordPress-Theme mit 4 Schritten integriert, wobei vorausgesetzt wird, dass das Theme bereits auf der Basis von Bootstrap implementiert wurde.

1. Schritt

Man kann in WordPress zu den Standard-Post-Typen weitere hinzufügen. Die Idee ist einen eigenen Post-Typen mit dem Namen slider_photos hinzuzufügen und für diesen einen Menüpunkt im Menü des WordPress-Backends anzuzeigen. Also haken wir uns direkt im init rein und fügen diesen Post-Typen mit der Funktion slider_photo_post_types hinzu.

function slider_photo_post_types() {
	$labels = array(
		'name' => 'Slider Fotos',
		'singular_name' => 'Slider Foto',
		'add_new' => 'Hinzufügen',
		'add_new_item' => 'Neues Foto hinzufügen',
		'edit_item' => 'Foto bearbeiten',
		'new_item' => 'Neues Foto',
		'view_item' => 'Foto anzeigen',
		'search_items' => 'Foto suchen',
		'not_found' => 'Kein Foto gegfunden',
		'not_found_in_trash' => 'Kein Foto im Papierkorb gefunden',
		'parent_item_colon' => '',
		'menu_name' => 'Slider Fotos'
	);

	$args = array(
		'labels' => $labels,
		'public' => true,
		'exclude_from_search' => true,
		'publicly_queryable' => false,
		'show_ui' => true,
		'show_in_menu' => true,
		'query_var' => true,
		'rewrite' => true,
		'capability_type' => 'page',
		'has_archive' => true,
		'hierarchical' => false,
		'menu_position' => 21,
		'supports' => array('title')
	);
	register_post_type('slider_photos', $args);
}
add_action('init', 'slider_photo_post_types');

Schritt 2

Nachdem der Post-Typ slider_photos erstellt wurde, benötigt man ein sehr mächtiges Plugin für WordPress, welches eigene Felder für verschiedene Post-Typen zur Verfügung stellt. Dieses Plugin heißt Advanced Custom Fields. Ist es heruntergeladen und aktiviert, sollte das WordPress-Menü im Backend die Punkte Slider Fotos und Eigene Felder enthalten.

WordPress Backend

Schritt 3

Im nächsten Schritt wird eine neue Felder Gruppe hinzugefügt. Hierzu geht man auf den Menüpunkt Eigene Felder und klickt auf Neu erstellen. Der neuen Felder-Gruppe vergibt man einen Namen und fügt ein neues Feld hinzu. Hierfür wählt man die Bezeichnung Foto, den Namen foto und den Feld-Typ Bild.

Advanced Custom Fields

Danach legt man noch die gewünschte Position fest. In diesem Fall wählt man bei den drei Auswahl-Feldern von links nach rechts Artikel-Typ, ist gleich, slider_photos aus und speichert die Feld-Gruppe.

Advanced Custom Fields Position

Der Menüpunkt Hinzufügen unter Slider Fotos sollte nun folgendermaßen aussehen.

Slider-Foto hinzufügen

Für einen Slider ist es sinnvoll 3 Fotos hinzuzufügen.

Schritt 4

In diesem Schritt fügt man den nötigen Code zum Generieren des Bootstrap-Sliders hinzu. Die functions.php des Themes wird mit der nachfolgenden Funktion erweitert. Sie macht nichts weiter, als alle Beiträge mit dem Post-Typen slider_photos auszuwählen und den HTML-Code entsprechend der Vorgabe von Bootstrap zurückzugeben.

function display_bootstrap_slider() {
	$args = array(
		'post_type' => 'slider_photos'
	);

	$loop = new WP_Query($args);
	$images = array();

	while ($loop->have_posts()) {
		$loop->the_post();

		$images[] = array(
			'title' => get_the_title(),
			'image' => wp_get_attachment_image_src(get_field('foto', get_the_ID(), false), array(1170, 320))
		);
	}

	if (count($images) > 0) {
		ob_start();
		?>
		<div id="bootstrap-carousel" class="carousel slide" data-ride="carousel">
			<ol class="carousel-indicators">
			<?php foreach ($images as $key => $image) : ?>
				<li data-target="#bootstrap-carousel" data-slide-to="<?= $key; ?>" <?= $key == 0 ? 'class="active"' : ''; ?>></li>
			<?php endforeach; ?>
			</ol>

			<div class="carousel-inner">
			<?php foreach ($images as $key => $image) : ?>
				<div class="item <?php echo $key == 0 ? 'active' : ''; ?>">
					<img src="<?= $image['image'][0]; ?>" alt="<?= $image['title']; ?>">
					<div class="carousel-caption">
						<p><?= $image['title']; ?></p>
					</div>
				</div>
			<?php endforeach; ?>
			</div>

			<a class="left carousel-control" href="#bootstrap-carousel" data-slide="prev">
				<span class="glyphicon glyphicon-chevron-left"></span>
			</a>
			<a class="right carousel-control" href="#bootstrap-carousel" data-slide="next">
				<span class="glyphicon glyphicon-chevron-right"></span>
			</a>
		</div>
<?php
	}
	
	$output = ob_get_contents();
	ob_end_clean();
	wp_reset_postdata();
	
	return $output;
}

Abschließend fügt man an die Stelle in Theme, wo der Bootstrap-Slider erscheinen soll, die Ausgabe der Funktion ein (z.B. in der header.php).

echo display_bootstrap_slider();

Der Slider wird nun im Frontend angezeigt und kann beliebig im Backend verändert werden.



10 Kommentare zu “Twitter Bootstrap Slider einfach in WordPress integrieren”

  1. Peter sagt:

    Kann mit dem PlugIn auch Beiträge bzw. eigene Texte in einen Slider integrieren? Oder ist es nur für Bilder?

    1. Hallo Peter,

      grundsätzlich ist die Funktionalität beliebig erweiterbar dank Advanced Custom Fields. Letztlich müssen die zusätzlichen Optionen ausgegeben und per CSS gestylt werden.

  2. Anastasija sagt:

    bei mir laden die fotos nicht hoch, woran kann es liegen ?
    Lg Anastasija

    1. Hallo Anastasija,

      das kann verschiedene Gründe haben. Zuerst würde ich einmal sicherstellen, dass der wp-uploads-Ordner ausreichende Rechte für das Hochladen von Bildern besitzt.

  3. Christopher sagt:

    Hi, danke für dieses nette Tutorial. Ist im Prinzip genau das, was ich gesucht hatte. Ich hätte mir nur höchstens noch gewünscht, dass man alles in ein Plugin unterbringen kann, ohne zusätzlich noch Advanced Custom Fields installieren zu müssen. Aber wahrscheinlich erspart einem dieses zusätzliche Plugin ein haufen Arbeit 😀

    1. Richtig. Man kann das auch alles ohne Advanced Custom Fields umsetzen, jedoch ist dieses Plugin ein sehr mächtiges Werkzeug, mit dem es sehr einfach ist eigene Felder im WordPress-Admin anzulegen.

  4. Chris sagt:

    Vielen Dank für diese super Tutorial! Hat alles so funktioniert wie es sollte.
    Leider werden die Bilder bei der Veränderung der Bildschirmauflösung stark gestaucht, hätten Sie vllt. einen Tipp parat wie sich das Problem lösen ließe?

    1. Normalerweise bringt Bootstrap das von Anfang an mit. Kann es sein, dass eventuell ein zusätzlicher Style auf einen der div-Container oder dem Image selbst liegt?

      1. Chris sagt:

        Habe den Fehler gefunden, vielen Dank!

  5. Anja Radtke sagt:

    Danke für die Anleitung. Ist genau was ich gesucht habe und funktioniert prima!

Kommentar hinterlassen

Ihre eMail-Adresse wird nicht veröffentlicht.

Sie können folgende HTML-Tags und -Attribute verwenden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>