私が愛してやまない、Advanced Custom Fields の使い方を詳細解説[ 設定編 ]

投稿日時:2014年8月31日 カテゴリー:WordPress

WordPress の機能の1つであるカスタムフィールドは、タイトル、投稿、抜粋など、最初からある入力項目にプラスして新しい入力項目を作れます。

これは、WordPress にあまり詳しくないエンドユーザーにわかりやすく、かつ制限をかけることができる非常にユーザーに優しい機能です。

今回は、このカスタムフィールドを自在に操れる、Advanced Custom Fields の使い方を紹介します。
Advanced Custom Fields を使えば、完全な定型形式の入力フォーマットを作ることも可能です。
※言い方は悪いですが、知識のないエンドユーザーに余計なことをさせたくない場合にも使えると言うことです。

目次

Advanced Custom Fields の設定ステップ

STEP1 表示のルールの設定【今回の記事で説明】

投稿、特定のカテゴリー、固定ページなど、どの画面カスタムフィールドを表示するかを設定できます。「特定のカテゴリーと固定ページ」など細かい設定も可能です。

STEP2 入力フィールドの設定【今回の記事で説明】

入力するフィールドを設定できます。
「テキスト」「テキストエリア」はもちろん「パスワード方式」や「画像」「Google Map」など非常に細かく設定できる部分です。

STEP3 処理を PHP で記載【別の記事に記載】

私が愛してやまない、Advanced Custom Fields の使い方を詳細解説[ 出力編 ]にて記載しています。
STEP1 と STEP2 で設定した項目を PHP でゴリゴリ書いて出力します。

インストールとフィールドグループの新規作成

まずは、プラグインをインストールしますが、「Advanced Custom Fields」はWordPress の公式プラグインディレクトリに登録されています。

「プラグイン」=> 「新規追加」=> 「Advanced Custom Fields」で検索し追加してください。

プラグインのインストールが完了するとサイドメニューに「カスタムフィールド」項目が追加されます。

サイドバーカスタムフィールドの場所

フィールドグループを新規追加します。

「新規追加」ボタンをクリックし「タイトル」を入力します。
今回は「TEST フィールド」とでも入力しておきます。

表示のルール

どの編集画面にカスタムフィールドを表示するかを詳細に設定できます。
表示のルールの設定は、「位置」項目で設定可能です。

全投稿記事に追加

「投稿タイプ」「post」に等しいを選択すれば、全投稿にカスタムフィールドが追加されます。

投稿タイプに等しい

投稿画面で「新規追加」をクリックすると「test」の入力項目が出ました。

カスタムフィールド出力全投稿タイプに等しい

ちなみに、「test 」の入力項目は事前に作成してあります。
入力項目の作成は後ほど記載します。

特定のカテゴリーの記事に追加

特定のカテゴリーの記事にカスタムフィールドを追加したい場合は、「Post Category」を選択します。

カスタムフィールド出力特定のカテゴリーに等しい

今回は、カテゴリーが 「CSS」 の投稿でフィールドが表示される設定にしています。

それでは、投稿記事で カテゴリー 「CSS」をチェックしてみます。

カテゴリーCSS にチェック

「test」が出ました。
CSS のチェックをはずすと、test も消えます。

カテゴリー編集画面に追加

投稿画面ではなく、カテゴリー編集画面にカスタムフィールドを追加したい場合は「Taxonomy Term」「カテゴリー」を選択します。

カテゴリー編集画面にカスタムフィールド追加

詳細な条件設定

これは、すぐにわかると思いますが、複数のルールを組み合わせることができます。

例えば、カテゴリー 「CSS」 かつ 「JavaSvript」 を条件にした場合は以下になります。
※「and」ボタンを押下。

複数のカテゴリーを選択

これで、カテゴリー「CSS」と「JavaSvript」両方にチェックが入っていないとカスタムフィールドは表示されません。

