記事下の関連記事はAdvanced Custom Fieldsで検索・表示するのがおすすめ！
ブログに訪れてくれた方に「もう 1 ページ読んでほしい」ときは、本文の下に関連記事を表示するのが最も有効です。
WordPress ではテーマやプラグインで関連記事を自動表示することもできますが、自分で選んだ記事をオススメするのが一番なのは言うまでもありません。でも、手動でリンクをはるのはけっこう面倒ですよね・・・
そこで本日は、Advanced Custom Fields というプラグインを使って、関連記事を投稿画面で検索して選択・表示する方法をご紹介します。
目次
カスタムフィールドを使うメリット
Advanced Custom Fields は、カスタムフィールドを管理するプラグインです。
難しそうに聞こえるかもしれませんが、「ページ内に表示する枠を追加できる」と考えてください。
関連記事へのリンクは本文の最後に入れても良いのですが、次のようなデメリットがあります。
- 過去記事を探してタイトルや URL をコピペする手間がある
- 任意の場所に表示できない（あいだに広告などを挿めない）
これが、Advanced Custom Fields を使うとこうなります。
- 投稿画面から検索してクリックするだけで OK
- 広告やシェアボタンの下など、任意の場所に表示できる
投稿画面にはこのような検索ボックスが出てきて、
タイトルを選択するだけで関連記事が表示されます。
記事を探してタイトルや URL をコピペして・・・という作業が一切不要になるのですごく楽ちん♪
関連記事表示カスタマイズの手順
このカスタマイズは、以下の手順で行います。
- Advanced Custom Fields インストール
- カスタムフィールド作成
- テーマテンプレートにコード追加（＋ CSS でデザイン調整）
ではさっそく設定方法を解説していきます。
Advanced Custom Fields インストール
Advanced Custom Fields は、他のプラグインと同じく管理画面から検索・インストールできます。
有効化後、サイドバーに「カスタムフィールド」という項目が出ていれば OK です。
関連記事専用カスタムフィールドの作り方
インストール・有効化が完了したら、関連記事用のカスタムフィールドを作成していきます。
サイドバーの「カスタムフィールド」をクリックして、新規追加を選択。
タイトルを「関連記事」などわかりやすいものにして、「フィールドを追加」をクリック。
フィールド作成フォームが出てくるので、以下のように入力／選択します。
| フィールドラベル | 関連記事リンク |
|---|---|
| フィールド名 | kanrenkiji |
| フィールドタイプ | 関連 |
ラベルと名前は任意のものでかまいません。フィールドタイプを「関連」にするのだけ忘れないでください。
その下の項目は、2 箇所だけ変更します。
| 投稿タイプ | post |
|---|---|
| Elements | 「投稿タイプ」のチェックを外す |
あとはデフォルトのままでかまいませんが、オプションの「Style」は「WP metabox」のほうがきれいかなと思います（機能に影響はありません）。
最後に「公開」ボタンをクリックして完成です。
間違っていてもあとで編集できます。
テーマテンプレートに追加するコード
今回のカスタマイズでは記事タイトルをリストで並べるだけなので、コードはシンプルにしました。
get_field に先ほど決めた「フィールド名」を入れてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?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; ?> |
作成したカスタムフィールドを使ったときだけ、こんな感じで関連記事が出力されます。
|
1 2 3 4 5 6 7 8 9 |
<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 を使えばかなり作業が楽になると思います。
検索すると「あ、こんな記事も書いてたな～」なんていうのが出てくるかもしれませんよ。
このプラグインは他にもいろいろ使えますので、あれこれ機能を追加したいときにかなり重宝します。ぜひ使い倒してください！
それでは、また。
