Custom Field GUI Utility 3.2 - WordPress プラグイン

  • 2012年1月10日 12:27
  • WordPress Plugins

Custom Field GUI Utility 3.2 は、WordPress 3.3用です。

このページは、Custom FIeld GUI Utility 3.2 のドキュメントです。過去のバージョンのドキュメントは、以下のページにあります。

Custom Field GUI Utility とは

このプラグインは、WordPress のカスタムフィールドを、色々な数種類のフォーム要素として使えるようにするプラグインです。

当プラグインの元となっているプラグイン「Custom Field GUI」は、「投稿」の編集画面にカスタムフィールドを入力するフォームを生成するものでしたが、それをカスタマイズしてもっと便利にしたのが「Custom Field GUI Utility」です。

主な機能（オリジナルプラグインとの違いを中心に）

当プラグインとオリジナルプラグインの違いを中心に機能をご紹介します。

投稿タイプによる使い分けが可能

「投稿」「ページ」「カスタム投稿タイプ」ごとにカスタムフィールドの表示・非表示を切り替えることができます。投稿タイプごとに設定ファイルを分けることもできますし、ファイルは１つにまとめて、項目ごとに設定することもできます。

カテゴリごとの使い分けが可能

「投稿」の場合、その投稿が属するカテゴリごとにカスタムフィールドの表示・非表示を切り替えることができます（一度保存が必要）。

カスタムフィールドの表示名を自由に変更可能

オリジナルのプラグインでは、カスタムフィールドの「キー」を管理画面上の「表示名」（項目名）としていたので、一度そのカスタムフィールドの名前で運用を開始してしまうと、「この表示名が分かりにくいんだけど」と思っても容易に変更することができませんでした。

そこで、当プラグインでは、カスタムフィールドの「キー」と管理画面上の「表示名」を使い分けられるようにしました。これにより、運用中自由に「表示名」を変更することができます。

画像専用のイメージフィールドを搭載

管理画面上でサムネイルが表示される「イメージフィールド」を搭載しています。サムネイルをクリックすると、実画像をオーバーレイ表示することができます。

イメージフィールドの値を自由に取り出す専用の関数も用意されています。

ファイル専用のファイルフィールドを搭載

イメージフィールドとほぼ同様の仕組みで、サムネイル表示のないファイルフィールドを搭載しています。

複数選択可能なチェックボックスグループを搭載

複数選択できるチェックボックスグループを搭載しています。 

バリデーションを設定可能（exValidationプラグイン使用）

必須項目を簡単に設定することができます。さらに「どんなフォームにも使えるjQueryのフォームバリデーション exValidation :: 5509」を簡単に利用することができます。

区切り線が使用可能

カスタムフィールドの間に区切り線を入れることができます。カスタムフィールドが多くなったときに便利です。

ライセンスと寄付

The MIT License

商用利用の方は、Amazonギフト券（Eメールタイプ）での寄付をご検討いただければ幸いです。

このプラグインのカスタマイズからメンテナンスまで、これまでかなりの時間を要しました。モチベーション維持のためにも、ぜひとも寄付をご検討ください！目安は１口1,000円くらいで考えていただければ嬉しいかと（ただし、申し訳ありませんが、今後のバージョンアップを保証するものではありません）。

Amazonギフト券を購入する際は、以下の情報を入力してください。

  • 金額 : 1,000円（目安）から
  • 数量 : 1
  • 受取人のEメールアドレス : info@tinybeans.net
  • 受取人 : 奥脇知宏 や tinybeans など
  • 送り主 : お名前やハンドルネーム
  • メッセージ : Custom Field GUI Utility 寄付 など

寄付と言わず、請求書を発行しての銀行振り込みでもいいです。「お問い合わせ」からご連絡ください！

また、個別なカスタマイズ等は有料でお受けしますのでご相談ください。

確認済みの動作環境

WordPress

WordPress 3.3以降

ブラウザ

ブラウザが影響するのはアップローダーやサムネイル表示、必須項目に関する動作です。カスタムフィールドの機能自体は使用できます。

  • Google chrome と Firefox の最新版（2012年1月時点）で動作確認済み
  • IEに関しては、多少の不具合はスルーする可能性がありますので、あらかじめご了承ください。

最新版ダウンロード

以下のページから最新版をダウンロードしてください。

また、バージョン管理の環境を Git に変更したので、以下のページからも最新版をダウンロードすることができます。

使い方

インストール

  1. ダウンロードしたファイルを解凍します。
  2. 解凍してできた custom-field-gui-utility フォルダ内の conf.ini の内容を変更します。Github からダウンロードした場合は、解凍後のフォルダ名を「custom-field-gui-utility」に変更します。
  3. サーバーの WordPress のプラグインディレクトリ（wp-content/plugins/）に、custom-field-gui-utility フォルダをアップロードします。
  4. WordPress のプラグインの設定画面で、Custom Field GUI Utility を有効にします。

設定ファイル（conf.ini）の編集

当プラグインは、設定ファイルに記述された内容を読み込み、各フォーム要素を管理画面に表示する仕組みになっています。

この設定ファイルの書式は、次のようになります。