「Add rule group」ボタンは「または」条件を付けます。
今回の場合でいくと「CSS」か「JavaSvript」どちらか一方にチェックが入っていればカスタムフィールドが表示されます。

入力フィールドの設定

ユーザーが入力する項目を設定します。

フィールドを追加

「フィールドを追加」ボタンを押すと以下の画面になります。

フィールドの入力項目

また、入力フィールドは複数設定でき、表示順番などもドラッグして自由自在に変更可能です。

入力フィールド複数

判定条件

判定条件は、後ほど説明する「選択肢」(セレクトボタン、チェックボックス、ラジオボタン、真偽)が指定の項目になると、フィールドが表示されるよう設定できる項目です。
また、条件も複数指定できます。

以下の例では、チェックボックスが設定された「test」フィールドの 「test1」にチェックが入るとフィールドが表示されます。

判定条件説明図

フィールドタイプ

バージョン 4.3.8 時点で、設定できるフィールドタイプを紹介します。
大体は名前でイメージがつくと思います。

基本

テキスト テキストエリア

テキストタイプのフィールドです。
テキストは改行できません。
テキストエリアは改行できます。

また、「テキスト」と「テキストエリア」はフォーマットという項目を持ち設定できます。

Convert HTML into tage
HTML を入力した場合、HTML として認識して出力します。
Convert new Lines into <br /> tags
テキストエリアだけに設定可能で、改行すると自動で<br />タグを挿入してくれます。
None
HTML を入力した場合、HTMLタグをエスケープして表示します。

数値

数値以外を入力するとエラーを出力します。

メール

メール形式ではない場合エラーを出力します。

パスワード

パスワード形式(ログインでよくある黒丸)で表示されます。

Content

Wysiwyg エディタ

Wysiwyg エディタ

画像

画像を追加できます。

ファイル

ファイルを追加できます

選択肢

セレクトボタン チェックボックス ラジオボタン

各種選択項目を追加できます。
記載方法は以下の通り。

test1 : test1
test2 : test2
test3 : test3

選択肢

真/偽

チェックボックスの項目一つだけ追加されます。

Relational

ページリンク

今まで自分が投稿した記事やメディアなどをドロップダウン形式で表示し選択できます。
選択した投稿をWordPress上で取得した場合は、URL として取得します。

投稿オブジェクト

今まで自分が投稿した記事やメディアなどをドロップダウン形式で表示し選択できます。
選択した投稿をWordPress上で取得した場合は、オブジェクトとして取得できます。
取得したオブジェクト(WP_Post)の変数にいろいろな情報(タイトル、記事本文等)が格納されています。

関連

今まで自分が投稿した記事やメディアなどを複数選択できます。
選択した投稿をWordPress上で取得した場合は、配列に格納されたオブジェクトを取得できます。
選択した投稿記事やメディアは順番が変更でき、昇順で配列に格納されます。

以下は、1番上にある記事の ID を取得する場合のコードです。

$obj=get_field('フィールド名');
echo $obj[0]->ID;//ID を表示

タクソノミー

タクソノミーをチェックボックス形式で取得できます。

Jqyery

Google Map

Google Map が表示されます。任意の場所にマーカーを設定できます。

デイトピッカー

日付をカレンダー形式で選択し、設定することができます。

カラーピッカー

カラーを直感的に選択できます。

カラーピッカー

レイアウト

メッセージ

投稿に任意のメッセージを表示できます。

タブ

設定したフィールドをグループ化します。

タブ

上記の例では、「タブ1」には「テキスト、テキストエリア」が表示され、「タブ2」には「画像、ファイル」が表示されます。

オプション

オプションで、「画面に表示しない」が設定できます。
これが強力で、すべてチェックすると完全に定型形式のフィールドを作成することが出来ます。

画面に表示しない

NEXT:私が愛してやまない、Advanced Custom Fields の使い方を詳細解説[ 出力編 ]


コメントを残す