制作会社から制作会社じゃない会社に転職が決まりました。制作会社で学んだことを残らず記事にしたいと思います。

パンDKOTORI Blogの公式キャラクター「パンD」です。
コーディングWordPressAdvanced Custom Fieldsの出力

Advanced Custom Fieldsの出力

2015年03月25日WordPress プラグイン 便利コード 
Advanced Custom Fieldsの出力記事のアイキャッチ画像

『Advanced Custom Fields』の全フィールドタイプの出力コードを紹介します。コピペ用コードもあります。

まえがき

この記事ではWordPressのカスタムフィールド系プラグイン『Advanced Custom Fields』の出力にスポットを当てて解説していきたいと思います。
出力タグがAdvanced Custom Fieldsのオリジナルなので初めての人は迷うと思いますがこの記事を読めば大丈夫です。

↓出力じゃなくて『Advanced Custom Fields』の使い方等の解説はこの記事を見てね

『Advanced Custom Fields』の使い方

コピペ用『Advanced Custom Fields』出力タグ

とりあえず説明は要らないって人のためにコピペできる形でコード書いときます。
使ってね☆

<?  
//テキスト
$txt = get_field('txt');
if($txt){ ?><p>テキスト:<? echo $txt; ?></p>
<? }

//テキストエリア
$area = get_field('area');
if($area){ ?><p>テキストエリア:<? echo $area; ?></p>
<? }

//数値
$num = get_field('num');
if($num){ ?><p>数値:<? echo $num; ?></p>
<? }

//メール
$mail = get_field('mail'); 
if($mail){ ?><p>メール:<? echo $mail; ?></p><? }

//パスワード
$passwd = get_field('passwd');
if($passwd){ ?><p>パスワード:<? echo $passwd; ?></p>
<? }

//Wysiwyg エディタ
$editor = get_field('editor'); 
if($editor){ ?><p>Wysiwyg エディタ:<? echo $editor; ?></p>
<? }

//画像(返り値は「画像ID」)
$img = get_field('img');
$imgurl = wp_get_attachment_image_src($img, 'full'); //サイズは自由に変更してね
if($imgurl){ ?><img src="<? echo $imgurl[0]; ?>" alt=""></p>
<? }

//ファイル(返り値は「ファイルURL」)
$file = get_field('file');
if($file){ ?><a href="<? echo $file; ?>" target="_blank">ファイル</a></p>
<? }
 
//セレクトボックス
$select = get_field('select');
if($select){ ?><p>セレクトボックス:<? echo $select; ?></p>
<? }

//チェックボックス
$check = get_field('check');
if($check){
	foreach((array)$check as $value) {
		echo "セレクトボックス:".$value;
	}
}

//ラジオボタン
$radio = get_field('radio'); 
if($radio){ ?><p>ラジオボタン:<? echo $radio; ?></p>
<? }

//真/偽
$singi = get_field('singi'); 
if($singi){ ?><p>真/偽:<? echo $singi; ?></p>
<? }

//ページリンク
$pagelink = get_field('pagelink');
if($pagelink){ 
	foreach((array)$pagelink as $value) {
		echo "ページリンク:".$value;
	}
}

//投稿オブジェクト
$object = get_field('object'); 
if($object){ ?><p>投稿オブジェクト:<? echo $object->post_title; ?></p>
<? }

//関連(返り値は「Post Objects」)
$kanren = get_field('kanren');
if($kanren){ ?>
<p>関連:<? foreach((array)$kanren as $value) {
	echo '<a href="'.get_the_permalink($value->ID).'">'.$value->post_title.'</a>';
	if ($value !== end($kanren)) {
		echo ", ";
	}
} ?></p><? }

//タクソノミー(返り値は「Term Object」)
$taxo = get_field('taxo'); 
if($taxo){ ?><p>タクソノミー:<? 
foreach((array)$taxo as $value) {
	echo '<a href="http://kotori-blog.com/taxonomy/'.$value->slug.'">'.$value->name.'</a>';
	if ($value !== end($taxo)) {
		echo ", ";
	}
} ?></p><? }

//ユーザー(フィールドタイプは「セレクトボックス」)
$user = get_field('user');
if($user){ ?><p>ユーザー:<?
	echo '<a href="http://kotori-blog.com/anthor/'.$user['user_nicename'].'">'.$user['nickname'].'</a>';
?></p><? }