; セミコロンで始まる行はコメントアウト

[cfgu_setting]
boxname = カスタムフィールドのボックス名（グレーのバー部分）

; １つのフォーム要素の設定ここから
[カスタムフィールドのキー]
オプション名=値
オプション名=値
（必要なオプションの設定を1行ごとに列挙）
; １つのフォーム要素の設定ここまで 

基本設定

基本設定では、boxname オプションでカスタムフィールドのタイトルバーの部分を変更できます。この設定をしなかった場合は、「カスタムフィールド」と表示されます。

[cfgu_setting]
boxname =  カスタムフィールドのボックス名

cfgu3_2-2

以下、各フォーム要素に関するオプション設定について説明します。なお、カスタムフィールドのタイプごとに設定するオプションが異なりますので、タイプごとの説明欄もご参照ください。

[カスタムフィールドのキー] （必須）

[大カッコ内] にカスタムフィールドの「キー」を設定します。半角英数、「 _ 」「 - 」のみを使用してください。

この [foo] から次の [bar] までが１つのフォーム要素となります。

fieldname （必須）

管理画面上に表示するカスタムフィールドの名前を設定します。

type （必須）

テキストフォームやチェックボックス、ラジオボタンなどのフォーム要素のタイプを指定します。詳細は後記「入力タイプ 8種類 + 1種類について」を参照してください。

class

「post」「page」またはカスタム投稿タイプの post_type を指定します。

ここで指定した投稿タイプの編集画面に表示されるようになります。複数指定する場合は、半角スペースを空けてください。なお、投稿タイプによる設定の制御は、設定ファイルで分けることもできます。

また、ここに指定できるのは post、page 等の投稿タイプに限らず、半角英数なら何でもOKです。ここに指定した値がフィールドのボックスの class 名になりますので、CSS で管理画面をカスタマイズしたい場合にもご利用いただけます。

category

「投稿」の場合、category オプションでカテゴリのスラッグ（slug）を指定することにより、カテゴリごとに表示を制御することができます。ただし、一度カテゴリを選択して保存しないと反映されません。複数指定する場合は、半角スペースで区切ります。

【例】スラッグが cat1, cat2 という２つのカテゴリがある場合

  • cat1 だけ表示：category = cat1
  • cat2 だけ表示：category = cat2
  • cat1 と cat2 の両方で表示：category = cat1 cat2

value

ラジオボタン（radio）、セレクトメニュー（select）、チェックボックスグループ（multi_checkbox）における各項目名です。値は「#」（半角）で区切ります（チェックボックスの横のテキストは sample オプションで指定します）。

default

初期値です。テキストフィールド（textfield）、ラジオボタン（radio）、セレクトメニュー（select）、チェックボックス（checkbox）、チェックボックスグループ（multi_checkbox）で使用します。

placeholder

input要素の placeholder 属性の値です（placeholder 属性は、ブラウザによって対応状況がことなります）。

rows

テキストエリアの行数です。複数行テキストエリア（textarea）で使用します。

cols

テキストエリアの幅です。複数行テキストエリア（textarea）で使用します。

size

フォームの横幅です。テキストフィールド（textfield）、イメージフィールド（imagefield）、ファイルフィールド（filefield）で使用します。

sample

入力例や説明です。チェックボックス（checkbox）の場合は、チェックボックスの右側のテキストになります。

must

must = 1 を設定すると必須項目になります。必須項目には、カスタムフィールド名の先頭に必須マークが表示されます。

validation

「どんなフォームにも使えるjQueryのフォームバリデーション exValidation :: 5509」で指定できるクラス名を、半角スペース区切りで指定できます。もし必須だけにしたい場合は、上の must オプションを使えば自動的に exValidation 用のクラス名が付与されるので楽です。

入力タイプ 8種類 + 1種類について

このプラグインではカスタムフィールドの「値」の入力方法が、次の8種類 + 1種類に対応しています。どの入力タイプにするかは、次の９つの中の１つを type オプションに指定します。

textfield（テキストフィールド）

1行のテキストフォーム（input:text）です。入力されたテキストが値になります。

cfgu3_2-3

【設定項目】

【サンプル】

[custom_field_key]（必須）
fieldname = 表示名（必須）
type = textfield（必須）
class = post page free_class_name
category = cat1 cat2
default = フォームの初期値
placeholder = placeholder属性の値
size = 35
sample = フォームの下の説明
must = 1
validation = chkrequired

imagefield（イメージフィールド）

画像専用の1行のテキストフォーム（input:text）です。詳細は後述します。

cfgu3_2-4

【設定項目】

【サンプル】

[custom_field_key]（必須）
fieldname = 表示名（必須）
type = imagefield（必須）
class = post page free_class_name
category = cat1 cat2
default = フォームの初期値
placeholder = placeholder属性の値
size = 35
sample = フォームの下の説明
must = 1
validation = chkrequired

filefield（ファイルフィールド）

ファイル専用の1行のテキストフォーム（input:text）です。詳細は後述します。

cfgu3_2-5

【設定項目】

【サンプル】

