WordPress Gallery mit Flexslider

The times they are a-changin’.

This post seems to be older than 5 years—a long time on the internet. It might be outdated.

FlexSlider wird als jQuery Plugin für eine responsive Slideshow immer beliebter. Plugins und Tutorials für die Implementierung in WordPress gibt es auch bereits. Diese trennen jedoch meist konsequent zwischen nativer WordPress Gallery und Slider-Inhalten – für viele Anwendungsszenarien sicher völlig zu Recht. Was aber, wenn man die native Gallery in WordPress als Slideshow ausgeben möchte? Dann geht es auch ganz gut ohne Plugin, mit ein paar Anpassungen in der functions.php.

Update

Der Code in diesem Beitrag ist stellenweise veraltet. Das Plugin gibt es mittlerweile bei GiHub: FlexSlider Native Gallery Plugin

Native WordPress Gallery mit Flexslider von Tyler Smith
Native WordPress Gallery mit Flexslider von Tyler Smith

Vorbereitung

UPDATE: Flexslider wird mittlerweile von WooThemes weiterentwickelt. Es kann sein, dass die im Artikel genannten Verzeichnisse oder Dateinamen nicht mehr stimmen, aber grundsätzlich funktioniert der Ansatz nach wie vor.

  1. Lade Flexslider herunter.
  2. Lege das Unterverzeichnis /flexslider/ in deinem Theme-Verzeichnis an und lege dort die Dateien jquery.flexslider-min.js und flexslider.css, sowie den Ordner /theme/ aus dem Flexslider-Paket ab.
  3. Erstelle die Datei mein-flexslider.js und lege sie ebenfalls im Unterverzeichnis /flexslider/ deines Theme ab.
  4. Füge folgenden Inhalt in die Datei ein:[code lang=“js“]$(document).ready(function(){
    var sliderdefaults = {
    prevText: "Vorheriges",
    nextText: "Nächstes",
    animation: "slide",
    slideshow: true,
    pauseOnHover: true,
    controlNav: false
    };
    var slidernoshow = {
    slideshow: false,
    controlNav: false
    };
    $(".flexslider:not(.single-attachment)").flexslider(sliderdefaults);
    $(".flexslider.single-attachment").flexslider(slidernoshow);
    });[/code]

    Die Bedeutung der Angaben findest du in der Flexslider-Dokumentation

Setup-Funktion

Hier werden die später definierten Funktionen für die Ausgabe des Gallery Shortcodes und der dazugehörigen Scripte und Stylesheets via Hooks ins Theme geladen.
Kommt dein Theme (oder Parent-Theme) mit einer after_setup-Funktion, wie es z.B. bei TwentyEleven der Fall ist? Wenn ja, füge die Angaben aus der folgenden Funktion mein_theme_setup() dort ein (Achtung, doppelte Angaben vermeiden!). Wenn nein, kannst du den folgenden after_setup_theme-Hook und die Funktion mein_theme_setup() in deine functions.php übernehmen:

[php]add_action( ‚after_setup_theme‘, ‚mein_theme_setup‘ );

