[2010-04-22] バージョン 3.0.5 を公開しました。

バージョン 2.x はこちらをご覧ください。

Custom Field GUI Utility とは

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

cfgu200-01-thumb.png

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

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

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

3種類の使い分けが可能

次の３種類のカスタムフィールドを使い分けることができます。

  • 「投稿」と「ページ」に共通して使うカスタムフィールド
  • 「投稿」のみで使うカスタムフィールド
  • 「ページ」のみで使うカスタムフィールド
カスタムフィールドの表示名を自由に変更可能

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

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

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

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

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

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

イメージフィールドとほぼ同様の仕組みで、サムネイル表示のないファイルフィールドを搭載しています（バージョン 2.0.0 より追加）。

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

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

複数選択できるチェックボックスグループを搭載しています（バージョン 2.0.0 より追加）。

必須項目を設定可能

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

区切り線が使用可能

カスタムフィールドの間に区切り線を入れることができます。カスタムフィールドが多くなったときに便利です（バージョン 1.1.2 より追加）。

最新版ダウンロード

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

チェンジログはこちら

寄付

もしこのプラグインで「Webサイトの制作が楽になった」と思ったら、ほんの気持ちで結構ですので寄付をご検討いただければ嬉しいです。

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

確認済みの動作環境

WordPress

Custom Field GUI Utility 3.0.0
  • WordPress 2.9.x

ブラウザ

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

  • Firefox 3 （推奨）
  • Safari 3 以降 （推奨）
  • Google chrome
  • Internet Explorer 8
  • Internet Explorer 7
  • Internet Explorer 6 （極めて非推奨）

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

使用する前の準備

設定ファイルの編集

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

conf.ini ファイルは、デフォルトでは以下のように設定されていますので、それを適宜変更してください。このファイルに並べた順番どおりに管理画面に表示されます。

[textfield]
fieldname = 1行テキスト（共通表示）
type = textfield
class = post page
default = 初期値
size = 35
sample = オススメのWebサイトのタイトルを入力してください
must = 1

[imagefield]
fieldname = 画像（共通表示）
type = imagefield
class = post page
size = 35
sample = input the example or the caption
must = 1

[filefield]
fieldname = ファイル（共通表示）
type = filefield
class = post page
size = 35
sample = input the example or the caption

[hr]
fieldname = 区切り線
type = hr
class = post page

[checkbox]
fieldname = チェックボックス（共通表示）
type = checkbox
class = post page
default = checked
sample = input the caption

[multi_checkbox]
fieldname = 複数選択チェックボックス（共通表示）
type = multi_checkbox
class = post page
value = HTML#CSS#JavaScript#PHP
default = HTML#CSS
sample = input the caption

[radio]
fieldname = ラジオボタン（共通表示）
type = radio
class = post page
value = 0-9#10-19#20+
default = 10-19
sample = input the caption

[select]
fieldname = セレクトメニュー（共通表示）
type = select
class = post page
value = High#Medium#Low
default = Low
sample = input the caption

[textarea]
fieldname = 複数行テキスト（共通表示）
type = textarea
class = post page
rows = 4
cols = 40
sample = input the example or the caption

各項目の役割は以下のとおりです。

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

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

cfgu200_key.png

fieldname （必須）

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

cfgu200_fieldname.png

type （必須）

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

class （必須）

「post」「page」を指定します。post を指定したものは「投稿」編集画面に表示され、page を指定したものは「ページ」編集画面に表示されます。両方指定したものは、両方の編集画面に表示されます。

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

また、ここに指定できるのは post, page に限らず、半角英数なら何でもOKです。ここに指定した値がフィールドのボックスの class 名になります。

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 を設定すると必須項目になります。必須項目には、カスタムフィールド名の先頭に必須マークが表示されます。

cfgu200_must.png

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

textfield

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

cfgu200_textfield.png

imagefield

画像専用の1行のテキスト入力フィールドです。入力された URL が値になります。バージョン 1.1.0 から img タグも挿入できるようになりました。
input 要素 : type="text"

cfgu200_imagefield.png

filefield

ファイル専用の1行のテキスト入力フィールドです。入力された URL が値になります。バージョン 2.0.0 で追加しました。a タグも挿入できます。
input 要素 : type="text"

cfgu200_filefield.png

checkbox

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

cfgu200_checkbox.png

multi_checkbox

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

cfgu200_multi_checkbox.png

radio

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

cfgu200_radio.png

select

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

cfgu200_select.png

textarea

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

cfgu200_textarea.png

hr

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

cfgu200_hr.png

インストール

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

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

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

プラグイン全体の使い方で迷うことはないと思いますが、使い方が特殊なイメージフィールド、ファイルフィールドについて使用方法を説明します。なお、ファイルフィールドと a タグを挿入する機能はバージョン 2.0.0 から追加されました。

cfgu200_imagefield_howto.png

イメージフィールド、ファイルフィールドへの入力方法は、テキストフォームに直接入力する方法と、WordPress のアップローダーを利用する方法があります。

また、挿入される画像の URL は、フルサイズの画像のみならず、サムネイルのサイズを選択してその URL を利用することができます。

URL等を直接入力する方法

テキストフォームに画像の URL を直接入力します。img タグ、a タグは直接入力しない方がいいですが、直接入力する場合は、img タグの場合は src 属性を、a タグの場合は href 属性を一番最初に持ってきてください。

キャンセルをクリックすると、テキストエリアに入力された値とサムネイルが削除されます。アップロードされた画像は削除されません。

アップローダーを利用する方法

アップローダーを利用する方法は、Custom Field GUI Utility のバージョンによって異なります。

