WordPress

WordPress|指定したカテゴリやタグの記事一覧を表示させる方法

トップページなどに、特定のカテゴリやタグの記事一覧を表示させたいときってありますよね。ここでは、投稿ページのカテゴリやタグを指定して記事を一覧表示させる方法(いわゆるサブループ)についてお話します。

コンテンツ

カテゴリを指定した記事一覧コード

はじめに結論をどうぞ。
PHP

<?php
$cat_posts = get_posts(array(
    'post_type' => 'post', // 投稿タイプ
    'category' => 1, // カテゴリIDを番号で指定する場合
    'category_name' => 'スラッグ', // カテゴリをスラッグで指定する場合
    'posts_per_page' => 6, // 表示件数
    'orderby' => 'date', // 表示順の基準
    'order' => 'DESC' // 昇順・降順
));
global $post;
if($cat_posts): foreach($cat_posts as $post): setup_postdata($post); ?>

<!-- ループはじめ -->
<h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
<p><?php the_category(', ') ?></p>
<p><?php the_time('Y/m/d') ?></p>
<p><?php the_excerpt(); ?></p>
<!-- ループおわり -->

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

$cat_postsという変数名は自由に変更していただいて結構です。上記のコードをご自分の設定に直してテンプレートに貼り付けていただければ指定したカテゴリ記事の一覧が表示されます。ループの内容は記事タイトルとカテゴリ、日付、抜粋という簡単な作りになっているので、いろいろカスタマイズしてください。

コードの解説

コードの解説です。下記のコードの行をクリックするとその行の説明が開きますので、お好きな行をクリックしてみてください。

<?php
$cat_posts = get_posts(array(
get_posts()は、投稿の一覧を表示させるときに使うお決まりの関数で、取得したい記事の設定を行います。全体の骨組みは下記のようになります。

PHP

<?php
$cat_posts = get_posts(array(
    // 取得する投稿の設定
));
global $post;
if($cat_posts): foreach($cat_posts as $post): setup_postdata($post);
?>
    // ループで設定した投稿データを出力
<?php endforeach; endif; wp_reset_postdata(); ?>

「取得する投稿の設定」のところで取得したい投稿の設定を行い、それを「ループで設定した投稿データを出力」のところで出力します。上記の骨組みは公式のようなものなので覚えてしまっても良いかもしれません。

ここでは、取得したい記事の設定を変数$cat_postsに代入しています。

    ‘post_type’ => ‘post’, // 投稿タイプ
投稿タイプの指定を行っています。今回は、投稿ページの記事一覧を表示させたいので、'post'と指定しましたが、例えば、カスタム投稿タイプを指定したい場合は、ここにカスタム投稿タイプのスラッグを入れます。
    ‘category’ => 1, // カテゴリIDを番号で指定する場合
カテゴリの指定方法は、IDとスラッグの2通りあります。こちらはカテゴリIDで指定する方法です。

'category' => 1,という形で予め「1」が入っていますので、これを表示させたいカテゴリIDに入れ替えます。私のPCのみかもしれませんが、「テーマの編集」のところで、「全角入力」でカテゴリIDを書き換えると数字が半角でも、テンプレートでエラーになってしまいます。カテゴリIDの編集は必ず「直接入力」で行いましょう。

カテゴリIDをどうやって確認したら良いか分からない方は、下記をご覧ください。

もしも、IDではなく下の行のスラッグで指定したいという場合は、この行はまるごと削除してしまいましょう。

    ‘category_name’ => ‘スラッグ’, // カテゴリをスラッグで指定する場合
'category_name' => 'スラッグ',という形でスラッグ名からカテゴリを指定しています。スラッグで指定する場合は、上の行のカテゴリIDの指定は削除してください。
    ‘posts_per_page’ => 6, // 表示件数
'posts_per_page' => 6,は記事の表示件数の指定です。数字を指定する場合は、値のところにクオーテーションマーク「’」はつけないでください。
    ‘orderby’ => ‘date’, // 表示順の基準
データをある特定の規則に従って並べ替えることを「ソートする」というのですが、orderbyでは、記事をどんな項目に沿ってソートさせるかを決めます。代表的な項目として下記があります。

順序づけパラメータ 意味
date 投稿日
modified 更新日
name スラッグ
rand ランダム
ID 投稿ID(大文字です)
title タイトル
    ‘order’ => ‘DESC’ // 昇順・降順
orderでは、orderbyで指定した項目を昇順(ACB順)で並べるのか、降順(ACB順の反対)で並べるのかを指定できます。

ASC: 昇順
DESC: 降順

ちなみに初期値は、'DESC'になっていますので、デフォルトで良い場合はわざわざ指定せずにまるごと行を削除してしまってもかまいません。

));
global $post;
global $post;は、グローバル宣言と言われるものです。$postは、現在の投稿に関する情報が詰まった変数でWordPress全体で使用されています。

