CrystalSnowman.com

あなたの時間節約につながる情報を提供します

WordPress カスタムフィールドを使って記事ごとに関連記事を表示する方法

related posts image new

記事ごとに関連記事を表示してみました。カスタムフィールドに関連する記事のIDを入力して表示します。クリックしたくなるようなリンクを目指しました。

カスタムフィールドについて

今までもカスタムフィールドを使って関連記事を表示していました。
こんな感じです。

related posts image

ちょっと寂しいですよね。

ちなみにこの場合の方法は以下です。

今までの方法

WordPressの記事投稿画面にカスタムフィールドを追加します。

「表示オプション」をクリックして、表示する項目として「カスタムフィールド」にチェックします。

custom field link setting 1

記事投稿画面の下部にカスタムフィールドの入力欄が表示されます。

custom field link setting 2

「新規追加」のリンクをクリックし、カスタムフィールド名を設定し、表示したい値を入力します。「c-f-link」という名前にしました。

値には関連する記事のリンクをlist itemとして入力していました。

追加したカスタムフィールドを記事内に表示するためsingle.phpに以下を追記します。

5行目の「post_custom( ‘c-f-link’ )」で「c-f-link」という名前のカスタムフィールドを表示させます。

ただこの方法だと毎回関連記事のIDとタイトルを入力しなくてはなりません。もし記事のタイトルが変わったらカスタムフィールドの値も変える必要があります。

毎回あまりにも大変なので表示したいIDだけを指定して関連記事を表示するようにしました。

方法

まず新しいカスタムフィールド名を登録します。

投稿画面の設定

custom field link setting 3

「related_post_id」という名前にしました。次に値に表示したい記事IDをカンマ区切りで入力します。

single.phpの修正

次にsingle.phpを修正します。クエリオブジェクトを使って関連記事を表示します。

2行目の「post_custom()」で「related_post_id」というカスタムフィールド名があったらという条件を加えています。

3行目で「$rel_post_id」という変数を宣言しました。カンマ区切りで定義されたIDを配列にするためです。「explode()」関数で配列にします。
「get_post_meta()」で記事のカスタムフィールドの値を取得します。値は単一のカスタムフィールド欄を使っているため3番目のパラメータは「true」にします。

4行目からはクエリオブジェクト用の変数を定義します。
「post__not_in」で自分自身の記事が対象にならないようにします。
「post__in」で表示する記事IDを指定します。先程定義した「$rel_post_id」変数を指定します。
「orderby」には「post__in」を指定し、IDを記述した順番で表示されるようにします。

9行目で「$my_query」という名でクエリオブジェクトを作成します。

15行目でループを使って記事を表示します。

16行目で記事の中身を表示しますが、テンプレートにし外出しにしました。メンテナンスを考えてです。

19行目で記事をリセットします。

テンプレートの作成

「single.php」の16行目で指定したテンプレートを作成します。
「related-posts.php」という名のファイルをテーマフォルダに作成します。

記事へのリンクとサムネール、記事タイトル、投稿日、カテゴリを表示しました。

13行目で複数のカテゴリー名をカンマ区切りで表示するようにしました。カテゴリーのリンクは不要なのでこのようにしています。
15行目でカテゴリー名の最後につくカンマを削除して表示するようにしました。

style.cssの修正

cssを修正してデザインを整えます。

完成

このようになります。

related posts image new

アイキャッチが表示され、情報量も増えました。前よりクリックしてもらえるでしょうか。

まとめ

関連記事をクエリオブジェクトとカスタムフィールドで表示しました。
最新記事やカテゴリーが一致する記事を自動で表示する方法はたくさんあったのですが、自分が好きな記事を指定する方法はありませんでした。
そのためカスタムフィールドで記事IDを指定する方法を考えました。
ちょっと複雑ですがあなたもチャレンジしてみてはいかがでしょうか。


Top