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

WordPress 3.3 には、Custom Field GUI Utility 3.2 をご利用ください。

[2011-03-22] WordPress 3.1 に対応し、少しパワーアップした ver 3.1 を公開しました。それとともに、当ドキュメントも書き直しました。イメージフィールドやファイルフィールドの仕様を変更したので、利用中のプラグインはバージョンアップしない方が良いかもしれません。

ver 2.x はこちらをご覧ください。

Custom Field GUI Utility とは

このプラグインは、WordPress のカスタムフィールドを使いやすくするプラグインです。

オリジナルのプラグインは、「投稿」の編集画面にカスタムフィールドを入力するフォームを生成する「Custom Field GUI」です。当プラグイン（ Custom Field GUI Utility ）は、そのオリジナルのプラグインをさらに使いやすくカスタマイズしたものです。

オリジナルプラグインとの違い

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

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

「投稿」「ページ」「カスタム投稿タイプ」ごとにカスタムフィールドの表示・非表示を切り替えることができます。

カテゴリごとの使い分けが可能（ver 3.1 以降）

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

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

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

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

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

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

WordPress のオリジナルのアップローダーを使用し、画像の URL のみでなく、imgタグ、リンク付きの imgタグも簡単に挿入することができます。挿入する URL や img タグは、アップローダー上で、フルサイズの画像にするかサムネイルの画像にするかを選択できます。（ver 3.1 で廃止）

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

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

WordPress のオリジナルのアップローダーを使用し、ファイルの URL のみでなく、aタグも簡単に挿入することができます。（ver 3.1 で廃止）

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

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

必須項目を設定可能

必須項目を設定することができます。必須項目が未入力のまま「公開」ボタン等を押すと、未入力の必須項目がオーバーレイ表示されます（ver 2.0.0 以降）。我ながら良いアイデアだと思います。

区切り線が使用可能

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

最新版ダウンロード

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

• Downloads - custom-field-gui-utility-3 - Google Code

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

• tinybeans/wp-plugin-CustomFieldGuiUtility - GitHub

チェンジログはこちら

確認済みの動作環境

WordPress

Custom Field GUI Utility 3.1

WordPress 3.1（3.3には未対応）

Custom Field GUI Utility 3.0.0

• WordPress 2.9.x

ブラウザ

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

• Firefox 3 （推奨）
• Safari 3 以降 （推奨）
• Google chrome
• Internet Explorer 8
• Internet Explorer 7

Oprera も大丈夫だと思います。上記以外の環境ではテストはしていませんが一度お試しください。

使用する前の準備

設定ファイルの編集

ダウンロードしたファイルを解凍します。解凍してできた custom-field-gui-utility フォルダ内の conf.ini の内容を変更します。

conf.ini ファイルは、デフォルトでは全種類のフィールドのサンプルが設定されているので、それを適宜変更します。このファイルに並べた順番どおりに管理画面に表示されます。

• conf.ini のサンプル

各項目の役割は以下のとおりです。なお、カスタムフィールドのタイプごとに設定する項目が異なりますので、タイプごとの説明欄もご参照ください。

[半角大かっこ] （必須）

カスタムフィールドの「キー」に該当します。半角英数、「 _ 」「 - 」のみを使用してください。

fieldname （必須）

管理画面上に表示するカスタムフィールドの名前です。

type （必須）

カスタムフィールドの「値」の入力方法です。詳細は後述します。

class （必須）

「post」「page」またはカスタム投稿タイプの post_type （register_post_type関数の第一引数の値）を指定します。ここで指定した投稿タイプの編集画面に表示されるようになります。

複数指定する場合は、半角スペースを空けてください。

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

category

投稿の場合（上記 class で post が指定されているもの）、ここでカテゴリのスラッグ（slug）を指定することにより、カテゴリごとに表示を制御することができます（ver 3.1 以降）。ただし、今のところ、一度カテゴリを選択して保存しないと反映されません。複数指定する場合は、半角スペースで区切ります。

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

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

value

選択系メニューの項目名です。値は「#」（半角）で区切ります。ラジオボタン（radio）、セレクトメニュー（select）、チェックボックスグループ（multi_checkbox）のみ必要です。

default

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

rows

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

cols

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

size

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

sample

入力例や説明です。

must

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

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

このプラグインではカスタムフィールドの「値」の入力方法が、次の8種類 + 1種類に対応しています。

textfield

1行のテキスト入力フィールドです。入力されたテキストが値になります。
input 要素 : type="text"

【設定項目】

[custom_field_key]（必須）
fieldname = 表示名（必須）
type = textfield（必須）
class = post page free_class_name（必須）
category = cat1 cat2
default = 初期値
size = 35
sample = オススメのWebサイトのタイトルを入力してください
must = 1

imagefield

画像専用の1行のテキスト入力フィールドです。詳細は後述します。入力された URL が値になります。ver 1.1.0 から img タグも挿入できるようになりました。（ver 3.1 で廃止）
input 要素 : type="text"

【設定項目】

[custom_field_key]（必須）
fieldname = 表示名（必須）
type = imagefield（必須）
class = post page free_class_name（必須）
category = cat1 cat2
size = 35
sample = input the example or the caption
must = 1

filefield

ファイル専用の1行のテキスト入力フィールドです。詳細は後述します。入力された URL が値になります。ver 2.0.0 で追加しました。a タグも挿入できます。（ver 3.1 で廃止）
input 要素 : type="text"

