Advanced Custom Fields を使って記事下に関連記事を表示する方法

関連記事にリンク

ブログ記事を読んでくれた方に「もう 1 ページ読んでほしい」ときは、その記事と関連する記事へのリンクを置くのが最も効果的です。

WordPress ではテーマやプラグインの機能で関連記事を自動表示できますが、必ずしも適切な記事が表示されるとはかぎりません。

自分で選んだ記事にリンクするのがベスト。でも、手動でリンクするのはかなり面倒。

そこで、プラグイン「Advanced Custom Fields」を使って、関連記事を投稿画面で検索して選択・表示する方法をご紹介します。

カスタムフィールドを使うメリット

Advanced Custom Fields は、カスタムフィールドを管理するプラグインです。

カスタムフィールドと聞くと難しそうに感じるかもしれませんが、「ページ内に表示する枠を追加できる」と考えてください。

ページに枠を追加する

本文の最後に関連記事のリンクを掲載する場合、以下のようなデメリットがあります。

  • 過去記事を探してタイトルや URL をコピペする手間がある
  • 任意の場所に表示できない(あいだに広告などを挿めない)

対して、カスタムフィールドを使うと以下のメリットがあります。

  • 投稿画面から検索してクリックするだけで OK
  • 広告やシェアボタンの下など、任意の場所に表示できる

「投稿画面に関連記事検索ボックスを設置し、タイトルを選択するだけで関連記事が表示される」という形になると便利ですよね。

関連記事検索ボックス

早速カスタマイズ方法を見ていきましょう。

関連記事表示カスタマイズの手順

このカスタマイズは、以下の手順で行います。

  1. Advanced Custom Fields インストール
  2. カスタムフィールド作成
  3. テンプレートファイルにコード追加(+ CSS でデザイン調整)

ではさっそく設定方法を解説していきます。

Advanced Custom Fields インストール

Advanced Custom Fields は、他のプラグインと同じく管理画面から検索・インストールできます。

Advanced Custom Fields インストール

有効化後、サイドバーに「カスタムフィールド」という項目が出ていれば OK です。

Advanced Custom Fields 有効化後

関連記事専用カスタムフィールドの作り方

インストール・有効化が完了したら、関連記事用のカスタムフィールドを作成していきます。

サイドバーの「カスタムフィールド」をクリックして、新規追加を選択。

カスタムフィールド新規作成

タイトルを「関連記事」などわかりやすいものにして、「フィールドを追加」をクリック。

フィールドを追加

フィールド作成フォームが出てくるので、以下のように入力/選択します。

フィールドラベル関連記事リンク
フィールド名kanrenkiji
フィールドタイプ関連
カスタムフィールドの内容

ラベルと名前は任意のものでかまいません。フィールドタイプを「関連」にするのだけ忘れないでください。

その下の項目は、2 箇所だけ変更します。

投稿タイプpost
Elements「投稿タイプ」のチェックを外す
ACF その他の設定

あとはデフォルトのままでかまいません。オプションの「Style」は「WP metabox」のほうがきれいかなと思います(機能に影響はありません)。

ACFオプション

最後に「公開」ボタンをクリックして完成です。

間違っていてもあとで編集できます。

テーマテンプレートに追加するコード

今回のカスタマイズでは記事タイトルをリストで並べるだけなので、コードはシンプルにしました。

get_field に先ほど決めた「フィールド名」を入れてください。

<?php $kanren = get_field('kanrenkiji'); ?>
<?php if($kanren): ?>
	<div class="kanrenkiji-box">
		<h2>こちらの記事もどうぞ!</h2>

		<ul>
			<?php foreach((array)$kanren as $value):?>
			<li><a href="<?php echo get_the_permalink($value->ID); ?>"><?php echo $value->post_title; ?></a></li>
			<?php endforeach; ?>
		</ul>
	</div>

<?php endif; ?>

作成したカスタムフィールドを使ったときだけ、こんな感じで関連記事が出力されます。

<div class="kanrenkiji-box">
	<h2>こちらの記事もどうぞ!</h2>

	<ul>
		<li><a href="記事URL">記事タイトル</a></li>
		<li><a href="記事URL">記事タイトル</a></li>
		<li><a href="記事URL">記事タイトル</a></li>
	</ul>
</div>

コードを挿入する箇所はテーマによって違いますが、投稿は single.php になっていることが多いのでそこから探してみてください。

デザインは「CSSで作るおしゃれなボックス(囲み枠)のデザインサンプル13パターン」と組み合わせるのも良いですね。

以上で設定完了です。

関連記事挿入方法

設定に問題なければ、投稿画面の下にこのようなボックスが出ていると思います。

関連記事用ボックス

あとは、表示させたい関連記事を適当なフレーズで検索し、出てきた記事をポチポチ選んでいくだけ。

そのまま記事を公開すれば、記事下に関連記事が表示されます。

関連記事サンプル

関連記事以外にも、とくに読んでほしい記事を表示するとよいかもしれませんね。

ただ、まったく関係のない記事はリンクがあってもクリックされないので、全記事から特定の記事にリンクをはるような使い方はおすすめしません。

まとめ

今まで手動で URL をコピペして関連記事を表示していたなら、Advanced Custom Fields を使えばかなり作業が楽になると思います。

検索すると「あ、こんな記事も書いてたな~」なんていうのが出てくるかもしれませんよ。

このプラグインは他にもいろいろ使えますので、あれこれ機能を追加したいときにかなり重宝します。ぜひ使い倒してください!

それでは、また。

Author

Naifix 編集部
Web コンサルティング業務を中心に、サイト制作・コンテンツ販売・メディア運営代行業務を行っております。当サイト(Naifix)では、おもにブログ初心者向けのノウハウを無料で配信しています。