WordPress のトップページで特定のタグやカテゴリの記事を指定件数表示させる方法

WordPress で運営するサイトのトップ画面に、最新の記事一覧とは別に、カテゴリやタグで分類した記事のリストを表示させるにはどうしたらいいのか。

このサイトと別に管理しているブログ NJ-CLUCKER のトップページの改修において、実際にカテゴリ別・タグ別のリストを数件表示させるようにしたので、その時に実装した方法を解説していきます。

カテゴリ別の記事一覧を取得する方法

ソースコード

<?php
global $post;
$cat_slug = 'cat-test'; // カテゴリーのスラッグ
$cat_posts = get_posts(array(
  'post_type' => 'post', // 投稿タイプ
  //'category' => 1,  カテゴリIDを番号で指定する場合
  'category_name' => $cat_slug, // カテゴリをスラッグで指定する場合
  'posts_per_page' => 6, // 表示件数
  'orderby' => 'date', // 基準になる表示順
  'order' => 'DESC' // 昇順・降順
));
if($cat_posts):
  foreach($cat_posts as $post):
    setup_postdata($post);
?>
<!-- ここから先は各々のフォーマットで利用 -->
<div>
<?php
    // サムネイルを持っている場合
    if ( has_post_thumbnail() ):
      $title = get_the_title();
      the_post_thumbnail('thumbnail', array( 'alt' =>$title) );
    // サムネイルを持っていない場合
    else:
      echo 'サムネイルなし';
    endif; ?>
<?php the_permalink();  ?><!-- リンク --><br>
<?php the_title(); ?><!-- タイトル --><br>
<?php the_title_attribute(); ?><!-- タグ内で使うタイトル --><br>
<?php the_time('Y/m/d'); ?><!-- 投稿日 --><br>
</div>
<?php
  endforeach;
endif;
// ループ後のリセット処理
wp_reset_postdata();
?>

プログラム解説

取得するデータは get_posts 関数にセットする値で全て決まります。array 内の決められた変数値を設定してデータを取得します。上記サンプルの例では、カテゴリーのスラッグ cat-test を条件にデータを取得しています。

もしスラッグではなくカテゴリー ID を条件にしたい場合、category_name ではなく category の値を設定してデータを取得します。

データ取得時に設定している値 (get_posts の引数)

サムネイル取得関数 the_post_thumbnail について

この関数の第一引数に設定する値に応じて、取得する画像のサイズを選択できます。それぞれの環境によってメディア設定が異なるので、自身の設定にあったものを利用してください。

タグ別の記事一覧を取得する方法

原理はカテゴリーと同じです。get_posts 関数を使って、タグのスラッグもしくはタグの ID を指定してデータを取得します。取得したデータの出力方法は、カテゴリーの場合と全く同じです。

<?php
global $post;
$tag_slug = 'tag-test'; // タグのスラッグ
$tag_posts = get_posts(array(
  'post_type' => 'post', // 投稿タイプ
  //'tag_id' => 1,  タグIDを番号で指定する場合
  'tag' => $cat_slug, // タグをスラッグで指定する場合
  'posts_per_page' => 6, // 表示件数
  'orderby' => 'date', // 基準になる表示順
  'order' => 'DESC' // 昇順・降順
));
if($tag_posts):
  foreach($tag_posts as $post):
    setup_postdata($post);
?>
<!-- ここから先は各々のフォーマットで利用 -->
<div>
<?php
    // サムネイルを持っている場合
    if ( has_post_thumbnail() ):
      $title = get_the_title();
      the_post_thumbnail('thumbnail', array( 'alt' =>$title) );
    // サムネイルを持っていない場合
    else:
      echo 'サムネイルなし';
    endif; ?>
<?php the_permalink();  ?><!-- リンク --><br>
<?php the_title(); ?><!-- タイトル --><br>
<?php the_title_attribute(); ?><!-- タグ内で使うタイトル --><br>
<?php the_time('Y/m/d'); ?><!-- 投稿日 --><br>
</div>
<?php
  endforeach;
endif;
// ループ後のリセット処理
wp_reset_postdata();
?>

プログラム解説

上記サンプルの例では、タグのスラッグ tag-test を条件にデータを取得しています。タグ ID を条件にする場合、tag ではなく tag_id の値を設定します。

なおカテゴリーの場合と変数の命名ルールが異なっています。ここは間違えやすいポイントなので、変数名は必ず確認しましょう。

データ取得時に設定している値 (get_posts の引数)

サムネイルの取得方法はカテゴリーデータ取得時と同じなので、割愛します。

プログラムはどこに書けばいい？

これはテーマによって様々なので、一概にどこか伝えることはできません。一般的には home.php もしくは index.php のどちらかです。

あまりプログラムに詳しくなければ、自身のパソコン環境で WordPress を動かせるテスト環境を作って試すと良いです。僕も大規模なテーマ改修時は、テスト環境で試してからネット環境に反映しています。10分程度で簡単に構築できるので、こちらの記事を参考に試してみてください。

パソコン内に WordPress の環境を構築する方法。初心者におすすめなツールを紹介【テスト環境の構築】

WordPress のデータはインターネット上にあり、ブラウザから操作するだけで即座にデータが更新されるのが大きなメリットの１つです。 しかしテーマデザインの変...