web-dev-qa-db-ja.com

ブートストラップカルーセル内でカスタム投稿タイプとカスタムフィールドを表示する

私は初めて「タイプ」ワードプレスプラグインを使用しています。カスタム投稿タイプと、いくつかのカスタムフィールドを作成しました。

すべてのカスタム投稿を動的にBootstrapカルーセルに呼び出して、そのループ内のフィールドを表示する方法を教えてください。

そして、どのように私はカルーセルを通って循環するポストの量を制限するのですか？もう1つの要件は、必要なBootstrapの 'active'クラスを only 最初の投稿に追加する必要があることです。

これが私の最初のショットです。

<!-- need to limit the entire carousel to displaying the 5 latest posts -->
    <div id="myCarousel2" class="carousel">
        <div class="carousel-inner2">

            <?php $loop = new WP_Query( array( 'post_type' => 'testimonial' ) ); ?>
            <div class="item active" data-title=""><!-- the first div needs a class of active, but the others do not -->
                <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
                    <div class="slide-copy"><?php the_content(); ?></div>
                    <!-- need to display a custom field or two here -->
                <?php endwhile; ?>
          </div>
        </div>
      </div><!-- end myCarousel -->

これが私の2回目の試みです。カスタムフィールド値を表示することを除いて、私はこれが美しく働くようにしました。助言がありますか？構文は正しいようです...基本的なものがここにありませんか？

<?php $the_query = new WP_Query(array(
'post_type' => 'testimonial', 
'posts_per_page' => 1 
));
while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<div class="item active" data-title="">
    <div class="slide-copy">
        <?php the_content();?>
        <span class="byline"><?php echo get_post_meta($post->ID, 'authorinfo', true); ?></span>
    </div>
</div>
<?php endwhile; wp_reset_postdata(); ?>
<?php $the_query = new WP_Query(array(
'post_type' => 'testimonial', 
'posts_per_page' => 5, 
'offset' => 1 
));
while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<div class="item" data-title="">
    <div class="slide-copy">
    <?php the_content();?>
    <span class="byline"><?php echo get_post_meta($post->ID, 'authorinfo', true); ?></span>
    </div>
</div>
custom-post-typescustom-fieldtwitter-bootstrapplugin-types
6
cindyg

私はこのようなことのために、get_postsがより簡単であるとわかりました。

<?php
    // Set up your arguments array to include your post type,
    // order, posts per page, etc.

    $args = array(
        'post_type' => 'testimonial',
        'posts_per_page' => 3,
        'orderby' => 'date',
        'order' => 'DESC'
    );

    // Get the posts
    $testimonials = get_posts($args);

    // Loop through all of the results
    foreach ($testimonials as $testimonial)
    {
        // Since we're doing this outside the loop,
        // Build the apply the filters to the post's content

        $content = $testimonial->post_content;
        $content = str_replace(']]>', ']]&gt;', $content);
        $content = apply_filters('the_content', $content);

        // Build out the carousel item
?>
        <div class="item-active">
            <?php echo get_post_thumbnail($testimonial->id); ?>
            <div class="carousel-caption">
                <h4><?php echo $testimonial->post_title; ?></h4>
                <?php echo $content; ?>
            </div>
        </div>
<?php
    }
?>

これは私にとって何度もうまくいったので、私のすべてのカルーセル、jQuery、またはTwitter Bootstrapのための私の行き先のある方法になります。

これが役に立つことを願っています。

get_postsのコーデックス関数リファレンス

2
Alex Lane

「コーデックスページで複数のループがある場合の動作」をお読みください。少なくとも答えがあると思います。 http://codex.wordpress.org/The_Loop

私は1つの「おすすめ」カテゴリを使用しました。そして、クエリは「アクション内の複数ループ」によって行われました。ブートストラップカルーセルクラスをアクティブにするためのおすすめカテゴリを含む1つの投稿で最初のループを実行します。それから、他のループは他のカテゴリーを最初のものより少なくします。

  <div id="myCarousel" class="carousel slide">
  <!-- Carousel items -->
   <div class="carousel-inner">
    <?php 
      $my_query = new WP_Query('category_name=featured&posts_per_page=1');
      while ($my_query->have_posts()) : $my_query->the_post();
      $do_not_duplicate = $post->ID;?>
       <!-- The 1st Loop... -->
       <div class="active item well-blue">
         <div class="offset1">              
         <h3><?php the_title(); ?></h3>
         <p class="lead"><?php $excerpt = strip_tags(get_the_excerpt()); echo $excerpt; ?></p>
         <a href="<?php the_permalink() ?>" class="btn" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">Read more...</a>
       </div> 
     </div>
    <?php endwhile;
      // The 2nd Loop limits the query to 2 more posts...
    $limit_query = new WP_Query('posts_per_page=2');
    if($limit_query->have_posts()) : while ($limit_query->have_posts()) : $limit_query->the_post(); 
    if( $post->ID == $do_not_duplicate ) continue; ?>
    <!-- The 2nd Loop same data as 1st loop -->
    <?php endwhile; endif;  wp_reset_query(); ?>
      </div>
      <!-- Carousel nav -->
      <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
      <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
  </div>

お役に立てば幸いです。

1
jose pacheco

アクティブなクラスが投稿をループ処理するための条件付きステートメントを作成する必要があります。これは、私がカスタム投稿タイプと共に使用した手法です。

`

                <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox">
                  <?php 

                    if( $query->have_posts() ) : 
                      while( $query->have_posts() ) : 
                        $query->the_post(); 
                        $i++;
                  ?>

                    <div class="item <?php if ( $i == 1 ) {echo 'active';} ?>">

                      <p><?php the_field('testimonial'); ?></p>
                      <div class="testimonials-image">
                          <img class="img-responsive" src="<?php the_field('testimonial_image'); ?>" alt="">
                      </div>
                      <h5><?php the_field('testimonial_name'); ?></h5>
                      <h6><?php the_field('testimonial_occupation'); ?></h6>

                    </div>

                  <?php 
                    endwhile; 
                      endif; 
                        wp_reset_postdata(); 
                  ?>

                </div>

                <!-- Controls -->
                <a class="left" href="#carousel-example-generic" role="button" data-slide="prev">
                  <i class="fa fa-long-arrow-left" aria-hidden="true"></i>
                  <span class="sr-only">Previous</span>
                </a>
                <a class="right" href="#carousel-example-generic" role="button" data-slide="next">
                  <i class="fa fa-long-arrow-right" aria-hidden="true"></i>
                  <span class="sr-only">Next</span>
                </a>

              </div>
            </div>
        </div>
    </div>
</div>

`

0
Justyn Thomas

あなたが何を求めているのか完全には明らかではありません、あなたはあなたの投稿にいくつかの実際の質問を入れたいと思うかもしれません。

私はあなたが望むことの一つは特定の数の投稿をWP_Queryが選択する方法を知ることであると思います。デフォルトではWP_Queryはすべての投稿をページ分割するように設計されていますが、ページ区切りを使う必要はありません。しかし、WP_Queryに "最初のページ"にN個の投稿のみを選択するように指示するには、 showpostsパラメータ を使用できます。

メタ値の場合はおそらく get_post_meta（） が必要ですが、WP_Queryでメタ値を使用する場合は meta_query が必要です。

CSSはコンテナの最初の要素をカバーするための:first-child疑似セレクタを提供します。そうでなければ、おそらくこれはその場ではないでしょうが、ループの外側でcount変数を設定し、内側でif ($count++ == 0) $class = 'active';のようなことをすることができます。

0
totels