最新の投稿のリンク（タイトル）・本文（抜粋）・アイキャッチ画像を一覧表示する

WordPress個別サポート

最新投稿のタイトルを一覧表示する

投稿ページを上から下にスクロールして読んでくれたユーザーは、その下にある“出口”をクリックして次のページへと出て行こうとする傾向にあります。そこに最新投稿のタイトル（リンク）を一覧表示しておけば、ページビューの増加につながります。

本文の下に最新投稿のタイトルを一覧表示する
本文の下に最新投稿のタイトルを一覧表示する

投稿タイトルを一覧表示したい場合、テーマの投稿コンテンツのテンプレートでwp_get_archivesを呼び出します。

Twenty Twelveでは、content.phpを開いて、本文を表示しているthe_contentの下あたりに次のようにコードを記述します。

<div class="entry-content">
    <?php the_content(...略...); ?>
    <?php wp_get_archives('type=postbypost&limit=5'); ?>

wp_get_archivesの「type=postbypost」は最新の投稿を表示、「limit=5」は最大で5件表示という意味です。

タイトルと本文を一覧表示する

タイトルに加えて本文の一部（抜粋）を表示したい場合は、もう少しコードを記述する必要があります。たとえば、トップページ（フロントページ）の下あたりに最新の投稿のタイトルと抜粋を3件ほど表示するには、Twenty Twelveではcontent-page.phpを編集する方法があります。

本文を表示しているthe_contentの下あたりに次のように入力します。

<?php if(is_front_page()) : ?>
<h2>最新の投稿</h2>
<?php query_posts('showposts=3'); ?>
<?php if (have_posts()) : ?>
    <ul>
    <?php while (have_posts()) : the_post(); ?>
        <li><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
        <?php the_excerpt(); ?>
        </li>
    <?php endwhile; ?>
    </ul>
<?php endif; ?>
<?php wp_reset_query(); ?>
<?php endif; ?>

これにより、フロントページの下の方に最新の投稿タイトルと抜粋が表示されます。

最新投稿のタイトルと抜粋を表示する
最新投稿のタイトルと抜粋を表示する

使われている命令を説明します。

  • if(is_front_page()) → 「フロントページの場合は … を実行する」という条件分岐です。
  • query_posts('showposts=3') → 任意の投稿を取得する関数です。「showposts=3」で件数を指定します。
  • if (have_posts()) → 「投稿があれば … を実行する」という条件分岐です。投稿が存在しないときに無駄な「<ul> … </ul>」を出力するのを防ぎます。
  • while (have_posts()) → 「投稿があれば（一覧表示）を実行する」という条件分岐です。
  • the_post() → query_postsで取得した投稿から1件を取り出します。
  • the_permalink() → パーマリンクを出力します。投稿へのリンクに使います。
  • the_title() → 投稿のタイトルを表示します。
  • the_excerpt() → 投稿の抜粋を表示します。
  • endwhile → 投稿の一覧表示を終了します。
  • endif → ifで始まる条件分岐の構文を終了します。
  • wp_reset_query() → 投稿データをリセットします。

サムネイル付きで投稿を一覧表示する

投稿にアイキャッチ画像があれば、次のようにタイトルや抜粋と一緒に一覧表示することもできます。

アイキャッチ画像付きで投稿を一覧表示
アイキャッチ画像付きで投稿を一覧表示

記述するコードは上で紹介した内容を修正したもので、次のようになります。

<?php if(is_front_page()) : ?>
<h2>最新の投稿</h2>
<?php query_posts('showposts=3'); ?>
<?php if (have_posts()) : ?>
    <ul style="list-style-type:none">
    <?php while (have_posts()) : the_post(); ?>
        <li><?php the_post_thumbnail(array(150, 150), "class=alignleft"); ?><br />
        <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
        <?php the_excerpt(); ?>
        <br style="clear:both;" />
        </li>
    <?php endwhile; ?>
    </ul>
<?php endif; ?>
<?php wp_reset_query(); ?>
<?php endif; ?>
  • the_post_thumbnail() → アイキャッチ画像を表示します。the_post_thumbnail()のように記述すればデフォルトの設定でアイキャッチ画像が表示されますが、ここでは、「array(150, 150)」でサイズ（幅、高さ）、「class=alignleft」で画像に適用するclass名を指定しています。

ulタグ、brタグのスタイルはstyle.cssに定義すれば良いのですが、ここでは上の続きなのでここに含めてあります。

WordPressカスタマイズ