[WordPress]任意の投稿記事内に関連記事を表示する
posted : 2018.10.08
こんにちは、ma-ya’s CREATE［まーやずくりえいと］です。
Vue.jsの入門連載を（ほぼ自分の為に）始めたんですが、その記事内に過去連載のリストを表示しようとして少しハマりかけました。
特定の記事だけに特定の関連記事を表示するケースは意外とあるんじゃないかと思います。
プラグインを使えば簡単なんだろうけど、それもちょっとつまらないのでググりつつ実装してみました。
投稿記事内にショートコードで関連記事用PHPテンプレートを読み込む
大まかに流れを区切ると以下のような感じ。
- functions.php内でPHPファイルを読み込む為のショートコードを設定
- 関連記事を表示するためのPHPファイルを作る
- 投稿記事でショートコードを使って②を読み込む
投稿記事のテキスト編集モードに直接書けばいいんでないの？と思うかもしれませんが、残念ながらそれは不可なのです。
なので今回はショートコードで関連記事用のPHPを呼び出す方法を取ります。
弄る＆作成するファイル
弄るファイル
- functions.php
新規作成するファイル
- related.php（任意の名前、ここではrelatedにします）
functions.php内で全て完結しても良いかもしれないんですが、ここにあまりごちゃごちゃ書くのが好みではないので外部ファイル化します。
この方法のメリット
ショートコード自体はサーバーにアップした任意のPHPファイルを投稿内で読み込む仕様です。
[shortcode file='filename']
先に言ってしまうと、上記「filename」部分でPHPファイル名（拡張子不要）を指定出来るので、わりと汎用性のあるショートコードだと思います。
その代わりPHPテンプレートは都度作成する必要があるので、専用ディレクトリ内で管理するのが良いかもしれません。
サンプルコード（実例）
functions.php
related.php（任意の名前のファイル）
ショートコード
[phpinc file='related']
解説
functions.php
functions.phpで気を付けるのは9行目。
include(get_stylesheet_directory() . "/php_tpl/$file.php");
今回の場合は専用ディレクトリ（php_tpl）を作ったので上記パスになりますが、テーマディレクトリ直下に置くのであれば、
include(get_stylesheet_directory() . "/$file.php");
とします。ちなみに$file.php部分は変更しなくてOK。
$fileには後ほどショートコード内に指定したファイル名が代入されます。
ちなみにテーマディレクトリまでのパスはget_stylesheet_directory()が無難。親テーマでも子テーマでも使えます。
その他は基本的にコピペで実装可能ですが、お好みで以下の黄色太字部分は変えても良いかもしれません。
add_shortcode('phpinc','include_php');
ここはショートコードに記載するショートコード名になります。まあ呪文みたいなものですね。
何ならunkoとかでもいいです。
related.php（任意の名前のファイル）
ここは表示したい内容で自由に書いてください。ファイル名も任意でOK。
今回は投稿タイトルで絞り込んだ記事をリストでシンプルに表示しています。
ざっくりいうと2～6行目で絞り込み・並び順など指定して絞り込んだ記事データを7行目で変数に格納、その後のコードで記事データをリスト形式で書き出しています。
このファイル編集時にややハマりそうに汗
今回の記事の主旨とは異なるんで、気になる方は↓の記事を。
ショートコード
ここはもうそのまんまですが、function.phpで指定した「phpinc」という呪文とファイル名（拡張子不要）を指定します。
そうするとfunction.phpで指定した場所にあるPHPファイルの中から、指定した名前のPHPファイルを探し出し、記事に挿入してくれます。
関連記事取得パターンが多い場合はプラグインを使う or 別の方法が良いかも
がっつりアフィリエイトしてるサイトなんかは関連記事の出し方にも色々とこだわりがあるかもしれません。
今回の方法だとパターン毎にテンプレートファイルが必要になるのでちょっと面倒かも。
おとなしくプラグイン使う方が良いかもしれませんね汗。
どなたかの参考になればこれ幸い。
