【完全版】WordPressプラグイン Advanced Custom Fields【表示編】

おはようございます！社員Aです👩

今回はWordPressプラグイン「Advanced Custom Fields」で値を表示する方法をご紹介したいと思います。

万能プラグイン「Advanced Custom Fields」

「Advanced Custom Fields」は、フィールドビルダを使用して好きな場所にフィールドを作成できるプラグインで、多くのユーザーに愛用されています。

「テキストエリア」や「画像フィールド」など、追加できるフィールドの多さも特徴ですが、出力が複雑なものもあり、今回分かりやすくまとめてみました。

Advanced Custom Fieldsでテキストを表示する方法

テキストフィールドは、単純なテキスト入力を作成します。一番よく使うフィールドです。

表示

<?php the_field('text'); ?>

Advanced Custom Fieldsでテキストエリアを表示する方法

Textareaフィールドは、テキストエリアを作成します。テキストとの違いは複数行入力できる点です。

表示

<?php the_field('textarea'); ?>

Advanced Custom Fieldsで範囲を表示する方法

範囲フィールドは、数値を選択するためのフィールドです。

表示

フィールドは数値を返します。

今回は、選択した値をすべての<h2>要素の「font-size」スタイルとして使用する方法になります。

<?php 
// vars
$font_size = get_field('font_size');

?>
<style type="text/css">
<?php if( $font_size ): ?>
	h2 {
		font-size: <?php echo $font_size; ?>px;
	}
<?php endif; ?>
</style>

Advanced Custom Fieldsでチェックボックスを表示する方法

チェックボックスフィールドを作成できます。設定画面で「選択肢」の部分を設定しておけば、値の取得が便利です。

表示

チェックボックスフィールドは、選択された選択肢の配列を返します。

基本の表示

<?php the_field('colors'); ?>

選択した複数の値を読み込んで表示

<?php

// vars	
$colors = get_field('colors');


// check
if( $colors ): ?>
<ul>
	<?php foreach( $colors as $color ): ?>
		<li><?php echo $color; ?></li>
	<?php endforeach; ?>
</ul>
<?php endif; ?>

値とラベルを表示

この例は、「値のフォーマット」設定を使用せずに、選択した値とラベルをロードする方法です。

<?php

// vars	
$field = get_field_object('colors');
$colors = $field['value'];


// check
if( $colors ): ?>
<ul>
	<?php foreach( $colors as $color ): ?>
		<li><?php echo $field['choices'][ $color ]; ?></li>
	<?php endforeach; ?>
</ul>
<?php endif; ?>

条件付きで表示

<?php

// vars	
$colors = get_field('colors');


// check
if( $colors && in_array('red', $colors) ): ?>
<p>Selected the Red choice!</p>
<?php endif; ?>

Advanced Custom Fieldsでラジオボタンを表示する方法

ラジオボタンフィールドは、選択可能なリストを作成します。

表示

基本の表示

<?php the_field('color'); ?>

値とラベルを表示

この例は、「値のフォーマット」設定を使用せずに、選択した値とラベルをロードする方法です。

<?php

// vars
$field = get_field_object('color');
$value = $field['value'];
$label = $field['choices'][ $value ];

?>
<p>Color: <span class="color-<?php echo $value; ?>"><?php echo $label; ?></span></p>

条件付きで表示

<?php if( get_field('color') == 'red' ): ?>
	<p>Selected the Red choice!</p>
<?php endif; ?>

Advanced Custom Fieldsでセレクトフィールドを表示する方法

選択フィールドは、ドロップダウン選択または複数選択入力を作成します。

表示

基本の表示

<?php the_field('color'); ?>

複数の表示

選択した複数の値を読み込んで表示する方法です。

<?php

// vars	
$colors = get_field('color');


// check
if( $colors ): ?>
<p>Color: <?php echo implode(', ', $colors); ?></p>
<?php endif; ?>

値とラベルを表示

<?php

// vars
$field = get_field_object('color');
$value = $field['value'];
$label = $field['choices'][ $value ];

?>
<p>Color: <span class="color-<?php echo $value; ?>"><?php echo $label; ?></span></p>

条件付きで表示

<?php if( get_field('color') == 'red' ): ?>
	<p>Selected the Red choice!</p>
<?php endif; ?>

Advanced Custom Fieldsで真/偽を表示する方法

True / Falseフィールドでは、1または0の値を選択できます。