//ユーザー(フィールドタイプは「Multi Select」)
$user = get_field('user');
if($user){ ?><p>ユーザー:<?
foreach((array)$user as $value) {
	echo '<a href="http://kotori-blog.com/anthor/'.$value['user_nicename'].'">'.$value['nickname'].'</a>';
	if ($value !== end($user)) {
		echo ", ";
	}
} ?></p><? }

//Google Map
$googlemap = get_field('googlemap'); 
if($googlemap){ ?><p>Google Map:<? echo $googlemap['address']; ?> lat:<? echo $googlemap['lat']; ?> lng:<? echo $googlemap['lng']; ?></p><? }

//デイトピッカー
$datepicker = get_field('datepicker'); 
if($datepicker){ ?><p>デイトピッカー:<? echo $datepicker; ?></p>
<? }

//カラーピッカー
$color = get_field('color');
if($color){ ?><p>カラーピッカー:<? echo $color; ?></p>
<? } ?>

『Advanced Custom Fields』の出力の基本

『Advanced Custom Fields』の出力タグは基本こんな感じ!

<?php 
//普通に表示する場合
the_field($field_name, $post_id); ?>

<?php 
//変数に格納する場合
$field = get_field($field_name, $post_id, $format_value); ?>
$field_name表示したいフィールドのフィールド名を入れます。もちろんダブルクォーテーションで囲みます。
$post_id投稿IDを入れます。省略時は現在の投稿となります。
$format_value指定できる値はtrueかfalse。フィールドタイプ「Wysiwyg エディタ」等で値をwpautop()やnl2br()等でフォーマットするかどうかの指定です。falseにするとフォーマット無しで値を取得できます。

KoToRiは変数に格納してゴニョゴニョしたいタイプなので、基本get_field()で解説していきます。

フィールドタイプ「テキスト」の出力

これはそんなに問題ないでしょう。

<?  
//テキスト
$txt = get_field('txt');
if($txt){ ?><p>テキスト:<? echo $txt; ?></p>
<? } ?>

まんまです。「Prepend」や「Append」が指定されていれば前後にこの文字列が入った状態で値が返ってきます。

フィールドタイプ「テキストエリア」の出力

これも問題ないでしょう。まんま出力でちゃんと改行が入ります。

<?  
//テキスト
$area = get_field('area');
if($area){ ?><p>テキストエリア:<? echo $area; ?></p>
<? } ?>

フィールドタイプ「数値」の出力

これもそのまま出力です。

<?  
//数値
$num = get_field('num');
if($num){ ?><p>数値:<? echo $num; ?></p>
<? } ?>

フィールドタイプ「メール」の出力

これもそのまま出力です。

<?  
//メール
$mail = get_field('mail'); 
if($mail){ ?><p>メール:<? echo $mail; ?></p>
<? } ?>

フィールドタイプ「パスワード」の出力

これもそのまま出力です。テキスト系のフィールドはそのまんま出力すれば問題ないのです。

<?  
//パスワード
$passwd = get_field('passwd');
if($passwd){ ?><p>パスワード:<? echo $passwd; ?></p>
<? } ?>

フィールドタイプ「Wysiwyg エディタ」の出力

そのまま出力するとwpautop()でフォーマットされます。

<?  
//Wysiwyg エディタ
$editor = get_field('editor'); 
if($editor){ ?><p>Wysiwyg エディタ:<? echo $editor; ?></p>
<? } ?>

フィールドタイプ「画像」の出力

画像は返り値を「画像ID」にして↓のように出力するのが吉です。

<?  
//画像(返り値は「画像ID」)
$img = get_field('img');
$imgurl = wp_get_attachment_image_src($img, 'full'); //サイズは自由に変更してね
if($imgurl){ ?><img src="<? echo $imgurl[0]; ?>" alt=""></p>
<? } ?>

そしてサイズはこの記事を参考に自由に設定してください。
メディアのサイズを追加する[WordPress]

フィールドタイプ「ファイル」の出力

ファイルは基本直リンクだとおもうので返り値を「ファイル URL」にして↓のように出力するのが吉です。

<?  
//ファイル(返り値は「ファイルURL」)
$file = get_field('file');
if($file){ ?><a href="<? echo $file; ?>" target="_blank">ファイル</a></p>
<? } ?>

