0%

Programmingプログラミングナレッジ

Posted:2019.04.02

プラグイン【Advanced Custom Fields】で記事詳細ページに関連記事を表示させる

ちょうどクライアントワークで関連記事を表示させたいという要件があり、色々と調べていく中でAdvanced Custom Fieldsプラグインを使うのが便利というのを知りました。今後も使うケースが出てきそうということで、備忘録に残しておきたいと思います。

 

関連タイプのカスタムフィールドを作成

まずは「Advanced Custom Fields」プラグインをインストールして有効化しておきます。Advanced Custom Fieldsプラグインの基本的な使い方については過去記事「プラグイン【Advanced Custom Fields】でカスタムフィールドを出力するときによく使うメモ」でも紹介していますので参考に。

 

有効化したら新規のフィールドグループを作成していきます。適宜仕様に合わせて進めていきますが、この時にフィールドタイプで「関連」カテゴリの「関連」の項目を選択します。

プラグイン【Advanced Custom Fields】で記事詳細ページに関連記事を表示させる

 

このような感じでその他も必要な項目を設定していきます。

プラグイン【Advanced Custom Fields】で記事詳細ページに関連記事を表示させる

 

設定を進めていくと「返り値のフォーマット」という項目が出てきます。この選択肢で「投稿オブジェクト」を選択するようにします。こうすることで、カスタムフィールドを出力する時に値を取得するのですが、投稿記事のいろんな情報がまとまった配列の形で受け取ることができます。

プラグイン【Advanced Custom Fields】で記事詳細ページに関連記事を表示させる

 

設定が完了し、フィールドグループを登録してから、フィールドグループが有効である投稿画面に行くと、先ほど登録したカスタムフィールドの入力枠が表示されています。ここでは関連記事の候補になる投稿記事がリストで表示されています。その中から関連記事として表示させたいものを直接選択していく形になります。

プラグイン【Advanced Custom Fields】で記事詳細ページに関連記事を表示させる

 

選択方法も簡単で、直接記事名をクリックすると当該項目が右側に表示され、左側のものは薄く表示される形に変わります。これで関連記事の対象に設定することができました。もちろん複数の記事を関連記事に設定することも可能です。

プラグイン【Advanced Custom Fields】で記事詳細ページに関連記事を表示させる

 

また、登録した関連記事は項目をドラッグすることで表示順を変更することができますし、クリックした時に表示される「-」のアイコンをクリックすることで選択を解除することができます。これで記事を更新し、あとはテンプレートファイル上に関連記事を出力するコードを追記するだけです。

プラグイン【Advanced Custom Fields】で記事詳細ページに関連記事を表示させる

 

 

関連記事を出力するコードをテンプレートファイルに追記

関連記事の投稿情報は下記のコードで取得できます。またデバッグ用にprint_r関数などで配列の中身も見てみましょう。

<?php $post_object = get_field( 'FIELDS_NAME' ); ?>

// print_rなどで配列の中身を確認
<pre>
 <?php print_r($post_object); ?>
</pre>

 

取得した関連記事の投稿情報はこのような中身になっているのが確認できます。

Array (
 [0] => WP_Post Object (
  [ID] => 1
  [post_author] => 1
  [post_date] => 2018-11-12 02:41:36
  [post_date_gmt] => 2018-11-12 02:41:36
  [post_content] => Welcome to WordPress. This is your first post. Edit or delete it, then start writing!
  [post_title] => Hello world!
  [post_excerpt] => 
  [post_status] => publish
  [comment_status] => open
  [ping_status] => open
  [post_password] => 
  [post_name] => hello-world
  [to_ping] => 
  [pinged] => 
  [post_modified] => 2018-11-12 02:41:36
  [post_modified_gmt] => 2018-11-12 02:41:36
  [post_content_filtered] => 
  [post_parent] => 0
  [guid] => http://localdev.local/?p=1
  [menu_order] => 0
  [post_type] => post
  [post_mime_type] => 
  [comment_count] => 1
  [filter] => raw
 ),
 [1] => WP_Post Object (
......
〜 以下、投稿情報が続く 〜

 

このように配列で各投稿記事の情報が項目ごとに含まれていますので、あとはこれらをループで出力していく形になります。下記のようなコードでサイトに合わせて関連記事を出力するコードをテンプレート内に追記していきます。

【single.php】※一部抜粋

<?php
 $post_object = get_field( 'FIELDS_NAME' );
 if( $posts ):
?>
<h1>関連記事はこちら</h1>
<ul>
 <?php foreach( $post_object as $val ): ?>
 <li>
  <h2><?php echo get_the_title( $val->ID ); ?></h2>
  <a href="<?php echo get_permalink( $val->ID ); ?>">この記事を見る</a>
 </li>
 <?php endforeach; ?>
</ul>
<?php endif; ?>

 

実際にページを見てみると、このように投稿へ設定した関連記事が出力されているのが確認できました。

プラグイン【Advanced Custom Fields】で記事詳細ページに関連記事を表示させる

 

ちなみに上記コードのループ内で、カスタムフィールドを使うケースの場合、下記のように、the_field関数の第二引数に配列の値を指定する形になります。

<?php echo the_field( 'FIELDS_NAME', $val->ID); ?>

 


 

いかがでしょうか、関連記事を表示させるというのは比較的クライアントワークでもよく見かける要件なのではないでしょうか。ACFを使うことで簡単手軽に、かつ記事ごとに手動で自由に設定できるのが便利ですね。リテラシーがそこまで高くないユーザーにも直感的でわかりやすいかと思います。是非試してみてはいかがでしょうか。

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】