Seit langer Zeit schon vorgenommen und nun endlich umgesetzt: ein Slider, der die letzten WordPress-Beiträge zeigt und ausschließlich auf CSS-Code aufbaut. Den Slider setze ich das erste mal in meinem kommenden Theme ‚ZWANZIG‘ ein und ich muss sagen, mir gefällt’s. Der Slider zeigt das vollformatige Beitragsbild, den Beitragstitel sowie das Datum des Beitrags.

Na, hab ich dein Interesse geweckt?

Hier eine kurze Vorschau:

Slider im Theme 'ZWANZIG'

Voraussetzung um das Ganze in euer Theme einzubauen ist eine Theme-Unterstützung für Beitragsbilder. Ich nutze in diesem Beispiel Beitragsbilder, die sich über die gesamte Theme-Breite (im Falle meines Themes ‚ZWANZIG‘ sind das 1200 Pixel) erstrecken. Falls euer Theme keine Beitragsbilder bzw. Beitragsbilder in der Breite vorsieht, könnt ihr nachhelfen: in diesem Beitrag habe ich das Prozedere ausführlich beschrieben.

Der WordPress und Quellcode-Part

Wir erstellen zunächst eine Abfrage, welche uns die letzten fünf erstellten Beiträge ausgibt. Die entsprechende Abfrage dazu sieht wie folgt aus:

<?php if (have_posts()) : ?>
<?php query_posts( 'showposts=5' ); ?>
<?php while (have_posts()) : the_post(); ?>

<?php endwhile; ?>
<?php endif; ?>

<?php wp_reset_query(); ?>

Ganz wichtig dabei: mittels wp_reset_query(); setzen wir die Ausgabe der Abfrage zurück, damit diese nicht die reguläre Hauptabfrage (auch Loop genannt) stört.

Wer sich mit WordPress-Abfragen weitergehend beschäftigen möchte, dem empfehle ich die WordPress-Funktions-Referenz.

Wie oben ausgeführt, sollen im Slider das Beitragsbild, der Beitragstitel sowie das Beitragsdatum ausgegeben werden. Wir ergänzen die Abfrage dazu wie folgt:

<div class="header-slider">

<?php if (have_posts()) : ?>
<?php query_posts( 'showposts=5' ); ?>
<?php while (have_posts()) : the_post(); ?>

	<div class="slider-post">

		<a class="slider-thumbnail" href="<?php the_permalink() ?>" rel="bookmark" title="<?php _e('Permanent link for the post','og-zwanzigeins'); ?> '<?php the_title(); ?>'">
					
			<?php the_post_thumbnail('slider-thumbnail'); ?>

		</a>

		<div class="slider-title">

			<p><?php the_time( get_option('date_format') ); ?></p>

			<h6><?php the_title(); ?></h6>

		</div><!--.slider-title-->

	</div><!--.slider-post-->

<?php endwhile; ?>
<?php endif; ?>

<?php wp_reset_query(); ?>

</div><!--.header-slider-->

Mit dieser Abfrage werden nun die letzten fünf Beiträge jeweils mit der Klasse .slider-post ausgegeben. Die darin enthaltenen Elemente haben wir mit entsprechenden Klassen (.slider-thumbnail und .slider-title) versehen und den gesamten Slider in ein umgebendes Element (.header-slider) gepackt.

Das Beitragsbild haben wir mit einem Link zum Beitrag vesehen, so dass dieser geöffnet wird, wenn auf das Bild geklickt wird.

Der CSS-Part

Machen wir uns nun an die Deklarationen im Stylesheet.

Das umfassende Element setzen wir auf eine Breite von 500% (5 Beiträge mit jeweils 100% Breite)

.header-slider {
	position: relative;
	left: 0;
	width: 500%;
}

Die fünf Beiträge bekommen jeweils eine Breite von 20% und werden gefloatet, damit sie nebeneinander angezeigt werden. Darüber hinaus positionieren wir diese relativ, damit wir den Beitragstitel gleich absolut anordnen können:

.slider-post {
	position: relative;
	float: left;
	width: 20%;
}

Der Beitragstitel besteht aus Beitragsdatum und, klar, dem Titel des Beitrags. Wie erwähnt positionieren wir diesen unten rechts mit einem dunklen, leicht transparenten, Hintergrund, setzen die Schriftfarbe auf weiß und richten den Text rechts aus:

.slider-title {
	position: absolute;
	bottom: 20px;
	right: 20px;
	padding: 20px 30px;
	background: rgba(0,0,0,0.7);
	text-align: right;
	color: #fff;
}

.slider-title h6 {
	margin: 0;
	color: #fff;
}

.slider-title p {
	margin: 10px 0;
}

Der Titel ist in diesem Beispiel als h6 deklariert, das Datum als p. Dies sind Elemente die für gewöhnlich im Theme bereits Deklarationen erhalten haben. Daher passen wir Schriftfarbe und Abstände für den Slider entsprechend an.

Der Animations-Part

Nun bringen wir noch etwas Bewegung ins Spiel, denn die Beiträge sind zwar da und sind auch von links nach rechts nebeneinander aufgelistet, bewegen sich aber nicht. Dazu bedienen wir uns einer keyframes-Animation.

Die Animation dazu schaut wie folgt aus:

