私は実装しようとしているこのレイアウトを持っています - 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 -->
これを達成するには、カウンターを使用してから必要に応じてクラスを更新します。以下のコードは変数$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 } ?>
それはあなたが達成したいものと似ていますか?