そのため、これを使用する際は前もって宣言が必要になります。テンプレート内で使用する文には宣言は必要がないみたいですが、一応、どこで使用してもトラブルがないよう宣言を入れてあります。

if($cat_posts): foreach($cat_posts as $post): setup_postdata($post); ?>

if(条件): 真の場合の処理;

という形でif文になっていますので、カッコの中の変数$cat_postsの中身が空でない場合は「真」とて扱われます。つまり、次のforeach...が実行されるということです。

foreach($cat_posts as $post):は、foreach文といって、

foreach(配列変数 as 変数):

という仕組みになっています。「配列変数」のところに入っている記事の配列(記事のまとまり)が$postという変数として1つずつ取り出されます。

さらに、setup_postdata($post);のところでは、それぞれの記事をページで表示できるように整えて(セットして)います。

 
<!– ループはじめ –>
<h3><a href=”<?php the_permalink() ?>”><?php the_title(); ?></a></h3>
<p><?php the_category(‘, ‘) ?></p>
<p><?php the_time(‘Y/m/d’) ?></p>
<p><?php the_excerpt(); ?></p>
<!– ループおわり –>
 
<?php endforeach; endif; wp_reset_postdata(); ?>
foreach文の終了、if文の終了とsetup_postdata($post);のところで変更してしまった$postの投稿に関する情報をリセットしています。

タグを指定した記事一覧コード

PHP

<?php
$tag_posts = get_posts(array(
    'post_type' => 'post', // 投稿タイプ
    'tag_id' => 1, // タグIDを番号で指定する場合
    'tag'    => 'スラッグ', // タグをスラッグで指定する場合
    'posts_per_page' => 6, // 表示件数
    'orderby' => 'date', // 表示順の基準
    'order' => 'DESC' // 昇順・降順
));
global $post;
if($tag_posts): foreach($tag_posts as $post): setup_postdata($post); ?>
 
<!-- ループはじめ -->
<h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
<?php the_tags( '<p>', ', ', '</p>' ); ?>
<p><?php the_time('Y/m/d') ?></p>
<p><?php the_excerpt(); ?></p>
<!-- ループおわり -->
 
<?php endforeach; endif; wp_reset_postdata(); ?>

$tag_postsという変数名は自由に変更していただいて結構です。ループの中でちゃんと指定したタグが表示されているかが確認できるようにループのタイトルの下にタグを表示させてあります。

コードの解説

説明を見たいコードの行をクリックしてみてください。

<?php
$tag_posts = get_posts(array(
get_posts()は、投稿の一覧を表示させるときに使うお決まりの関数で、取得したい記事の設定を行います。全体の骨組みは下記のようになります。

PHP

<?php
$tag_posts = get_posts(array(
    // 取得する投稿の設定
));
global $post;
if($tag_posts): foreach($tag_posts as $post): setup_postdata($post);
?>
    // ループで設定した投稿データを出力
<?php endforeach; endif; wp_reset_postdata(); ?>

「取得する投稿の設定」のところで取得したい投稿の設定を行い、それを「ループで設定した投稿データを出力」のところで出力します。上記の骨組みは公式のようなものなので覚えてしまっても良いかもしれません。

ここでは、取得したい記事の設定を変数$tag_postsに代入しています。

    ‘post_type’ => ‘post’, // 投稿タイプ
投稿タイプの指定を行っています。今回は、投稿ページの記事一覧を表示させたいので、'post'と指定しましたが、例えば、カスタム投稿タイプを指定したい場合は、ここにカスタム投稿タイプのスラッグを入れます。
    ‘tag_id’ => 1, // タグIDを番号で指定する場合
タグの指定方法は、IDとスラッグの2通りあります。こちらはタグIDで指定する方法です。

'tag_id' => 1,という形で予め「1」が入っていますので、これを表示させたいタグIDに入れ替えます。私のPCのみかもしれませんが、「テーマの編集」のところで、「全角入力」でカテゴリIDを書き換えると数字が半角でも、テンプレートでエラーになってしまいます。タグIDの編集は必ず「直接入力」で行いましょう。

IDではなく下の行のスラッグで指定したいという場合は、この行はまるごと削除してしまいましょう。

    ‘tag’ => ‘スラッグ’, // タグをスラッグで指定する場合
'tag' => 'スラッグ',という形でスラッグ名からタグを指定しています。スラッグで指定する場合は、上の行のタグIDの指定は削除してください。
    ‘posts_per_page’ => 6, // 表示件数
'posts_per_page' => 6,は記事の表示件数の指定です。数字を指定する場合は、値のところにクオーテーションマーク「’」はつけないでください。
    ‘orderby’ => ‘date’, // 表示順の基準
データをある特定の規則に従って並べ替えることを「ソートする」というのですが、orderbyでは、記事をどんな項目に沿ってソートさせるかを決めます。代表的な項目として下記があります。

順序づけパラメータ 意味
date 投稿日
modified 更新日
name スラッグ
rand ランダム
ID 投稿ID(大文字です)
title タイトル
    ‘order’ => ‘DESC’ // 昇順・降順
orderでは、orderbyで指定した項目を昇順(ACB順)で並べるのか、降順(ACB順の反対)で並べるのかを指定できます。

ASC: 昇順
DESC: 降順

ちなみに初期値は、'DESC'になっていますので、デフォルトで良い場合はわざわざ指定せずにまるごと行を削除してしまってもかまいません。

));
global $post;
global $post;は、グローバル宣言と言われるものです。$postは、現在の投稿に関する情報が詰まった変数でWordPress全体で使用されています。