フィールドタイプ「セレクトボックス」の出力

セレクトボックスの出力はこんな感じ。

<?  
$select = get_field('select');
if($select){ ?><p>セレクトボックス:<? echo $select; ?></p>
<? } ?>

もし「複数の値を選択できるか?」の値を「はい」にしたら値が配列で返ってきます。
その場合は「チェックボックス」の出力コードを参考にしてください。

フィールドタイプ「チェックボックス」の出力

チェックボックスは値が配列で返ってくるのでこんな感じのコードになります。

<?  
$check = get_field('check');
if($check){
	foreach((array)$check as $value) {
		echo "セレクトボックス:".$value;
	}
} ?>

フィールドタイプ「ラジオボタン」の出力

ラジオボタンは単一選択なのでそのまま出力です。

<?  
$radio = get_field('radio'); 
if($radio){ ?><p>ラジオボタン:<? echo $radio; ?></p>
<? } ?>

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

真/偽をそのまま出力はあんまりしないですが、出力コードはこんな感じです。

<?  
$singi = get_field('singi'); 
if($singi){ ?><p>真/偽:<? echo $singi; ?></p>
<? } ?>

フィールドタイプ「ページリンク」の出力

指定したページのリンクが配列で返ってきます。

<?  
$pagelink = get_field('pagelink');
if($pagelink){ 
	foreach((array)$pagelink as $value) {
		echo "ページリンク:".$value;
	}
} ?>

フィールドタイプ「投稿オブジェクト」の出力

指定したページの情報が$postのようなオブジェクト型で返ってきます。
この例はタイトルを表示してるけどパーマリンクとかIDとかも取ってこれるので便利です。

<?  
$object = get_field('object'); 
if($object){ ?><p>投稿オブジェクト:<? echo $object->post_title; ?></p>
<? } ?>

「投稿オブジェクト」は「複数の値を選択できるか?」を「はい」にすると複数選択できるようになって、値が配列で返ってきますがそれをするくらいなら次に紹介する「関連」をつかいましょう。

フィールドタイプ「関連」の出力

返り値を「Post Objects」にして↓のコードのように出力するのをオススメします。
返り値を「Post Objects」にすると値が$postのようなオブジェクト型で返ってきます。
ただ、この関連は複数選択可なので値が配列になっています。
出力コードはこんな感じです。

<?  
//関連(返り値は「Post Objects」)
$kanren = get_field('kanren');
if($kanren){ ?>
<p>関連:<? foreach((array)$kanren as $value) {
	echo '<a href="'.get_the_permalink($value->ID).'">'.$value->post_title.'</a>';
	if ($value !== end($kanren)) {
		echo ", ";
	}
} ?></p><? } ?>

フィールドタイプ「タクソノミー」の出力

関連と同じように返り値を「Term Object」にして↓のコードのように出力するのをオススメします。
返り値を「Term Object」にすると$get_termのようなオブジェクト型で返ってきます。
ただ、複数選択可なので値が配列になっています。

<?  
//タクソノミー(返り値は「Term Object」)
$taxo = get_field('taxo'); 
if($taxo){ ?><p>タクソノミー:<? 
foreach((array)$taxo as $value) {
	echo '<a href="http://kotori-blog.com/taxonomy/'.$value->slug.'">'.$value->name.'</a>';
	if ($value !== end($taxo)) {
		echo ", ";
	}
} ?></p><? } ?>

フィールドタイプ「ユーザー」の出力

ユーザーはフィールドタイプを「セレクトボックス」にするか「Multi Select」にするかによって配列が多重になったりするので出力にも注意が必要です。

<?  
//ユーザー(フィールドタイプは「セレクトボックス」)
$user = get_field('user');
if($user){ ?><p>ユーザー:<?
	echo '<a href="http://kotori-blog.com/anthor/'.$user['user_nicename'].'">'.$user['nickname'].'</a>';
?></p><? }

//ユーザー(フィールドタイプは「Multi Select」)
$user = get_field('user');
if($user){ ?><p>ユーザー:<?
foreach((array)$user as $value) {
	echo '<a href="http://kotori-blog.com/anthor/'.$value['user_nicename'].'">'.$value['nickname'].'</a>';
	if ($value !== end($user)) {
		echo ", ";
	}
} ?></p><? } ?>

