试图为WordPress Bootstrap Carousel创建插件/短代码

时间:2015-01-15 01:40:16

标签: twitter-bootstrap wordpress-plugin carousel

我正在尝试为我的主题创建一个插件,以使用自定义帖子类型" carousel-images" 和短代码[carousel]创建一个特色图像的旋转木马。

目前第一张图片显示的是Bootstrap Carousel导航和prev / next图标,但旋转木马不会滚动或显示任何其他图像。有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');


        ?>

2 个答案:

答案 0 :(得分:0)

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

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

(来源,字面意思确实构建完全相同的东西:))

答案 1 :(得分:0)

您可以使用

$ the_query-&gt; found_posts

查询后