自分のためのメモ

投稿の1件目と2件目以降でデザインを変える

単純に1件目のみ画像や見出しを大きくしたいだけなら、CSSなどでどうにかなるが、
ユニークなクラスを付与したり、表示コンテンツも変えたい、、など柔軟に切り分けたい場合は以下で対応。

同一ループ内で切り分ける場合

<?php
$loopcount = 0;
$posts = get_posts(array(
"numberposts" => 10,
'no_found_rows' => true
));
if ( $posts ) : ?>
    <?php foreach( $posts as $post ) : setup_postdata($post); $loopcount++; ?>
        <?php if ($loopcount <= 1) : ?>
            1件目の記事の表示
        <?php else : ?>
            2件目以降の記事の表示
        <?php endif; ?>
    <?php endforeach; ?>
<?php else : ?>
    <?php _e('記事が見つかりません。'); ?>
<?php endif; wp_reset_postdata(); ?>

デザインの都合上などで同一ループでは難しい場合、以下のように完全に切り分ける。

ループそのものも分けたい場合

<?php
$loopcount = 0;
$posts = get_posts();
if ( $posts ) : ?>
    <?php foreach( $posts as $post ) : setup_postdata($post); $loopcount++; ?>
        <?php if ($loopcount <= 1) : ?>
            1件目の記事の表示
        <?php endif; ?>
    <?php endforeach; ?>
<?php endif; wp_reset_postdata(); ?>

-- 他コンテンツ --

<?php
$posts = get_posts(array(
    'numberposts' => 9,
    'offset' => 1,
    'no_found_rows' => true,
));
if ( $posts ) : ?>
    <?php foreach( $posts as $post ) : setup_postdata($post); ?>
        2件目以降の記事の表示
    <?php endforeach; ?>    
<?php else : ?>
    <?php _e('記事は1件だけです。'); ?>
<?php endif; wp_reset_postdata(); ?>

上記で意図した表示になるが、1件目かどうかの判断に

$loopcount = 0;

を使う必要はないかもしれない。
単純に1件目の抽出は

<?php
$posts = get_posts(array(
    'numberposts' => 1,
    'no_found_rows' => true
));
if ( $posts ) : ?>
    ・
    ・

とした方が処理が早いかもしれない。(※未検証)