試圖爲WordPress創建插件/短代碼Bootstrap旋轉木馬

Question

我想爲我的主題創建一個插件，使用自定義帖子類型「carousel-images」 和shortcode [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'); 


     ?> 

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

。