アトリエロワ

Advanced Custom Fields の表示【wordpress】

Advanced Custom Fields に入力した値をテンプレートで表示する方法

基本の表示

<?php the_field('フィールド名1'); ?>

値が設定された時だけ表示する

<?php if( get_field(‘フィールド名1’) or get_field('フィールド名2’) and get_field('フィールド名3’) ): ?>
<?php the_field('フィールド名1'); ?>
<?php else: ?>
■ 値がない時に表示するもの
<?php endif; ?>
<?php if( get_field('フィールド名1') ) { ?>
    <p><?php the_field('フィールド名1'); ?></p>
<?php } ?>

文字数を指定

<?php
    $text = mb_substr(get_field('フィールド名1'),0,120,'utf-8'); 
    echo $text.'...';
?>

カテゴリーで選んだ画像をcategory.phpで出力

●●フィールド名1●●をフィールドの名前(英数)に変更

<?php $cat_id = get_queried_object()->cat_ID;
  $post_id = 'category_'.$cat_id;
?>
<img src="<?php the_field('●●フィールド名1●●',$post_id); ?>" alt="<?php single_cat_title(); ?>" />

ギャラリータイプ画像の配置「配列」

「返り値のフォーマット」で「画像配列」にチェック

名前1を英数の名前の部分に変更

<?php
  $images = get_field('名前1');
  if( $images ):
?>
  <ul>
<?php foreach( $images as $image ): // ループ開始 ?>
    <li>
      <a href="<?php echo $image['url']; ?>">
        <img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" />
      </a>
      <p><?php echo $image['caption']; ?></p>
    </li>
<?php endforeach; ?>
    </ul>
<?php endif; ?>

サムネイルではなく画像をそのまま出すとき

 <?php
  $images = get_field('名前1');
  if( $images ):
?>
<?php foreach( $images as $image ): // ループ開始 ?>
    <div>
        <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
</div>
<?php endforeach; ?>
<?php endif; ?>

画像を1枚だけ表示する場合

「返り値のフォーマット」で「画像 URL」にチェック

<?php if( get_field('名前1') ): ?>
    <img src="<?php the_field('名前1'); ?>" />
<?php endif; ?>

フィールドの値とフィールドラベル

<?php if( get_field('フィールド名1') ):
	the_field('フィールド名1');
	$fielddata = get_field_object('フィールド名1');
	echo esc_html($fielddata['label']);
endif; ?>

フィールドタイプ:基本

/*テキスト-----------*/
/*テキストエリア-----------*/
/*数値-----------*/
/*メール-----------*/
/*パスワード-----------*/

<?php if( get_field('フィールド名') ): ?>
	<?php the_field('フィールド名'); ?>
<?php endif; ?>


/*Range-----------*/

/*URL-----------*/

フィールドタイプ:content

/*Wysiwyg エディタ-----------*/
<?php if( get_field('フィールド名') ): ?>
	<?php the_field('フィールド名'); ?>
<?php endif; ?>

/*画像(返り値が「画像ID」の場合)-----------*/
<?php if( get_field('フィールド名') ): ?>
<?php $thumb = wp_get_attachment_image_src( get_field('フィールド名') , 'full' ); //thumbnail, medium, large, full ?>
	<img src="<?php echo $thumb[0]; ?>" width="<?php echo $thumb[1]; ?>" height="<?php echo $thumb[2]; ?>" alt="">
<?php endif; ?>

/*画像(返り値が「画像URL」の場合)-----------*/
<?php if( get_field('フィールド名') ): ?>
	<img src="<?php the_field('フィールド名'); ?>" alt="">
<?php endif; ?>

/*ファイル(返り値が「ファイルURL」の場合)-----------*/
<?php if( get_field('フィールド名') ): ?>
	<a href="<?php the_field('フィールド名'); ?>" target="_blank">ファイル</a>
<?php endif; ?>

フィールドタイプ:選択肢

/*セレクトボックス-----------*/
<?php if( get_field('フィールド名') ): ?>
	セレクトボックス:<?php the_field('フィールド名'); ?>