フィールドタイプ「Google Map」の出力

Google Mapは値が場所の名称と経度、緯度が配列になって返ってきます。
出力コードはこんな感じ。

<?  
//Google Map
$googlemap = get_field('googlemap'); 
if($googlemap){ ?><p>Google Map:<? echo $googlemap['address']; ?> lat:<? echo $googlemap['lat']; ?> lng:<? echo $googlemap['lng']; ?></p><? } ?>

フィールドタイプ「デイトピッカー」の出力

選択した日付が「表示フォーマット」で指定したフォーマットで出力されます。

<?  
//デイトピッカー
$datepicker = get_field('datepicker'); 
if($datepicker){ ?><p>デイトピッカー:<? echo $datepicker; ?></p>
<? } ?>

フィールドタイプ「カラーピッカー」の出力

選択した色が16進数で返ってきます。出力コードはそのまんまです。

<?  
//カラーピッカー
$color = get_field('color');
if($color){ ?><p>カラーピッカー:<? echo $color; ?></p>
<? } ?>

まとめ

『Advanced Custom Fields』の基本的な使い方等の説明は↓の記事を参考にしてね。
『Advanced Custom Fields』の使い方

この記事や↑の記事を書くために『Advanced Custom Fields』検証しまくりましたが改めてすごいプラグインだと思い知りました。
フィールドタイプ「関連」とか一回も使ったこと無かったけどめちゃくちゃ便利じゃん。
振り返ると使える機会めっちゃあります笑
今までスルーしていたなんて愚かでした><

てか本当に
『Advanced Custom Fields』が多機能すぎて記事書くのがマジで大変でした。
もう一生やりたくありません笑

とはいえこの記事がみんなの役に立てばいいなと思っています。
コピペ用のコードとか使いづらかったら言って下さい。

シェアするみんなシェアしてね

フォローするフォローする

いつもKOTORI Blogをご覧いただきありがとうございます。Facebook、Twitterを通じて、皆様と交流していき色んな情報を共有していければな~と思ってます。お気軽に登録してください!

基本フォロー返します。

RSSを登録する

RSSはこちらから。

follow us in feedly

Feedly使ってる人はこちらから。

Buy me a Beer

動く!パンDのLINEスタンプ
好きな人にアプローチスタンプ
パンDのLINEスタンプ

関連する記事関連する記事も読んでみてね

