WordPress

表示中の投稿ページのカテゴリやタグの記事一覧を自動表示させる方法

ここでは、個別投稿ページ(single.php)で現在、表示させている記事のカテゴリやタグの記事一覧を自動で表示させるサブループの作り方について見ていきます。

コンテンツ

表示中の投稿のカテゴリ記事を一覧表示させるコード

それでは早速コードを見てみましょう。

PHP

<?php
global $post;
$post_id = $post->ID;
$cat = get_the_category($post_id);
$cat_id = $cat[0]->cat_ID;
 
$cat_posts = get_posts(array(
    'post_type' => 'post', // 投稿タイプ
    'category' => $cat_id, // カテゴリID
    'posts_per_page' => 6, // 表示件数
    'orderby' => 'date', // 表示順の基準
    'order' => 'DESC', // 昇順・降順
    'exclude' => $post_id // 表示中の投稿を除外
));
$count = count($cat_posts);

if($count>=1): 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; wp_reset_postdata(); else: ?>
  
<p>記事がありません。</p>
              
<?php endif ?>

上記のコードは下記のような手順になっています。

  1. 現在、表示中の投稿に関するデータを取得する
  2. 投稿データの中から投稿IDを取得する
  3. 投稿IDを使って投稿に紐付けられたカテゴリデータを取得する
  4. カテゴリデータの中からカテゴリIDを取得する
  5. カテゴリIDに登録されている投稿を取得する
  6. ループで取得した投稿を出力する

コードの解説

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

<?php
global $post;
$postというのは、WordPressに最初から入っている変数のひとつで、表示中の投稿に関するいろんな情報(配列)が入っているグローバル変数です。$postをこの後、使用するのでそれに先立ち「グローバル宣言」を行います。
$post_id = $post->ID;
$post->IDは、グローバル変数$postの中から現在の投稿のIDを取得します。これを$post_idという変数に代入します。
$cat = get_the_category($post_id);
get_the_category()は、カッコの中に投稿IDを入れると、その投稿IDが登録されているカテゴリの情報(配列)が取得できます。ここでは、先ほど投稿IDを代入した$post_idを入れてカテゴリ情報を取得しています。そのカテゴリの情報を$catという変数に格納します。

get_the_category()に関しては、下記で詳しく扱っていますので、この先の説明も含めて詳しく理解したい方は一度、読んでみてください。

$cat_id = $cat[0]->cat_ID;
上の行にあるget_the_category()で取得したカテゴリの配列のうちカテゴリIDをだけを取り出して、変数$cat_idに代入します。$cat[0]->cat_IDの部分がカテゴリIDを取得している部分です。

[0]は複数のカテゴリが登録されている場合に、配列の最初のカテゴリという意味になります。つまり、ここでは複数のカテゴリが登録されている場合、カテゴリ名が「あいうえお順」で上にあるカテゴリのみしか表示されませんのでご注意ください。もしも、これだと都合が悪いという方は自力でカスタマイズしてくださいm(_ _)m

 
$cat_posts = get_posts(array(
get_posts()は、取得したい投稿の設定を行うときに使うお決まりの関数です。下記のような公式だと思っていただければいいと思います。

PHP

変数 = get_posts(array(
    // 投稿の設定
));
if(条件): foreach(変数 as $post): setup_postdata($post);
    // ループ
endforeach; wp_reset_postdata(); else:
    // 投稿がない場合の表示
endif

このようにループの手前で投稿の設定を行い、それに従った投稿をループで出力させます。投稿を指定するには、get_posts()のカッコの中を配列にして複数の指定を行います。

    ‘post_type’ => ‘post’, // 投稿タイプ
'post_type' => 'post'では投稿タイプを指定します。'post'という部分が「投稿」という意味です。ここにカスタム投稿タイプのスラッグを入れて指定することもできますが、WordPressに最初から入っている「カテゴリ」と紐付いていないとここでは表示できません。
    ‘category’ => $cat_id, // カテゴリID
'category' => $cat_idでは、カテゴリIDの指定を行います。先ほど取得した現在のカテゴリIDが格納された変数$cat_idがありますので、それをここで指定します。
    ‘posts_per_page’ => 6, // 表示件数
'posts_per_page' => 6では投稿件数の指定を行います。ここでは、6記事としてありますがお好きな数に変更して構いません。投稿数の編集をWordPressの「テーマの編集」内で行う場合は、必ずキーボードを直接入力にしてから数字を打ち込んでください。ひらがな入力で半角の数字を入れてしまうと、手前のスペースがおかしくなってしまいエラーの原因になります(私のPCだけかもしれませんが)。
    ‘orderby’ => ‘date’, // 表示順の基準
'orderby' => 'date'は、投稿を表示させる順番を決める基準を何にするかを決めることができます。'date'は投稿日を基準にするパラメータですが、他にも代表的なものとして下記のパラメータがあります。

順序づけパラメータ 意味
date 投稿日
modified 更新日
name スラッグ
rand ランダム
ID 投稿ID(大文字です)
title タイトル
    ‘order’ => ‘DESC’, // 昇順・降順
'order' => 'DESC'の部分は投稿を表示させる順番(昇順・降順)を決めるところです。現在は、'DESC'(降順)が指定されているので、日付が新しい順に投稿が表示されますが、反対にしたい場合は'ASC'(昇順)を指定します。
    ‘exclude’ => $post_id // 表示中の投稿を除外
カテゴリに登録された投稿をそのまま表示させてしまうと、表示中の投稿まで表示されてしまうので、'exclude' => $post_idで現在の投稿IDを除外します。
));
$count = count($cat_posts);
条件に合った投稿数を$countに代入します。投稿数を取得するには、配列の数を返すcount()の引数に投稿の配列$cat_postsを入れます。
 
