Featured Post Slider

1

In der kommenden Version 3.0 (Release in ein bis zwei Wochen) wird das LB-Projects Theme über einen “Featured Post Slider” verfügen, den Sie bereits jetzt auf der Startseite im Einsatz sehen können. Der Webadministrator kann entscheiden, welche Artikel er innerhalb des Slider anzeigen möchte. So erhalten besonders wichtige oder gut gelungene Artikel besondere Aufmerksamkeit und werden von vielen Leuten gelesen.
In diesem Artikel möchte ich kurz erläutern, wie Sie die neue Funktion verwenden können und wie diese technisch umgesetzt wurde.

1) Einrichtung des Featured Sliders

Mithilfe eines Optionsfelds im Editor kann ein Artikel als “featured” gekennzeichnet werden.

Um den Featured Slider zu aktivieren, muss zunächst die entsprechende Option im Admin-Panel aktiviert werden. Gehen Sie dazu auf “Design” -> “Theme Einstellungen” -> “Widgets” und aktivieren Sie die Funktion “Featured Slider”.

Im Artikel-Editor steht nun die Funktion “Bevorzugter Artikel” zur Verfügung (s. Bild rechts). Hier können Sie festlegen, ob ein Artikel im Slider angezeigt werden soll oder nicht. Außerdem besteht die Möglichkeit, einen optionalen Titel für den Artikel im Slider anzugeben, was gerade bei sehr langen Titeln eine sinnvolle Option ist.

Das Artikelbild wird später im Slider angezeigt.

Sobald der Artikel veröffentlicht wurde, erscheinen Titel und ein 20 Zeichen langer Ausschnitt des Inhalts innerhalb des Sliders. Außerdem werden ein Link zum Artikel und ein Vorschau-Bild angezeigt.
Um das Artikelbild festzulegen, wählen Sie über “Artikelbild festlegen” in der Box in der rechten Seiteleiste des Editors ein entsprechendes Bild aus. Wahlweise können Sie das Artikelbild nur im Slider anzeigen oder auch generell als Vorschaubild in der Kategorie-Ansicht verwenden. Hierzu müssen sie im Adminpanel unter “Design” -> “Theme Einstellungen” -> “Allgemein” die Option “Artikelbilder” aktivieren.

Nun werden favorisierte Inhalte ohne großen Arbeit auf der Startseite angezeigt. Der Vorteil dieser Lösung besteht darin, dass sie sehr dynamisch ist und Sie mit wenigen Handgriffen, die Inhalte des Sliders ändern können.

Der fertige Slider sollte anschließend wie auf dem nachstehenden Bild aussehen. Sobald Sie mit der Maus über den Slider hovern, werden die Navigationselemente eingeblendet und sie können den nächsten oder vorherigen Artikel einblenden. Weiterhin verfügt der Slider über eine Auto-Funktion, die alle fünf Sekunden alle Artikel weiterschiebt. Möchten Sie dieses Zeitintervall verändern, müssen sie die Datei featured_slider.js im Verzeichnis js im theme-Ordner anpassen. Suchen Sie den Eintrag auto_slide_seconds und ändern Sie den Wert von 5000 (Millisekunden) in eine beliebige andere Zeitspanne. Neben der automatischen und mausgesteuerten Funktion kann der Slider auch mit den Pfeiltasten (rechts, links) der Tastatur bedient werden.

Der fertige Slider mit bevorzugten Artikeln.

2) Technische Umsetzung des Sliders

Vorweg: Die Programmierung dieses Sliders war nicht ganz trivial und hat einiges an Arbeit gekostet. In diesem Abschnitt werde ich ihnen in aller Kürze erklären, wie der Slider funktioniert. So erhalten Sie die Möglichkeit, Anpassungen und Optimierungen vorzunehmen oder eigene Ideen zu realisieren.

2.1) Featured-Option im Editor

Die Markierung eines Artikels als “Featured Post” geschieht über benutzerdefinierte Meta-Daten. Jeder Artikel enthält neben dem Inhalt auch noch eine ganze Reihe dieser Meta-Daten in einer separaten Tabelle in der Datenbank. Darunter Titel, Autor, Veröffentlichungsdatum, Schlagwörter, Artikelkategorie, Artikelbild, usw.

