wordpressでサムネイル付きの新着記事一覧を出す方法あれこれ

ブログのサイドバーなんかでよく見かける「新着記事一覧」ですが、wordpressで出す方法としては、ウィジェットで対応するのが一番楽です。wordpress標準でも「最近の投稿」というウィジェットが用意されています。

ただ、この標準で用意された「最近の投稿」では、表示件数と投稿日の有無くらいしかカスタマイズできる項目がなく、記事に設定しているアイキャッチ画像など、サムネイルを表示することが出来ません。

記事一覧を出すんだったら、目に止まりやすいのでサムネイル付きで出したい所。そこでいくつかの方法を紹介します。

プラグインだったら「Newpost Catch」がオススメ

プラグインを使えば簡単にサムネイル付き新着記事一覧が出せます。オススメのプラグインは「Newpost Catch」です。日本の方が作られたものなので、日本語にもバッチリ対応しており使いやすいのが特徴です。

ウィジェットからの設定画面です。全て日本語対応されているので、使いやすい。
「標準の投稿」ウィジェットでもあった、表示件数、投稿日の有無に加え、サムネイルのサイズ設定、カテゴリの指定・除外もできます。

実際の表示がこちらです。少しcssを調整しましたがそれほど手間をかけなくても簡単にサムネイル付き新着記事一覧が出せるのでいいですね。

ただ、マークアップ自体の編集はできなさそう

cssを調整すればデザインもカスタマイズできるので、基本的には「Newpost Catch」で問題ないと思います、、、が個人的にはもう少しマークアップをカスタマイズしたいと思いました。

出力されたソースは上図の様に書かれていますが、img要素と、titleをそれぞれdivで囲みたいと思いました。しかしマークアップのカスタマイズをしたい場合は、どうやらプラグイン本体のPHPファイルを編集しなければいけないみたいです。プラグイン本体を編集してしまうと、バージョンアップ毎に同じ編集を繰り返さなければならず、管理上良くないので避けたい所。

というわけで、プラグインを使わずに書く方法をご紹介します。

プラグインを使わずサムネイル付き新着記事一覧を出す方法

色んな書き方はあると思いますが、今回は「WP_Query」を使ってみます。

<?php
    // posts_per_pageで取得件数の指定、orderbyでソート順を新着順にしています。
    $args = array('posts_per_page' => 5, 'orderby' => 'date');
    $query = new WP_Query($args);
?>
<?php if( $query->have_posts() ) : ?>
<ul>
    <?php while ($query->have_posts()) : $query->the_post(); ?>
    <li>
        <div class="thumbnail"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a></div>
        <div class="title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>
   </li>
   <?php endwhile; ?>
</ul>
    <p>記事がありません</p>
<?php endif; ?>
<?php wp_reset_postdata(); ?>

最も簡単に書いたのが上記コードです。サムネイルとタイトルをそれぞれdivタグで囲んでclassを付けています。

CSSの調整をして表示してみたのが上の画像です。プラグイン使った時とほぼ変わらない表示になっています。WP_Queryを使って記事データを取得してきているので、プラグインには出来ない複雑な指定の仕方も可能です。

コード量もそこまで多くないので、自分で色々と好きに調整してみたいという場合、プラグインを使わない方法がオススメです。