[WordPress] 記事一覧で最初の1件だけ目立たせるカスタマイズ方法

MARKLEAPS

2025.06.09

WordPressの投稿一覧を作成しているとき、「最初の1件だけ目立たせたい」と思ったことはありませんか？

たとえば、1件目だけ画像を大きく表示したり、レイアウトを変えて見せることで、重要な記事に視線を集めることができます。

この記事では、「最初の1件目だけデザインを変える方法」を、シンプルなPHPコードで紹介します。
コピペで使えるコード付きなので、初心者の方にもおすすめです。

サンプルコード

<div class="top_news_wrap">
  <h2>お知らせ</h2>
  <?php 
    $args = array(
      'posts_per_page' => 4
    );
    $the_query = new WP_Query( $args ); 
    $counter = 0;
  ?>
  <?php if ( $the_query->have_posts() ) : ?>
    <?php while ( $the_query->have_posts() ) : $the_query->the_post(); $counter++; ?>
      <?php if ($counter === 1): ?>
        <dl class="top_news_dl">
          <a href="<?php the_permalink(); ?>">
            <dt><img src="<?php echo catch_that_image(); ?>" alt="<?php the_title(); ?>" /></dt>
            <dd>
              <time><?php the_time('Y.n.j'); ?></time>
              <h3><?php the_title(); ?></h3>
              <p><?php echo mb_substr(strip_tags(get_the_content()), 0, 30, 'UTF-8') . '…'; ?></p>
            </dd>
          </a>
        </dl>
        <div class="article_list01">
      <?php else: ?>
        <article>
          <a href="<?php the_permalink(); ?>">
            <time><?php the_time('Y.n.j'); ?></time>
            <p><?php the_title(); ?></p>
          </a>
        </article>
      <?php endif; ?>
    <?php endwhile; ?>
    </div>
  <?php endif; wp_reset_postdata(); ?>
</div>

<?php

$args = array(

'posts_per_page' => 4

);

$the_query = new WP_Query( $args );

$counter = 0;

<?php if ( $the_query->have_posts() ) : ?>

<?php while ( $the_query->have_posts() ) : $the_query->the_post(); $counter++; ?>

<?php if ($counter === 1): ?>

<dd>

</dd>

</a>

</dl>

<?php else: ?>

</a>

</article>

<?php endif; ?>

<?php endwhile; ?>

</div>

<?php endif; wp_reset_postdata(); ?>

</div>

コードのポイント解説

$counter：ループ内で現在の投稿数をカウント
if ($counter === 1)：1件目だけ別のレイアウトで表示
それ以降の記事は通常のレイアウトに振り分け

注意点：投稿数が少ないときの挙動

posts_per_pageで指定した数より投稿数が少ない場合でも、1件目の表示分岐は正常に動作します。
ただし、1件しかない場合、リスト部分（2件目以降のラッパー）が空になるため、レイアウトが崩れないようにCSSで調整するか、PHPで件数に応じて出力を変えるのが推奨されます。

まとめ

WordPressでは簡単な条件分岐で、一覧の最初の1件だけレイアウトを変えられます。
デザインにメリハリが出て、ユーザーの注目を集めやすくなります。
投稿数が少ない場合のレイアウト崩れにだけ注意すれば、汎用性の高いカスタマイズです。

目立たせたい記事があるときは、ぜひ試してみてください。

WordPress

よく読まれている関連記事

[WordPress] Contact Form 7のフォーム送信履歴を管理画面にデータ保存&CSV保存プラグイン比較

[WordPress] 記事一覧で最初の1件だけ目立たせるカスタマイズ方法

サンプルコード

まとめ

よく読まれている関連記事

[WordPress] Contact Form 7のフォーム送信履歴を管理画面にデータ保存&CSV保存プラグイン比較

関連最新記事

[WordPress] トップ・固定・投稿などページ種別に応じた条件分岐タグまとめ

[WordPress] 管理画面のエラー表示を目立たせるために試したCSSカスタマイズ

[WordPress] デバッグモードを有効化してエラーをサイト上に表示・ログファイルに記録する方法

[WordPress] ブロックエディタ（Gutenberg）最初に覚えたい基本のブロックとその使い方

社内風景

社内風景2