Flexslider is a very powerful jQuery slider toolkit. While there are plugins that can provide a robust interface to manage slides, I needed something a lot simpler.
I ended up writing a plugin to manage all of the slide data as a custom post type in the WordPress backend, but leave the frontend code to the developer:
https://github.com/emrikol/flexslider-admin
I’ve written some example code to show how to integrate this plugin with the default twentyseventeen theme, along with some screenshots:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| function flexslider_admin_init() { | |
| if ( class_exists( 'Flexslider_Admin' ) ) { | |
| $sizes = array( | |
| array( | |
| 'name' => 'slides', | |
| 'width' => 1120, | |
| 'height' => 630, | |
| 'crop' => true, | |
| ), | |
| array( | |
| 'name' => 'slides-thumbnail', | |
| 'width' => '112', | |
| 'height' => '63', | |
| 'crop' => true, | |
| ), | |
| ); | |
| Flexslider_Admin_Views::add_sizes( $sizes ); | |
| add_filter( 'flexslider_admin_slide_width', function( $width ) { | |
| return 1120; | |
| } ); | |
| add_filter( 'flexslider_admin_slide_height', function( $height ) { | |
| return 630; | |
| } ); | |
| add_filter( 'flexslider_admin_thumbnail_size', function ( $size ) { | |
| return 'slides-thumbnail'; | |
| } ); | |
| } | |
| } | |
| add_action( 'init', 'flexslider_admin_init' ); | |
| function flexslider_init_scripts() { | |
| if ( is_front_page() ) { | |
| $flexslider_vars = array( | |
| 'data' => array( | |
| 'animation' => get_theme_mod( 'fsa-slides_animation', 'fade' ), | |
| 'easing' => get_theme_mod( 'fsa-slides_easing', 'swing' ), | |
| 'direction' => get_theme_mod( 'fsa-slides_direction', 'horizontal' ), | |
| 'slideshowSpeed' => ( get_theme_mod( 'fsa-slides_speed' ) ? get_theme_mod( 'fsa-slides_speed' ) : 7 ) * 1000, | |
| 'animationSpeed' => ( get_theme_mod( 'fsa-slides_animation_speed' ) ? get_theme_mod( 'fsa-slides_animation_speed' ) : .6 ) * 1000, | |
| 'initDelay' => ( get_theme_mod( 'fsa-slides_start_delay' ) ? get_theme_mod( 'fsa-slides_start_delay' ) : 0 ) * 1000, | |
| 'reverse' => get_theme_mod( 'fsa-slides_reverse' ) ? get_theme_mod( 'fsa-slides_reverse' ) : false, | |
| 'pauseOnAction' => get_theme_mod( 'fsa-slides_pause_interaction' ) ? get_theme_mod( 'fsa-slides_pause_interaction' ) : false, | |
| 'pauseOnHover' => get_theme_mod( 'fsa-slides_pause_hover' ) ? get_theme_mod( 'fsa-slides_pause_hover' ) : true, | |
| ), | |
| ); | |
| $flexslider_inline = <<<EOT | |
| jQuery( window ).load( function() { | |
| jQuery( '.flexslider' ).flexslider( { | |
| animation: flexslider_admin.data.animation, | |
| easing: flexslider_admin.data.easing, | |
| direction: flexslider_admin.data.direction, | |
| slideshowSpeed: flexslider_admin.data.slideshowSpeed, | |
| animationSpeed: flexslider_admin.data.animationSpeed, | |
| initDelay: flexslider_admin.data.initDelay, | |
| reverse: flexslider_admin.data.reverse, | |
| pauseOnAction: flexslider_admin.data.pauseOnAction, | |
| pauseOnHover: flexslider_admin.data.pauseOnHover, | |
| } ); | |
| } ); | |
| EOT; | |
| wp_enqueue_style( 'flexslider', 'https://www.example.com/path/to/flexslider/flexslider/flexslider.css' ); | |
| wp_enqueue_script( 'flexslider', 'https://www.example.com/path/to/flexslider/flexslider/jquery.flexslider.js', array( 'jquery' ) ); | |
| wp_add_inline_script( 'flexslider', $flexslider_inline ); | |
| wp_localize_script( 'flexslider', 'flexslider_admin', $flexslider_vars ); | |
| } | |
| } | |
| add_action( 'wp_enqueue_scripts', 'flexslider_init_scripts' ); | |
| function flexslider_admin_add_to_front_page( $content ) { | |
| if ( is_front_page() ) { | |
| ob_start(); | |
| ?> | |
| <div class="flexslider"> | |
| <ul class="slides"> | |
| <?php | |
| foreach ( Flexslider_Admin::get_slides() as $slide_id => $slide ) { | |
| $slide_image_html = get_the_post_thumbnail( $slide_id ); | |
| $slide_title = get_the_title( $slide_id ); | |
| $slide_link = $slide['url']; | |
| if ( ! empty( $slide_link ) ) { | |
| $slide_html = sprintf( '<a href="%s" title="%s">%s</a>', | |
| esc_url( $slide_link ), | |
| esc_attr( $slide_title ), | |
| $slide_image_html | |
| ); | |
| } else { | |
| $slide_html = $slide_image_html; | |
| } | |
| echo sprintf( '<li>%s</li>', $slide_html ); // XSS Ok. | |
| } | |
| ?> | |
| </ul> | |
| </div> | |
| <?php | |
| $content = ob_get_clean() . $content; | |
| } | |
| return $content; | |
| } | |
| add_filter( 'the_content', 'flexslider_admin_add_to_front_page' ); |
ヽ(◉◡◉)ﾉ 