コメント

  • Pingback: ネットアンサー55 備忘録()

  • Pingback: カスタム投稿を使って作品紹介用の登録ページを作る | 20歳からのプログラミング()

  • Nebokn

    初めまして。
    ちょっと質問しても良いでしょうか?

    フィールドタイプ「関連」の出力ですが、関連先のアイキャッチ画像を取得して表示することは出来無いのでしょうか。
    wp_get_attachment など試してみたのですが、うまく行かず躓いています。
    よろしくお願いします。

    • kotoriblog

      Neboknさん

      お返事が送れてしまってごめんなさい。

      この記事の「関連」の出力コードを見てもらえれば分かると思いますが、
      get_the_permalink($value->ID)
      で関連記事のパーマリンクを出力してますよね。
      $value->IDで関連記事のIDを扱えます。

      記事IDを扱えれば、アイキャッチも取得できます。
      get_post_thumbnail_id($value->ID)

      後は煮るなり焼くなりお好きにどうぞ。
      因みにアイキャッチ画像の出力に関して下記にまとめてあるので合わせて参考にしていただければと思います。

      /wordpress/eyecatch_info/

      って、もう既に解決されてるかもしれませんが。。。

      • Nebokn

        回答有難うございます。

        参考ページも拝見し色々試して解決しました。
        お恥ずかしい話ですが、結果、書き方の問題でした。

        ありがとうございました。

  • segayuu

    プラグインの説明、ありがとうございます。おかげで運用が可能になりました。
    ただ、「画像の出力」でコピペだけでは動かなかったですので修正を。
    $img = get_field(‘img’);
    この式ですと「画像オブジェクトの配列」を返します。故に「画像ID」を出すにはもう一工夫が必要です。
    具体的には次の式です。
    $img = get_field(‘img’)[‘id’];
    「画像オブジェクトの配列に含まれているID」を抽出するので、これで動きます。

    • kotoriblog

      segayuuさん
      コメントありがとうございます。

      KoToRi的に画像のフィールドを扱う場合は、プラグインの設定で「返り値」をIDにしておけば間違いないかな~と思って、この記事も「返り値」をIDに設定すること前提で出力コード書いてました。

      ただ、確かデフォの返り値は「オブジェクト」だったと思うので、その場合はsegayuuさんのご指摘のように出力すればよいという事ですね。

      get_field(‘img’)[‘id’];

      ↑こんな構文使えるんですね。恥ずかしながらはじめて知りました。

      KoToRiはphp完全独学なので基本的なことを知らなかったりするのでご指摘ありがたいです。勉強になりました。ありがとうございます。

      • segayuu

        いえいえ、こちらこそありがとうございます。設定でIDのみに切り替えできるんですね(汗
        ほんとうのところ、下記の通り分解してみると、どう動作するかがしっかりわかると思います。

        $img = get_field(‘img’);?>
        <!–
        <?php $imgid = $img['id']; //先の構文は$imgを変数として書いてないだけで同様の動作

        自分は基本、短く書けるように癖が付いているだけなので・・・

        • segayuu

          htmlコメントとphpタグ打ったら安全のためか表示が潰れました(汗
          むしろ変な実行しなくて助かりました。

          $img = get_field(‘img’);
          $imgid = $img[‘id’];

          上記のように書くのと同様の動作なので、理解を深めるならもう一行多く欲しいところです。
          更にデバッグ用に$imgを表示したい(さっきはそのコードで潰れた)ので、二行。
          自分は短く書くのと変更箇所を減らしたかったからこう書いたまでですので、短く書く際はコメント推奨です。

          • kotoriblog

            このコメントシステムphpエスケープしてくれないんですよね。
            ともあれ詳しい解説までありがとうございます。理解が深まりました!

  • samohan

    初めまして。
    Wordpressは手探りであまり詳しくないので、
    この記事を参考にさせて頂き大変助かりました!

    1点質問したいのですが、googemapの出力について、
    上記の設定ですと住所と緯度経度の表示のみだと思うのですが、
    緯度経度を非表示にしてGoogeMAP自体を表示させるには
    どうすればよいでしょうか?

    • kotoriblog

      samohanさん
      こんばんは!コメントありがとうございます^^

      GoogleMap自体を表示させるのは
      カスタムフィールドで取得できる経度緯度を利用してGoogleMapのAPIで表示する必要があるみたいです。

      公式のリンクを載せときます。
      http://www.advancedcustomfields.com/resources/google-map/

      趣旨が違うのですが、GoogleMap関連のKoToRiの記事も載せときます。
      /js/googlemaps_customcolor/

  • samohan

    ありがとうございました!
    枠は表示されましたが中身は表示されないという感じになったので、
    諦めます…

  • nini

    はじめまして。
    フィールドタイプ「関連」の出力について質問してもよろしいでしょうか。

    関連:<? foreach((array)$kanren as $value) {
    echo 'ID).'”>●‘;
    if ($value !== end($kanren)) {
    echo “, “;
    }
    } ?>
    ●にアイキャッチ画像ではなくほかの画像を表示していのですが、そのような事は可能でしょうか。

    • kotoriblog

      niniさん
      コメントありがとうございます。
      すみません。
      ちょっと質問の意味が理解できませんでした><
      詳しく説明してもらえますか??
      よろしくです。

  • hatsu

    初めまして。

    記事を読ませて、大変参考になりました。

    一つご質問させてください。

    ラジオボタンに
    ・Aさん
    ・Bさん
    ・Cさん
    ・Dさん

    を仮に作ったとします。

    ・Aさん(または、Bさん、Cさん、Dさん)の投稿ブログだけの最新記事5件表示をさせたい場合はどうしたらよいでしょうか。

  • umeumeaaaaaaaaa

    プログラム未経験者で申し訳ないのですが、「投稿の編集」で入力したカスタムフィールドを公開するには、このページの冒頭で紹介いただいている<?//テキストから始まるコードをどこにコピペすればよいのでしょうか???

    病院を紹介するサイトを作りたいとおもっていて、病院の写真の右か下に「入院可」や「休診日」などのカスタムフィールドを公開したいと思っています。

    「投稿の編集」でカスタムフィールドを入力するところまではできたのですが、いざ投稿を公開しても入力したカスタムフィールドが見えません。

    お手数ですがよろしくお願い申し上げます。

  • ume

    プログラミング未経験者で申し訳ないのですが、「投稿の編集」で入力したカスタムフィールドを公開するには、このページの冒頭で紹介いただいているコードをどこへ入力したらよいのでしょうか?
    病院の紹介をするサイトを作りたいと思っていて、病院の写真の右か下に「ベッドあり」「休診日」などの項目をAdvanced custom Fieldsを使って表示させたいと考えています。
    「投稿の編集」でカスタムフィールドを入力するとこまではできたのですが、Advanced custom Fieldsで入力した項目を公開するのがうまくできません。
    お手数ですがよろしくお願い申し上げます。

    • kotoriblog

      umeさん
      こんにちは。お返事おくれてごめんなさい。

      普通に記事のタイトルとか本文とかは出せますか?
      ループの中でthe_title()とか記述してると思いますけど、同じ要領でループの中にコード記述すれば
      表示されると思います。
      もし言っている意味が分からないようでしたら、もう少しWPとphpを勉強された方がよいかもしれません。

  • daiki

    運営者様

    良記事ありがとうございます。こちら参考にさせて頂きました。

    今回、この記事のAdvanced Custom Fieldsについてお伺いしたい事があります。
    こちらのプラグインを利用しておりまして、その画像をメディアライブラリと画像URL(直リンク)で行いたいと思います。

    デフォルトですと、フィールドで画像を入れる際には、メディアライブラリの画像を使うような形になっているかと思います。
    これを、メディアライブラリと合わせて画像URL(直リンク)で選んで行いたいと思います。

    どのようにすれば良いか、ご教示お願い出来れば幸いです。
    バージョンは常に最新版を利用しております。

    p.s.

    デフォルトの機能や他のプラグインを掛け合わせてという事でしか出来ないようでしたら、それらも教えて頂ければ幸いです。

    • kotoriblog

      daikiさん
      コメントありがとうございます。

      画像直リンクは、出来ないと思います。聞いたこと無いので。
      直リンクで画像アップできるプラグインはあるかもですが、advanced custom fieldsに組み込むのは、1から改造しないとできないと思います。(最近wp触ってないので情報古いかもですが)

  • 高橋康平

    始めまして。
    初めて記事を拝見させていただき、非常に初心者でもわかりやすいと思いました、

    私、現在wpを勉強中で、まったく無知なのですが、店舗検索サイトをwpで制作しようと考えており、
    今回コチラのプラグインを使用させていただきましたが、
    出力方法がいまいちわかりません。

    上記のコードをどこに入力すればよいのかをお教えいただければと思います。

    宜しくお願いいたします。

    • kotoriblog

      高橋さん
      初めまして。コメントありがとうございます。

      テンプレートの中の記事内容を出力しているループの中に出力コードを記述します。
      もちろんget_field(‘○○’);の○○には出力するフィールド名を入力してください。
      もしこの説明でも理解が難しければ
      http://dotinstall.com/lessons/basic_wordpress
      この辺でお勉強から始めてください。

  • マサ

    kotoriさん、とても参考になる情報ありがとうございます!
    もし可能でしたら、一つだけご教授頂けないでしょうか?

    数値で「0」を出力したいのですが、空と見なされて表示されません。
    なので、if(isset($aaa))を試してみたのですが、今度は未入力でも表示されてしまうようになってしまいました。。。

    • kotoriblog

      マサさん
      コメントありがとうございます。
      確かに数値で0だと、空とみなされてしまいますね。
      空=0
      なので、未入力と0で、表示を分ける必要があるのであれば
      私だったら諦めて普通のテキストフィールドで代替します。
      答えになっておらずすみません><

      • マサ

        kotoriさん、ご回答ありがとうございました。
        ご助言の通り、テキストフィールドに変更しましたが、
        0はやはり空扱いなので、全角0にしないといけないのですね。
        ちょっとすっきりしませんが、ゼロはゼロなのでOKとしようと思います。
        ありがとうございました!

  • Wordpress初心者

    はじめまして。素人の質問で申し訳ないのですが、「コピペ用出力タグ」はどこのコピペすればよいのでしょうか?