if($count>=1): foreach($cat_posts as $post): setup_postdata($post); ?>
if(条件): foreach(変数 as $post): setup_postdata($post);の部分は、「もし条件を満たしている場合は、グローバル変数$postへ投稿として記事を1つずつセットします」みたいな意味です。

ここでは、「条件」として該当する投稿が存在すること、つまり投稿数が1つ以上あることを条件にするので、投稿数が格納された変数$count($count>=1)という形でif文の条件に入れます。

foreach文は、

foreach(配列変数 as 変数):
  // 処理する内容
endforeach

という形で「配列変数」に格納されている投稿のまとまりを一つずつ「変数(この場合$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; wp_reset_postdata(); else: ?>
endforeachでforeach文の終了、wp_reset_postdata()setup_postdata($post);のところで変更した$postの投稿に関する情報をリセットしています。

elseの下には、if($count>=1):で条件に該当しなかった(投稿が存在しなかった)場合の内容が入ります。

 
<p>記事がありません。</p>
 
<?php endif ?>
endifは、if文の終了です。

表示中の投稿のタグが登録された記事を一覧表示させるコード

次は、表示中の投稿と同じタグの記事一覧を表示させるサブループを見てみましょう。

PHP

<?php
global $post;
$post_id = $post->ID;
$tag = get_the_tags($post_id);
$tag_id = $tag[0]->term_id;
        
$tag_posts = get_posts(array(
    'post_type' => 'post', //投稿タイプ
    'tag_id' => $tag_id, // タグIDで指定する場合
    'posts_per_page' => 6, // 表示件数
    'orderby' => 'date', // 表示させる基準
    'order' => 'DESC', // 文字列の順番(昇順・降順)
    'exclude' => $post_id // 表示中の投稿を除外
));
$count = count($tag_posts);
			
if($count>=1): 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; wp_reset_postdata(); else: ?>
   
<p>記事がありません。</p>
               
<?php endif ?>

ここでのタグの記事一覧を表示させる手順は下記のようになっています。

  1. 現在、表示中の投稿に関するデータを取得する
  2. 投稿データの中から投稿IDを取得する
  3. 投稿IDを使って投稿に紐付けられたタグデータを取得する
  4. タグデータの中からタグIDを取得する
  5. タグIDに登録されている投稿を取得する
  6. ループで取得した投稿を出力する

コード解説

説明を見たいコードの行をクリックすると説明が表示されます。

<?php
global $post;
$postというのは、WordPressに最初から入っている変数のひとつで、表示中の投稿に関するいろんな情報(配列)が入っているグローバル変数です。$postをこの後、使用するのでそれに先立ち「グローバル宣言」を行います。
$post_id = $post->ID;
$post->IDは、グローバル変数$postの中から現在の投稿のIDを取得します。これを$post_idという変数に代入します。
$tag = get_the_tags($post_id);
get_the_tags()は、カッコの中で投稿IDを指定すると、その投稿に紐付けられたタグの情報を配列で取得することができます。ここでは、投稿IDを格納した変数$post_idを入れて現在の投稿に紐付いたタグ情報を取得し、その配列を変数$tagに代入しています。
$tag_id = $tag[0]->term_id;
$tag[0]->term_id;は、タグに関する配列の中から、タグIDを取得するための書き方です。

[0]というのは変数の最初のキーという意味になります。1つの投稿に複数のタグが登録されている場合はタグ名が「あいうえお順」で上に来るタグのみが対象になります。登録されたタグをすべて記事一覧にしたい場合は、自力でカスタマイズをお願いします。

取得したタグIDは$tag_idに格納されます。

 
$tag_posts = get_posts(array(
get_posts()は、取得したい投稿の設定を行うときに使うお決まりの関数です。下記のような公式だと思っていただければいいと思います。

PHP

変数 = get_posts(array(
    // 投稿の設定
));
if(条件): foreach(変数 as $post): setup_postdata($post);
    // ループ
endforeach; wp_reset_postdata(); else:
    // 投稿がない場合の表示
endif

このようにループの手前で投稿の設定を行い、それに従った投稿をループで出力させます。投稿を指定するには、get_posts()のカッコの中を配列にして複数の指定を行います。

    ‘post_type’ => ‘post’, //投稿タイプ
'post_type' => 'post'では投稿タイプを指定します。'post'という部分が「投稿」という意味です。ここにカスタム投稿タイプのスラッグを入れて指定することもできますが、WordPressに最初から入っている「タグ」と紐付いていないとここでは表示できません。
    ‘tag_id’ => $tag_id, // タグIDで指定する場合
'tag_id' => $tag_idで表示させたいタグIDを指定します。ここでは、タグIDを格納した変数$tag_idを指定します。
    ‘posts_per_page’ => 6, // 表示件数
'posts_per_page' => 6では投稿件数の指定を行います。ここでは、6記事としてありますがお好きな数に変更して構いません。
    ‘orderby’ => ‘date’, // 表示させる基準
'orderby' => 'date'は、投稿を表示させる順番を決める基準を何にするかを決めることができます。'date'は投稿日を基準にするパラメータですが、他にも代表的なものとして下記のパラメータがあります。

順序づけパラメータ 意味
date 投稿日
modified 更新日
name スラッグ
rand ランダム
ID 投稿ID(大文字です)
title タイトル
    ‘order’ => ‘DESC’, // 文字列の順番(昇順・降順)
'order' => 'DESC'の部分は投稿を表示させる順番(昇順・降順)を決めるところです。現在は、'DESC'(降順)が指定されているので、日付が新しい順に投稿が表示されますが、逆にしたい場合は'ASC'(昇順)を指定します。
    ‘exclude’ => $post_id // 表示中の投稿を除外
タグに登録された投稿をそのまま表示させてしまうと、表示中の投稿まで表示されてしまうので、'exclude' => $post_idで現在の投稿IDを除外します。
));
$count = count($tag_posts);
条件に合った投稿数を$countに代入します。投稿数を取得するには、配列の数を返すcount()の引数に投稿の配列$tag_postsを入れます。
 
if($count>=1): foreach($tag_posts as $post): setup_postdata($post);?>
if(条件): foreach(変数 as $post): setup_postdata($post);の部分は、「もし条件を満たしている場合は、グローバル変数$postへ投稿として記事を1つずつセットします」みたいな意味です。

ここでは、「条件」として該当する投稿が存在すること、つまり投稿数が1つ以上あることを条件にするので、投稿数が格納された変数$count($count>=1)という形でif文の条件に入れます。

foreach文は、

foreach(配列変数 as 変数):
  // 処理する内容
endforeach

という形で「配列変数」に格納されている投稿のまとまりを一つずつ「変数(この場合$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; wp_reset_postdata(); else: ?>
endforeachでforeach文の終了、wp_reset_postdata()setup_postdata($post);のところで変更した$postの投稿に関する情報をリセットしています。

elseの下には、if($count>=1):で条件に該当しなかった(投稿が存在しなかった)場合の内容が入ります。

 
<p>記事がありません。</p>
 
<?php endif ?>
endifは、if文の終了です。

以上が、表示中の投稿ページのカテゴリやタグの記事一覧を表示させる方法でした。

最近の記事

  1. CSS

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

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

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

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

    CSS|中央寄せが効かないときは・・・
PAGE TOP