[custom_field_key]（必須）
fieldname = 表示名（必須）
type = filefield（必須）
class = post page free_class_name
category = cat1 cat2
default = フォームの初期値
placeholder = placeholder属性の値
size = 35
sample = フォームの下の説明
must = 1
validation = chkrequired

checkbox（チェックボックス）

チェックボックス（input:checkbox）です。チェックが入っていると「 true 」、入っていないと「 false 」が値となります。条件分岐に便利です。

cfgu3_2-6

【設定項目】

【サンプル】

[custom_field_key]（必須）
fieldname = 表示名（必須）
type = checkbox（必須）
class = post page free_class_name
category = cat1 cat2
default = true（デフォルトをチェック状態にする場合のみ設定。falseでも0でもチェック状態になるので注意）
sample = チェックボックスの右側の説明
must = 1
validation = chkrequired

multi_checkbox（複数選択マルチチェックボックス）

複数選択が可能なチェックボックスグループです。チェックが入っている項目名をカンマ区切りにしたものが値となります。

cfgu3_2-7

【設定項目】

【サンプル】

[custom_field_key]（必須）
fieldname = 複数選択チェックボックス（必須）
type = multi_checkbox（必須）
class = post page
category = cat1 cat2
value = HTML#CSS#JavaScript#PHP
default = HTML#PHP
sample = input the caption
must = 1
validation = chkgroup chkcheckbox

radio（ラジオボタン）

ラジオボタン（input:radio）です。項目は複数設置できますが一つのみ選択可能です。選択された項目名が値になります。

cfgu3_2-8

【設定項目】

【サンプル】

[custom_field_key]（必須）
fieldname = ラジオボタン（必須）
type = radio（必須）
class = post page
category = cat1 cat2
value = 0-9#10-19#20+
default = 10-19
sample = input the caption
must = 1
validation = chkgroup chkradio

select（セレクトメニュー）

セレクトメニュー（select）です。一つのみ選択可能で選択された項目名が値になります。
select 要素

cfgu3_2-9

【設定項目】

【サンプル】

[custom_field_key]（必須）
fieldname = セレクトメニュー（必須）
type = select（必須）
class = post page
category = cat1 cat2
value = High#Medium#Low
default = Medium
sample = input the caption
must = 1
validation = chkselect

textarea（テキストエリア）

複数行のテキストエリア（textarea）です。入力されたテキストが値になります。
textarea 要素

cfgu3_2-10

【設定項目】

【サンプル】

[custom_field_key]（必須）
fieldname = 複数行テキスト（必須）
type = textarea（必須）
class = post page
category = cat1 cat2
rows = 4
cols = 40
sample = input the example or the caption
must = 1
validation = chkrequired chkhankaku

hr（区切り線）

区切り線（hr）です。区切り線に名前を表示することもできますので、カスタムフィールドが多くなったときのカテゴライズに便利です。

【設定項目】

【サンプル】

[custom_field_key]（必須）
fieldname = 表示名（必須）
type = hr（必須）
class = post page free_class_name
category = cat1 cat2

 投稿タイプごとに表示するフィールドを変える

当プラグインで表示されるフィールドは、投稿タイプごとに表示・非表示を変えることができます。その方法は、次の２つです。

class オプションで指定する

class オプションで投稿タイプを指定します。複数指定する場合は、半角スペースで区切ります。例えば、「投稿（post）」と「犬（dogs）」というカスタム投稿タイプで表示させる場合は、次のように設定します。

class = post dogs

設定ファイルを分ける

設定ファイルに投稿タイプと同じ接尾辞を付けると、その設定ファイルが優先して読み込まれるようになります。

例えば、「投稿（post）」に表示させたい設定ファイルは、次のようなファイル名にします。

conf-post.ini

設定ファイルの読み込み順序は、次のようになります。ファイルが存在した時点で、それ以降の設定ファイルは読み込みません。

  1. conf-(post_type).ini
  2. conf.ini

イメージフィールド、ファイルフィールドの使い方

このプラグインのメイン機能の一つ、イメージフィールド（imagefield）、ファイルフィールド（filefield）の使い方を説明します。

バリデーションの設定

当プラグインでは、ver 3.1 までは独自の必須チェック機能を取り入れていましたが、ver 3.2 から、独自の必須チェックを廃止し、「どんなフォームにも使えるjQueryのフォームバリデーション exValidation :: 5509」をバンドルさせていただきました。nori さん、ありがとうございます！

exValidation 用のクラス名は、validation オプションに指定します。複数のクラス名を指定するときは、半角スペース区切りで設定してください。バリデーションの詳細は、上記ページでご確認下さい。

なお、単純に「必須項目」にするだけであれば、must オプションに 1 を設定するだけで、exValidation の必須チェックが使えるようになっています。

テーマにカスタムフィールドを反映させる方法

最後に、テーマでカスタムフィールドを表示させる方法を紹介します。

注意

自分の環境では何度もテストはしているので大丈夫だと思いますが、当プラグインの使用により、何らかの不具合が生じても一切責任を負いません。それをご了承の上、ご使用ください。

以上です。

「Custom Field GUI Utility」に関連する記事

  • Posted by tinybeans
  • Custom Field GUI Utility, wordpress-plugin