新潟県妙高市を拠点とする、ホームページと広告の相談相手

MENU [+]閉じる [×]
Advanced Custom Fieldsで使用頻度の高い項目の出力方法

WordPressを使っていると「こういう場合に、もう少し入力項目に自由度があると便利だなぁ」と思うこともありますよね(*^▽^*)?

もしくは「パソコンが得意でないお客さんでも楽にコンテンツが作れるように工夫してあげたいなぁ」かも知れません。

今回は、そういう場合に便利で、私も重宝させていただいているプラグイン「Advanced Custom Fields(アドバンスド・カスタム・フィールズ)」のご紹介です。

この記事の目次

Advanced Custom Fieldsとは?&設定方法

今回私がご紹介するプラグインは、個人的にもよく使用させていただいているプラグインで、カスタマイズ性の高さが特に優れていると思います。

テキスト系の項目はもちろんのこと、ラジオボタンやチェックボックスなどでの選択した項目の表示も可能ですし、画像のURLやWordPress上のIDなどの表示の切り分けも可能です(^^)

他のWordPressプラグインと同様に、インストールして有効化してください。

そうすると、WordPressの管理画面の左側のメニューに「カスタムフィールド」という歯車アイコンつきの項目が表示されると思います。

子要素で3種類選べますが、[Export]は設定したカスタムフィールドのフォーマットを別サイトにも取り込める機能ですし、[Add-ons]というのはより詳細な・応用的な機能となります。

それに関してはまた機会があればご紹介するとして、今回は[カスタムフィールド]の設定のしかたについて少し触れますね(^^)

まずは「フィールドグループを編集」の欄から「新規追加」を選びます。

詳細は省きますが「デフォルトの投稿ではこの形式のフィールドグループ、固定ページの場合はこのフィールドグループ、そして…」と、ページのタイプや投稿するカテゴリ、さらにはログインユーザーのタイプによってもフィールドグループの切り替えができます。

フィールドグループ内の1個1個の項目について、それぞれ[フィールド順序][フィールドラベル][フィールド名][フィールドタイプ]を指定できます。

複数個のカスタムフィールドを指定したい場合は、フィールドグループ設定欄の右下にある「+フィールドを追加」というボタンを押して、任意の個数だけカスタムフィールドを追加することができます。

フィールドラベルやフィールドタイプももちろん適切なモノを設定していただくとしまして、中でも特にフィールド名の文言(スペル、つづり)が、「Advanced Custom Fields」のカスタムフィールドに入力した値を出力するうえで特に重要となります。

ページの先頭へ戻る

Advanced Custom Fieldsの出力方法

「Advanced Custom Fields」の出力方法は、1個ずつのカスタムフィールドの「フィールドタイプ」によって異なります。

こちらでは、使用頻度が高いと思われるフィールドタイプに絞ってご紹介します。

フィールドタイプが「テキスト」「テキストエリア」「数値」「メール」など、基本的に文字のみの場合

「Advanced Custom Fields」の出力方法、つまりWebページ上に表示させる方法ですが、だいたいの項目はコチラの形式で表示できます。

<?php $myk_field_name = get_field('myk_field_name');if($myk_field_name){ ?>
入力した値→<?php echo $myk_field_name; ?>
<?php } ?>

phpのコード内で頭に付いている[myk_]っていうのは「妙高Web屋」にちなんだ接頭語なので、あんまり気にしないでください(^^;)

付けなくても他で誤りさえ無ければ動きますが、念のため、後になってphpを読み返しても分かりやすいような表記にしておくことをオススメします。

フィールドタイプが「ファイル」など、別ページへのリンクを伴う場合

これも使うケースは多々あるかも知れません、フィールドタイプに「ファイル」を選択していただいて、返り値が「ファイルURL」になっていることが前提です。

<?php $myk_field_name = get_field('myk_field_name');if($myk_field_name){ ?>
<a href="<?php echo $myk_field_name; ?>" target="_blank">選択したファイルへのリンク</a>
<?php } ?>

if文の中にecho(値を表示するヤツ)を挟み込むのはテキスト系と変わりません。

違いがあるとすれば、ファイルの選択項目として何も選ばなかった場合は、包んでいるaタグから丸ごと表示しないというもの。

