php 猫头鹰滑块与fancybox（灯箱）功能

Posted 2021-05-04

// Add style & scripts
add_action('wp_enqueue_scripts', 'render_owl_scripts');
function render_owl_scripts() {
    // Stylesheets
    wp_enqueue_style('owl-style', get_stylesheet_directory_uri() .'/owl/owl.carousel.min.css');
    wp_enqueue_style('animate', get_stylesheet_directory_uri() .'/owl/animate.min.css');
    wp_enqueue_style('fancybox', get_stylesheet_directory_uri() .'/owl/jquery.fancybox.min.css');

    // Jquery Files
    wp_enqueue_script( 'owl-script', get_stylesheet_directory_uri() . '/owl/owl.carousel.min.js', array('jquery'), '2.3.4', FALSE);
    wp_enqueue_script( 'place-holder', get_stylesheet_directory_uri() . '/owl/holder.min.js', array('jquery'), '2.9.0', TRUE);
    wp_enqueue_script( 'fancybox', get_stylesheet_directory_uri() . '/owl/jquery.fancybox.min.js', array('jquery'), '2.9.0', TRUE); 
}

// Create a new post type for slider
add_action('init', 'create_slider_cpt');
function create_slider_cpt() {
    $cpt_name = 'Slider';
    $cpt_name = ucwords(strtolower(preg_replace('/\s+/', ' ', $cpt_name) ));
    $single = ucfirst($cpt_name);
    $textdomain = strtolower(str_replace(" ", "_", $single)); // Sanitize slug
    $cap_type = 'post';

    $last_character = substr($single, -1);

    if ($last_character === 'y') {
        $plural = substr_replace($single, 'ies', -1);
    }if ($last_character === 'y') {
        $plural = substr_replace($single, 'ies', -1);
    }
    else {
        $plural = $single.'s'; // add 's' to convert singular name to plural
    }

    $opts['can_export'] = TRUE;
    $opts['capability_type'] = $cap_type;
    $opts['description'] = '';
    $opts['exclude_from_search'] = FALSE;
    $opts['has_archive'] = FALSE;
    $opts['hierarchical'] = FALSE;
    $opts['map_meta_cap'] = TRUE;
    $opts['menu_icon'] = 'dashicons-admin-post';
    $opts['menu_position'] = 25;
    $opts['public'] = TRUE;
    $opts['publicly_querable'] = TRUE;
    $opts['query_var'] = TRUE;
    $opts['register_meta_box_cb'] = '';
    $opts['rewrite'] = FALSE;
    $opts['show_in_admin_bar'] = TRUE; // Define For 'Top Menu' bar
    $opts['show_in_menu'] = TRUE;
    $opts['show_in_nav_menu'] = TRUE;
    $opts['show_ui'] = TRUE;
    // $opts['supports'] = array( 'title', 'editor', 'thumbnail' );
    $opts['supports'] = array( 'title', 'thumbnail' );
    $opts['taxonomies'] = array();

    $opts['capabilities']['delete_others_posts'] = "delete_others_{$cap_type}s";
    $opts['capabilities']['delete_post'] = "delete_{$cap_type}";
    $opts['capabilities']['delete_posts'] = "delete_{$cap_type}s";
    $opts['capabilities']['delete_private_posts'] = "delete_private_{$cap_type}s";
    $opts['capabilities']['delete_published_posts'] = "delete_published_{$cap_type}s";
    $opts['capabilities']['edit_others_posts'] = "edit_others_{$cap_type}s";
    $opts['capabilities']['edit_post'] = "edit_{$cap_type}";
    $opts['capabilities']['edit_posts'] = "edit_{$cap_type}s";
    $opts['capabilities']['edit_private_posts'] = "edit_private_{$cap_type}s";
    $opts['capabilities']['edit_published_posts'] = "edit_published_{$cap_type}s";
    $opts['capabilities']['publish_posts'] = "publish_{$cap_type}s";
    $opts['capabilities']['read_post'] = "read_{$cap_type}";
    $opts['capabilities']['read_private_posts'] = "read_private_{$cap_type}s";

    $opts['labels']['add_new'] = __( "Add New {$single}", $textdomain );
    $opts['labels']['add_new_item'] = __( "Add New {$single}", $textdomain );
    $opts['labels']['all_items'] = __( $plural, $textdomain );
    $opts['labels']['edit_item'] = __( "Edit {$single}" , $textdomain);
    $opts['labels']['menu_name'] = __( $plural, $textdomain );
    $opts['labels']['name'] = __( $plural, $textdomain );
    $opts['labels']['name_admin_bar'] = __( $single, $textdomain );
    $opts['labels']['new_item'] = __( "New {$single}", $textdomain );
    $opts['labels']['not_found'] = __( "No {$plural} Found", $textdomain );
    $opts['labels']['not_found_in_trash'] = __( "No {$plural} Found in Trash", $textdomain );
    $opts['labels']['parent_item_colon'] = __( "Parent {$plural} :", $textdomain );
    $opts['labels']['search_items'] = __( "Search {$plural}", $textdomain );
    $opts['labels']['singular_name'] = __( $single, $textdomain );
    $opts['labels']['view_item'] = __( "View {$single}", $textdomain );

    $opts['rewrite']['ep_mask'] = EP_PERMALINK;
    $opts['rewrite']['feeds'] = FALSE;
    $opts['rewrite']['pages'] = TRUE;
    $opts['rewrite']['slug'] = __( strtolower( $plural ), $textdomain );
    $opts['rewrite']['with_front'] = FALSE;

    register_post_type( strtolower( $cpt_name ), $opts );
}


// Define shortcode to render Owl Slider
add_shortcode('owl_slider', 'render_owl_slider');
function render_owl_slider() {
    $sliderArg = array(
        'post_type' => 'slider',
        'posts_per_page' => -1,
        'order' => 'ASC',
        'orderby' => 'date'
    );

    $slider = new WP_Query($sliderArg);

    if($slider->have_posts()) : 
        echo '<div class="owl-carousel owl-theme first-carousel">';
            while($slider->have_posts()) : $slider->the_post();                
                
                echo '<div class="item">';
                        if(has_post_thumbnail()) {
                            $featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'full'); 
                           
                            echo '<a href="'. esc_url($featured_img_url) . '" data-fancybox="first-carousel" data-caption="'.get_the_title() .'">';
                                the_post_thumbnail('thumbnail'); 
                            echo '</a>';

                        } else {
                            echo '<img data-src="holder.js/400x250" alt="">';
                        }

                    echo '<h4>'. get_the_title() .'</h4>';
                echo '</div>';                        

            endwhile;
        echo '</div>';
    endif;?>

    <script>
        // setup options for owl carousel  
        jQuery('.first-carousel').owlCarousel({
            autoplay: true,
            animateOut: 'slideOutDown',
            animateIn: 'flipInX',
            items:2,
            margin:30,
            stagePadding:50,
            smartSpeed:450,
            loop:true,

        });
    </script>
    <?php
}