if ( !function_exists( ‚mein_theme_setup‘ ) ):
/**
* Aktiviert die Unterstützung für diverse WordPress-Features
*/
function mein_theme_setup() {

/*
* Hier werden die Bildmaße für die Flexslider-Bilder definiert.
* Die Zahlen kannst du natürlich anpassen. Sieh dich aber vorher mal im CSS für die Slideshow um!
* Mittels der Filter flexslider_image_width und flexslider_image_height lassen sich die Maße extern, z.B. in einem Child-Theme, anpassen
*/
if( !defined( ‚FLEXSLIDER_IMAGE_WIDTH‘ ) && !defined( ‚FLEXSLIDER_IMAGE_HEIGHT‘ ) ) :
define( ‚FLEXSLIDER_IMAGE_WIDTH‘, apply_filters( ‚flexslider_image_width‘, 830 ) ); // 830px Breite
define( ‚FLEXSLIDER_IMAGE_HEIGHT‘, apply_filters( ‚flexslider_image_height‘, 255 ) ); // 255px Höhe
endif;

// Unterstützung für Artikelbilder (Vorsicht, steht bei vielen Themes schon drin!)
add_theme_support( ‚post-thumbnails‘ );

// Semantische Bildgröße, kann später als CSS-Klasse verwendet werden
add_image_size( ‚flexslider-gallery-size‘, FLEXSLIDER_IMAGE_WIDTH, FLEXSLIDER_IMAGE_HEIGHT, true );

// Flexslider-Scripts laden, und zwar nur im Frontend
if ( !is_admin() && function_exists( ‚mein_theme_init‘ ) ) :
add_action( ‚init‘, ‚mein_theme_init‘ );
endif;

// WordPress [ gallery ]-Shortcode entfernen und eigenen hinzufügen
if( function_exists( ‚flexslider_gallery_shortcode‘ ) ) :
remove_shortcode( ‚gallery‘, ‚gallery_shortcode‘ );
add_shortcode( ‚gallery‘, ‚flexslider_gallery_shortcode‘ );
endif;

}
endif;[/php]

Init-Funktion

Als nächstes brauchst du die init-Funktion, die mit dem after_setup_theme-Hook geladen werden soll.
In dieser Version hatte ich das WordPress-interne jQuery deaktiviert und jQuery aus dem Google-CDN geladen. Muss nicht sein. Wenn du darauf verzichten willst, solltest du aber ein paar Regeln für die Nutzung von jQuery in WordPress beachten.

