我正在尝试为我的主题创建一个插件,以使用自定义帖子类型" 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');
?>
答案 0 :(得分:0)
您每页的帖子设置为1,请尝试-1以获取要限制的全部或任何金额。此外,您将指标数量固定为三个。您可能需要进行计数,然后循环以构建指标的HTML。
在循环中,您将所有项目设置为具有活动类,这可能会导致引导程序出现问题。
(来源,字面意思确实构建完全相同的东西:))
答案 1 :(得分:0)
您可以使用
$ the_query-&gt; found_posts
查询后。