そのため、これを使用する際は前もって宣言が必要になります。テンプレート内で使用する文には宣言は必要がないみたいですが、一応、どこで使用してもトラブルがないよう宣言を入れてあります。

if($tag_posts): foreach($tag_posts as $post): setup_postdata($post); ?>

if(条件): 真の場合の処理;

という形でif文になっていますので、カッコの中の変数$tag_postsの中身が空でない場合は「真」とて扱われます。つまり、次のforeach...が実行されるということです。

foreach($tag_posts as $post):は、foreach文といって、

foreach(配列変数 as 変数):

という仕組みになっています。「配列変数」のところに入っている記事の配列(記事のまとまり)が$postという変数として1つずつ取り出されます。

さらに、setup_postdata($post);のところでは、それぞれの記事をページで表示できるように整えて(セットして)います。

 
<!– ループはじめ –>
<h3><a href=”<?php the_permalink() ?>”><?php the_title(); ?></a></h3>
<?php the_tags( ‘<p>’, ‘, ‘, ‘</p>’ ); ?>
<p><?php the_time(‘Y/m/d’) ?></p>
<p><?php the_excerpt(); ?></p>
<!– ループおわり –>
 
<?php endforeach; endif; wp_reset_postdata(); ?>
foreach文の終了、if文の終了とsetup_postdata($post);のところで変更してしまった$postの投稿に関する情報をリセットしています。

カテゴリとタグを組み合わせて指定した記事一覧コード

下記のようにカテゴリを指定する方法と、タグを指定する方法を組み合わせれば、カテゴリとタグを同時に指定した記事の一覧を作ることも可能です。

PHP

<?php
$my_posts = get_posts(array(
    'post_type' => 'post', // 投稿タイプ
    'category' => 1, // カテゴリIDを番号で指定する場合
    'category_name' => 'スラッグ', // カテゴリをスラッグで指定する場合
    'tag_id' => 1, // タグIDを番号で指定する場合
    'tag'    => 'スラッグ', // タグをスラッグで指定する場合
    'posts_per_page' => 6, // 表示件数
    'orderby' => 'date', // 表示順の基準
    'order' => 'DESC' // 昇順・降順
));
global $post;
if($my_posts): foreach($my_posts as $post): setup_postdata($post); ?>
 
<!-- ループはじめ -->
<h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
<p><?php the_time('Y/m/d') ?></p>
<p><?php the_excerpt(); ?></p>
<!-- ループおわり -->
 
<?php endforeach; endif; wp_reset_postdata(); ?>

カテゴリやタグのいろんな指定方法

$my_posts = get_posts(array(...));の間には、下記のようにいろんな条件でタグやカテゴリを指定することができます。

カテゴリのパラメータ
‘category’ => 1, カテゴリIDが1である
‘category_name’ => ‘a’, カテゴリのスラッグがaである
‘category__in’ => array( 1, 2 ), カテゴリIDが1または2である
‘category__not_in’ => array( 1, 2 ), カテゴリIDが1または2でない
‘category__and’ => array( 1, 2 ), カテゴリIDが1かつ2である
タグのパラメータ
‘tag_id’ => 1, タグIDが1である
‘tag’ => ”, タグのスラッグがaである
‘tag__in’ => array( 1, 2 ), タグIDが1または2である
‘tag__not_in’ => array( 1, 2 ), タグIDが1または2でない
‘tag__and’ => array( 1, 2 ), タグIDが1かつ2である
‘tag_slug__in’ => array( ‘a’, ‘b’ ), タグのスラッグがaまたはbである
‘tag_slug__and’ => array( ‘a’, ‘b’ ), タグのスラッグがaかつbである

最後に、いろいろ編集するときの注意点があります。get_postsの中身をいじるときは、各行の最後にあるカンマ「,」に気を付けてください。最後の行以外はカンマが入っていないとエラーになります。ここだけは気をつけて編集してくださいね。

以上が、指定したカテゴリやタグの記事一覧を表示させる方法でした。

最近の記事

  1. CSS

    レスポンシブウェブデザインの基本|メディアクリエリの設定
  2. CSS

    要素の配置が簡単に決まるFlexboxの使い方
  3. CSS

    CSS|中央寄せが効かないときは・・・
  4. WordPress

    WordPressの立ち上げからサイト構築までの初期手順
  5. CSS

    擬似クラス「:first-child」「:last-child」はどうして効かな…
PAGE TOP