@keyframes header-slider {
	  0% { left: 0%; }
	 15% { left: 0%; }
	 20% { left: -100%; }
	 35% { left: -100%; }
	 40% { left: -200%; }
	 55% { left: -200%; }
	 60% { left: -300%; }
	 75% { left: -300%; }
	 80% { left: -400%; }
	 95% { left: -400%; }
	100% { left: 0%; }
}

Was passiert? In Einzelschritten verschieben wir das Element mit unseren fünf Beiträge von links nach rechts um jeweils einen Beitrag und bei 95% geht es wieder zurück in die Ausgangsposition zum ersten Beitrag.

Die Animation wenden wir auf das Element .header-slider an:

.header-slider {
	animation: 30s header-slider infinite; 
}

und definieren damit, dass ein Durchlauf exakt 30 Sekunden lang ist (30s) und sich stetig wiederholt (infinite). Ich verwende hier die Shorthand-Syntax. Wer es ausführlicher möchte: hier bitte schön.

Und damit wären wir auch schon fast am Ende. Aber nur fast.

Für das Elternelement von .header-slider müssen wir als letzten Schritt noch ein overflow: hidden; setzen, so dass die vier Beiträge, die gerade nicht im Bild sind, auch nicht rechts oder links des Themes zu sehen sind. Welches Element dies in eurem Theme ist, müsst ihr leider selber herausfinden. Vielleicht ist euch dabei dieser Beitrag eine Hilfe.

Zusammenfassung

Nochmal eine Zusammenfassung mit sämtlichen Browser-Präfixen, die ich oben der Übersichtlichkeit halber weggelassen habe:

.header-slider {
	position: relative;
	left: 0;
	width: 500%;
	-webkit-animation: 30s header-slider infinite; 
	-moz-animation: 30s header-slider infinite; 
	-o-animation: 30s header-slider infinite; 
	-ms-animation: 30s header-slider infinite; 
	animation: 30s header-slider infinite; 
}

.slider-post {
	position: relative;
	float: left;
	width: 20%;
}

.header-slider .slider-thumbnail {
	margin: 0;
}

.header-slider .slider-title {
	position: absolute;
	bottom: 20px;
	right: 20px;
	padding: 20px 30px;
	background: rgba(0,0,0,0.7);
	text-align: right;
	color: #fff;
}

.header-slider .slider-title h6 {
	margin: 0;
	color: #fff;
}

.header-slider .slider-title p {
	margin: 10px 0;
}

@-webkit-keyframes header-slider {
	  0% { left: 0%; }
	 15% { left: 0%; }
	 20% { left: -100%; }
	 35% { left: -100%; }
	 40% { left: -200%; }
	 55% { left: -200%; }
	 60% { left: -300%; }
	 75% { left: -300%; }
	 80% { left: -400%; }
	 95% { left: -400%; }
	100% { left: 0%; }
}

@-moz-keyframes header-slider {
	  0% { left: 0%; }
	 15% { left: 0%; }
	 20% { left: -100%; }
	 35% { left: -100%; }
	 40% { left: -200%; }
	 55% { left: -200%; }
	 60% { left: -300%; }
	 75% { left: -300%; }
	 80% { left: -400%; }
	 95% { left: -400%; }
	100% { left: 0%; }
}

@-o-keyframes header-slider {
	  0% { left: 0%; }
	 15% { left: 0%; }
	 20% { left: -100%; }
	 35% { left: -100%; }
	 40% { left: -200%; }
	 55% { left: -200%; }
	 60% { left: -300%; }
	 75% { left: -300%; }
	 80% { left: -400%; }
	 95% { left: -400%; }
	100% { left: 0%; }
}

@-ms-keyframes header-slider {
	  0% { left: 0%; }
	 15% { left: 0%; }
	 20% { left: -100%; }
	 35% { left: -100%; }
	 40% { left: -200%; }
	 55% { left: -200%; }
	 60% { left: -300%; }
	 75% { left: -300%; }
	 80% { left: -400%; }
	 95% { left: -400%; }
	100% { left: 0%; }
}

@keyframes header-slider {
	  0% { left: 0%; }
	 15% { left: 0%; }
	 20% { left: -100%; }
	 35% { left: -100%; }
	 40% { left: -200%; }
	 55% { left: -200%; }
	 60% { left: -300%; }
	 75% { left: -300%; }
	 80% { left: -400%; }
	 95% { left: -400%; }
	100% { left: 0%; }
}

Browser-Support

Da wir auf keyframe-Animationen setzen, muss ich noch ein Wort zur Browser-Kompatibilität verlieren. Die großen Browser in den aktuellen Versionen können mit CSS-Animationen umgehen. Und für maximale Kompatibilität haben wir Browser-Präfixe verwendet. Es spricht daher eigentlich nichts gegen einen Einsatz von CSS-Animationen. Und falls eure Besucher mit einem älteren Browser unterwegs sind, wird halt ein Standbild angezeigt. Nicht so tragisch, oder?

Eine Übersicht welcher Browser in welcher Version was kann, seht ihr hier.

Ich wünsche euch viel Spaß beim Nachbauen.

Eine Live-Demo des Sliders findest du übrigens auf der Demo-Seite für mein Theme ‚ZWANZIG‘ unter folgendem Link