web-dev-qa-db-ja.com

ループの最初の2つの投稿をスタイルする方法

私はそのように見えるように一つのループをスタイルしようとしています

---------------------------------------------
||            |             ||              ||
||            |             ||--------------||
||            |             ||              ||
||            |             ||--------------||
||            |             ||              ||
||            |             ||--------------|| 
||            |             ||              ||
----------------------------------------------

だから私がここで達成しようとしているのは、ループから引っ張られている5つの投稿です。最初の2つは左側に配置されていて大きくなっています。次の3つは右側にあり、はるかに小さいです。

私はTwitter Bootstrapを使ってこれを達成するために2つのget_template_partを使用しようとしています。

これが私が今までに試みたことです

<div class="col-lg-12">
    <div class="row">
        <div class="col-lg-7">
            <div class="row">
            <?php if ( have_posts() ) : ?>
            <?php if ( in_category( 'Featured' ) ) : ?>
                <?php /* Start the Featured Loop */ ?>
                <?php $count=0; ?>
                <?php while ( have_posts() ) : the_post(); ?>

                    <?php $count++; ?>

                    <?php if($count <= 1):?>
                    <?php get_template_part( 'content', 'featured' ); ?>

            </div>      
        </div>
        <div class="col-lg-5">
            <div class="row">
                <?php else: ?>

                <?php if($count >= 3)?>
                        <?php get_template_part( 'content', 'featuredside' ); ?>
                        <?php endif; ?>
                <?php endwhile; ?>
                    <?php endif; ?>
                <?php endif; ?>
            </div>
        </div>
    </div>
</div>

これは<?php if($count <= 1):?>行を1に設定したときにうまくいきますが、2行目に変更して後でレイアウトを作成しようとすると、2番目の投稿は<div class="col-lg-5">にジャンプしてレイアウト全体をめちゃくちゃにします。

誰かが私が間違っているのを見ることができますか？

looptwitter-bootstrapfeatured-post
1
Michael N

カウンタ変数の代わりに、組み込みループカウンタを使用できます。

どのように投稿を個々のdivにラップする必要があるのか​​私にはわからないので、ここでは単なる例の構造です（1ページにつき5つの投稿でのみ使用されます）。

<div class="col-lg-12">
    <div class="row">

            <?php if ( have_posts() ) : ?>
            <?php if ( in_category( 'Featured' ) ) : /* Start the Featured Loop */ ?>

                <?php while( have_posts() ) : the_post(); ?>

                <?php if( $wp_query->current_post == 0 ) { 
                //open wide column wrapper div// ?>
                <?php } ?>

                <?php if( $wp_query->current_post <= 1 ) { 
                get_template_part( 'content', 'featured' );
                //insert large post// ?>
                <?php } ?>

                <?php if( $wp_query->current_post == 1 || $wp_query->current_post <= 1 && $wp_query->current_post == $wp_query->post_count-1 ) { 
                //close wide column div// ?>
                <?php } ?>

                <?php if( $wp_query->current_post == 2 || $wp_query->current_post <= 1 && $wp_query->current_post == $wp_query->post_count-1 ) { 
                //open narrow column wrapper div// ?>
                <?php } ?>

                <?php if( $wp_query->current_post >= 2 ) { 
                get_template_part( 'content', 'featuredside' );
                //insert small post//?>
                <?php } ?>

                <?php if( $wp_query->current_post == 4 || $wp_query->current_post == $wp_query->post_count-1 ) { 
                //close narrow column div// ?>
                <?php } ?>

                <?php endwhile; ?>

                    <?php endif; ?>

                <?php endif; ?>

    </div> <!--/.row-->
</div> <!--/.col-lg-12-->

これは、ページ上の投稿数が5件未満の場合でもdivを閉じる処理を行い、2件以下の投稿の場合は空の2番目の列も作成します。

警告：その場所でin_category()を使用すると、予期しない結果が生じる可能性があります。ループを「おすすめの」投稿に固有のものにする別の方法を使用するようにしてください。

どのテンプレートファイルに取り組んでいますか？

1
Michael

前の投稿に記録されている投稿のIDを追跡しながら次のループでそれをスキップするようにして、繰り返しが行われないようにするために、複数のループを使用します。私が意味するところをお見せしましょう。私は WP_Query クラスも利用しています。

<div class="container">

        <div class="row">

            <?php

                $args = array(
                    'posts_per_page' => 1
                    );

                $query = new WP_Query($args);

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

                        <?php $do_not_duplicate = $post->ID; ?>

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

                            <?php the_title(); ?>
                            <?php the_excerpt(); ?>


                        </div><!--col-md-4-->

                    <?php endwhile;

                else :

                    echo '<p>No posts found</p>';

                endif; ?>

                <?php wp_reset_postdata();

                $args = array(
                    'posts_per_page' => '1'
                    );

                $query = new WP_Query($args);

                ?>

                <?php if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post();

                      //storing the post ID in a new variable
                       <?php $do_not_duplicate_again = $post->ID; ?>

                        //This is where we check if the post from the first loop is being repeated and skip an iteration of the loop if it is.
                        if ( $post->ID == $do_not_duplicate ) continue; 


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

                        <?php the_title(); ?>
                        <?php the_excerpt(); ?>

                    </div><!--col-md-4--> 

                <?php endwhile;

                else :

                    echo '<p>No posts found</p>';

                endif; ?>

    <?php wp_reset_postdata();

                $args = array(
                    'posts_per_page' => '3'
                    );

                $query = new WP_Query($args);

                ?>

                <?php if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post();



                        if ( $post->ID == $do_not_duplicate_again ) continue; 


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

                        <?php the_title(); ?>
                        <?php the_excerpt(); ?>

                    </div><!--col-md-4--> 

                <?php endwhile;

                else :

                    echo '<p>No posts found</p>';

                endif; ?>

        </div><!--row-->

</div><!--container-->
0
chap