表示

True / Falseフィールドは、trueまたはfalseのブール値を返します。値は、「1」または「0」としてDBに保存されます。

基本的な条件付きの表示

値を使用して条件付きでタスクを実行する方法です。

<?php if( get_field('enable_sidebar') ): ?>
	
	<?php // do something ?>
	
<?php endif; ?>

クエリの投稿

この例は、true値を持つ投稿をクエリする方法です。

<?php 

$posts = get_posts(array(
	'meta_query' => array(
		array(
			'key' => 'enable_sidebar',
			'compare' => '=',
			'value' => '1'
		)
	)
));

if( $posts ): ?>
	
	<ul>
		
	<?php foreach( $posts as $post ): 
		
		setup_postdata( $post )
		
		?>
		<li>
			<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
		</li>
	
	<?php endforeach; ?>
	
	</ul>
	
	<?php wp_reset_postdata(); ?>

<?php endif; ?>

Advanced Custom Fieldsでファイルを表示する方法

ファイルフィールドでは、ファイルをアップロードして選択できます。

表示

ファイルフィールドは、return valueセットに応じて、配列、文​​字列、またはint値を返します。

基本の表示（オブジェクト）

この例は、arrayを使用するときに選択したファイルを表示する方法です。

<?php 

$file = get_field('file');

if( $file ): ?>
	
	<a href="<?php echo $file['url']; ?>"><?php echo $file['filename']; ?></a>

<?php endif; ?>

カスタマイズされた表示（オブジェクト）

この例は、object戻り値の型を使用するときにカスタムリンクを表示する方法です。

<?php 

$file = get_field('file');

if( $file ): 

	// vars
	$url = $file['url'];
	$title = $file['title'];
	$caption = $file['caption'];
	

	// icon
	$icon = $file['icon'];
	
	if( $file['type'] == 'image' ) {
		
		$icon =  $file['sizes']['thumbnail'];
		
	}
	

	if( $caption ): ?>

		<div class="wp-caption">

	<?php endif; ?>

	<a href="<?php echo $url; ?>" title="<?php echo $title; ?>">

		<img src="<?php echo $icon; ?>" />
		<span><?php echo $title; ?></span>

	</a>

	<?php if( $caption ): ?>

			<p class="wp-caption-text"><?php echo $caption; ?></p>

		</div>

	<?php endif; ?>

<?php endif; ?>

基本の表示（ID）

この例は、IDを使用するときに選択したファイルを表示する方法です。必要なデータのみを効率的にロードできます。

<?php 

$file = get_field('file');

if( $file ) {

	$url = wp_get_attachment_url( $file );
	
	?><a href="<?php echo $url; ?>" >Download File</a><?php

}

?>

基本の表示（URL）

この例は、URLを使用するときに選択したファイルを表示する方法です。

基本的なリンクを効率的に表示できますが、ファイルに関する追加データを読み込むことはできません。

<?php if( get_field('file') ): ?>

	<a href="<?php the_field('file'); ?>" >Download File</a>

<?php endif; ?>

Advanced Custom Fieldsで画像を表示する方法

画像フィールドでは、画像をアップロードして選択できます。

このフィールドは、WPメディアポップアップを使用して、アップロードおよび選択プロセスを処理します。

表示

画像フィールドは、return valueセットに応じて、配列、文​​字列、またはint値を返します。

基本の表示（ID）

この例は、image IDを使用するときに選択した画像を表示する方法です。

この例では、wp_get_attachment_image（）関数を使用して画像HTMLを生成します。

<?php 

$image = get_field('image');
$size = 'full'; // (thumbnail, medium, large, full or custom size)

if( $image ) {

	echo wp_get_attachment_image( $image, $size );

}

?>

基本の表示（配列）

この例は、image arrayを使用するときに選択した画像を表示する方法です。

この戻り型により、alt、キャプション、サイズなどの追加の画像データに簡単にアクセスできます。

<?php 

$image = get_field('image');

if( !empty($image) ): ?>

	<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />

<?php endif; ?>

arrrayを使用した表示

この例では、image array戻り値の型を使用するときに、選択した画像のカスタムサイズを表示する方法です。

この戻り型により、サイズ、幅、高さなどの追加の画像データに簡単にアクセスできます。

<?php 

$image = get_field('image');

