【WordPress】最新の記事だけマークアップやデザインを条件分岐する方法

WordPress2018年4月18日

WordPressで構築したブログにて最新記事を表示することはよくあると思いますが、最初の記事だけ大きく見せているサイトを見たことがあるかと思います。アレはWordPressに一工夫加えることで実装が可能なのですが、今回Web屋の芝生DIYでも実装してみました。本記事では、WordPressで最新の記事の「1件目だけ」表示を変更する方法をご紹介させていただきたいと思います。

やりたかった事

固定ページ（/blog/）で実装
1件目の記事だけ<li class="single">
2件目以降は<li>
2件目以降は10件表示
1件目の記事のアイキャッチはデフォルトサイズ

ちなみに実装したページはこちら

マイホームブログ | Web屋の芝生DIY

サンプルコード

//1件目の記事
<?php $postslist = get_posts('numberposts=1');
foreach ($postslist as $post) : setup_postdata($post);?>
<li class="single">
<a href="<?php the_permalink(); ?>">
<img src="<?php echo get_the_post_thumbnail_url(get_the_ID(),'');?>" alt="">
<?php the_title(); ?></a>
</li>
<?php endforeach; ?>

//2件目の記事
<?php $postslist = get_posts('numberposts=10&offset=1');
<li>
<a href="<?php the_permalink(); ?>">
<img width="80" height="80" src="<?php echo get_the_post_thumbnail_url(get_the_ID(),'thum300');?>" alt="">
<?php the_title(); ?></a>
</li>
<?php endforeach; ?>

解説

1件目

get_posts()関数を使い、foreach文を回して最新記事を取得します。パラメータに「'numberposts=1'」を指定することで1件のみ取得します。あとはリンクは記事タイトル、画像などを任意のマークアップで表示すればOKです。要は普通に複数件の最新記事を表示する方法と大きな違いはないです。1件表示にしているだけですね。

2件目以降

基本的な記述は1件目と変わりありません。ただこちらは2件目～11件目を表示するためにパラメータに「'numberposts=10&offset=1'」と指定するのがポイントです。「offset=1」で1件目を除外した10件を表示します。

まとめ

1件目のビジュアルの見せ方を変えることで、単なる最新記事一覧でもメリハリが利き、直感的に最新記事がどれなのかユーザーに認識させることが可能になります。名のあるブログメディアを見るとこの見せ方を採用しているところは多いです。LIGとかAll Aboutとか。

この手の実装方法を調べると様々な記事が出てくるのですが、ページネーションも合わせて組み込むと、少し一工夫加える必要がある模様。

※2ページ目以降は1件目を大きくしないようにする、など

元々Web屋の芝生DIYではカテゴリページと年月アーカイブページにしかページネーションは組み込んでいないのですが、せっかくなのでいずれ最新記事一覧にもページネーションを組み込んでみようかと考え中です。その際は少し実装方法が変わりそうなので、組み込んだ際は改めて別記事でご紹介させていただこうと思います。

この記事を読んでいる方にオススメの記事

「WordPress」の他の記事を読む

この記事にコメントする

※承認制のため、即時には反映されません。