<?php endif; ?>

/*チェックボックス-----------*/
<?php if( get_field('フィールド名') ): ?>
	<ul>
	<?php $check = get_field('フィールド名');
		foreach ( (array)$check as $value ): ?>
		<li>チェックボックス:<?php echo $value; ?></li>
	<?php endforeach; ?>
	</ul>
<?php endif; ?>

/*ラジオボタン-----------*/
<?php if( get_field('フィールド名') ): ?>
	ラジオボタン:<?php the_field('フィールド名'); ?>
<?php endif; ?>

/*真/偽-----------*/
<?php if( get_field('フィールド名') ): ?>
  true
<?php else: ?>
	false
<?php endif; ?>

フィールドタイプ:Relational

/*ページリンク-----------*/
<?php if( get_field('フィールド名') ): ?>
	<ul>
	<?php $relational = get_field('フィールド名');
		foreach ( (array)$relational as $value ): ?>
		<li>ページリンク:<a href="<?php echo $value; ?>"><?php echo $value; ?></a></li>
	<?php endforeach; ?>
	</ul>
<?php endif; ?>

/*投稿オブジェクト(複数の値を選択できるようにした場合)-----------*/
<?php $post_objects = get_field('post_obj');?>
<?php if( $post_objects ): ?>
	<?php foreach( $post_objects as $post): ?>
	<?php setup_postdata( $post );  ?>
		<div>
		    <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
		    <p><?php the_content(); ?></p>
		</div>
	<?php endforeach; ?>
	<?php wp_reset_postdata(); ?>
<?php endif; ?>

/*タクソノミー(返り値が「Term Object」の場合)-----------*/
<?php if( get_field('フィールド名') ): ?>
  <?php $term = get_field('フィールド名'); ?>
	<p>タクソノミー:
	<?php	foreach ( (array)$term as $value ): ?>
		<a href="<?php echo get_bloginfo('url') . '/archives/category/' . $value->slug; ?>"><?php echo $value->name; ?></a>
		<?php if(next($term)!==FALSE){ echo ", ";} ?>
	<?php endforeach; ?>
	</p>
<?php endif; ?>

/*ユーザー(返り値が「セレクトボックス」の場合)-----------*/
<?php if( get_field('フィールド名') ): ?>
  <?php $user = get_field('フィールド名'); ?>
	ユーザー:<?php echo $user['user_nicename']; ?>/ <?php echo $user['nickname']; ?>
<?php endif; ?>

/*ユーザー(返り値が「Multi Select」の場合)-----------*/
<?php if( get_field('フィールド名') ): ?>
  <?php $user = get_field('フィールド名'); ?>
  <?php	foreach ( (array)$user as $value ): ?>
		ユーザー:<?php echo $user['user_nicename']; ?>/ <?php echo $user['nickname']; ?>
		<?php if(next($user)!==FALSE){ echo ", ";} ?>
	<?php endforeach; ?>
<?php endif; ?>

フィールドタイプ:jQuery

/*Google Map(例:仙台駅 lat:38.260115 ing:140.882309)-----------*/
<?php $location = get_field('フィールド名'); ?>
<?php if( !empty($location) ): ?>
<?php echo $location['address'].'<br>lat:'.$location['lat'].'<br>lng:'.$location['lng']; ?>
<iframe src="http://maps.google.co.jp/maps?q=<?php echo $location['address']; ?>&output=embed" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
<?php endif; ?>

/*デイトピッカー-----------*/
<?php if( get_field('フィールド名') ): ?>
	<?php the_field('フィールド名'); ?>
<?php endif; ?>

/*カラーピッカー-----------*/
<?php if( get_field('フィールド名') ): ?>
	<p style="background-color:<?php the_field('フィールド名'); ?>">カラーピッカー:<?php the_field('フィールド名'); ?></p>
<?php endif; ?>

HOME > wordpress設計術 > Advanced Custom Fields の表示【wordpress】

wordpress設計術

wordpress設計術