もしも[if($myk_field_name){ …]のif文をaタグのhref属性の中に書いてしまったら、ファイルを選択しない場合は、どこにもリンクしない要素がWebページに表示されてしまうことになります(^^;)

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

基本的な考え方は「ファイル」と変わりませんが、Webサイトの種類によって画像は特に使用頻度が高くなることが予想されるので、独立した項目として設けておきますね(^^)b

こちらはフィールドタイプに「画像」を選択していただいて、返り値が「画像URL」になっていることが前提です。

<?php $myk_field_name = get_field('myk_field_name');if($myk_field_name){ ?>
<img src="<?php echo $myk_field_name; ?>" alt="選択した画像" width="任意" height="任意" />
<?php } ?>

こちらも画像を選択しない場合はimgタグごと表示しないという形式のモノです。

念のためですが、widthとheightにはWebサイトの設定に応じて値を設定するか、場合によっては空にしてください。

少なくとも「任意」は消してくださいね(^^;)

フィールドタイプが「チェックボックス」の場合(1個または複数個の選択項目を表示する)

まず、チェックボックスの項目のうち最初に選択した項目を表示する場合についてです。

例えば、選択項目に「新井」「関山」「赤倉」のような項目があったとして、「選択し」には「ラベル」としてそれぞれのローマ字表記の値が設定されていると仮定したとき、複数個選択可能なチェックボックスの出力方法はこのようになります。

<?php $myk_field_name = get_field_object('myk_area'); ?>
<?php if ($myk_field_name[value][0]=='arai') { ?>
<p>妙高市のオススメスポットは【新井】などです!</p>
<?php } ?>
<?php if ($myk_field_name[value][0]=='sekiyama') { ?>
<p>妙高市のオススメスポットは【関山】などです!</p>
<?php } ?>
<?php if ($myk_field_name[value][0]=='akakura') { ?>
<p>妙高市のオススメスポットは【赤倉】などです!</p>
<?php } ?>

ただ、せっかく複数選べるチェックボックスで、1個だけしか選択肢ない場合も「まれ」ですよね…(^^;)

1個しか選ばない前提なら、ラジオボタンを使えば良いでしょうから。

 

次に、チェックボックスの選択項目に「特定の値」がある場合のご紹介です。

<p>妙高市のオススメスポットは、
<?php $myk_field_name = get_field('myk_field_name'); ?>
<?php if(in_array('arai', (array)$myk_field_name)) { ?>
<?php echo '【新井】'; ?>
<?php } ?>
<?php if(in_array('sekiyama', (array)$myk_field_name)) { ?>
<?php echo '【関山】'; ?>
<?php } ?>
<?php if(in_array('akakura', (array)$myk_field_name)) { ?>
<?php echo '【赤倉】'; ?>
<?php } ?>
です!</p>

上記のようにすると、「妙高市のオススメスポットは、【@@】【@@】です!」と、選択した値に応じて表示されます。

 

また、チェックボックスの項目が数十個から100個以上ある場合は、別の出力方法を検討した方がよいと思います。

例えばこういう方法だといかがでしょうか?

私の環境では思うように動作しましたが、思うように動かない場合はご一報くださいm(__)m

<?php $myk_field_name = get_field('myk_area'); ?>
<?php if ($myk_field_name){foreach ($myk_field_name as $item){ ?>
<?php echo $item; ?>
<?php }} ?>

「myk_area」っていう名前のフィールドをとってきて、チェックされてた項目は表示させてください〜、という表現です(^^;)

フィールドタイプが「ラジオボタン」の場合(選択値の表示と、選択値による条件分岐)

ラジオボタンは原則1個のみ選択でしょうから、出力形式はこのようになるでしょうかね(^^)

<?php $myk_field_name = get_field('myk_area');if($myk_field_name){ ?>
<p>妙高市のオススメスポットは【<?php echo $myk_field_name; ?>】です!</p>
<?php } ?>

仮に上記のチェックボックスと同様の選択項目だとしたら、新井・関山・赤倉のうち選択した項目が1行だけ表示されるはずです。

ラジオボタンの場合は「この項目を選択した場合はこの処理です」みたいな処理が必要になることもあるかと思います。

そういう場合は、このような処理だといかがでしょう?

もちろんですが「echo」の行はご自由にカスタマイズして条件ごとの処理にしてください(^^)b

<?php $myk_field_name = get_field('myk_field_name');if ($myk_field_name == 'arai') { ?>
<?php echo '新井'; ?>
<?php } elseif ($myk_field_name == 'sekiyama') { ?>
<?php echo '関山'; ?>
<?php } elseif ($myk_field_name == 'akakura') { ?>
<?php echo '赤倉'; ?>
<?php } elseif ($myk_field_name == false){ ?>
<?php echo 'オススメスポット選択無し'; ?>
<?php } ?>

ページの先頭へ戻る

ほかにも、Googleマップだとか、日付だとか色だとか、「Advanced Custom Fields」で対応してくださる範囲が幅広くって、個人的にいつも助けられていますm(__)m

どなたか存じませんが、ホントに感謝申し上げます。

この記事が少しでも、私のように「カスタムフィールドでサイト作りたい」と思っている方のお助けになれば幸いです(*^▽^*)

この記事の感想をお寄せください

[Advanced Custom Fieldsで使用頻度の高い項目の出力方法]の感想を、下記のリンク先の「感想投稿フォーム」よりお気軽にお寄せください。
メールアドレスは不要です。

感想投稿フォームへ

いいね!と思っていただけたらSNSでシェアしてください♪

関連記事一覧:Advanced Custom Fieldsで使用頻度の高い項目の出力方法

WordPressでホームページを制作したことのある方なら「ワードププレスのディレクトリ問題」に直面された方もいらっしゃるかと思います。 WordPres …… 続きを読む

ホームページを作る上で「titleタグ(タイトルタグ)」というものが重要な要素の一つになります。 皆さんがブログを書いている場合は、その投稿画面で入力した …… 続きを読む

シリーズ「妙高Web屋のホントは公表したくないホームページ制作」です。 皆さんはホームページを作りたいとお考えになって、制作業者さんやデザイナーさんといっ …… 続きを読む

Copyright (C) 妙高Web屋 All Rights Reserved.

ページの先頭へ