WordPressプラグイン「Advanced Custom Fields」の出力方法まとめ

WordPressでカスタム投稿タイプを作成した場合は多くのケースで「Advanced Custom Fields」を使用し、オリジナルの投稿画面を作成する事がありあます。
今回は「Advanced Custom Fields」での全フィールドタイプの出力方法をまとめました。
フィールドタイプ【基本】
テキスト
<?php if(get_field('text')): ?> <p><?php the_field('text'); ?></p> <?php endif; ?>
aタグやstrongタグ等のHTMLタグ形式でも出力できます。
テキストエリア
<?php if(get_field('textarea')): ?> <p><?php the_field('textarea'); ?></p> <?php endif; ?>
aタグやstrongタグ等のHTMLタグ形式で出力できません。
数値
<?php if(get_field('number')): ?> <p><?php the_field('number'); ?></p> <?php endif; ?>
数値専用のフィールドです。
メール
<?php if(get_field('mail')): ?> <p><?php the_field('mail'); ?></p> <?php endif; ?>
メールアドレス専用のフィールドです。入力内容がメールアドレスの形式になっていなかったら警告がでます。
パスワード
<?php if(get_field('password')): ?> <p><?php the_field('password'); ?></p> <?php endif; ?>
パスワード専用のフィールドです。入力内容が「●」で表示されます。
フィールドタイプ【content】
Wysiwygエディタ
<?php if(get_field('editor')): ?> <p><?php the_field('editor'); ?></p> <?php endif; ?>
記事編集画面でいうところの本文入力フィールドのようなツールバー付のテキストエリアになります。ショートコードを挿入したい場合に使用します。
画像(返り値が「画像ID」の場合)
<?php if(get_field('image_id')): ?> <?php $imgid = get_field('image_id'); $img = wp_get_attachment_image_src( $imgid , 'full' ); ?> <img src="<?php echo $img[0]; ?>" width="<?php echo $img[1]; ?>" height="<?php echo $img[2]; ?>" alt="<?php the_title_attribute(); ?>"> <?php endif; ?>
ファイル(返り値が「ファイルURL」の場合)
<?php if(get_field('file')): ?> <a href="<?php the_field('file'); ?>" target="_blank">ファイル</a> <?php endif; ?>
フィールドタイプ【選択肢】
セレクトボックス
<?php if(get_field('select')): ?> <p>セレクトボックス:<?php the_field('select'); ?></p> <?php endif; ?>
チェックボックス
<?php if(get_field('check')): ?> <ul> <?php $check = get_field('check'); foreach ( (array)$check as $value ) { ?> <li><?php echo $value; ?></li> <?php } ?> </ul> <?php endif; ?>
ラジオボタン
<?php if(get_field('radio')): ?> <p>ラジオボタン:<?php the_field('radio'); ?></p> <?php endif; ?>
真/偽
<?php if(get_field('boolean')): ?> 真の場合 <?php else : ?> 偽の場合 <?php endif; ?>
フィールドタイプ「真/偽」は、チェックボックスにチェックを入れなかった場合(false)はget_field()で判定されません。 よって「false」のケースを出力したい場合は上記のようなコードで。
フィールドタイプ【選択肢】
ページリンク
<?php if(get_field('pagelink')): ?> <?php $relational = get_field('pagelink'); foreach( (array)$relational as $value) { ?> <p>ページリンク:<a href="<?php echo $value; ?>"><?php echo $value; ?></a></p> <?php } ?> <?php endif; ?>
「ページリンク」は選択したページのURLが配列として取得できます。
投稿オブジェクト
<?php if(get_field('post_object')): ?> <?php $post_object = get_field('post_object'); foreach ( $post_object as $object ) { ?> <p>投稿オブジェクト:<a href="<?php echo $object->guid; ?>" target="_blank"><?php echo $object->post_title; ?></a></p> <?php } ?> <?php endif; ?>
前項の「ページリンク」ではURLだけでしたが、「投稿オブジェクト」では選択したページのオブジェクト全体が取得できます。
タクソノミー(返り値が「Term Object」)の場合
<?php if(get_field('term')): ?> <?php $term = get_field('term'); ?> <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 } ?> </p> <?php endif; ?>
ユーザー
<?php if(get_field('user')): ?> <?php $aID = get_the_author_meta('ID'); the_field('user', 'user_' . $aID); ?> <?php endif; ?>
フィールドタイプ【jQuery】
Google Map
<?php if( get_field('googlemap') ) { $googlemap = get_field('googlemap'); ?> <script src="//maps.google.com/maps/api/js"></script> <div id="googlemaps" style="width:600px; height:400px;"></div> <script type="text/javascript"> google.maps.event.addDomListener(window,"load",function(){ var mapdiv=document.getElementById("googlemaps"); var myOptions = { zoom:17, center:new google.maps.LatLng("<?php echo $googlemap['lat']; ?>","<?php echo $googlemap['lng']; ?>"), mapTypeId:google.maps.MapTypeId.ROADMAP, scaleControl:true }; var map=new google.maps.Map(mapdiv,myOptions); var marker=[]; var infowindow=[]; marker[0]=new google.maps.Marker({ position:new google.maps.LatLng("<?php echo $googlemap['lat']; ?>","<?php echo $googlemap['lng']; ?>"), map:map, title:"<?php echo $googlemap['address']; ?>" }); }); </script> <?php } ?>
上記のコードでは最初にGoogle Maps APIを読み込んでいるので、コピペするだけで地図を表示することができます。
デイトピッカー
<?php if(get_field('datepicker')): ?> <p><?php the_field('datepicker'); ?></p> <?php endif; ?>
カラーピッカー
<?php if(get_field('colorpicker')): ?> <p style="background-color:<?php the_field('colorpicker'); ?>">カラーピッカー:<?php the_field('colorpicker'); ?></p> <?php endif; ?>
まとめ
「get_filed」でカスタムフィールドの値があるか調べ「the_filed」でカスタムフィールドの値を出力する形になります。
なので、項目名は「get_filed」の内側に記述し、値がない場合は項目ごと非表示という形にしておきましょう。