[php]/*
* init-Funktion.
* Lädt die erforderlichen Scripte und CSS-Stylesheets in wp_header() bzw. wp_footer().
* Aktiviert in mein_theme_setup().
*/
if( !function_exists( ‚mein_theme_init‘ ) ) :
function mein_theme_init() {

// jQuery aus dem Google-CDN laden.
// Die aktuelle Version ist 1.7, kann bei späteren Versionen angepasst werden (Kompatibilität mit Flexslider checken!)
wp_deregister_script( ‚jquery‘ );
wp_register_script( ‚jquery-custom‘, ‚//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js‘, false, ‚1.7.0‘, 1 );

// Flexslider Script und Stylesheet.
// Die ‚1.8.‘ soll die aktuelle Version von Flexslider anzeigen, also bei späteren Versionen bitte anpassen.
wp_register_script( ‚flexslider‘, get_stylesheet_directory_uri() . ‚/flexslider/jquery.flexslider-min.js‘, ‚jquery-custom‘, ‚1.8‘, 1 );
wp_register_script( ‚mein-flexslider‘, get_stylesheet_directory_uri() . ‚/flexslider/mein-flexslider.js‘, ‚flexslider‘, ‚1.8‘, 1 );
wp_register_style( ‚flexslider‘, get_stylesheet_directory_uri() . ‚/flexslider/flexslider.css‘, false, false, ’screen‘ );

// Scripte laden in wp_footer(), CSS lädt in wp_header()
wp_enqueue_script( ‚jquery-custom‘ );
wp_enqueue_script( ‚flexslider‘ );
wp_enqueue_script( ‚mein-flexslider‘ );
wp_enqueue_style( ‚flexslider‘ );

}
endif;[/php]

Gallery Shortcode mit Flexslider

Um die native WordPress Gallery als Flexslider auszugeben, genügt es, die Funktion für den Shortcode [ gallery ] anzupassen. Das sieht komplizierter aus, als es ist.

[php]/**
* Angepasster [ gallery ]-Shortcode für Slideshow mit Flexslider.
* Aktiviert in mein_theme_setup().
*
* jQuery FlexSlider v1.8
* Copyright (c) 2011 Tyler Smith
* http://flex.madebymufffin.com/
*/
function flexslider_gallery_shortcode( $attr ) {
global $post, $wp_locale;

static $instance = 0;
$instance++;

// Plugins/Themes erlauben, das default gallery template zu überschreiben
$output = apply_filters(‚post_gallery‘, “, $attr);
if ( $output != “ )
return $output;

// Gültiges orderby statement sichern
if ( isset( $attr[‚orderby‘] ) ) {
$attr[‚orderby‘] = sanitize_sql_orderby( $attr[‚orderby‘] );
if ( !$attr[‚orderby‘] )
unset( $attr[‚orderby‘] );
}

// Shortcode-Attribute extrahieren
extract( shortcode_atts( array(
‚order‘ => ‚DESC‘,
‚orderby‘ => ‚menu_order ID‘,
‚id‘ => $post->ID,
‚itemtag‘ => null,
‚icontag‘ => null,
‚captiontag‘ => ’span‘,
‚columns‘ => 1,
’size‘ => ‚flexslider-gallery-size‘,
‚include‘ => null,
‚exclude‘ => null,
‚link‘ => null
), $attr));

$id = intval( $id ); // Integer und sonst nix

if ( ‚RAND‘ == $order )
$orderby = ’none‘; // Zufällige Reihenfolge

// Bildmaße fixieren, damit das mit der Slideshow klappt
$size = array( FLEXSLIDER_IMAGE_WIDTH, FLEXSLIDER_IMAGE_HEIGHT );

// Der Geschenkkorb mit verknüpften Bildern
if ( !empty($include) ) { // bei include-Angaben
$include = preg_replace( ‚/[^0-9,]+/‘, “, $include );
$_attachments = get_posts( array(
‚include‘ => $include,
‚post_status‘ => ‚inherit‘,
‚post_type‘ => ‚attachment‘,
‚post_mime_type’=> ‚image‘,
‚order‘ => $order,
‚orderby‘ => $orderby
) );

$attachments = array();
foreach ( $_attachments as $key => $val ) {
$attachments[$val->ID] = $_attachments[$key];
}

} elseif ( !empty($exclude) ) { // bei exclude-Angaben
$exclude = preg_replace( ‚/[^0-9,]+/‘, “, $exclude );
$attachments = get_children( array(
‚post_parent‘ => $id,
‚exclude‘ => $exclude,
‚post_status‘ => ‚inherit‘,
‚post_type‘ => ‚attachment‘,
‚post_mime_type’=> ‚image‘,
‚order‘ => $order,
‚orderby‘ => $orderby
) );
} else {
$attachments = get_children( array( // und sonst
‚post_parent‘ => $id,
‚post_status‘ => ‚inherit‘,
‚post_type‘ => ‚attachment‘,
‚post_mime_type’=> ‚image‘,
‚order‘ => $order,
‚orderby‘ => $orderby) );
}

// Wenn jetzt noch keine Bilder im Korb sind, lassen wir das mit der Slideshow…
if ( empty($attachments) )
return “;

// …und wenn‘s ein Feed ist, geben wir die Bilder einfach nacheinander aus
if ( is_feed() ) {
$output = "\n";
foreach ( $attachments as $att_id => $attachment )
$output .= wp_get_attachment_link($att_id, $size, true) . "\n";
return $output;
}

// ID für den Gallery-Container
$selector = "gallery-{$instance}";

// Ihr Auftritt, Graf Zahl!
$i = 0;
foreach ( $attachments as $attachment ) {
$i++;
}

// Nur 1 verknüpftes Bild? Dann Extraklasse .single-attachment für den div.flexslider
if( $i < 2 ) {
$gallery_div = ‚<div id="‘.$selector.’" class="galleryid-‚.$id.‘ flex-container"><div class="flexslider loading single-attachment"><ul class="slides">‘;
} else {
$gallery_div = ‚<div id="‘.$selector.’" class="galleryid-‚.$id.‘ flex-container"><div class="flexslider loading"><ul class="slides">‘;
}

// Und die Ausgabe beginnt hier
$output = $gallery_div;

foreach ( $attachments as $id => $attachment ) {

// Wenn das Bild einen Link hat, zeigen wir den auch
$link = isset($attr[‚link‘]) && ‚file‘ == $attr[‚link‘] ? wp_get_attachment_link($id, $size, false, false) : wp_get_attachment_image($id, $size, false, false);

// Weiter mit der Ausgabe
$output .= ‚<li class="gallery-item">‘;
$output .= $link;

// Bildunterschrift vorhanden?
if ( $captiontag && trim( $attachment->post_excerpt ) ) {
$output .= ‚<span class="wp-caption-text gallery-caption flex-caption">‘ . wptexturize($attachment->post_excerpt) . ‚</span>‘;
}

$output .= "</li>";
}

// Das Ende der Ausgabe
$output .= ‚</ul></div></div><!– #‘ . $selector . ‚ –>‘;

// Und ab!
return $output;
}[/php]

Markup

Der angepasste Shortcode generiert nun in etwa folgende HTML-Ausgabe:

[sourcecode language=“plain“]<div id="gallery-1" class="galleryid-1 flex-container">
<div class="flexslider loading">
<ul class="slides">
<li class="gallery-item">
<img src="bild-1.jpg" />
<span class="wp-caption-text gallery-caption flex-caption">Bildunterschrift</span>
</li>
<li class="gallery-item">
<img src="bild-2.jpg" />
<span class="wp-caption-text gallery-caption flex-caption">Bildunterschrift</span>
</li>
<!– …usw.… –>
</ul>
</div>
</div><!– #gallery-1 –>[/sourcecode]

Oder bei nur einem einzigen mit dem Post verknüpften Bild:

[sourcecode language=“plain“]<div id="gallery-1" class="galleryid-1 flex-container">
<div class="flexslider loading single-attachment">
<ul class="slides">
<li class="gallery-item">
<img src="bild.jpg" />
<span class="wp-caption-text gallery-caption flex-caption">Bildunterschrift</span>
</li>
</ul>
</div>
</div><!– #gallery-1 –>[/sourcecode]

4 Antworten zu “WordPress Gallery mit Flexslider

  1. Hi Caspar,
    super Anleitung! Auch ich, nach einer Woche Lehre in Templating, habe es damit geschafft, meiner Auftragsarbeit eine responsive und leicht auftragende Galeriefunktion mitzugeben. Die Extraklasse für nur ein verknüpftes Bild fand ich extra klasse, da konnte ich mir viele Abfragen und Verzweigungen sparen, denn [gallery] nutze ich gleich mit zur Anzeige der ‚thumbnails‘. 🙂

    Einzig das Einbinden eines externen jQuery.js per ‚//ajax.googleapis.com… hat nicht funktioniert, da fehlte irgenwie das ‚http:‘

    Gruß zur Nacht,
    Riffbarsch Thomas

    PS.:
    funktioniert der Flexslider nur mit fixen Bildmaßen?

  2. Freut mich, dass es für dich funktioniert! Das Laden von jQuery über die Google API hatte Kompatibilitätsgründe (WordPress brachte damals noch eine ältere jQuery-Version mit). Mittlerweile verlasse mich selbst meistens auf das in WordPress inkludierte jQuery, das ja meistens sowieso geladen wird.

    Für eine konsistente Darstellung der Bilder ist es sicher sinnvoll, wenn sie halbwegs einheitliche Maße aufweisen. Mit gemischten Bildmaßen habe ich selbst bisher wenig experimentiert und kann daher nichts Wertvolles dazu sagen. Für den Bedarf bei meinem Projekt damals war die Methode mit add_image_size() ideal.

  3. besten dank für den beitrag.
    hat mir sehr geholfen.

    nur ein problem hab ich, auf dessen lösung ich leider nicht komme.

    die flexslider gallery wird nur jeweils in einem post gezeigt, während sie bei allen andern post leider nicht funktioniert bzw gar nich angezeigt wird.

    hast du eventuell eine idee an was das lieden könnte?

    besten dank

  4. Hi mike,
    wenn du den Shortcode [ gallery ] (ohne die Leerzeichen) in einen Beitrag setzt, sucht der Shortcode ja automatisch nach den Bildern, die mit diesem speziellen Beitrag verknüpft sind. Kann es daran liegen, dass für einen Beitrag keine Bilder hochgeladen wurden?

    Ansonsten ist der Artikel hier schon ein wenig älter, ich sollte ihn und das Script sowieso mal updaten …

Kommentare geschlossen.