web-dev-qa-db-ja.com

WordPressの最新の投稿を1つのループで複数の列と行に分割する

私は実装しようとしているこのレイアウトを持っています - https://drive.google.com/file/d/1cP831xAM1F5CT3HEmedCBkINwiCC18Rb/view

ニューステンプレートを作成しましたが、最初のブートストラップ行に3つの投稿が表示され、その下に4つの投稿が表示される私の例のように、投稿を表示する必要があります。

これは可能ですか、私はこれを達成するための関連情報を見つけることができないようです。

このレイアウト用にテンプレートをコーディングする方法について、誰かが正しい方向に私を指すことができることを本当に願っています。

どうもありがとう

これが私の現在のコードです。

<div class="container">
    <div class="row">
    <?php
        while ( have_posts() ) {
            the_post(); 

            $class = 'col-md-4';

            if( $counter < 3 ) {
                $class = 'col-md-3';
            }

            ?>
            <div class="col-12 <?php echo $class; ?>">
                <?php the_post_thumbnail(', '); ?>
                <h3><a href="<?php the_permalink(); ?>" title="Read more"><?php the_title(); ?></a></h3>
            </div> <!-- .col-12 -->
            <?php

            $counter++;

        } // end while
    ?>
    </div><!-- .row -->
</div><!-- .container -->
postsloop
1
Davva M

これを達成するには、カウンターを使用してから必要に応じてクラスを更新します。以下のコードは変数$counterを作成し、投稿があればそれを0に代入します。 'col-md-4'が$classより小さい場合、デフォルトで$counterは3にバインドされます（$classは'col-md-3'に更新されます（3列ではなく4列になります）。そして、保存したクラスを含むHTMLを出力します。最後に、$counterは次の投稿項目のためにインクリメントされます。

<?php 
if ( have_posts() ) {
    $counter = 0;

    ?>

    <div class="container">
        <div class="row">
        <?php
            while ( have_posts() ) {
                the_post(); 

                $class = 'col-md-4';

                if( $counter < 3 ) {
                    $class = 'col-md-3';
                }

                ?>
                <div class="col-12 <?php echo $class; ?>">
                    <?php // content etc here ?>
                </div> <!-- .col-12 -->
                <?php

                $counter++;

            } // end while
        ?>
        </div><!-- .row -->
    </div><!-- .container -->
<?php } else { // end if ?>
    <p>There are no posts to display</p>
<?php } ?>
1
mrmadhat

これを見てみてください https://stackoverflow.com/questions/38304093/wordpress-blog-first-row-2-column-second-and-continuing-rows-3-columns

それはあなたが達成したいものと似ていますか？

0
Lisa