テキストフォーム下の メディアを追加 のアイコンをクリックします。WordPress オリジナルのアップローダーを使用しています。

アップローダーでの画像のアップロード方法は通常通りです。

cfgu200_uploader.png

当プラグインを有効にすると、アップローダーの「投稿に挿入」ボタンの周辺が次のように変わります。

cfgu200_uploader_insert.png

この「カスタムフィールドに挿入 : 」の右にあるボタンをクリックすると、そのボタンに対応した値がカスタムフィールドに挿入され、イメージフィールドの場合はサムネイルが表示されます。

「imgタグ」ボタンをクリックすると、アップローダーの各項目が次のとおり各属性となり、img タグがカスタムフィールドに挿入され、サムネイルが表示されます。

  • タイトル : キャプションに値がない場合は、 alt 属性 （必須）
  • キャプション : キャプションに値を入力した場合は、こちらが優先して alt 属性 （省略可）
  • 説明 : title 属性 （省略可）
  • リンクURL : src 属性 （必須）

この img タグには「class="cfg_img"」が付与されます。スタイルを指定するのにお使いください。

「aタグ」ボタンをクリックすると、アップローダーの各項目が次のとおり各属性となり、a タグがカスタムフィールドに挿入されます。画像ファイルの場合は、リンク付きの imgタグになります。

  • タイトル : a タグ内のテキスト （必須）
  • 説明 : title 属性 （省略可）
  • リンクURL : href 属性 （必須）

この a タグには「class="cfg_link"」が付与されます。スタイルを指定するのにお使いください。

また、カスタムフィールドに URL、imgタグ、aタグが挿入されると、そのファイルに対応するアイコンが表示されます。

サムネイルをクリックすると、実画像がオーバーレイ表示されます（ Facebox 1.2 を使用）。

また、「サイズ」欄でサムネイルのサイズを選択し、「サムネイルの URL」ボタンをクリックすると、そのサムネイル画像の URL が「リンク URL」欄に挿入されます。

cfgu200_thumb.png

必須項目の設定

バージョン 2.0.0 から「必須項目」を設定できるようになりました。必須にしたい項目に「must = 1」を追加すればOKです。

【例】　１行テキストを必須項目にする場合

[textfield_common]
fieldname = 1行テキスト（共通表示）
type = textfield
size = 35
sample = input the example or the caption
must = 1

必須項目には、カスタムフィールド名の先頭に必須マークが表示されます。

cfgu200_must.png

必須項目が未入力のまま「公開」ボタン等を押すと、未入力の必須項目がオーバーレイ表示されます。

cfgu200_must_item.png

オーバーレイ表示された状態で通常通り入力できるので便利です。

動画もご覧ください。

cfgu_must.js

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

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

「キー」と「値」をセットでリストアップするテンプレートタグ

<?php the_meta(); ?>

記事に保存されているカスタムフィールドについて、単純に「キー：値」という形式で ul 、li 、span 要素でリストアップします。

「キー」はデフォルトのままにして適当な「値」を入力すると、「投稿」では以下のような出力結果となります。

<ul class="post-meta">
<li><span class="post-meta-key">checkbox_common:</span> true</li>
<li><span class="post-meta-key">checkbox_post:</span> true</li>
<li><span class="post-meta-key">imagefield_common:</span> http://www.tinybeans.net/wp_test/wordpress262/wp-content/uploads/2008/10/cfgu_doc10.gif</li>
<li><span class="post-meta-key">imagefield_post:</span> http://www.tinybeans.net/blog/img/common/sitename.png</li>
<li><span class="post-meta-key">radio_common:</span> 10-19</li>
<li><span class="post-meta-key">radio_post:</span> 0-9</li>
<li><span class="post-meta-key">select_common:</span> Low</li>
<li><span class="post-meta-key">select_post:</span> High</li>
<li><span class="post-meta-key">textarea_common:</span> 複数行テキスト（共通表示）の値です。複数行テキスト（共通表示）の値です。複数行テキスト（共通表示）の値です。複数行テキスト（共通表示）の値です。</li>
<li><span class="post-meta-key">textarea_post:</span> 複数行テキスト（投稿表示）の値です。複数行テキスト（投稿表示）の値です。複数行テキスト（投稿表示）の値です。複数行テキスト（投稿表示）の値です。</li>
<li><span class="post-meta-key">textfield_common:</span> 1行テキスト（共通表示）の値</li>
<li><span class="post-meta-key">textfield_post:</span> 1行テキスト（投稿表示）の値です。</li>
</ul>

「キー」でソートされて出力されます。

「キー」を指定して「値」を出力するテンプレートタグ

<?php echo post_custom('キー')?>

記事に保存されている「キー」を指定して、その「キー」に対する「値」を出力するテンプレートタグです。

既知の問題

投稿等を新規作成した際、デフォルトのカスタムフィールド欄にキーと値がだぶって表示されてしまいます。そもまま保存しても値は保存されないようなので、DBには影響ないと思います。

ライセンス

The MIT License

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

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

カテゴリごとに設定ファイルを切り替えたい場合は？

この機能に対応した、当プラグインのカスタマイズ版が以下のサイトで公開されています。

チェンジログ

【2010-03-13 追記】

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

【2010-02-24 追記】

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

【2010-01-31 追記】

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

【2010-01-21】

バージョン 3.0.0 を公開しました。

注意

自分の環境では何度もテストはしているので大丈夫だと思いますが、僕はPHPは素人ですので、使用は自己責任でお願いいたします。不具合が生じても一切責任を負いません。

Custom Field GUI Utility プラグインに関するブログ記事

以上です。