【設定項目】

[custom_field_key]（必須）
fieldname = 表示名（必須）
type = filefield（必須）
class = post page free_class_name（必須）
category = cat1 cat2
size = 35
sample = input the example or the caption
must = 1

checkbox

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

【設定項目】

[custom_field_key]（必須）
fieldname = 表示名（必須）
type = checkbox（必須）
class = post page free_class_name（必須）
category = cat1 cat2
default = checked（初期値をチェック状態にする場合は「checked」を指定）
sample = input the caption
must = 1

multi_checkbox

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

【設定項目】

[custom_field_key]（必須）
fieldname = 表示名（必須）
type = multi_checkbox（必須）
class = post page free_class_name（必須）
category = cat1 cat2
value = HTML#CSS#JavaScript#PHP（必須）
default = HTML#CSS#PHP
sample = input the caption
must = 1

radio

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

【設定項目】

[custom_field_key]（必須）
fieldname = 表示名（必須）
type = radio（必須）
class = post page free_class_name（必須）
category = cat1 cat2
value = 0-9#10-19#20+（必須）
default = 10-19
sample = input the caption
must = 1

select

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

【設定項目】

[custom_field_key]（必須）
fieldname = 表示名（必須）
type = select（必須）
class = post page free_class_name（必須）
category = cat1 cat2
value = High#Medium#Low（必須）
default = Low
sample = input the caption
must = 1

textarea

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

【設定項目】

[custom_field_key]（必須）
fieldname = 表示名（必須）
type = textarea（必須）
class = post page free_class_name（必須）
category = cat1 cat2
rows = 4
cols = 40
sample = input the example or the caption
must = 1

hr

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

【設定項目】

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

インストール

上記で設定ファイルを編集した後、custom-field-gui-utility フォルダを wp-content/plugins/ ディレクトリにアップロードします。

管理画面の「プラグイン」より、このプラグインを「使用する」にすればOKです。

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

このプラグインのメイン機能の一つ、イメージフィールド（imagefield）、ファイルフィールド（filefield）の使い方を説明します。なお、これらの機能については、ver 3.1 から仕様が変更になりました。

• imagefield・filefield の使い方（ver 3.1 以降）
• imagefield・filefield の使い方（ver 3.0.x 以前）

必須項目の設定

ver 2.0.0 から「必須項目」を設定できるようになりました。必須にしたい項目に「must = 1」を追加すればOKです。詳しくは以下のページをご覧ください（動画あり）。

• カスタムフィールドを必須項目にする

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

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

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

ライセンス

The MIT License

商用利用の方は寄付をご検討いただければ幸いです。また、個別なカスタマイズ等は有料でお受けしますのでご相談ください。

Amazonギフト券でも大歓迎です。その場合は、「info@tinybeans.net」にお送りください。

チェンジログ

【2011-03-22 追記】

ver 3.1 を公開しました。カテゴリごとの表示の切り替えが可能になるとともに、イメージフィールド・ファイルフィールドの取り扱い方が変わりました。

【2010-03-13 追記】

区切り線のclassにpostやpageを指定しても、どちらにも表示されてしまう不具合を修正しました。

【2010-02-24 追記】

「Close」ボタンが表示されない不具合があり、facebox.js内のパスを修正した ver 3.0.3 を公開しました。

【2010-01-31 追記】

主に新規投稿時に不要なデータが保存されてしまうのを回避するように修正しました。

【2010-01-21】

ver 3.0.0 を公開しました。

注意

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

以上です。

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

• Custom Field GUI Utility 3.2.5 リリース
• Custom Field GUI Utility 3.2.4 リリース
• Custom Field GUI Utility の conf.ini ジェネレーターを作ってみた
• Custom Field GUI Utility 3.2 リリース - WordPress 3.3 に対応
• Custom Field GUI Utility 3.1 リリース
• 複数選択チェックボックスで選択された項目によって内容を変えるにはどうしたらいいの？ - Custom Field GUI Utility の FAQ
• Custom Field GUI Utility 3.0.5 アップデート - 「サムネイルのURL」ボタンの不具合修正など
• Custom Field GUI Utility の複数選択チェックボックスの出力の仕方
• Custom Field GUI Utility 3.0.4 アップデート - ちょっとした不具合を修正
• Custom Field GUI Utility を使っていて、新規作成が異様に重い場合などの対処法
• Custom Field GUI Utility 3 でカテゴリごとに表示するフィールドを切り替えるカスタマイズ
• Custom Field GUI Utility 3.0.2 - アップデート - 新規投稿時に不要な値が保存されるのを修正
• Custom Field GUI Utility 3.0.0 リリース
• Custom Field GUI Utility で拡張子が大文字の画像ファイルを挿入するときの不具合の対処法
• Custom Field GUI Utility 2.1.0 - アップデート - テキストフィールドにデフォルト文字を入れる機能を追加
• Custom Field GUI Utility 2.0.1 - アップデート
• Custom Field GUI Utility 2.0.0 - WordPress 2.8 でカスタムフィールドを便利に使うプラグイン
• Custom Field GUI Utility 1.1.2 にバージョンアップ
• Custom Field GUI Utility で生成されるカスタムフィールドをユーザーごとに使い分けるカスタマイズ
• Custom Field GUI Utility 1.1.1 にバージョンアップ