プラグイン
【完全版】WordPressプラグイン Advanced Custom Fields【導入・使い方編】
2019年09月22日 8:00
おはようございます！社員Aです👩
今回はWordPressプラグイン「Advanced Custom Fields」の使い方をご紹介したいと思います。
もくじ
万能プラグイン「Advanced Custom Fields」
「Advanced Custom Fields」は、フィールドビルダを使用して好きな場所にフィールドを作成できるプラグインで、多くのユーザーに愛用されています。
「テキストエリア」や「画像フィールド」など、追加できるフィールドの多さが特徴です。
今回はこの便利なプラグイン「Advanced Custom Fields」の使い方を完全解説していきたいと思います。
WordPressプラグイン「Advanced Custom Fields」の機能
- 30種類以上のフィールドタイプを追加できる
- 投稿、ユーザー、タクソノミーの用語、メディア、コメント、カスタムオプションのページまで含めてWP全体に追加できる
「Advanced Custom Fields」をインストールする
まずは、プラグインをインストールしましょう。
- WordPressの管理画面にある「プラグイン」から「Advanced Custom Fields」と検索して追加する
- プラグイン公式サイトよりダウンロードしてアップロードする
上記のどちらかの方法でインストールできたら、有効化します。
カスタムフィールドを作成する
プラグインのインストール・有効化が出来たら、早速カスタムフィールドを作成してみましょう。
1.「カスタムフィールド」>「新規追加」をクリック
ダッシュボードの左メニューより「カスタムフィールド」をクリックし、「新規追加」をクリックします。
まずは任意のタイトルを付けましょう。
2.フィールドを追加する
続いて、フィールドを追加していきましょう。
赤色の「フィールドを追加」ボタンをクリックして行を作成します。
3.フィールドのオプションを設定する
フィールドを追加すると上記のような画面になります。
下記を参考にして、フィールドのオプションを設定していきましょう。
| フィールドラベル | 編集ページで表示される名前です。 |
|---|---|
| フィールド名 | 日本語は使えません。スペースは不可、アンダースコアとダッシュは使用可能です。 |
| フィールドタイプ | 好きなフィールドを選択します。 |
| 説明 | フィールドの上に表示される補足文（説明文）になります。 |
| 必須か | 必須にしておくと、未入力の場合エラー文が表示されます。 |
フィールドを表示するページを指定する
続けて、フィールドを表示したいページを指定しましょう。
投稿ページのみ表示、固定ページのみ表示など、細かく指定できます。
複数設定したい場合は、「ルールを追加」をクリックして追加しましょう。
フィールドの表示位置などのカスタマイズ
最下部で、フィールドの表示位置などをカスタマイズできます。
各フィールドの説明【基本フィールド編】
ここからは各フィールドの特徴や設定について説明していきます。
テキスト
テキストフィールドは、単純なテキスト入力を作成します。一番よく使うフィールドです。
オプション
| デフォルト値 | 新しい投稿を作成するときに、このフィールドのデフォルト値を設定します。 |
|---|---|
| プレースホルダー | 値が存在しない場合に入力内に表示されます。 |
| Prepend | 入力の前にビジュアルテキスト要素を追加します。 |
| 追加 | 入力した後、ビジュアルテキスト要素を追加します。 |
| 文字制限 | 文字数を制限します。 |
テキストエリア
Textareaフィールドは、テキストエリアを作成します。テキストとの違いは複数行入力できる点です。
オプション
| デフォルト値 | 新しい投稿を作成するときに、このフィールドのデフォルト値を設定します。 |
|---|---|
| 書式設定 | このオプションは、値のレンダリング方法を決定します。「HTML」を選択すると、値内のすべてのタグがhtmlタグに変換されます。 「自動<br />」を選択すると、新しい行がHTMLの改行に変換されます。 「なし」を選択してもタグは変換されず、HTMLは通常のテキストとして表示されます。 |
数値
数値フィールドは数値を入力できるフィールドです。
オプション
| 最小値 | 許可される最小（数値）値。最大値を超えてはなりません。デフォルトは0 |
|---|---|
| 最大値 | 許可される最大（数値）値。最小値より小さくすることはできません。デフォルトは100 |
| ステップサイズ | 数値を設定できる増分。デフォルトは1 |
Range
Rangeフィールドは数値を選択できるフィールドです。数値フィールドよりも直感的に指定できるのが特徴です。
オプション
| 最小値 | 許可される最小（数値）値。最大値を超えてはなりません。デフォルトは0 |
|---|---|
| 最大値 | 許可される最大（数値）値。最小値より小さくすることはできません。デフォルトは100 |
| ステップサイズ | 数値を設定できる増分。デフォルトは1 |
メール
メールフィールドは、メールアドレスを入力するためのフィールドです。
URL
URLフィールドは、URLを入力するためのフィールドです。
パスワード
パスワードフィールドは、パスワードを入力するためのフィールドです。
各フィールドの説明【コンテンツフィールド編】
画像
画像フィールドでは、画像をアップロードして選択できます。
このフィールドは、WPメディアポップアップを使用して、アップロードおよび選択プロセスを処理します。
オプション
| 返り値のフォーマット | 設定に応じて応じて、配列、文字列、またはint値を返します。 |
|---|---|
| プレビューサイズ | 投稿画面のフィールドにプレビューされる画像サイズです。 |
| ライブラリ | 制限するメディアライブラリを選択できます。 |
| 最小 | アップロード可能な画像を制限できます。 |
| 最大 | アップロード可能な画像を制限できます。 |
| 許可するファイルタイプ | カンマ区切りのリストで入力。全てのタイプを許可する場合は空白のままにします。 |
ファイル
ファイルフィールドでは、ファイルをアップロードして選択できます。
オプション
| 返り値のフォーマット | 設定に応じて応じて、配列、文字列、またはint値を返します。 |
|---|---|
| プレビューサイズ | 投稿画面のフィールドにプレビューされる画像サイズです。 |
| ライブラリ | 制限するメディアライブラリを選択できます。 |
| 最小 | アップロード可能な画像を制限できます。 |
| 最大 | アップロード可能な画像を制限できます。 |
| 許可するファイルタイプ | カンマ区切りのリストで入力。全てのタイプを許可する場合は空白のままにします。 |
Wysiwygエディタ
Wysiwygフィールドは、投稿およびページで使用される一般的な方法でWordPressコンテンツエディターを作成します。
これは、テキストとマルチメディアの両方を単一の領域内で編集およびスタイル設定できるため、コンテンツの編集に最も役立つフィールドの1つです。
オプション
| タブ | ビジュアルエディタ・テキストエディタもしくはその両方を選択できます。 |
|---|---|
| ツールバー | Fullを選択するとすべてのツールバーが表示されます。 |
| メディアアップロードボタン | ONにするとメディアアップロードボタンが表示されます。 |
oEmbed
oEmbedフィールドを使用すると、ビデオ、画像、ツイート、オーディオ、その他のコンテンツを簡単に埋め込むことができます。
オプション
| 埋め込みサイズ | 埋め込み要素の幅と高さの設定を定義します |
|---|
各フィールドの説明【選択肢フィールド編】
セレクト
選択フィールドは、ドロップダウン選択または複数選択入力を作成します。
オプション
| 選択肢 | 選択肢を改行で区切って入力してください下記のように記述すると、値とラベルの両方を制御することができます。red : 赤 |
|---|---|
| 空の値を許可するか？ | ON/OFF |
| 複数の値を選択できるか？ | ON/OFF |
| スタイリッシュなUI | ON/OFF |
| 返り値のフォーマット | 値・ラベル・arrayから選択できます。 |
チェックボックス
チェックボックスフィールドを作成できます。設定画面で「選択肢」の部分を設定しておけば、値の取得が便利です。
オプション
| 選択肢 | 選択肢を改行で区切って入力してください。下記のように記述すると、値とラベルの両方を制御することができます。red : 赤 |
|---|---|
| Allow Custom | 「カスタム」値の追加を許可します。 |
| レイアウト | 垂直・水平から選べます。 |
| Toggle | 追加のチェックボックスを先頭に追加して、すべての選択肢を切り替えます。 |
| 返り値 | 値・ラベル・Arrayから選べます。 |
ラジオボタン
ラジオボタンフィールドは、選択可能なリストを作成します。
オプション
| 選択肢 | 選択肢を改行で区切って入力してください。下記のように記述すると、値とラベルの両方を制御することができます。red : 赤 |
|---|---|
| その他 | 選択肢「その他」を追加します。 |
| レイアウト | 垂直・水平から選べます。 |
| 返り値 | 値・ラベル・Arrayから選べます。 |
Button Group
ボタンフィールドは、値を選択するためのフィールドです。
オプション
| 選択肢 | 選択肢を改行で区切って入力してください。下記のように記述すると、値とラベルの両方を制御することができます。red : 赤 |
|---|---|
| レイアウト | 垂直・水平から選べます。 |
| 返り値 | 値・ラベル・Arrayから選べます。 |
真/偽
True / Falseフィールドでは、1または0の値を選択できます。
オプション
| デフォルト値 | 新しい投稿を追加するときのデフォルトの状態（オン/オフ）を設定します。 |
|---|---|
| スタイリッシュなUI | デフォルトのチェックボックス入力を様式化されたトグルスイッチに変更します。 |
各フィールドの説明【関連フィールド編】
リンク
リンクフィールドは、リンク（URL、タイトル、ターゲット）を選択できます。
オプション
| 戻り値 | 返されるデータをカスタマイズします。リンク配列（配列またはデータ）またはリンクURL（文字列）から選択します。 |
|---|
投稿オブジェクト
投稿オブジェクトフィールドは、ページ+投稿+カスタム投稿タイプを選択できる選択フィールドを作成します。
このフィールドは、別のページ/投稿へのリンクに役立ちます。
オプション
| 投稿タイプで絞り込み | 投稿タイプを選択することにより、選択をフィルタリングできます。 |
|---|---|
| タクソノミーで絞り込み | 特定の分類法/カテゴリーを選択することにより、選択項目をさらにフィルター処理できます。 |
| 複数の値を選択できるか？ | 複数オプションを選択すると、選択フィールドで複数の選択が可能になり、APIは単一の値ではなく配列を返します。 |
| 空の値を許可するか？ | 選択した場合、選択リストは「-Select-」というタイトルのヌル値で始まります。 |
| 返り値のフォーマット | 投稿オブジェクト・投稿IDから選べます。 |
ページリンク
ページリンクフィールドでは、1つ以上の投稿、ページ、またはカスタム投稿タイプを選択できます。
このフィールドは、投稿のURL（パーマリンク）を返すため、別の投稿に簡単にリンクするのに役立ちます。
オプション
| 投稿タイプで絞り込み | 1つ以上の投稿タイプで利用可能な投稿をフィルター |
|---|---|
| タクソノミーで絞り込み | 1つ以上の分類法を使用して利用可能な投稿をフィルタリングします |
| 空の値を許可するか？ | 選択した場合、選択リストは「-Select-」というラベルの付いた空の選択肢で始まります。「様式化されたUI」設定を使用している場合、この空の選択肢は「x」アイコンに置き換えられ、選択した値を削除できるようになります。 |
| Allow Archives URLs | 選択すると、選択リストは投稿タイプのアーカイブURLのグループで始まります |
| 複数の値を選択できるか？ | この設定により、複数の選択肢を選択できます。「様式化されたUI」設定を使用している場合、選択した選択肢をドラッグ/ドロップして並べ替えることもできます |
関連
関係フィールドでは、ページ+投稿+カスタム投稿タイプから選択できます。
このフィールドは、別のページ/投稿オブジェクトへのリンクに役立ちます。
オプション
| 投稿タイプで絞り込み | 投稿タイプを選択することにより、選択をフィルタリングできます。 |
|---|---|
| タクソノミーで絞り込み | 特定の分類法/カテゴリーを選択することにより、選択項目をさらにフィルター処理できます。 |
| 要素 | 選択した要素が表示されます。 |
| 最大投稿数 | 選択できる投稿の最大数を設定できます。無限に選択するには、このフィールドを空白のままにするか、-1に設定します。 |
| 返り値のフォーマット | 投稿オブジェクト・投稿IDから選択できます。 |
タクソノミー
このフィールドは、選択内容をメタデータとして保存するだけでなく、WP_Queryタクソノミークエリの「期間に投稿」関係データを保存するオプションを選択することもできます。
オプション
| 名前 | 説明 |
|---|---|
| タクソノミー | 用語を選択するタクソノミーを選択します |
| Appearance | インターフェイスの種類を選択します（チェックボックス、複数選択、ラジオボタン、選択） |
| Create Terms | 編集中に新しい用語を作成できます。v5.2.3で追加 |
| Save Terms | 選択した用語を投稿に接続します。v5.2.7で追加 |
| Load Terms | 投稿の条件から値を読み込みます。v5.2.7で追加 |
| 返り値 | get_field関数を介して返される値を選択します |
ユーザー
ユーザーフィールドでは、1人以上のユーザーを選択できます。
このフィールドタイプは、データオブジェクト間の関係を作成するのに役立ちます。
値をWP_User IDとして保存し、取得時に完全なWP_Userデータを返すことができます。
オプション
| ロールでフィルタする | ユーザーをフィルタリングできます。 |
|---|---|
| 空の値を許可するか？ | ON/OFF |
| 複数の値を選択できるか？ | ON/OFF |
| 返り値のフォーマット | Array/Object/ID から選択できます。 |
各フィールドの説明【jQueryフィールド編】
デイトピッカー
デイトピッカーフィールドは、jquery日付選択ポップアップを作成します。このフィールドは、テーマで使用する日付を設定するのに役立ちます。
オプション
| 表示フォーマット | 投稿編集中に表示されるフォーマット |
|---|---|
| 返り値のフォーマット | テンプレート関数で返されるフォーマット |
| 週の始まり | 週の始まりの曜日を選択できます。 |
デイトタイムピッカー
デイトタイムピッカーフィールドは、jQueryの日時選択ポップアップを作成します。
このフィールドは、テーマで使用する特定の日時を設定するのに役立ちます。
選択した値は、さまざまな形式で返されて表示できますが、常に「Ymd H：i：s」としてDBに保存されます。
オプション
| 表示フォーマット | 投稿編集中に表示されるフォーマット |
|---|---|
| 返り値のフォーマット | テンプレート関数で返されるフォーマット |
| 週の始まり | 週の始まりの曜日を選択できます。 |
タイムピッカー
タイムピッカーフィールドは、jQuery時間選択ポップアップを作成します。
このフィールドは、テーマで使用する特定の時間を設定するのに役立ちます。
選択した値は、さまざまな形式で返されて表示できますが、常に「H：i：s」としてデータベースに保存されます。
オプション
| 表示フォーマット | 投稿編集中に表示されるフォーマット |
|---|---|
| 返り値のフォーマット | テンプレート関数で返されるフォーマット |
カラーピッカー
カラーピッカーフィールドでは、javascriptポップアップを使用して色を選択できます。
オプション
| デフォルト値 | デフォルトのカラーを指定できます。 |
|---|
各フィールドの説明【レイアウト編】
メッセージ
指定した管理画面に、任意のメッセージを表示できます。
主にフィールドの説明文などに役立ちます。
オプション
| 改行 | 改行をどのように表示するか制御 |
|---|---|
| HTMLをエスケープ | HTMLマークアップのコードとして表示を許可 |
アコーディオン
アコーディオンフィールドは、フィールドを折りたたみ可能なパネルに整理するためのものです。
これにより、長いフォームをスクロールする必要が減り、UIが整頓されます。
オプション
| Open | ページの読み込み時にこのアコーディオンを開いた状態で表示します。 |
|---|---|
| Multi-expand | 他のコンテンツを閉じずにこのアコーディオンを開くことができます。 |
| Endpoint | 停止する前のアコーディオンのエンドポイントを定義します。 |
タブ
タブフィールドは、フィールドをタブセクションにグループ化できます。
これにより、フィールドをスクロールする必要が減り、UIが整頓されます。
オプション
| タブの配置 | 上揃え・左揃えから選択できます。 |
|---|---|
| Endpoint | 停止する前のタブのエンドポイントを定義します。 |
グループ
グループフィールドは、フィールドのグループを作成できます。編集画面のUIをより適切に整理するだけでなく、データの整理にも役立ちます。
オプション
| レイアウト | ブロック・表・行から選択できます。 |
|---|
関連記事
この記事を書いた人
社員A
入社8年目。フロントエンドエンジニア・デザイナーの社員Aです。 小動物が好きで、デグー・チンチラと暮らしています！トレンドの情報を発信できるようにがんばります☺
