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

公開日:
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 の引数)

変数設定する値
post_type投稿タイプは post を設定
categoryカテゴリ ID を番号で指定(スラッグと併用しない)
category_nameカテゴリのスラッグを指定(カテゴリ ID と併用しない)
posts_per_page表示件数を数字で指定
orderby表示順の条件 (date: 投稿日、modified: 更新日)
orderASC: 昇順、降順: DESC

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

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

引数の値取得するサムネイル
thumbnailメディア設定「サムネイル」に指定したサイズの画像
mediumメディア設定「中サイズ」に指定したサイズの画像
largeメディア設定「大サイズ」に指定したサイズの画像
fullアップロードした元サイズの画像
array( 100, 100 )functions.php で指定した任意サイズの画像

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

原理はカテゴリーと同じです。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 の引数)

変数設定する値
post_type投稿タイプは post を設定
tag_idタグ ID を番号で指定(スラッグと併用しない)
tagタグのスラッグを指定(タグ ID と併用しない)
posts_per_page表示件数を数字で指定
orderby表示順の条件 (date: 投稿日、modified: 更新日)
orderASC: 昇順、降順: DESC

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

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

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

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

\ この記事をシェアする /

このブログの運営者

NJ

Web系メインで従事していた元システムエンジニア。現在は個人事業主として独立。Webサイト運営における「困った問題」の解決方法をブログで発信。Web サイト運営、ポップデザインや動画制作など、パソコンでモノづくりをしている。