Advanced Custom Fields オプションページの使い方

デフォルトの投稿やカスタム投稿タイプ、固定ページなど属さない更新コンテンツを設定する際には、オプションページを作成すると便利です。
出力の方法に関しては以前の記事に書きましたが、改めてオプションページの基本的な使用方法に関しておさらいします。
※本記事はACF PRO版の場合です。

ダウンロード

オプションページの作成

管理画面の設定ページを作成するために、functions.phpに下記の記述を追加します。
PRO版の場合は、複数のオプションページを設置したり、サブページを作成することが可能です。

if( function_exists('acf_add_options_page') ) {
	$option_page = acf_add_options_page(array(
		'page_title' => 'トップページ スライダー', // 設定ページで表示される名前
		'menu_title' => 'トップページ<br>スライダー', // ナビに表示される名前
		'menu_slug' => 'home_slider',
		'capability' => 'edit_posts',
		'redirect' => false
	));
}

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

オプションページで設定するカスタムフィールドを作成します。
今回は、使用頻度の高いトップページに表示するスライダー画像の設定項目をリピーターフィールドで作ってみます。

画像や遷移URLの項目を作成したら、「位置」のルールを「オプションページ」に設定します。

カスタムフィールド作成後、オプションページからフィールドを入力しておきます。

カスタムフィールドの出力

テンプレートファイルに下記のように記述すると、スライダーのリストが出力されます。

<?php if( have_rows('home_slide','option') ) : ?>
	<ul>
	<?php while( have_rows('home_slide','option') ) : the_row(); ?>
		<?php $image = get_sub_field('home_slide_image','option'); ?>
		<?php if( $image ) : ?>
			<?php $url = get_sub_field('home_slide_url','option'); ?>
			<?php $blank = get_sub_field('home_slide_blank','option'); ?>
			<?php if( $url ) : ?>
				<?php if( $blank ) : ?>
					<li><a href="<?php echo $url; ?>" target="_blank"><img src="<?php echo $image; ?>"></a></li>
				<?php else : ?>
					<li><a href="<?php echo $url; ?>"><img src="<?php echo $image; ?>"></a></li>
				<?php endif; ?>
			<?php else : ?>
				<li><img src="<?php echo $image; ?>"></li>
			<?php endif; ?>
		<?php endif; ?>
	<?php endwhile; ?>
	</ul>
<?php endif; ?>

オプションページの使い所としては、上記のようなトップページのスライダーや、サイドバーのバナー、フッターのリンクなど様々です。
お客様の目線でもウィジェット機能より更新しやすい作りに思いますので、どんどん使っていきたいですね。

ダウンロード

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

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

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

 

»詳しくはこちら

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

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

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

»詳しくはこちら

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

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

»詳しくはこちら