Ziel ist es nun, dem Artikel neben diesen standardmäßig vorhandenen Meta-Informationen einige benutzerdefinierte Meta-Daten für die Verwendung als “Featured Post” zuzuweisen. Dies geschieht über ein Formular, das sich im Artikel-Editor befindet (s. erstes Bild oben). Wird beispielsweise die Checkbox aktiviert, wird diese Information in die Meta-Tabelle des Artikels eingetragen.

Der unten stehende Code macht genau das. In der ersten Funktion LB_featured_post_add wird zunächst eine Meta-Box mithilfe des Befehls add_meta_box erstellt.

In der folgenden Funktion LB_featured_post_callback wird definiert, welche Inhalte die Meta-Box enthält, in diesem Fall sind das eine Checkbox und ein Textfeld, jeweils inklusive Label.

Die darauffolgende Funktion LB_featured_post_save übernimmt das speichern der in das Formular eingegebenen Werte, sobald der User auf “Speichern” oder “Veröffentlichen” klickt. Weiterhin werden einige Validierungsabfragen durchgeführt, um zu verhindern, dass die Meta-Informationen unberechtigterweise oder aus Versehen geändert werden. Dazu gehört auch die Überprüfung sogenannter Nonces, automatisch generierter Zeichencodes, die sicherstellen, dass die Meta-Daten nur von der aktuellen Editor-Seite und nicht von irgendeiner Funktion innerhalb des Themes verändert werden.

<?php

/*
*	functions.php
*	Featured-Post Slider Meta Optionen
*/

function LB_featured_post_add() {

	add_meta_box( 'LB-featured-post-id', __('Featured Post', 'lbprojects'), 'LB_featured_post_callback', 'post', 'side', 'high' );

}
add_action( 'add_meta_boxes', 'LB_featured_post_add' );

function LB_featured_post_callback( $post ) {

	$values = get_post_custom( $post->ID );
	$check = isset( $values['LB-featured-post-check'] ) ? esc_attr( $values['LB-featured-post-check'][0] ) : '';
	$text = isset( $values['LB-featured-post-text'] ) ? esc_attr( $values['LB-featured-post-text'][0] ) : '';
	wp_nonce_field( 'LB-featured-post-nonce', 'meta_box_nonce' );
	?>
	
	<p>
		<input type="checkbox" name="LB-featured-post-check" id="LB-featured-post-check" <?php checked( $check, 1 ); ?> />
		<label for="LB-featured-post-check"><?php _e('Display post in the featured post slider on the homepage.', 'lbprojects'); ?></label>
	</p>
	
	<p>  
		<label for="LB-featured-post-text"><?php _e('Custom Title:', 'lbprojects'); ?></label>
		<input type="text" class="widefat" name="LB-featured-post-text" id="LB-featured-post-text" value="<?php echo $text; ?>" /> 
	</p>
	
	<?php	
}


function LB_featured_post_save( $post_id ) {

	//Validierungsoptionen
	if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;

	if( !isset( $_POST['meta_box_nonce'] ) || !wp_verify_nonce( $_POST['meta_box_nonce'], 'LB-featured-post-nonce' ) ) return;

	if( !current_user_can( 'edit_post' ) ) return;
	
	$allowed = array( 'a' => array( 'href' => array() ) );
	
	//Metadaten speichern
	if( isset( $_POST['LB-featured-post-text'] ) )
	update_post_meta( $post_id, 'LB-featured-post-text', wp_kses( $_POST['LB-featured-post-text'], $allowed ) );

	$chk = ( isset( $_POST['LB-featured-post-check'] ) && $_POST['LB-featured-post-check'] ) ? 1 : 0;
	update_post_meta( $post_id, 'LB-featured-post-check', $chk );
	
}
add_action( 'save_post', 'LB_featured_post_save' );

?>

2.2) Ausgabe der favorisierten Artikel

