wordpressのプラグイン『Advanced Custom Fields』って超便利！【出力編】

wordpress ボク

前回、『Advanced Custom Fields』の設定方法を書きましたが、今回は出力編です。
テンプレート側にPHPのコードを書いていくわけですが、特に難しいこともありません。

基本的な出力

フィールド名が「text」の基本的な出力コードは、

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

となります。これで出力されます。超簡単ですね。

ただ、空欄の場合は表示したくない場合もありますよね。
そういう時は、値があるかどうかを判定して、あったら出力するようにします。

<?php
if(get_field('text')):?>
  テスト出力：<?php the_field('text');
endif;
?>

または

<?php
$text = get_field('text');/*1度変数に代入*/
if($text):?>
  テスト出力：<?php echo $text;
endif;
?>

これで値がなければ、「テスト出力」ごと表示されません。
どうですか？簡単でしょ？
ここで使った「get_field()」は値を取得してくれる関数です。
「echo get_field(‘text’);」でも「the_field(‘text’);」と同じように出力できます。「echo」が必要になるところが違います。

ここまできたら、『Advanced Custom Fields』で設定した「フィールドラベル」も一緒に出力したくなりますよね。
そういう場合は「get_field_object()」を使います。

<?php
$text = get_field_object('text');/*変数に代入*/ if(get_field('text')):
  echo $text["label"];/*フィールドラベル*/
  echo $text["value"];/*入力された値*/
endif;
?>

基本的にはこれで、ほとんどのフィールドタイプで対応できます。

フィールドタイプが画像の場合

ここからは、少し注意が必要な出力を。
ここにあるもの以外は、たいてい基本的な出力で問題ないはずです。

フィールドタイプで画像を選んだとき、返り値で「画像オブジェクト」「画像URL」「画像ID」の3種類あったと思います。
※基本的には「画像ID」しか使ったことがないので、「画像ID」の出力法だけ紹介します。

<?php
$img = get_field('img');
$image = wp_get_attachment_image_src($img,'thumbnail'); /*thumbnail はサイズです。他に full large medium などがあります*/
$attachment = get_post($img);/*この画像へのパスなどの情報を取得しています。*/
if($image):?>
  <a href="<?php echo $attachment->guid;?>"><img src="<?php echo $image[0];?>" /></a>
<?php endif;?>

出力した画像をクリックすると、拡大画像が表示されるようになるはずです。
「$get_post()」で画像の様々な情報を取得しています。例えば、「$attachment->post_title;」で記事のタイトルが取得できます。

選択肢の場合

ラジオボタンのように単一選択ならば、「the_field()」で大丈夫です。
ただし、チェックボックスやセレクトボックスで複数選択を許可した場合など、配列で値が返されるためループで回す必要があります。
チェックボックスを例にあげて説明します。

<?php
$checkbox = get_field('checkbox');
if($checkbox):
  foreach($checkbox as $checkbox):
    echo $checkbox;
  endforeach;
endif;
?>

「the_field()」で出力すると、「赤,青」のようにカンマで区切られます。
設定の「選択し」で「red：赤」のように設定していると、「red」と出力されます。
そこを、「赤」と出力するには、foreachの部分を下記のようにしてください。

while(list($key,$value)=each($checkbox[choices])):
  echo $key;/*redの出力*/
  echo $value;/*赤の出力*/
endwhile;

フィールドタイプ「真/偽」

真/偽を出力することはあまりないと思いますが、条件判定でよく使う項目になりますので、簡単に説明します。
返り値は「真」の場合「1」、「偽」の場合「0」が帰っていきます。
よく使うコードはこんな感じでしょう。

<?php
if(get_field('true')==1):
  真のときの処理
else:
  偽のときの処理
endif;
?>

「Relation」の出力

配列やオブジェクトで返されるものが多いので、ここでも注意が必要です。
「ページリンク」は基本「the_field()」でOKですが、複数選択を許可した場合、セレクトボックスのときのように処理してください。

「投稿オブジェクト」

指定したページがオブジェクト（WP_post）となって返ってきます。
実際に使うとしたらこんな感じですかね。

$object = get_field('object'); 
if($object):?>
  <a href="<?php echo $object->guid;?>">
    <?php echo $object->post_title;/*タイトル*/ ?>
    <?php echo $object->post_excerpt;/*概要*/ ?>
 </a>
<?php endif;?>

複数選択を許可した場合、ループで回さないといけませんよ。
関連記事とかにして使えるかもしれませんが、次の「関連」の方が使いやすいです。

「関連」

関連記事なんかで使うやつですね。
返り値（Return Format）が「Post Objects」と「PostIDs」がありますが、「PostIDs」にすると記事のIDだけが返ってきます。
そこから、いろいろ処理するよりは、「Post Objects」にしてオブジェクトとして取得した方が楽です。
そういうわけで、「Post Objects」にした場合のコードはこんな感じです。

<?php $relations = get_field('relation');
if($relations):
  foreach($relations as $relation):?>
    <a href="<?php echo get_the_permalink($relation->ID);?>"><?php $relation->post_title;?></a>
    <?php if($relation !== end($relations)):
      echo "<br />";
    endif;
  endforeach;
endif;
?>

「投稿オブジェクト」「関連」しか説明してませんが、他も基本的には同じような感じです。

フィールドタイプが「Google Map」の場合

これは結構、感動ものですよね。
コードは下記のようになります。

<?php
$googlemap = get_field('googlemap'); 
if($googlemap):
  echo $googlemap['address'];//住所を出力
  echo $googlemap['lat'];//緯度を出力
  echo $googlemap['lng'];//経度を出力
endif;
?>

ピンの位置を微調整すると、住所も変わってしますので、住所は別のフィールドを作っておいた方がいいかもしれませんね。
せっかく、緯度経度が出力できるなら、実際にgooglemapで表示させちゃいましょう！

GoogleMapで表示

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
$(document).ready(function(){
  //緯度経度を代入してピンの位置を決めます
  var centerPos = new google.maps.LatLng(<?php echo $googlemap['lat'];?>,<?php echo $googlemap['lng'];?>);
  var mapOptions = {
    zoom:16, //地図のzoom
    center:centerPos,//地図の中心の座標 ここではピンの位置が地図の中心にしてます。
    mapTypeId:google.maps.MapTypeId.ROADMAP,
    scrollwheel:false //マウスのスクロールホイールで動かなくするやつ
  };
  var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
  var markerOptions = {
    position:centerPos,
    map:map,
  };
  var marker = new google.maps.Marker(markerOptions);
});
</script>
<div id="map_canvas" style="width:100%;height:200px;"></div>

どうですか？
表示されたでしょう。

今回、この記事を書くにあたり、改めていろいろ試してみました。
『Advanced Custom Fields』の機能が多すぎて、全部紹介できませんでした。
っていうか、使ったことのない機能もたくさんあったんだなと思い知らされました。
ボクが愛してやまない『Advanced Custom Fields』の紹介でした。

「関連」とか1度は使ってみたいなと思いました。

関連記事