Wordpress Tips

2016.05.30

Advanced Custom Fieldsの取得・出力方法まとめ

カテゴリー:

一般的には、the_field(); 関数で Advanced Custom Fields のフィールド出力を行いますが、 繰り返しフィールドやオプションページなどのカスタムフィールドでは、記述の仕方が若干異なります。

今回はこれまで自身で使用した経験があるものを中心に用途別でまとめました。 (すべてループ内で記述してください。)


通常のフィールドの取得・出力

<!-- 通常のフィールドの取得 -->
<?php get_field('FIELD_NAME'); ?>

<!-- 通常のフィールドの出力 -->
<?php the_field('FIELD_NAME'); ?>


リピーターフィールドの取得・出力

<?php if( have_rows('REPEATER_FIELD_NAME') ): ?>
	<?php while( have_rows('REPEATER_FIELD_NAME') ): the_row(); ?>

		<!-- サブフィールドの取得 -->
		<?php get_sub_field('SUB_FIELD_NAME'); ?>

		<!-- サブフィールドの取得 -->
		<?php the_sub_field('SUB_FIELD_NAME'); ?>

	<?php endwhile; ?>
<?php endif; ?>


柔軟コンテンツの取得・出力

<?php while(the_flexible_field( 'FLEXIBLE_FIELD_NAME' )): ?>
	<?php if ( get_row_layout() == 'LAYOUT_NAME_01' ) : ?>

		<!-- サブフィールドの取得 -->
		<?php get_sub_field('SUB_FIELD_NAME'); ?>

		<!-- サブフィールドの取得 -->
		<?php the_sub_field('SUB_FIELD_NAME'); ?>

	<?php elseif ( get_row_layout() == 'LAYOUT_NAME_02' ) : ?>

	<?php endif; ?>
<?php endwhile; ?>


オプションページのフィールドの取得・出力

<!-- オプションページのフィールドの取得 -->
<?php get_field('FIELD_NAME','option'); ?>

<!-- オプションページのフィールドの出力 -->
<?php the_field('FIELD_NAME','option'); ?>


組み合わせると…

2961
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
	<?php
		$title = get_the_title();            // 記事タイトルを取得
		$link_url = get_field('link_url');   // テキストのカスタムフィールド「link_url」に入力したURL
		$image_url = get_field('image_url'); // テキストのカスタムフィールド「image_url」に入力した画像URL
	?>
	<?php if( $link_url ): ?>
		<!-- 「link_url」が入力されていた場合、リンク付き画像を表示 -->
		<figure><a href="<?php echo $link_url; ?>"><img src="<?php echo $image_url; ?>" alt="<?php echo $title; ?>"></a></figure>
	<?php else : ?>
		<!-- 「link_url」が入力されていない場合、リンクなし画像を表示 -->
		<figure><img src="<?php echo $image_url; ?>" alt="<?php echo $title; ?>"></figure>
	<?php endif; ?>
<?php endwhile; endif; ?>


意外と使っている種類が少なかったので、 応用編として簡単なサンプルのソースを書いてみました。

フィールドタイプによって取得する値の形式が異なりますが、 基本的にはこのように組み合わせていけば、複雑な処理も可能になりそうです。

以上、「Advanced Custom Fieldsの取得・出力方法まとめ」でした。

ご相談・ご依頼に関して、まずは

ください。お気軽にどうぞ