if( !empty($image) ): 

	// vars
	$url = $image['url'];
	$title = $image['title'];
	$alt = $image['alt'];
	$caption = $image['caption'];

	// thumbnail
	$size = 'thumbnail';
	$thumb = $image['sizes'][ $size ];
	$width = $image['sizes'][ $size . '-width' ];
	$height = $image['sizes'][ $size . '-height' ];

	if( $caption ): ?>

		<div class="wp-caption">

	<?php endif; ?>

	<a href="<?php echo $url; ?>" title="<?php echo $title; ?>">

		<img src="<?php echo $thumb; ?>" alt="<?php echo $alt; ?>" width="<?php echo $width; ?>" height="<?php echo $height; ?>" />

	</a>

	<?php if( $caption ): ?>

			<p class="wp-caption-text"><?php echo $caption; ?></p>

		</div>

	<?php endif; ?>

<?php endif; ?>

基本の表示（URL）

この例は、URLを使用するときに選択した画像を表示する方法です。

この戻り型により、基本的な画像を効率的に表示できますが、画像に関する追加のデータを読み込むことはできません。

<?php if( get_field('image') ): ?>

	<img src="<?php the_field('image'); ?>" />

<?php endif; ?>

Advanced Custom FieldsでWysiwygエディタを表示する方法

Wysiwygフィールドは、投稿およびページで使用される一般的な方法でWordPressコンテンツエディターを作成します。

これは、テキストとマルチメディアの両方を単一の領域内で編集およびスタイル設定できるため、コンテンツの編集に最も役立つフィールドの1つです。

表示

<?php the_field('wysiwyg_test'); ?>

Advanced Custom Fieldsでカラーピッカーを表示する方法

カラーピッカーフィールドでは、javascriptポップアップを使用して色を選択できます。

表示

<div style="background-color:<?php the_field('color'); ?>">Something here...</div>

Advanced Custom Fieldsでデイトピッカーを表示する方法

デイトピッカーフィールドは、jquery日付選択ポップアップを作成します。このフィールドは、テーマで使用する日付を設定するのに役立ちます。

表示

基本の表示

<?php the_field('date'); ?>

応用の表示

値（YYYYMMDD形式で保存）を取得し、数値に変換してさらに変更する方法です。

<?php 

// get raw date
$date = get_field('date', false, false);


// make date object
$date = new DateTime($date);

?>
<p>Event start date: <?php echo $date->format('j M Y'); ?></p>
<?php 

// increase by 1 day
$date->modify('+1 day');
	
?>
<p>Event end date: <?php echo $date->format('j M Y'); ?></p>

Advanced Custom Fieldsでデイトタイムピッカーを表示する方法

デイトタイムピッカーフィールドは、jQueryの日時選択ポップアップを作成します。

このフィールドは、テーマで使用する特定の日時を設定するのに役立ちます。

選択した値は、さまざまな形式で返されて表示できますが、常に「Ymd H：i：s」としてDBに保存されます。

表示

日時ピッカーフィールドは、フィールドの設定で指定された形式で日時値を含む文字列を返します。

<?php the_field('start_date'); ?>

Advanced Custom Fieldsでタイムピッカーを表示する方法

タイムピッカーフィールドは、jQuery時間選択ポップアップを作成します。

このフィールドは、テーマで使用する特定の時間を設定するのに役立ちます。

選択した値は、さまざまな形式で返されて表示できますが、常に「H：i：s」としてデータベースに保存されます。

表示

タイムピッカーフィールドは、フィールドの設定で指定された形式で文字列値を返します。

<p>Monday: <?php the_field('monday_open_time'); ?> - <?php the_field('monday_close_time'); ?></p>

Advanced Custom Fieldsでユーザーを表示する方法

ユーザーフィールドでは、1人以上のユーザーを選択できます。

このフィールドタイプは、データオブジェクト間の関係を作成するのに役立ちます。

値をWP_User IDとして保存し、取得時に完全なWP_Userデータを返すことができます。

表示

選択した単一のユーザーを表示

選択したユーザーを表示する方法です。

<?php
$user = get_field("user_field");
if( $user ): ?>
<div class="author-box">
    <img src="<?php echo esc_attr($user['user_avatar']); ?>" alt="author-avatar" />
    <h3><?php echo $user['display_name']; ?></h3>
    <?php if( $user['user_description'] ): ?>
        <p><?php echo $user['user_description']; ?></p>
    <?php endif; ?>
</div>
<?php endif; ?>

選択した複数のユーザーを表示

