Advanced Custom Fields で関連記事（任意記事）を出力する

2016.11.01

Advanced Custom Fields で関連記事（任意記事）を出力する

WordPressで関連記事を実装するには、Yet Another Related Posts Plugin のように

投稿に対して自動で出力させる方法もありますが、
今回は、Advanced Custom Fields の「関連」フィールドを使い、

関連記事（任意記事）の出力をしてみます。

今回はオプションページを作成し、そこでの登録によりサイドバーなどの共通要素に対して出力するので、

あらかじめ、オプションページを作成しておく必要があります。

<br />
// ACF PRO オプションページ<br />
if( function_exists('acf_add_options_page') ) {<br />
	$option_page = acf_add_options_page(array(<br />
		'page_title' => 'オプションページ testテスト',<br />
		'menu_title' => 'オプションページ<br>テスト',<br />
		'menu_slug' => 'opation_page_',<br />
		'capability' => 'edit_posts',<br />
		'redirect' => false<br />
	));<br />
}<br />

カスタムフィールドの作成

記事の登録のためのカスタムフィールドを作成します。

「新規追加」からフィールドタイプ「関連」を選択後、

各設定のオプションは任意ですが、登録の際の絞り込みに関してや、最大／最小登録数が設定可能です。

今回は下記のような設定になりました。

記事の選択

オプションページで表示させたい記事を選択します。

記事リストの出力

出力に関しては、foreachでのループでも可能ですが、

汎用的に使える WP_Query で出力します。

<br />
<?php
	$related_posts = get_field('related_posts','option'); // 関連記事IDの取得
	$args = array(
		'post_type' => 'post',<br />
		'posts_per_page' => -1,<br />
		'post__in' => $related_posts, //queryに含む投稿IDを指定<br />
		'orderby' => 'post__in' //表示順（配列に入っている順）<br />
	);<br />
?><br />
<?php $query = new WP_Query( $args ); ?><br />
<?php if($query -> have_posts()): ?></p>
<h2>関連記事の出力（オプションページ）</h2>
<ul>
	<?php while($query -> have_posts()): $query->the_post();?></p>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<p>	<?php endwhile; ?>
	</ul>
<p><?php endif; ?><br />
<?php wp_reset_postdata(); ?><br />

出力の結果

以上の手順でブラウザでは下記のように表示がされます。

管理画面から選択した投稿をドラッグ&ドロップすることで順番の変更が可能になりますが、

‘orderby’ => ‘post__in’ を指定しているので、その手順で変更した通りの順序で表示されます。

以上が Advanced Custom Fields の「関連」フィールドの使い方です。

今回のようにオプションページで設定するような各ページ共通の要素の出力のほか、

各記事に対してそれぞれ任意の記事を関連記事として表示させる、といったことも可能です。

Facebook

Twitter

関連タグ

Advanced Custom Fieldsを使用して制作したサイト

ジオクリエート株式会社様

新規Webサイト開設のご依頼を承り、更新の利便さや作業時間の軽減を目指しWordPressを導入いたしました。

»詳しくはこちら

株式会社キュレーションジャパン様　PREMIUM JAPAN(プレミアムジャパン)

「日本のプレミアムを世界へ、日本へ。そして未来へ。」
Webサイトのキャッチコピー通り、日本の技術や文化、食などのプレミアムな情報を発信するメディアサイトです。

制作に携わらさせていただきましたが、面白く、参考になる情報など満載で、
私...

»詳しくはこちら

主婦と生活社様　暮らしとおしゃれの編集室

主婦と生活社様の「ナチュリラ」「大人になったら着たい服」「暮らしのおへそ」のWebサイトになります。
「ナチュリラ」「大人になったら着たい服」「暮らしのおへそ」の雑誌と同様にデザインはシンプルにしております。
ぜひ、ご覧ください！！

»詳しくはこちら

Wordpress Tips