WordPress Plugin – Responsive Slider

Das WordPress Plugin Responsive Slider funktioniert für Laptop, iPad, iPhone und auch alle anderen Pads und Smartphones. Die Bildschirm-Show passt sich fließend der Auflösung des Endgerätes an und ist damit eine gute Ergänzung für Responsive Themes, die keinen Slider beinhalten, wie z.B. das populäre WordPress Theme Twenty Twelve (2012). Man kann den Slider auf der Homepage, auf Seiten und in Artikel einbinden. Und er kann noch viel mehr…

WordPress Plugin – Responsive Slider – Implementierung

Responsive Slider funktioniert mit Shortcode. Das bedeutet, der Slider funktioniert nicht automatisch nach der Installation des Plugins. Man muss noch zusätzlich Hand anlegen, bevor man die Bildschirm-Show genießen kann.

Nach der Installation und Aktivierung über Plugins/Installation gibt es zwei Möglichkeiten den Slider zu aktivieren.
Über einen PHP-Code und über einen Shortcut. Keine Angst. Das ist nicht schwer.
Dieser PHP-Code wird einfach unter Design/Editor in die header.php kopiert:

1
<?php do_shortcode( '[responsive_slider]' ); ?>

Die header.php ist meistens so strukturiert, dass es ein öffnendes und ein schließendes Header-Tag gibt. Wichtig ist nur, dass man den PHP-Code des Responsive Slider vor dem schließenden Header-Tag einbindet. Hier hab ich es am Beispiel des WordPress-Themes Twenty Twelve gemacht. Der PHP-Code des Responsive Slider könnte aber auch direkt vor dem schließenden Header-Tag stehen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
	<header id="masthead" class="site-header" role="banner">
		<hgroup>
			<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
			<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
		</hgroup>
 
		<nav id="site-navigation" class="main-navigation" role="navigation">
			<h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
			<div class="skip-link assistive-text"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a></div>
			<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
		</nav><!-- #site-navigation -->
<?php do_shortcode( '[responsive_slider]' ); ?>
		<?php $header_image = get_header_image();
		if ( ! empty( $header_image ) ) : ?>
			<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>
		<?php endif; ?>
	</header><!-- #masthead -->
 
	<div id="main" class="wrapper">

Bitte vergesst nicht die Datei vorher zu sichern. Versucht einfach einmal verschiedene Stellen aus und schaut, was im Frontend passiert.

Die Implementierung des Shortcodes ist noch einfacher. Dazu muss man nur einen Artikel oder eine Seite erstellen und den folgenden Shortcut einbinden.

1
[responsive_slider]

Ob das vor, zwischen oder nach dem Text passiert, spielt keine Rolle. Responsive Slider ist da sehr flexibel.

WordPress Plugin – Responsive Slider – Upload und Einstellungen

Um den Slider auszuprobieren, ist es wichtig eine einheitliche Bildgröße zu finden. Beim Theme Twenty Twelve wäre das beispielsweise 960×250 Pixel. Alle Bilder, die in den Slider hochgeladen werden, sollten diese Größe haben, damit sie auch sauber dargestellt werden. Ein nettes Feature ist hier, dass man auch einen Slider-Titel mit Link hinzufügen kann Sehr schön ist auch, dass man alle möglichen Bild-Größen voreinstellen kann und der Slider damit sehr flexibel wird. Sobald man allerdings eine Größe gefunden hat, sollte man auch dabei bleiben.

WordPress Plugin - Responsive Slider

WordPress Plugin - Responsive Slider


Das Slider-Bild an sich lädt man nun unter Slides/Add new slides hoch, indem man auf der sich dann öffnenden Seite in der rechten Sidebar auf Artikelbild festlegen klickt.
Responsive Slider Bild hochladen

Responsive Slider Bild hochladen


Bei den Slider-Effekten kann man zwischen Slide und Fade wählen. Man kann die Verzögerung und die Animations-Dauer für den Slider einstellen. Außerdem kann man bestimmen, ob der Slider automatisch, bei Seitenaufruf, starten soll oder nicht. Selbstverständlich kann man auch die Reihenfolge bestimmen.

Grundsätzlich kann man 3 Bilder hochladen. Wenn man mehr Bilder im Responsive Slider haben will, muss man im Dashboard unter Einstellungen/Lesen/Blogseiten zeigen maximal
eine höhere Zahl eingeben. Das kann allerdings auch die Darstellungsweise des gesamten Blogs verändern

Prinzipiell ist Responsive Slider ein sehr gutes Plugin. Es funktioniert flexibel bei verschiedenen Auflösungen, also bei Responsive Themes. Welchen Slider benutzt Du und warum?Schreibe einen Kommentar…

4 Gedanken zu „WordPress Plugin – Responsive Slider

  1. Rolf

    …komme nicht klar mit dem slider. Twenty twelve als theme ist bei mir schon grundsätzlich nicht beschreibbar. Welche Schreibrechte müssen da alle via FTP geändert werden?
    Gibts nicht ein einfacheres -responsives- slider – Plugin, bei dem ich nicht in die CSS eingreifen muss?

    Antworten
    1. Chris Andersen

      @Rolf
      Normalerweise ist Twenty Twelve beschreibbar. Was genau ist denn bei Dir nicht beschreibbar bzw. wobei ist Dir das aufgefallen?
      BG Chris :-)

  2. Simone

    Ich habe den Slider mal probiert, aber leider funktioniert er nicht mit dem Aufruf in der Header.php. Über den Shortcut funktioniert es. Haben Sie eventuell noch einen Tipp für mich?

    Antworten
    1. Chris Andersen

      @Simone
      Verfügt das Theme unter Design/Theme-Optionen oder irgendwo im Backend einen eigenen Slider?
      BG Chris :-)

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>