An anderer Stelle des Themes (in diesem Fall auf der Startseite im Slider) können die gespeicherten Meta-Informationen nun verarbeitet werden. In meinem Fall wird eine benutzerdefinierte Artikel-Abfrage (Query) durchgeführt, die sämtliche Artikel aus der Datenbank ausliest, bei denen die Checkbox für das Attribut “Featured Post” aktiviert wurde. Wie eine solche Query aussieht, sehen sie im folgenden Code-Snippet. Weiterhin werden innerhalb dieser Abfrage alle Artikel-Formate außer “Standard” ausgeschlossen. Denn es macht keinen Sinn, einen Artikel im Slider anzuzeigen, der besipielsweise keinen Titel oder Inhalt hat (was bei manchen Post-Formats, z.B. dem Format “Bild”, der Fall ist).

<?php 
query_posts( 
    array( 
        'meta_key' => 'LB-featured-post-check', 
        'meta_value' => 1, 
        'tax_query' => array( 
            array( 'taxonomy' => 'post_format', 
                'field' => 'slug', 
                'terms' => 'post-format-image', 
                'operator' => 'NOT IN' 
            ) 
        ) 
    ) 
); 
?>

Nun ist es möglich, die benötigten Informationen der durch die Query herausgefilterten Artikel anzuzeigen. Darunter zum Beispiel den Titel, einen 20 Zeichen langen Artikel-Exccerpt, das Artikelbild und einen Link zum Weiterlesen. Der unten stehende Code kann dazu an belibiger Stelle im Code platziert werden. Nun sollten an dieser Stelle alle Artikel innerhalb einer Liste angezeigt werden, die Sie als “Featured Post” gekennzeichnet haben.

<div id="featured-box">

	<div id="featured-wrap">
	
		<ul id="featured">

			<?php query_posts( array( 'meta_key' => 'LB-featured-post-check', 'meta_value' => 1, 'tax_query' => array( array( 'taxonomy' => 'post_format', 'field' => 'slug', 'terms' => 'post-format-image', 'operator' => 'NOT IN' ) ) ) ); ?>
	
			<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

			<li id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

				<h2 class="title">
				
					<a href="<?php the_permalink(); ?>">
					
						<?php $custom_fields = get_post_custom( get_the_ID() );
						$featured_post_title = $custom_fields['LB-featured-post-text'];
						
						if( $featured_post_title ) {				
							foreach ( $featured_post_title as $title )
							echo $title;
						}				
						else {
							the_title();
						} ?>
						
					</a>
					
				</h2>
					
				<div class="entry">
				
					<?php the_post_thumbnail( array( 150, 150 ) ); ?>
					
					<?php the_excerpt(); ?> 

				</div>

			</li><!-- post -->
			
			<?php endwhile; endif; ?>
			
			<div class="clear"></div>

		</ul>
		
	</div>

	<div id="featured-controls">
		<div id="left_scroll"><a href="javascript:slide('left');"><a href="#" id="featured-prev"><?php _e('Previous Posts', 'lbprojects'); ?></a></div>
		<div id="right_scroll"><a href="javascript:slide('right');"><a href="#" id="featured-next"><?php _e('Next Posts', 'lbprojects'); ?></a></div>
	</div>
	
	<input type="hidden" id="hidden_auto_slide_seconds" value=0 />

</div><!-- featured-box -->

2.3) Animation der Artikelliste als Content-Slider

Im letzten Schritt wird die Artikelliste mithilfe von Javascript in einen Slider verwandelt. Dazu werden die einzelnen Artikel hintereinandergereiht und beim Klick auf ein Navigationselement wird das jeweils letzte Element vor das erste gesetzt, sodass der Eindruck entsteht, es würde ein Band mit allen Artikeln durchlaufen. Vorteil dieser Methode ist die Tatsache, dass der Slider “unendlich” lange durchläuft, ohne das Ende der Artikelliste zu erreichen. Das ist weitaus professioneller als ein einfaches Verschieben der Artikel in die eine oder andere Richtung.

$(document).ready(function() {

	//Navigation beim Hovern ein- und ausblenden
	$('#featured-box').mouseenter(function () {
		$('#featured-controls').stop(false, true).fadeIn();
	});
	$('#featured-box').mouseleave(function () {
		$('#featured-controls').stop(false, true).fadeOut();
	});
	
	//Autoslide Dauer
	var auto_slide_seconds = 5000;
	$('#featured li:first').before($('#featured li:last'));
	
	var timer = setInterval('slide("right")', auto_slide_seconds);
	$('#hidden_auto_slide_seconds').val(auto_slide_seconds);
 
	//Autoslide bei Hover stoppen
	$('#featured').hover(function(){
		clearInterval(timer)
	},function(){
		timer = setInterval('slide("right")', auto_slide_seconds);
	});

	//Slide-Steuerung mit Tastatur 
	$(document).bind('keydown', function(e) {
		if(e.keyCode==37){
			slide('left');
		}else if(e.keyCode==39){
			slide('right');  
		}
	});

	//Slide-Steuerung mit Mausklick
	$("#featured-prev").click(function(){
		slide('left');
		return false;
	});
	$("#featured-next").click(function(){
		slide('right');
		return false;
	});
  
});
  
