jquery - 如何使此自定义帖子类型为使用媒体选项卡上传的所有图像设置 Bootstrap 轮播？

Question

我制作了一个简单的产品自定义帖子类型作为插件。我想在 bootstrap carousal 中显示上传到帖子的图像。我还希望仅针对此自定义帖子类型使用此功能。我只是 WP 开发的初学者，所以我没有成功得到我想要的东西。

拥有用于图片上传和轮播的元数据框会更好吗？

我的自定义帖子类型

add_action('init', 'register_product_post_type');
function register_product_post_type(){

    $labels = array(
        'name' => __('products') , 
        'singular_name' => __('product'), 
        'add_new' => __('Add New') , 
        'add_new_item' => __('Add New Product') ,  
        'edit_item' => __('Edit Product') , 
        'new_item' => __('New Product'), 
        'view_item' => __('View Product'), 
        'search_items' => __('Search Products'), 
        'not_found' => __('No Product found'), 
        'not_found_in_trash' => __('No Product found in trash'), 
        'parent_item_colon' => __('Parent Product'),
        'menu_name' => __('Products'),
        );

    $args = array(
        'labels' => $labels,
        'hierarchical' => true,
        'description' => __('Products'),
        'register_meta_box_cb' => 'product_meta_boxes',
        'supports' => array('title', 'editor','thumbnail', 'custom-fields','post-formats', 'page-attributes','excerpt', 'post-formats'),
        'taxonomies' => array('category', 'post_tag'),
        'public' => true,
        'show_ui' => true,
        'show_in_menu' => true,
        'menu_position' => 10,
        //'menu_icon' => '',
        'show_in_nav_menus' => true,
        'publicly_queryable' => true,
        'exclude_from_search' => false,
        'has_archieve' => true,
        'query_var' => true,
        'can_export' => true,
        'rewrite' => true,
        'capability_type' => 'post',

        );

    register_post_type( 'product', $args);
}

这是我的 Bootstrap 代码取自 http://codepen.io/RetinaInc/pen/rxksh

<div class="col-sm-6">
    <div id="carousel" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner ">
            <div class="item active ">
                <img class="image" src="img/doubleRound/all-parts.JPG">
            </div>
            <div class="item">
                <img class="image" src="img/doubleRound/top.JPG">
            </div>
            <div class="item">
                <img class="image" src="img/doubleRound/bottom.JPG">
            </div>
            <div class="item">
                <img class="image" src="img/doubleRound/front.JPG">
            </div>
            <div class="item">
                <img class="image" src="img/doubleRound/front_side.JPG">
            </div>
            <div class="item">
                <img class="image" src="img/doubleRound/front.JPG">
            </div>
            <div class="item">
                <img class="image" src="img/doubleRound/all-parts.JPG">
            </div>
            <div class="item">
                <img class="image" src="img/doubleRound/all-parts.JPG">
            </div>
        </div>
    </div> 
<div class="clearfix">
    <div id="thumbcarousel" class="carousel slide" data-interval="false">
        <div class="carousel-inner">
            <div class="item active">
                <div data-target="#carousel" data-slide-to="0" class="thumb"><img src="img/doubleRound/all-parts.JPG" width="100" height="100"></div>
                <div data-target="#carousel" data-slide-to="1" class="thumb"><img src="img/doubleRound/top.JPG" width="100" height="100"></div>
                <div data-target="#carousel" data-slide-to="2" class="thumb"><img src="img/doubleRound/bottom.JPG" width="100" height="100"></div>
                <div data-target="#carousel" data-slide-to="3" class="thumb"><img src="img/doubleRound/front.JPG" width="100" height="100"></div>
            </div><!-- /item -->
            <div class="item">
                <div data-target="#carousel" data-slide-to="4" class="thumb"><img src="img/doubleRound/front_side.JPG" width="100" height="100"></div>
                <div data-target="#carousel" data-slide-to="5" class="thumb"><img src="img/doubleRound/front.JPG" width="100" height="100"></div>
                <div data-target="#carousel" data-slide-to="6" class="thumb"><img src="img/doubleRound/all-parts.JPG" width="100" height="100"></div>
                <div data-target="#carousel" data-slide-to="7" class="thumb"><img src="img/doubleRound/all-parts.JPG" width="100" height="100"></div>
            </div><!-- /item -->
        </div><!-- /carousel-inner -->
        <a class="left carousel-control" href="#thumbcarousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="#thumbcarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div> <!-- /thumbcarousel -->
</div><!-- /clearfix -->
</div> <!-- /col-sm-6 -->

Answer 1

不要忘记添加函数 get_stylesheet_directory_uri() 并将其回显到每个 src 属性或引用模板/网站目录的任何标记以访问您的网站/模板的根文件夹。因为您的模板/网站不会加载 Assets ，因为它指向其他东西。

这里是该函数的链接以获取更多信息。

get_stylesheet_directory_uri()