『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 | 入力文字数の制限をかけることもできます。 |
条件判定 | セレクトボックス・チェックボックス・ラジオボタンなどで指定したものを選択すると、表示されるように設定できます。 |
必須項目にして、プレースホルダーを付けてみました。
テキストエリア
普通のテキストエリアです。
「フィールド記入のヒント」「必須か?」「デフォルト値」「Placaholder Text」「Character Limit」はテキストと同じです。
Rows | テキストエリアの高さ(行数)を設定できます。 |
フォーマット | 「はい」にすると、ラベルに「*」が付いて、未入力の状態では公開できなくります。 |
デフォルト値 | 「Convert HTML into tage」「No formatting」はテキストと同じです。 「Convert new lines into <br /> tags」→開業を<br />として反映されるので、 テキストエリア内で改行すれば、実際に改行されて表示されます。 |
必須項目にはせず、デフォルト値を入れてみました。
数値、メール、パスワード
基本的には「テキスト」と同じです。
「数値」は数字しか入力できません。
Minimum Value | 数値の最小値を設定できます。 |
Maximum Value | 数値の最大値を設定できます。 |
Step Size | 例えば「5」と設定すれば、5ずつ増減します。 |
「メール」はメールアドレス形式以外は入力できなくなります。
「パスワード」は「*****」などで表示されるようなります。
Content
Wysiwyg エディタ
通常の投稿の編集画面のツールバー付きの入力欄です。
メディアを追加できます。
ツールーバー | 「Full」にすると「ツールバーの切り替え」ボタンが表示されます。 |
メディアアップロードボタンを表示するか? | 「はい」にすると、画像を追加できるようになります。 |
画像
画像をアップロードできるようになります。
返り値 | 画像を表示させる時に使います。 「画像ID」にしておくとよいと思います。リサイズされた画像を使えるようになるからです。 ※スイマセン、画像ID以外使ったことがありません。 |
プレビューサイズ | 編集画面に表示される画像のサイズを選択できます。 編集画面が間延びしないように、サムネイルでいいと思います。 |
ライブラリ | 「投稿にアップロードされる」を選択すると、この記事でアップロードした画像以外使えなくなります。 他のところで使った画像が使えなくなるので、同じ画像を何枚もアップロードすることになるので、「全て」がいいと思いますが、 画像が増えてくると、選択するのに時間がかかってしまうかもしれません。それでも「全て」がいいと思います。 |
ファイル
PDF等のファイルをアップロードできるようになります。
返り値 | ファイルの場合はリンクを張ることになると思いますので「ファイルURL」でいいと思います。 |
選択肢
セレクトボックス
選択し | red : 赤 blue : 青 と書くと値とラベルの両方を制御できるようになります。 <option value=”red”>赤</option> ってことですね。 ※フィールドタイプを選択するところではきちんと「選択肢」になっているのに |
無を許可するか? | 「はい」にすると「-セレクトボックス-」というラベルが追加されます。 ※必須項目なのに無を許可したらどうなるんでしょう? |
複数の値を選択できるか? | 複数選択を許可するかどうかです。 「はい」にすると返り値は配列になります。 |
チェックボックス
セレクトボックスとほぼ同じです。
レイアウト | 選択肢を縦並びか横並びかを選択できます。 編集画面をスッキリさせるために「水平」にすることが多いかなぁ |
ラジオボタン
セレクトボックス、チェックボックスとほぼ同じです。
選択し | 選択肢「その他」を追加する 選択肢に「その他」が追加され、入力欄が表示されます。 「その他」の値を選択しに追加する 次回から入力したものがデフォルトで加わります。 |
↓ |
↓ |
真/偽
True、Falseみたいなやつですね。チェックを入れないと返り値は「0」、入れると「1」が返ってきます。
メッセージ | ラベルです。 「利用規約に同意する」みたいなのに使えますね。 |
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 | 編集画面のマップの高さを指定できます。 |
デイトピッカー
日付をカレンダーから選ぶことができるようになります。
フォーマットを保存する | フォーマットの形式を設定します。デフォルトのままでよいと思います。 |
表示フォーマット | 編集画面に表示されるフォーマットの形式です。 日本で多いのは「yy/mm/dd」ですかね。 |
週の始まり | 普通は日曜日だと思います。 |
カラーピッカー
色を指定できるようになります。
レイアウト
編集画面の見た目を編集できます。
フィールドとフィールドの間にメッセージを入れたり、タブ切り替えができるようになります。
メッセージ
メッセージを挿入できます。
タブ
フィールドをグループ分けしてタブで切り替えることができます。
編集画面が長くなったとき使えますね。
カスタムフィールドを使う場所を指定します
位置
どの編集画面(タイプ)で使うかを決めることができます。
ボクはカスタムフィールドグループを細かく分けて作り、グループ①は「post」と「カスタム投稿」の両方でも使えるように、グループ②は「カスタム投稿」だけで使うという風に使ってます。
オプション
編集画面に関する設定をします。