wordpressのプラグイン『Advanced Custom Fields』って超便利!インストールから使い方まで

『Custom Post Type UI』でカスタム投稿の作り方を前回書きましたが、カスタム投稿が欲しいときって、wordpressをデータベースとして使いたい時ですよね。
例えば、ECサイトや不動産や…etc。
そうなると、「タイトル」や「記事」「カテゴリー」「タグ」以外にも登録したい項目がでてきます(このサイトでいうと「制作実績」の「URL」の部分とかですかね)。
そんな時に便利なのが、『Advanced Custom Fields』です。
簡単にいえばカスタムフィールドを作るプラグインなんですが、何とも使いやすい。
ですから、ここに使い方とかを書いておこうと思います。

『Advanced Custom Fields』ダウンロード

カスタムフィールドグループを作りましょう

『Advanced Custom Fields』をインストールすると管理画面のサイドバーに「カスタムフィールド」が追加されています。
「新規追加」で新しいフィールドグループを作ります。
タイトル(グループ名)はわかりやすいものを付けましょう。
さぁ、フィールドを作っていきますよ。

まずは「フィールドラベル」と「フィールド名」を決めます。

フィールドラベル 投稿編集画面などに表示されるラベルです。
わかりやすいものにしましょう。
フィールド名 テンプレート上でフィールドの値を表示させるコード名です。
半角英数字で設定しましょう。

次にフィールドタイプですが、本当に種類が多くて助かってます。

基本

テキスト

普通のテキストフィールドです。

フィールド記入のヒント 説明が必要な時などに使います。
入力欄の上に表示されます。
必須か? 「はい」にすると、ラベルに「*」が付いて、未入力の状態では公開できなくります。
デフォルト値 あらかじめ入力しておきたい初期値を設定できます。
Placaholder Text プレースホルダー、入力欄に灰色で表示されるアレです。
入力例など入れるといいかもしれません。
Prepend 入力欄の前に表示されます。
価格などの「¥」マークなんかに使えますね。
Append 入力欄の後ろに表示されます。
単位などに使えますね。
フォーマット HTMLタグを許可させるかどうかです。
「Convert HTML into tage」→HTMLタグを許可します。
「No formatting」→HTMLタグを入力してもそののまま文字として表示されます。
Character Limit 入力文字数の制限をかけることもできます。
条件判定 セレクトボックス・チェックボックス・ラジオボタンなどで指定したものを選択すると、表示されるように設定できます。

 

必須項目にして、プレースホルダーを付けてみました。

acf_text

テキストエリア

普通のテキストエリアです。
「フィールド記入のヒント」「必須か?」「デフォルト値」「Placaholder Text」「Character Limit」はテキストと同じです。

Rows テキストエリアの高さ(行数)を設定できます。
フォーマット 「はい」にすると、ラベルに「*」が付いて、未入力の状態では公開できなくります。
デフォルト値 「Convert HTML into tage」「No formatting」はテキストと同じです。
「Convert new lines into <br /> tags」→開業を<br />として反映されるので、
テキストエリア内で改行すれば、実際に改行されて表示されます。

 

必須項目にはせず、デフォルト値を入れてみました。

acf_textarea

数値、メール、パスワード

基本的には「テキスト」と同じです。
「数値」は数字しか入力できません。

Minimum Value 数値の最小値を設定できます。
Maximum Value 数値の最大値を設定できます。
Step Size 例えば「5」と設定すれば、5ずつ増減します。

 

「メール」はメールアドレス形式以外は入力できなくなります。
「パスワード」は「*****」などで表示されるようなります。

Content

Wysiwyg エディタ

通常の投稿の編集画面のツールバー付きの入力欄です。
メディアを追加できます。

ツールーバー 「Full」にすると「ツールバーの切り替え」ボタンが表示されます。
メディアアップロードボタンを表示するか? 「はい」にすると、画像を追加できるようになります。

画像

画像をアップロードできるようになります。

返り値 画像を表示させる時に使います。
「画像ID」にしておくとよいと思います。リサイズされた画像を使えるようになるからです。
※スイマセン、画像ID以外使ったことがありません。
プレビューサイズ 編集画面に表示される画像のサイズを選択できます。
編集画面が間延びしないように、サムネイルでいいと思います。
ライブラリ 「投稿にアップロードされる」を選択すると、この記事でアップロードした画像以外使えなくなります。
他のところで使った画像が使えなくなるので、同じ画像を何枚もアップロードすることになるので、「全て」がいいと思いますが、
画像が増えてくると、選択するのに時間がかかってしまうかもしれません。それでも「全て」がいいと思います。

ファイル

PDF等のファイルをアップロードできるようになります。

返り値 ファイルの場合はリンクを張ることになると思いますので「ファイルURL」でいいと思います。

選択肢

セレクトボックス

選択し red : 赤
blue : 青
と書くと値とラベルの両方を制御できるようになります。
<option value=”red”>赤</option> ってことですね。
※フィールドタイプを選択するところではきちんと「選択肢」になっているのに
無を許可するか? 「はい」にすると「-セレクトボックス-」というラベルが追加されます。
※必須項目なのに無を許可したらどうなるんでしょう?
複数の値を選択できるか? 複数選択を許可するかどうかです。
「はい」にすると返り値は配列になります。

 