//Slide-Funktion
function slide(where){
  
	var item_width = $('#featured li').outerWidth();
	
	if(where == 'left'){
		var left_indent = parseInt($('#featured').css('left')) + item_width;
	}else{
		var left_indent = parseInt($('#featured').css('left')) - item_width;
	}
	
	//Sliding animieren
	$('#featured:not(:animated)').animate({'left' : left_indent},500,function(){
		if(where == 'left'){
			$('#featured li:first').before($('#featured li:last'));
		}else{
			$('#featured li:last').after($('#featured li:first'));
		}
		$('#featured').css({'left' : '-' + item_width + 'px'});
	});
  
}

2.3) Stylesheet für den Slider

Zu guter Letzt erhält der Slider noch ein Stylesheet, welches unter anderem die korrekte Funktion des Sliders sicherstellt. Übernehmen sie daher unebdingt die Werte für die Position, Margins, Paddings und Floatings. Andernfalls wird der Slider nicht funktionieren. Die anderen Eigenschaften können natürlich problemlos angepasst werden.

#featured-box {
	position: relative;
}

#featured-wrap {
	margin: 30px 0 15px 0;
	padding: 10px 0;
	overflow: hidden; 
	width: 718px;
	min-height: 150px;
	position: relative;
	background-color: #fff;
	border: 1px solid #ddd;
}

#featured {
	margin: 0;
	padding: 0;
	width: 9999px;
	position: relative;
	top: 0;
	left: -360px; 
}

#featured-controls {
	margin: 0 auto;
	width: 720px;
	display: none;
}

#featured-prev {
	margin-left: 5px;
	left: 0;
	background: url('../images/featured_arrows.png') no-repeat;
}

#featured-next {
	margin-right: 5px;
	right: 0;
	background: url('../images/featured_arrows.png') no-repeat -35px 0;
}

#featured-prev,
#featured-next {
	margin-top: -25px;
	width: 35px;
	height: 50px;
	position: absolute;
	top: 50%;
	text-indent: -9999px;
	background-color: #33363b;
	background-color: rgba(51,54,59,0.8);
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-o-border-radius: 5px;
	-ms-border-radius: 5px;
}

#featured .post {
	padding: 0 15px;
	width: 328.5px;
	float: left;
	list-style-type: none;
	border-bottom: none;
	border-left: 1px solid #ddd;
}

#featured .post .entry p {
	margin-bottom: 0;
}

#featured h2.title {
	margin: 0;
}

#featured h2.title a,
#featured h2.title a:active,
#featured h2.title a:visited {
	color: #3a3a3a;
	transition: color .1s;
	-moz-transition: color .1s;
	-webkit-transition: color .1s; 
	-o-transition: color .1s;
	-ms-transition: color .1s;
}

#featured  h2.title a:hover {
	text-decoration: none;
	color: #d54e21;    
}

3) Fazit zum Featured-Post Slider

Wie eventuell beim Lesen der obigen Anleitung ersichtlich wird, ist die Umsetzung eines solchen Sliders nicht ganz einfach. Wenn Sie daher davor zurückschrecken, sich selbst an ein solches Projekt zu wagen, sollten Sie auf die kommenden Version 3.0 meines WordPress-Themes warten, in das dieses Feature integriert sein wird.

Hinterlasse eine Antwort

Ihre Email-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert.

*

Kommentare umschalten

1 Kommentar zu "Featured Post Slider"

  • [...] Stellen Verwendung findet. In meinem Theme beispielsweise wird das Artikelbild sowohl im Featured Post Slider auf der Startseite als auch optional in der Kategorie-Übersicht angezeigt. Unter Umständen kann [...]