選択した複数のユーザーをリストに表示する方法です。

<?php
$users = get_field("volunteers");
if( $users ): ?>
<ul class="volunteers-list">
    <?php foreach( $users as $user ): ?>
        <li>
            <img src="<?php echo esc_attr( get_avatar($user->ID) ); ?>" alt="author-avatar" />
            <a href="<?php echo esc_attr($user->user_url); ?>"><?php echo $user->display_name; ?></a>
        </li>
    <?php endforeach; ?>
</ul>
<?php endif; ?>

Advanced Custom Fieldsでリンクを表示する方法

リンクフィールドは、リンク（URL、タイトル、ターゲット）を選択できます。

表示

リンクフィールドは、戻り値の設定に応じて配列または文字列を返します。

Arrayを使って表示

<?php 

$link = get_field('link');

if( $link ): 
	$link_url = $link['url'];
	$link_title = $link['title'];
	$link_target = $link['target'] ? $link['target'] : '_self';
	?>
	<a class="button" href="<?php echo esc_url($link_url); ?>" target="<?php echo esc_attr($link_target); ?>"><?php echo esc_html($link_title); ?></a>
<?php endif; ?>

リンクURLを使って表示

<?php 

$link = get_field('link');

if( $link ): ?>
	
	<a class="button" href="<?php echo $link; ?>">Continue Reading</a>

<?php endif; ?>

Advanced Custom Fieldsでページリンクを表示する方法

ページリンクフィールドでは、1つ以上の投稿、ページ、またはカスタム投稿タイプを選択できます。

このフィールドは、投稿のURL（パーマリンク）を返すため、別の投稿に簡単にリンクするのに役立ちます。

表示

基本の表示

選択したページリンク値をロードして表示する方法です。

<a href="<?php the_field('page_link'); ?>">Read this!</a>

複数のページリンクを表示

選択された複数のページリンク値を読み込んで表示する方法です。

<?php 

// vars
$urls = get_field('urls');


// check 
if( $urls ): ?>
<h3>Further reading</h3>
<ul>
	<?php foreach( $urls as $url ): ?>
	<li>
		<a href="<?php echo $url ?>"><?php echo $url; ?></a>
	</li>
	<?php endforeach; ?>
</ul>
<?php endif; ?>

Advanced Custom Fieldsで投稿オブジェクトを表示する方法

投稿オブジェクトフィールドは、ページ+投稿+カスタム投稿タイプを選択できる選択フィールドを作成します。

このフィールドは、別のページ/投稿へのリンクに役立ちます。

表示

APIは、単一の投稿オブジェクト（APIはget_postを使用）または投稿オブジェクトの配列（APIはget_postsを使用）を返します。

単一の投稿オブジェクトのデータを表示

<?php

$post_object = get_field('post_object');

if( $post_object ): 

	// override $post
	$post = $post_object;
	setup_postdata( $post ); 

	?>
    <div>
    	<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
    	<span>Post Object Custom Field: <?php the_field('field_name'); ?></span>
    </div>
    <?php wp_reset_postdata(); // IMPORTANT - reset the $post object so the rest of the page works correctly ?>
<?php endif; ?>

複数の投稿オブジェクトのデータを表示

<?php

$post_objects = get_field('post_objects');

if( $post_objects ): ?>
    <ul>
    <?php foreach( $post_objects as $post): // variable must be called $post (IMPORTANT) ?>
        <?php setup_postdata($post); ?>
        <li>
            <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
            <span>Post Object Custom Field: <?php the_field('field_name'); ?></span>
        </li>
    <?php endforeach; ?>
    </ul>
    <?php wp_reset_postdata(); // IMPORTANT - reset the $post object so the rest of the page works correctly ?>
<?php endif;

/*
*  Loop through post objects (assuming this is a multi-select field) ( don't setup postdata )
*  Using this method, the $post object is never changed so all functions need a seccond parameter of the post ID in question.
*/

$post_objects = get_field('post_objects');

if( $post_objects ): ?>
    <ul>
    <?php foreach( $post_objects as $post_object): ?>
        <li>
            <a href="<?php echo get_permalink($post_object->ID); ?>"><?php echo get_the_title($post_object->ID); ?></a>
            <span>Post Object Custom Field: <?php the_field('field_name', $post_object->ID); ?></span>
        </li>
    <?php endforeach; ?>
    </ul>
<?php endif;

?>