acf_select

チェックボックス

セレクトボックスとほぼ同じです。

レイアウト 選択肢を縦並びか横並びかを選択できます。
編集画面をスッキリさせるために「水平」にすることが多いかなぁ

 

acf_check

ラジオボタン

セレクトボックス、チェックボックスとほぼ同じです。

選択し 選択肢「その他」を追加する
選択肢に「その他」が追加され、入力欄が表示されます。
「その他」の値を選択しに追加する
次回から入力したものがデフォルトで加わります。

 

 acf_radio_01
acf_radio_02
acf_radio_03

 

真/偽

True、Falseみたいなやつですね。チェックを入れないと返り値は「0」、入れると「1」が返ってきます。

メッセージ ラベルです。
「利用規約に同意する」みたいなのに使えますね。

 

acf_tf

Relation

ここからが『Advanced Custom Fields』の本当にスゴいところです。

ページリンク

過去に投稿した記事や固定ページを選ぶことができます。
テンプレート側ではURLで表示されます。

投稿タイプ 選択肢の範囲を選ぶことができます。
「post」なら投稿記事だけが選択肢に表示されます。同じように「page」は固定ページとなります。

投稿オブジェクト

基本的には「ページリンク」と同じですが、オブジェクトとして取得できるようになります。
テンプレート側で「タイトル」や「記事本文」も表示できるようになります。

タクソノミーでフィルタする 投稿タイプ以外にもタクソノミー(カテゴリーやタグ)でさりに絞り込んで選択できるようになります。

関連

関連記事を設定できます。

Return Format 投稿オブジェクトで取得するか、記事IDにするか設定できます。
フィルター 関連記事を「検索」して探すか、ポストタイプで絞り込むか選択できます。
Elemnts ここでチェックを入れたものが表示されます。
タイトル以外にも「アイキャッチ画像」や「投稿タイプ」を表示させて探しやすくできます。
最大投稿数 関連記事を何個まで登録できるようにするか設定できます。

タクソノミー

指定したタクソノミーのタームを選択肢に設定できるようになります。
基本的に右カラムに表示されるものなのですが、メインカラムに持ってこれるようになるということですかね。

タクソノミー ここで指定したもののタームが選択肢になります。
最初は「category」と「post_tag」しかないと思いますが、カスタムタクソノミーを作れば選べるようになります。
フィールドタイプ チェックボックスにするかラジオボタンにするか、単一選択にするか複数選択にするか指定します。
タームの読み込み/保存 イマイチよくわかりませんが、ここで決定したものに更新して保存するということでしょう。
※そうじゃなかったら意味がないと思うのだけど…
返り値 オブジェクト型で返すかタームIDを返すかを指定できます。

ユーザー

登録されている「ユーザー」を選択できるようになります。
どういう時に使えばよいのかな?SNSポータルとかで使うのかな?

ロールでフィルタする 権限レベルで絞り込めます。
フィールドタイプ 単一選択にするか複数選択にするか指定します。

jQuery

Google Map

Google Mapを表示させることができます。
住所入力後、表示されたピンを微調整できるので、とても便利です。

Center マップに中心座標です。「lat」が緯度、「lng」経度です。
※何も指定しないとメルボルンが表示されます。
Zoom マップのズームです。
Height 編集画面のマップの高さを指定できます。


acf_map

 

デイトピッカー

日付をカレンダーから選ぶことができるようになります。

フォーマットを保存する フォーマットの形式を設定します。デフォルトのままでよいと思います。
表示フォーマット 編集画面に表示されるフォーマットの形式です。
日本で多いのは「yy/mm/dd」ですかね。
週の始まり 普通は日曜日だと思います。

acf_date

カラーピッカー

色を指定できるようになります。

acf_color

レイアウト

編集画面の見た目を編集できます。
フィールドとフィールドの間にメッセージを入れたり、タブ切り替えができるようになります。

メッセージ

メッセージを挿入できます。

タブ

フィールドをグループ分けしてタブで切り替えることができます。
編集画面が長くなったとき使えますね。

acf_tab

カスタムフィールドを使う場所を指定します

位置

どの編集画面(タイプ)で使うかを決めることができます。
ボクはカスタムフィールドグループを細かく分けて作り、グループ①は「post」と「カスタム投稿」の両方でも使えるように、グループ②は「カスタム投稿」だけで使うという風に使ってます。

オプション

編集画面に関する設定をします。

順序番号 フィールドグループの表示順です。0から順番に表示されます。
位置 「Normal(after content)」:編集画面の下に表示されます。
「High(after title)」:タイトルのすぐ下に表示されます。
「Side」:右カラムに表示されます。
Style 「Seamless(no metabox)」
acf_text
「Standard(WP metabox)」
acf_text2
画面に表示しない 編集画面に表示させたくない項目を指定できます。

関連記事