カスタムフィールドを管理する「Advanced Custom Fields」というプラグインを使って、記事下に関連記事を表示しようと思い奮闘していましたが、「VA Social Buzz」と場所がかぶってしまい、デフォルトでは自分の思ってる位置に表示することができませんでした。
ググってみた結果、それ用のPHPファイルを作って、ショートコードで呼び出すことができれば、任意の場所に関連記事を表示できるということが分かったので、作ってみました。
わずか4ステップ！（おまけ含む）手順はこちら
- 「Advanced Custom Fields」のインストールおよび設定
- 関連記事を表示するためのPHPファイルを作成しテーマにアップロード
- PHPファイルをショートコードで呼び出せるようにfunctions.phpにコードを記述
- （おまけ）AddQuicktagでそのショートコードを登録
「Advanced Custom Fields」のインストールおよび設定
管理画面より、プラグイン→新規追加と移動し、検索フォームに「Advanced Custom Fields」と入力します。あとは、「いますぐインストール」→「有効化」すればインストール完了です。
関連記事を表示するための設定
プラグインのインストールが終わったら管理画面に「カスタムフィールド」のメニューが追加されます。「新規追加」から関連記事を表示するための設定をしていきます。
すると、「フィールドグループを新規追加」というページに移動します。それぞれ入力していきましょう。
タイトルを入力します。今回は、「関連記事」にしました。
次に、「フィールドを追加」してカスタムフィールドを表示させる条件を作っていきます。
いろいろありますが、入力およびデフォルトから設定を変更したのは以下の4つの項目です。
| フィールドラベル | 関連記事リンク |
| フィールド名 | kanrenkiji |
| フィールドタイプ | 関連 |
| Elements | 投稿タイプのチェックを外す |
ここまで入力したら、「公開」をクリックすれば、完成です。
参考：記事下の関連記事はAdvanced Custom Fieldsで検索・表示するのがおすすめ！
関連記事をショートコードで呼び出すためのPHPファイルを作成
関連記事を呼び出すために、以下のコードを投稿ページ（single.phpなど）のファイルに追記します。
<?php $kanren = get_field('kanrenkiji'); ?>
<?php if($kanren): ?>
<div class="kanrenkiji-box">
<p class="kanrentaitle">こちらの記事もどうぞ！</p>
<div class="triangle">
<i class="fa fa-caret-down" aria-hidden="true"></i>
</div>
<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; ?>でも、その方法だと前述したように「VA Social Buzz」とかぶってしまう。「VA Social Buzz」は、いいプラグインなので外すという選択肢はありえない。
そこで、自分の好きな位置に表示できるようにショートコードでこのコードを呼び出せるように新たにファイルをFTPアプリなどでテーマにアップロードします。
エディタアプリでPHPファイルを作りアップロード
お使いのエディタアプリを使ってphpファイルを作ります。ちなみに僕が愛用しているのは「ATOM」です。
作り方は、上記のコードをコピーしてエディタにペーストし、それを「kanrenkiji.php」という名前で保存します。これでPHPファイルは完成です。
作成したPHPファイルは、「/wp-content/themes/お使いのテーマフォルダ」にFTPアプリなどでアップロードしましょう。
PHPファイルをショートコードで呼び出せるようにfunctions.phpにコードを記述
ショートコードを呼び出すために、「functions.php」に以下のコードを追記します。
※バックアップをとった上でfunctions.phpを編集することを強くおすすめします。
/***関連記事***/
function kanrenkijibox() {
ob_start();
get_template_part('kanrenkiji'); // ▲▲▲.phpの内容が表示される
return ob_get_clean();
}
add_shortcode('kanren', 'kanrenkijibox');これで、投稿や固定ページでは以下のコードを記述するとPHPファイルが呼び出せるようになります。
| ショートコード | ［kanren］（ほんとうは半角の大括弧） |
関連記事を呼び出すショートコードの使い方
まずは、本文に表示したい記事を選びます。
投稿の編集画面に「関連記事」というフィールドが追加されています。左側の記事一覧から任意の記事を選択すると、右側に移動します。右側にあるタイトルが表示されます。
関連記事を選んだら、本文に任意の場所にショートコードを入力しましょう。すると、本文ではこのように表示されます。
ちなみに、CSSでデザインを装飾しています。
.kanrenkiji-box {
margin: 2rem auto;
padding: 1rem;
}
.kanrenkiji-box p {
margin: 0 auto;
text-align: center;
font-size: 20px;
}
.kanrentaitle {
font-weight: bold;
}
.triangle {
margin: 0 auto;
text-align: center;
color: #d21825;
font-size: 5em;
line-height: 1;
}
.kanrenkiji-box ul{
padding-left: 0;
}
.kanrenkiji-box ul li {
font-size: 18px;
background: none;
padding-left: 0;
margin-left: 1rem;
list-style: disc outside;
}これで任意の場所に関連記事を表示することができました。
参考：ショートコードで任意のテンプレートファイルを読み込ませる方法 – y.o.designers-works
（おまけ）AddQuicktagでそのショートコードを登録
毎回、ショートコードを入力してもいいんですけど、すこしでも記事を書くことをかんたんにするために「AddQuicktag」プラグインを使って、いっそのこと登録してしまいしょう。
プラグインをインストールしていない場合は、管理画面より、プラグイン→新規追加と移動し、検索フォームに「AddQuicktag」と入力します。あとは、「いますぐインストール」→「有効化」すればインストール完了です。
管理画面より、「設定」→「AddQuicktag」をクリックし、ショートコードを呼び出すため、以下の4つの項目を入力します。
| ボタン名 | 関連 |
| 開始タグ | ［kanren |
| 終了タグ | ］ |
| 順番 | 任意の番号 |
入力が完了したら、「変更を保存」をクリックします。これで投稿の編集画面でリストから「関連」を選べば、ショートコードが挿入されるようになります。
さいごに
自分の好きな位置に表示できるというこで、記事の最後だけではなく、最初に表示するなど自由に設定できます。
また、PHPに記述するコード内の文字を変えれば、たとえば、カテゴリ内の人気記事を表示するなどいろんな使い方ができそうですね。
ではまた！
[kanren]
