【WordPress】タイトルにマッチしたタグの記事一覧を表示する方法と注意点

こんにちはNNCの中里です。
今回は備忘録に近い記事です。

WordPressで投稿ページのタイトルにマッチしたタグを取得し、そのタグに関する記事一覧を表示するための記述について書き残したいと思います。

具体的に以下のようなシチュエーションで使用するものになります。

  • ・いくつかの商品を扱うサイトで各商品のページをそれぞれ投稿記事として作成
  • ・商品ページのタイトルは商品名とする
  • ・商品ページとは別にニュース(またはブログページ)を同じサイト内で作成
  • ・商品ページの下部にその商品名にマッチしたタグを持ったニュース(記事)一覧を表示

完成イメージ

上の図のように「SAMPLE A」という商品のページ最下部に、SAMPLE Aというタグがついたニュースの一覧が表示されるというイメージですね。

ページ上部の赤いエリアは投稿(タイトル・サムネイル・本文)で呼び出します。
ページ下部の緑のエリアがタグを使って呼び出す部分となります。

実際のコード

まずは全体のコードとなります。
single.phpなどのテンプレートファイルにコピペしていただければ動作します。
※記事一覧を表示するにはタグの設定をした記事の準備も必要です

<h2>関連ニュース</h2>

 <?php

 $title = get_the_title();

 $replaced = str_replace(" ", "_", $title); //タイトル内の空白をアンダースコアに置換

 $tag_posts = get_posts(

   array(

     'post_type' => 'post', // 投稿タイプ

     'tag' => $replaced, // タイトルの内容をタグに指定

     'posts_per_page' => 10, // 表示件数

     'orderby' => 'date', // 表示順の基準

     'order' => 'DESC' // 昇順・降順

   )

 );

 global $post;

 if ($tag_posts):

   foreach ($tag_posts as $post):

     setup_postdata($post); ?>

     <ul>

       <li><a href="<?php the_permalink() ?>"><?php the_time('Y/m/d') ?> <?php the_title(); ?></a>

       </li>

     </ul>

   <?php endforeach; endif;

 wp_reset_postdata(); ?>

編集ポイント

$title = get_the_title();

get_the_title関数を使い、タグに指定するためのタイトルを取得して変数($title)に代入します。

 $replaced = str_replace(" ", "_", $title); //タイトル内の空白をアンダースコアに置換

WordPressでタイトルの内容をタグとして利用する際の注意点

ここが今回の編集で最も重要なポイントになります。

投稿のタイトルに空白(スペース)が入っていると、タグとして正確に認識をされず記事の取得を行うことができません。
そのためタイトルに含まれている空白をアンダースコアに置き換え、改めて変数($replaced)に代入をします

テキストの置き換えにはstr_replaceを用います。

$tag_posts = get_posts(

   array(

     'post_type' => 'post', // 投稿タイプ

     'tag' => $replaced, // タイトルの内容をタグに指定

     'posts_per_page' => 10, // 表示件数

     'orderby' => 'date', // 表示順の基準

     'order' => 'DESC' // 昇順・降順

   )

 );

get_posts関数を使いタイトルに関連した記事を取得します。
投稿タイプ・表示件数・表示順・昇順・降順などは目的に応じて変更してください。

global $post;

 if ($tag_posts):

   foreach ($tag_posts as $post):

     setup_postdata($post); ?>

     <ul>

       <li><a href="<?php the_permalink() ?>"><?php the_time('Y/m/d') ?> <?php the_title(); ?></a>

       </li>

     </ul>

   <?php endforeach; endif;

 wp_reset_postdata(); ?>

取得した記事は配列となるため、foreachを使ってリストとして個別に配置します。
リンクの設置(the_permalink)や日付表示(the_time)などは目的に応じて変更してください。

以上となります。

今回はあまりよく見るシチュエーションではなかったかもしれませんが、案外実装する際に注意が必要なので書き残しておきました。

もし同じような状況で悩んでいる方は是非参考にしてみてください!

こちらの記事はいかがでしたか?
+1
0
+1
0
+1
0
+1
0

【PR】Tech Tech Zoo

【PR】オリジナルキャラクター「てくてくず」を公開しました!

作品は、随時X(旧Twitter)で公開していきます!
ぜひ「てくてくず」の作品を応援していただけたら嬉しいです。

X(旧Twitter)アカウントはこちら:
https://twitter.com/tech_tech_zoo

RECENT ENTRIES

  • 【jQuery】特定範囲内で表示・スクロール追従するメニュー / サイドバー【レスポンシブ対応】

    VIEW MORE
  • 【WordPress】タイトルにマッチしたタグの記事一覧を表示する方法と注意点

    VIEW MORE
  • コンテンツ内(要素内)でのスクロールを作成・制御する方法【overflowプロパティ】

    VIEW MORE

CONTACT

contact