ブログのトップページなどにカテゴリー別に記事抜粋を一覧表示する方法をご紹介します。

簡単にできますので、興味がありましたらやってみてください。

カテゴリーIDを指定したループを設置する

カテゴリーIDを指定したループをWordPressテンプレート内に複数設置して、カテゴリー別の記事抜粋一覧を表示します。

そのために、まずは表示したいカテゴリーのIDを取得する方法とループの基本についてご説明していきたいと思います。

カテゴリーIDを調べるには？

WordPressのカテゴリーIDは、ダッシュボードのカテゴリー編集画面でURLを見れば調べることができます。

しかしちょっとめんどくさいというか、スマートな方法ではないような気もしますので、便利なプラグインをご紹介します。

ShowID for Post/Page/Category/Tag/Comment

この「ShowID for Post/Page/Category/Tag/Comment」をインストールして有効化すると、ダッシュボードの投稿一覧やカテゴリー一覧などで、その投稿やカテゴリーのIDがひと目でわかるようになります。

テーマの構築やメンテナンスのときにも便利ですので、おすすめのプラグインです。

これでカテゴリーIDが分かりました。

次はこのカテゴリーIDを指定したループの作り方です。

ループとは？

ループとは、簡単に言うとWordPress内に記事があるかチェックし、あれば指定された数だけ一覧表示する仕組みのことです。

このループに様々な条件を指定することで、特定のカテゴリーのみや特定のカスタムポストタイプなどの記事一覧を表示させることができます。

ループの基本形は以下のような形になります。

PHP

<?php if(have_posts()): while(have_posts()): the_post(); ?>

//ここにループする内容を記述

<?php endwhile; ?>
<?php else : ?>

<p>記事が見つかりません</p>

<?php endif; ?>

このループの基本形では、1行目の

<?php if(have_posts()): while(have_posts()): the_post(); ?>

から5行目の

<?php endwhile; ?>

までの間に書かれている内容がループされ、記事が見つからない場合は「記事が見つかりません」と表示されます。

ループする内容を追記する

まずは、このループされる部分に記事タイトルと投稿日、記事抜粋が表示されるようにソースを追記していきます。

PHP

<?php if(have_posts()): while(have_posts()): the_post(); ?>

<div class="post">
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<div class="post_date"><?php echo get_the_date('Y.m.d'); ?></div>
<div class="post_body"><?php echo mb_substr(strip_tags($post-> post_content),0,100).'...'; ?></div>
</div>

<?php endwhile; ?>
<?php else : ?>

<p>記事が見つかりません</p>

<?php endif; ?>

個別ページへリンクした記事タイトルをh2タグで囲み、投稿日を「post_date」というクラス名のdiv要素、記事抜粋(100文字)を「post_body」というクラス名のdiv要素で囲みました。

今回はスタイル指定は割愛しますので、お好みに合わせて指定してください。

条件を指定する

それでは次に、上記のループに記事の抽出条件を指定していきます。

PHP

<?php query_posts('cat=3&posts_per_page=10&paged='.$paged); ?>
<?php if(have_posts()): while(have_posts()): the_post(); ?>

<div class="post">
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<div class="post_date"><?php echo get_the_date('Y.m.d'); ?></div>
<div class="post_body"><?php echo mb_substr(strip_tags($post-> post_content),0,100).'...'; ?></div>
</div>

<?php endwhile; ?>
<?php else : ?>

<p>記事が見つかりません</p>

<?php endif; ?>

上記ソースの1行目で、カテゴリーIDが3の記事を10件表示する指定をしました。

1行目最後の方の「&paged=…」という部分はページネーションを正常に動作させるための記述ですので、ここではそういうものとして書いておいてください。

これで、特定のカテゴリーの記事のみを抽出して一覧表示するためのループができあがりました。

これを表示させたいページテンプレートに記述すれば、指定したカテゴリーの記事のみが一覧で表示されます。

･･･と言いたいところですが、実はもう一工夫する必要があります。

ループ条件をリセットする

上記のソースを実際にページテンプレートに記述して、意図したとおりに表示されるか確認してみてください。

ページ内にループが1箇所しかない場合であれば問題なく表示されると思います。

しかし、同一ページ内に複数のループを設置する場合(たとえばカテゴリーID1の記事一覧の下にカテゴリーID3の記事一覧を表示して、そのまた下に･･･という場合)には表示がうまくいかないと思います。

これはそれぞれのループでの抽出条件が、そのループが終わった段階でリセットされていないことが原因で起こります。

ですから、それぞれのループの一番最後に「このループ条件はここでリセットします」という記述を追記する必要があるわけです。

PHP

<?php query_posts('cat=3&posts_per_page=10&paged='.$paged); ?>
<?php if(have_posts()): while(have_posts()): the_post(); ?>

<div class="post">
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<div class="post_date"><?php echo get_the_date('Y.m.d'); ?></div>
<div class="post_body"><?php echo mb_substr(strip_tags($post-> post_content),0,100).'...'; ?></div>
</div>

<?php endwhile; ?>
<?php else : ?>

<p>記事が見つかりません</p>

<?php endif; ?>
<?php wp_reset_postdata(); wp_reset_query(); ?>

一番最後の行に「… wp_reset_query(); …」という記述を追加しました。

これでそのループの条件がここで終わりということをWordPressに分かってもらうことができるようになりました。

このループ開始からループ条件リセットまでをセットで記述するようにしておけば、同一ページ内に複数のループを設置できるようになります。

おまけ：WP-PageNaviの表示用ソースはループリセットの前に書く

つい最近聞かれてドヤ顔で答えたところなのでおまけでご紹介しておきますが、WP-PageNaviのページナビゲーションを表示するためのソースコード

<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>

は、ループ条件リセットの前に記述してください。

なんとなく感覚で分かって頂けるのではないかと思うのですが、そうしないとWP-PageNaviが動く前にループ条件がリセットされてしまうため、WP-PageNaviが次のページで何を表示したらいいか分からなくなってしまう･･･というような感じでしょうか。

以下のようになっていれば大丈夫です。

もしWP-PageNaviが動かないという場合にはこちらも思い出して頂ければと思います。

PHP

<?php query_posts('cat=3&posts_per_page=10&paged='.$paged); ?>
<?php if(have_posts()): while(have_posts()): the_post(); ?>

//ループする内容

<?php endwhile; ?>
<?php else : ?>

//記事がない場合に表示する内容

<?php endif; ?>

//WP-PageNavi
<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>

<?php wp_reset_postdata(); wp_reset_query(); ?>