用 Post Type 整合 Owl Carousel

register_post_type.php

<?php
/**
	 * Post Type: YouTube Videos.
	 */

	$labels = array(
		"name" => __( "YouTube Videos", "YourTextDomain" ),
		"singular_name" => __( "YouTube Video", "YourTextDomain" ),
		"menu_name" => __( "YouTube Video", "YourTextDomain" ),
		"all_items" => __( "All YouTube Videos", "YourTextDomain" ),
		"add_new" => __( "Add New Video", "YourTextDomain" ),
		"add_new_item" => __( "Add New Video", "YourTextDomain" ),
		"edit_item" => __( "Edit Video", "YourTextDomain" ),
		"new_item" => __( "New Video", "YourTextDomain" ),
		"view_item" => __( "View Video", "YourTextDomain" ),
		"view_items" => __( "View Videos", "YourTextDomain" ),
		"search_items" => __( "Search Video", "YourTextDomain" ),
	);

	$args = array(
		"label" => __( "YouTube Videos", "YourTextDomain" ),
		"labels" => $labels,
		"description" => "",
		"public" => true,
		"publicly_queryable" => true,
		"show_ui" => true,
		"show_in_rest" => false,
		"rest_base" => "",
		"has_archive" => false,
		"show_in_menu" => true,
		"show_in_nav_menus" => true,
		"exclude_from_search" => false,
		"capability_type" => "post",
		"map_meta_cap" => true,
		"hierarchical" => false,
		"rewrite" => array( "slug" => "youtube_video", "with_front" => true ),
        "query_var" => true,
        "menu_icon" => "dashicons-video-alt3",
		"supports" => array( "title", "thumbnail" ,"dashicons-video-alt3"),
	);

	register_post_type( "youtube_video", $args );

youtube_shortcode.php

<?php 
function oc_script_style () {
    wp_register_style( 'owl-carousel-css', get_template_directory_uri() . '/assets/owl.carousel.min.css');
    wp_register_style( 'owl-carousel-css-theme', get_template_directory_uri() . '/assets/owl.theme.default.min' );
    wp_register_script( 'owl-carousel-js', get_template_directory_uri() . '/js/owl.carousel.min.js', 'jquery' );
    wp_register_script( 'owl-carousel-init', get_template_directory_uri() . '/js/owl.carousel.init.js');
}
add_action( 'wp_enqueue_scripts', 'oc_script_style' );
function youtube_video_loop ($atts) {
    $a = shortcode_atts(array(
        'posts' => 10,
        'width' => 200,
        'height' => 320),
         $atts);
    $args = array(
        'post_type' => 'youtube_video',
        'posts_per_page' => $a['posts']
    );
    $the_query = new WP_Query( $args );
    if ($the_query -> have_posts()) {
        wp_enqueue_style('owl-carousel-css');
        wp_enqueue_style('owl-carousel-css-theme');
        wp_enqueue_script('owl-carousel-js');
        wp_enqueue_script('owl-carousel-init');
        $output = "<div class='owl-carousel owl-theme'>";
        $data_merge = 0;
        while ( $the_query -> have_posts()) {
            $the_query -> the_post();
            $temp_title = get_the_title();
            $temp_url = get_field('url');
            $data_merge = $data_merge%3+1;
            $output .= "<div class='item-video' data-merge='$data_merge'>";
            $output .= "<a class='owl-video' href='$temp_url'>$temp_title</a></div>";
            $data_merge += 1;
        }
        $output .= "</div>";
    }
    wp_reset_postdata();
    //add_action( 'wp_footer', function() use ($atts) {
    add_action( 'wp_footer', function() use ($a) { //不要用錯變數啊傻傻的
        ?>
        <script type="text/javascript">
            jQuery(function($){
                $('.owl-carousel').owlCarousel({
                    items: 1,
                    nav: true,
                    //merge: true,
                    loop: true,
                    dots: false,
                    margin: 10,
                    video: true,
                    center: true,
                    //videoHeight: <?php //echo $atts['height'];?>,
                    videoHeight: <?php echo $a['height'];?>,
                    //videoWidth: <?php //echo $atts['width'];?>,
                    videoWidth: <?php echo $atts['width'];?>,
                    responsive: {
                        480: {
                            items: 2
                        },
                        600: {
                            items: 3
                        }
                    }
                });
            });
        </script>
        <?php
    }, 99);
    
    return $output;
}
add_shortcode( 'youtube_video', 'youtube_video_loop' );