尝试为 WordPress Bootstrap Carousel 创建插件/简码

Question

我正在尝试为我的主题创建一个插件，以使用自定义帖子类型“carousel-images” 和短代码 [carousel] 来创建精选图片的轮播。

目前，第一张图片会显示 Bootstrap Carousel 导航和上一个/下一个图标，但轮播不会滚动或显示任何其他图片。轮播中有 3 个带有特色图片的帖子。

这是我的 plugin.php

<?php
        /*
        Plugin Name: WP_BS_Carousel
        Description: Bootstrap Carousel Custom Post-Type
        Author: Jaycbrf4
        Version: 1.0
        /*/


        function wp_bs_theme_setup() {
           add_theme_support( 'post-thumbnails' );  
            add_image_size( 'wp_bs_carousel_image', 1170, 385, true);
        }
        add_action( 'after_setup_theme', 'wp_bs_theme_setup' );



        // Creates Carousel Image Custom Post Type
            add_action( 'init', 'register_wp_bs_carousel_image' );
            function register_wp_bs_carousel_image() {
            $labels = array(
            'name' => _x( 'Carousel Images', 'carousel_image' ),
            'singular_name' => _x( 'Carousel Image', 'carousel_image' ),
            'add_new' => _x( 'Add New', 'carousel_image' ),
            'add_new_item' => _x( 'Add New Carousel Image', 'carousel_image' ),
            'edit_item' => _x( 'Edit Carousel Image', 'carousel_image' ),
            'new_item' => _x( 'New Carousel Image', 'carousel_image' ),
            'view_item' => _x( 'View Carousel Image', 'carousel_image' ),
            'search_items' => _x( 'Search Carousel Images', 'carousel_image' ),
            'not_found' => _x( 'No carousel images found', 'carousel_image' ),
            'not_found_in_trash' => _x( 'No carousel images found in Trash', 'carousel_image' ),
            'parent_item_colon' => _x( 'Parent Carousel Image:', 'carousel_image' ),
            'menu_name' => _x( 'Carousel Images', 'carousel_image' ),
            );
            $args = array(
            'labels' => $labels,
            'hierarchical' => false,
            'description' => 'Images for Bootsrap Carousel',
            'supports' => array( 'title', 'editor', 'thumbnail','excerpt' ),
            'taxonomies' => array( 'category' ),
            'public' => true,
            'show_ui' => true,
            'show_in_menu' => true,
            'menu_position' => 20,
            'menu_icon' => 'dashicons-images-alt',
            'show_in_nav_menus' => true,
            'publicly_queryable' => true,
            'exclude_from_search' => false,
            'has_archive' => true,
            'query_var' => true,
            'can_export' => true,
            'rewrite' => true,
            'capability_type' => 'post'
            );
            register_post_type( 'carousel-image', $args );
            } 



        function wp_bs_carousel($atts) {
           // Set Shortcode Attributes
           extract(shortcode_atts(array(
              'posts' => 1,
           ), $atts));

           // Start the Return String
           $return_string = '<div id="wp_bs_carousel" class="carousel slide carousel-fade"  data-ride="carousel">

           <!-- Indicators -->
          <ol class="carousel-indicators" >
            <li data-target="#wp_bs_carousel" data-slide-to="0" class="active"></li>
            <li data-target="#wp_bs_carousel" data-slide-to="1"></li>
            <li data-target="#wp_bs_carousel" data-slide-to="2"></li>
          </ol>


         <div class="carousel-inner" >';

           // The query
           $the_query = new WP_Query(array(
           'post_type' => 'carousel-image',
            'posts_per_page' => 1
            ));

           // The loop
           while ( $the_query->have_posts() ) :
              $the_query->the_post();
              $return_string .= '<div class="item active">'.get_the_post_thumbnail($post->ID,'wp_bs_carousel_image').'<div class="carousel-caption">
            <h1>'.get_the_title().'</h1>
            <p>'.get_the_excerpt().'</p>
           </div>
           </div><!-- item active -->';
           endwhile;
           wp_reset_postdata();
           $the_query = new WP_Query(array(
            'post-type' => 'carousel-image',
            'posts_per_page' => $posts,
            'offset' => 1
            ));
           while ( $the_query->have_posts() ) :
           $the_query->the_post();
          $return_string  .= '<div class="item">'.the_post_thumbnail('wp_bs_carousel_image').'<div class="carousel-caption">
            <h1>'.the_title().'</h1>
            <p>'.the_excerpt().'</p>
           </div>
           </div><!-- item -->';
           endwhile;
           wp_reset_postdata();

           // Finish the Return String and Clean Up
           $return_string .= '</div>

             <!-- Controls -->
          <a class="left carousel-control" href="#wp_bs_carousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="right carousel-control" href="#wp_bs_carousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>';

           return $return_string;
        }

        add_shortcode('carousel', 'wp_bs_carousel');


        ?>

Answer 1

您每页的帖子设置为 1，尝试 -1 以获取全部或任何您想要限制的数量。此外，您将指标的数量固定为三个。您可能需要进行计数，然后循环构建指标的 HTML。

在您的循环中，您将所有项目设置为具有活动类，这可能会导致引导程序出现问题。

（来源，实际上只是构建了完全相同的东西:)）

Answer 2

我将查询更改为：

// The query
       $the_query = new WP_Query(array(
       'post_type' => 'carousel-image',
        'posts_per_page' => $posts,
        ));
        $i = 0;
       // The loop
       while ( $the_query->have_posts() ) :
          $the_query->the_post();
            if ( $i == 0 ) {
          $return_string .= '<div class="item active">'.get_the_post_thumbnail($post->ID,'wp_bs_carousel_image').'<div class="carousel-caption">
        <h1>'.get_the_title().'</h1>
        <p>'.get_the_excerpt().'</p>
       </div>
       </div><!-- item active -->';
          } else {
            $return_string .= '<div class="item">'.get_the_post_thumbnail($post->ID,'wp_bs_carousel_image').'<div class="carousel-caption">
        <h1>'.get_the_title().'</h1>
        <p>'.get_the_excerpt().'</p>
       </div>
       </div><!-- item -->';
            }
            $i++;
       endwhile;
       wp_reset_postdata();

       // Finish the Return String and Clean Up

那是票 - 现在我只需要调整指标以计算类别轮播图像中有多少幻灯片。

Answer 3

你可以使用

$the_query->found_posts

在您的查询之后。