php 光滑的轮播短代码

Posted 2021-05-05

/* Slick Shortcode */

$('.wp-slick-slider').slick({
	infinite: true,
	slidesToShow: 1,
	slidesToScroll: 1,
	autoplay: true,
	autoplaySpeed: 6000,
});

add_filter('image_size_names_choose', 'custom_sizes');

function custom_sizes($sizes) {
    return array_merge($sizes, array(
        'custom-large' => __('Carousel')
    ));
}

/*------------------------------------*\
	Slick Carousel Shortcode
\*------------------------------------*/

// Remove hook for the default shortcode...
remove_shortcode('gallery', 'gallery_shortcode');
// .. and create a new shortcode with the default WordPress shortcode name (tag) for the gallery

add_shortcode('gallery', function($atts) {
    if($atts['size'] == 'custom-large'){
        $attrs =
            shortcode_atts(array(
                'slider'              => md5(microtime().rand()), // Slider ID (is per default unique)
                'slider_class_name'   => '', // Optional slider css class
                'ids'                 => '', // Comma separated list of image ids
                'size'                => 'custom-large', // Image format (could be an custom image format)
                'slides_to_show'      => 1,
                'slides_to_scroll'    => 1,
                'dots'                => false,
                'infinite'            => true,
                'speed'               => 300,
                'touch_move'          => true,
                'autoplay'            => false,
                'autoplay_speed'      => 2000,
                'accessibility'       => true,
                'arrows'              => true,
                'center_mode'         => false,
                'center_padding'      => '50px',
                'css_ease'            => 'ease',
                'dots_class'          => 'slick-dots',
                'draggable'           => true,
                'easing'              => 'linear',
                'fade'                => false,
                'focus_on_select'     => false,
                'lazy_load'           => 'ondemand',
                'on_before_change'    => null,
                'pause_on_hover'      => true,
                'pause_on_dots_hover' => false,
                'rtl'                 => false,
                'slide'               => 'div',
                'swipe'               => true,
                'touch_move'          => true,
                'touch_threshold'     => 5,
                'use_css'             => true,
                'vertical'            => false,
                'wait_for_animate'    => true
            ), $atts);

        extract($attrs);

        // Verify if the chosen image format really exist
        if( !in_array($size, get_intermediate_image_sizes()) ) {
            echo 'Image Format <strong>'.$size.'</strong> Not Available!';
            exit;
        }

        // Iterate over attribute array, cleanup and make the array elements JavaScript ready
        foreach($attrs as $key => $attr) {
            // CamelCase the array keys
            $new_key_name = lcfirst(str_replace(array(' ', 'Css'), array('', 'CSS'), ucwords(str_replace('_', ' ', $key))));

            // Remove unnecessary array elements
            if( in_array($key, array('size', 'ids', 'slider_class_name')) || strpos($key, '_') !== false ) {
                unset($attrs[$key]);
            }

            // Fix the type before passing the array elements to JavaScript
            if( is_numeric($attr) ) {
                $attrs[$new_key_name] = (int) $attr;
            } else if( is_bool($attr) || (strpos($attr, 'true') !== false || strpos($attr, 'false') !== false) ) {
                $attrs[$new_key_name] = filter_var($attr, FILTER_VALIDATE_BOOLEAN);
            } else if( is_int($attr) ) {
                $attrs[$new_key_name] = filter_var($attr, FILTER_VALIDATE_INT);
            }
        }

        // Create an empty variable for return html content
        $html_output = '';

        // Check if the slider should be unique and do some unique stuff (*optional)
        if( ctype_xdigit($slider) && strlen($slider) === 32 ) {
            $is_unique = true;
        } else {
            $is_unique = false;
        }

        // Build the html slider structure (open)
        $html_output .= '<div class="'.$slider_class_name.' '.$slider.' slider wp-slick-slider">';

        // Iterate over the comma separated list of image ids and keep only the real numeric ids
        foreach( array_filter( array_map(function($id){ return (int) $id; }, explode(',', $ids)) ) as $media_id) {
            // Get the image by media id and build the html div group with the image source, width and height
            if( $image_data = wp_get_attachment_image_src($media_id, $size) ) {
                $image = get_post($media_id);
                $image_title = $image->post_title;
                $image_caption = $image->post_excerpt;
                $html_output .= '<div>';
                $html_output .= '<div class="image"><img src="'.esc_url($image_data[0]).'" /></div>';
                if($image_title || $image_caption) {
                    $html_output .= '<div class="caption">';

                    if($image_title) {
                        $html_output .= '<h3>'. $image_title . '</h3>';
                    }

                    if($image_caption) {
                        $html_output .= '<p>'. $image_caption . '</p>';
                    }

                    $html_output .= '</div>';
                }
                $html_output .= '</div>';
            }
        }

        $html_output .= '</div>';

        // Close the html slider structure and return the html output

    } else {
        $columns = $atts['columns'];
        
        if(!$columns){
            $columns = 3;
        }
        
        $image_size = $atts['size'];
        $media_ids = $atts['ids'];

        $html_output .= '<div class="gallery-wrap columns columns-'. $columns .'">';
        foreach( array_filter( array_map(function($id){ return (int) $id; }, explode(',', $media_ids)) ) as $media_id) {
            if($image_data = wp_get_attachment_image_src($media_id, $image_size) ) {
                $image_full = wp_get_attachment_image_src($media_id, 'full');
                $image = get_post($media_id);
                $image_title = $image->post_title;
                $image_caption = $image->post_excerpt;
                $html_output .= '<div class="col">';
                $html_output .= '<a href="'.$image_full[0].'">';
                $html_output .= '<img src="'.esc_url($image_data[0]).'" />';
                $html_output .= '</a>';

                if($image_title) {
                    $html_output .= '<h3>'. $image_title . '</h3>';
                }

                if($image_caption) {
                    $html_output .= '<p>'. $image_caption . '</p>';
                }

                $html_output .= '</div>';
            }
        }

        $html_output .= '</div>';
    }

    return $html_output;
});