使用WordPress自定义帖子类型

时间:2014-10-14 15:19:47

标签: php jquery wordpress twitter-bootstrap

我正在尝试使用Wordpress和bootstraps carousal。我创建了一个名为images的自定义帖子类型,并将其链接到我想要的帖子。然后我将图像上传到每个帖子,当我循环播放数组时,它最终会在旋转木马中输出我的所有图像。它意味着遍历我的自定义图像区域中的每个图像,并在旋转木马中回显它们。

它还在我的html页面上输出no-repeat center;">作为纯文本。我不知道为什么

  <?php 
get_header(); 
?>

<?php 

global $wp_query;
$postid = $wp_query->post->ID;
wp_reset_query();

$images = get_post_meta($postid, 'images', false);


?>


<div class="row">
    <div class="col-md-3">
        <div id="page_title">Case Studies</div>
    </div>
    <div class="col-md-9">
        <div id="page_excerpt">
            <div class="vertical_align_centre">
                <?php the_excerpt();?>
            </div>
        </div>
    </div>
</div>

<!-- Content -->


<div class="row">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php endwhile; endif; ?>

<div class="col-md-3">

    <?php the_post_thumbnail('casestudy img-responsive');?>
</div>

     <div class="carousel-row hidden-xs">
            <div class="col-md-9">
                <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                    <!-- Indicators -->
                    <ol class="carousel-indicators">
                        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                    </ol>

                    <!-- Wrapper for slides -->
                    <div class="carousel-inner"> 
                        <?php $i=0; foreach ($images as $image) { ?> 
                        <div class="item <?php if ($i == 0) { echo 'active'; } ?>" style="background-size:cover; background:url('<?php echo $image; ?>') no-repeat center;">
                            <div class="carousel-caption">
                                <h4><?php echo $imageURL->post_excerpt;?></h4>
                            </div>
                        </div>
                        <?php $i++; } ?>
                    </div>
                    <!-- Controls -->
                    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left"></span>
                    </a>
                    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right"></span>
                    </a>
                </div>
              </div>
            </div>

2 个答案:

答案 0 :(得分:1)

从查询中看,您的数组中的所有帖子都可用。

你可以在顶部解决这个问题:

'numberposts' = 10, //or however many you want

或事后切断数组:

$attachments = array_slice($attachments ,0 ,10);

http://codex.wordpress.org/Template_Tags/get_posts

http://php.net/manual/en/function.array-slice.php

答案 1 :(得分:1)

这就是我理解你的问题的方法。

您制作了一个名为images的自定义帖子类型,并为该帖子类型添加了帖子。那些包含图像的帖子(我假设您正在使用缩略图)。因此,您需要将这些图像用作引导轮播。

如果我在这里就是你的答案。请注意,此代码未经过测试。所以在尝试之前备份你的代码。

<?php get_header(); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="row">
<div class="col-md-3">
    <div id="page_title">Case Studies</div>
</div>
<div class="col-md-9">
    <div id="page_excerpt">
        <div class="vertical_align_centre">
            <?php the_excerpt();?>
        </div>
    </div>
</div>
</div>
<div class="row">
<div class="col-md-3">
    <?php the_post_thumbnail('casestudy img-responsive');?>
</div>
<div class="carousel-row hidden-xs">
        <div class="col-md-9">
        <?php $args = array('post_type' => 'images','posts_per_page' => -1 ); $loop = new WP_Query($args); if( $loop->have_posts() ):  ?>
            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
             <!-- Indicators -->
                <ol class="carousel-indicators">
                    <?php $count_images = wp_count_posts('images'); 
                            $published_images = $count_images->publish;
                                if(count($published_images) > 0) {
                                    for ($i=0; $i < $published_images; $i++) { ?>
                                        <li data-target="#carousel-example-generic" data-slide-to="<?php echo $i; ?>" <?php if($i == 0){ echo 'class="active"';} ?>></li>
                                    <?php }
                                }
                    ?>
                </ol>

            <!-- Wrapper for slides -->
                <div class="carousel-inner">
                <?php $j = 0; while( $loop->have_posts() ): $loop->the_post(); global $post; ?>
                    <div class="item <?php if($j == 0) { echo 'active'; }?>">
                        <img src="<?php echo wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>" alt="<?php echo get_the_title(); ?>">
                            <div class="carousel-caption">
                                <?php the_excerpt(); ?>
                            </div>
                    </div>
                <?php $j++; endwhile;?>
                </div>

            <!-- Controls -->
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a>
        </div>
    <?php endif; wp_reset_query(); ?>
        </div>
        </div>
<?php endwhile; endif; ?>