一个滑块短代码中的多个Post类型

在页面中为Owl Carousel使用此短代码，并在查询的参数中添加自定义帖子类型

将此代码放入函数中。php

add_action( \'wp_enqueue_scripts\', \'my_child_enqueue_styles\' );

function my_child_enqueue_styles() 
{
        wp_enqueue_style(\'styleowl\',\'https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.2.4/assets/owl.carousel.min.css\');
        wp_enqueue_style(\'style1\',\'https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.2.4/assets/owl.theme.default.min.css\');
        wp_enqueue_script(\'pro-owl\',\'https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.1/owl.carousel.min.js\',array( \'jquery\' ), \'\', false);
        wp_enqueue_script(\'jquery\',\'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js\',false);

}   

add_shortcode(\'post_slider\',\'custom_slider\');

   function custom_slider(){

        $args = array(
            \'post_type\' => array(\'post\',\'events\'), // add to your multiple post type in the array
            \'post_status\' => \'publish\',
            \'posts_per_page\' => -1,
        );

        $arr_posts = new WP_Query( $args );

        if ( $arr_posts->have_posts() ) :
            ob_start();  ?>
            <div class=\'product-carousel\'>

               <div class="owl-carousel themes-p" id="product">
                  <?php
                    while ( $arr_posts->have_posts() ) :
                        $arr_posts->the_post();
                        ?>
                        <div class="item list-porduct">
                            <div class="product_image">
                                <a href="<?php the_permalink() ?>">
                                    <?php the_title(); ?>
                                    <?php the_post_thumbnail(\'medium\'); ?>

                                </a>
                            </div>
                        </div>
                        <?php
                    endwhile;
                  ?>
                   </div>
                </div>
                 <?php endif; ?>
                 <style type="text/css">

         .owl-prev {
            width: 15px;
            height: 100px;
            position: absolute;
            top: 0%;
            outline: none;
            transform: translateY(95%);
            margin-left: -20px;
            display: block !important;

        }

        .owl-next {
            outline: none;
            width: 15px;
            height: 100px;
            position: absolute;
            top: 0%;
            transform: translateY(95%);
            right: -20px;
            display: block !important;
        }
        .owl-prev span {
            position: absolute;
            color:red;
            width: 34px;
            height: 36px;
            left:20px;
            font-size: 40px;
            line-height: 32px;
        }
        .owl-next span {
            position: absolute;
            color:red;
            width: 34px;
            height: 36px;
            right:20px;
            font-size: 40px;
            line-height: 32px;
        }

      </style>


      <script type="text/javascript">

            jQuery(\'#product\').owlCarousel({
                    autoplay:true,
                    items: 5,
                    nav: false,
                    loop:true,
                    dots: false,
                    margin:10,
                    mouseDrag: true,
                    responsiveClass: true,
                    responsive: {
                        0:{
                          items: 1
                        },
                        480:{
                          items: 1
                        },
                        769:{
                          items: 2
                        },
                         1024:{
                          items: 4
                        },
                        1440:{
                          items: 4
                        },
                    }
                }); 
      </script><?php}