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

バージョン 3.x を公開しました。最新のバージョンについてはこちらをご覧ください。

Custom Field GUI Utility とは

このプラグインは、WordPress の「投稿」及び「ページ」の編集画面に、使いやすいカスタムフィールドを生成するプラグインです。

（バージョン 1.1.0 の画面はこちら）

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

※１　当プラグイン自体も、バージョン 1.0 からインターフェース等をガラッと変えました。過去のバージョン（ 0.31 まで）をお使いの方は、「Custom Field GUI Utility 0.31」のページをご覧ください。

※２　当プラグインは、ご利用いただいているユーザー様からの要望を頻繁に取り入れバージョンアップしています。そのため、ご利用になっているバージョンと最新バージョンでは、機能がだいぶ違うかもしれません。各バージョンで変更した部分は、「チェンジログ」にある各記事をご覧ください。

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

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

3種類の使い分けが可能

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

• 「投稿」と「ページ」に共通して使うカスタムフィールド
• 「投稿」のみで使うカスタムフィールド
• 「ページ」のみで使うカスタムフィールド

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

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

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

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

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

また、WordPress のオリジナルのアップローダーを使用し、画像の URL のみでなく、imgタグも簡単に挿入することができます。挿入する URL や img タグは、アップローダー上で、フルサイズの画像にするかサムネイルの画像にするかを選択できます（バージョン 1.1.0 より追加。サムネイル関係は 1.1.1 より追加）。

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

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

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

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

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

必須項目を設定可能

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

区切り線が使用可能

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

最新版ダウンロード

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

チェンジログはこちら

寄付

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

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

確認済みの動作環境

WordPress

Custom Field GUI Utility 2.0.0

• WordPress 2.8.x

Custom Field GUI Utility 1.1.x

• WordPress 2.7.x

Custom Field GUI Utility 1.0.0

• WordPress 2.6.x （推奨）
• WordPress 2.5.x
• WordPress 2.3.x （ただし、イメージフィールド周りのアップローダー機能やサムネイル表示はできません）

ブラウザ

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

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

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

使用する前の準備

設定ファイルの編集

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

• rc-custom-field-gui-utility
  • conf-common.ini （投稿・ページ共通）
  • conf-post.ini （投稿用）
  • conf-page.ini （ページ用）

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

※　「filefield」「multi_checkbox」のブロックや「must」は、バージョン 2.0.0 以降用です。このほか、バージョンによって多少内容が異なるので、プラグインフォルダに同梱されているファイルを参照してください。

【例】 conf-common.ini の場合（バージョン2.1.0）

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

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

[imagefield_common2]
fieldname = 画像（共通表示）
idname = imagefield_idname_common_2
type = imagefield
size = 35
sample = input the example or the caption

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

[hr_common]
fieldname = 区切り線
type = hr

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

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

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

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

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

【例】 conf-common.ini の場合（バージョン1.1.2まで）

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

[imagefield_common]
fieldname = 画像（共通表示）
idname = imagefield_idname_common
type = imagefield
size = 35
sample = input the example or the caption

[hr]
fieldname = 区切り線
type = hr

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

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

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

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

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

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

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

fieldname （必須）

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

idname（必須・重複不可）

イメージフィールド（imagefield）、ファイルフィールド（filefield）のみ必要です。他のタイプには必要ありません。

アップローダーを操作する JavaScript で使用しますので、それぞれのフィールドに固有の id 名（半角英数）を付け、他と重ならないように注意してください。

type （必須）

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

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種類に対応しています。

textfield

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

imagefield

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

filefield

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

checkbox

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

multi_checkbox

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

radio

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

select

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

textarea

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

hr

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

なお、「今はページと投稿に共通に表示されるものだけでいい」というときなど、必要のない設定ファイル（ conf-xxx.ini ）は適当にリネームしておけば管理画面に反映されなくなります。

（例）「共通」だけで良い場合
conf-common.ini 、 --conf-post.ini 、 --conf-page.ini

※　バージョン 1.1.2 までをご利用の場合は facebox.js の編集が必要です。

http://www.tinybeans.net/blog/

[変更前]
var yourpathname = '/';

[変更後（http://www.tinybeans.net/blog/ で公開する場合）]
var yourpathname = '/blog/';

インストール

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

• wp-content
  • plugins
    • rc-custom-field-gui-utility
      • cfg.css
      • conf-common.ini
      • conf-page.ini
      • conf-post.ini
      • facebox
      • rc-custom-field-gui-common.class.php
      • rc-custom-field-gui-page.class.php
      • rc-custom-field-gui-post.class.php
      • rc-custom-field-gui.js
      • rc-custom-field-gui.php
      • readme.txt

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

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

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

イメージフィールド、ファイルフィールドへの入力方法は、テキストフォームに直接入力する方法と、WordPress のアップローダーを利用する方法があります。なお、当初は画像の URL を入力することを前提としていましたが、アップローダーを使用することにより、img タグ、a タグも入力できるようになりました。

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

URL等を直接入力する方法

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

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

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

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

必須項目の設定

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

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

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

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

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

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

動画もご覧ください。

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

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

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

<?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('キー')?>

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

サンプル

テストしてみましょう。今、デフォルトテーマ（ WordPress Default 1.6 ）の単一記事の投稿（ single.php ）とページテンプレート（ page.php ）に、以下のようなテンプレートタグを貼り付けてみます。貼り付ける位置は、いずれも次の 1 行の直後とします。

<h2><?php the_title(); ?></h2>

【貼り付けるテンプレートタグ】

<!-- カスタムフィールド出力用テンプレートタグ -->
<h3>キーと値をセットですべてリストアップ</h3>
<p>==========リストアップの結果は以下==========</p>
<?php the_meta(); ?>
<p>==========リストアップの結果は以上==========</p>

<h3>指定したキーに対する値を出力</h3>
<p>==========出力の結果は以下==========</p>
<p><strong>【「共通」に保存されたカスタムフィールドは以下のとおり。】</strong></p>
<dl>
<dt>1行テキスト（共通表示）</dt>
<dd>値 = <?php echo post_custom('textfield_common'); ?></dd>
<dt>画像（共通表示）</dt>
<dd>値 = <?php echo post_custom('imagefield_common'); ?></dd>
<dt>チェックボックス（共通表示）</dt>
<dd>値 = <?php echo post_custom('checkbox_common'); ?></dd>
<dt>ラジオボタン（共通表示）</dt>
<dd>値 = <?php echo post_custom('radio_common'); ?></dd>
<dt>セレクトメニュー（共通表示）</dt>
<dd>値 = <?php echo post_custom('select_common'); ?></dd>
<dt>複数行テキスト（共通表示）</dt>
<dd>値 = <?php echo post_custom('textarea_common'); ?></dd>
</dl>

<p><strong>【「投稿」に保存されたカスタムフィールドは以下のとおり。】</strong></p>
<dl>
<dt>1行テキスト（投稿表示）</dt>
<dd>値 = <?php echo post_custom('textfield_post'); ?></dd>
<dt>画像（投稿表示）</dt>
<dd>値 = <?php echo post_custom('imagefield_post'); ?></dd>
<dt>チェックボックス（投稿表示）</dt>
<dd>値 = <?php echo post_custom('checkbox_post'); ?></dd>
<dt>ラジオボタン（投稿表示）</dt>
<dd>値 = <?php echo post_custom('radio_post'); ?></dd>
<dt>セレクトメニュー（投稿表示）</dt>
<dd>値 = <?php echo post_custom('select_post'); ?></dd>
<dt>複数行テキスト（投稿表示）</dt>
<dd>値 = <?php echo post_custom('textarea_post'); ?></dd>
</dl>

<p><strong>【「ページ」に保存されたカスタムフィールドは以下のとおり。】</strong></p>
<dl>
<dt>1行テキスト（ページ表示）</dt>
<dd>値 = <?php echo post_custom('textfield_page'); ?></dd>
<dt>画像（ページ表示）</dt>
<dd>値 = <?php echo post_custom('imagefield_page'); ?></dd>
<dt>チェックボックス（ページ表示）</dt>
<dd>値 = <?php echo post_custom('checkbox_page'); ?></dd>
<dt>ラジオボタン（ページ表示）</dt>
<dd>値 = <?php echo post_custom('radio_page'); ?></dd>
<dt>セレクトメニュー（ページ表示）</dt>
<dd>値 = <?php echo post_custom('select_page'); ?></dd>
<dt>複数行テキスト（ページ表示）</dt>
<dd>値 = <?php echo post_custom('textarea_page'); ?></dd>
</dl>
<p>==========出力の結果は以上==========</p>
<!-- /カスタムフィールド出力用テンプレートタグ -->

実際のページは次のようになります。画像を見れば分かるとおり、「共通」と「投稿」のカスタムフィールドの値のみ出力されます。

• 「投稿」の出力結果の画像
• 「ページ」の出力結果の画像

ラジオボタンを横並びにする方法

バージョン 1.1.3 以降はデフォルトで横並びにしました。

[デフォルト]
/* Inline Radio Button 　※下の「*/」をここに移動する
p.rc_radio_button {
	display: inline;
}*/　※この「*/」を上に移動する

[横並びにする]
/* Inline Radio Button */
p.rc_radio_button {
	display: inline;
}

ライセンス

The MIT License

もっと本などで勉強してスキルを上げ、より使いやすいプラグインを開発したいと思います。そのために、ほんの気持ちの寄付をご検討いただければ嬉しいです。

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

チェンジログ

【2010-01-31 追記】

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

【2009-08-06】

テキストフィールド（textfield）に初期値を設定する機能を追加しました。JavaScriptを使用し、フォーカスしたときに初期値が消え、フォーカスを外したときに未入力であれば再び初期値を表示するようにしました。

【2009-08-05】

「ページ」の新規投稿および編集時に、必須項目が未入力の際に「公開」および「ページを更新」ボタンが隠れてしまう不具合を修正しました。

【2009-07-10】

バージョン 2.0.0 （WordPress 2.8 に対応）および 1.1.3 （WordPress 2.7 用を微調整）を公開しました。

【2009-06-04】

区切り線を入れることができるバージョン 1.1.2 を公開しました。また、このページの説明を少し見やすくしました。

【2009-05-21】

イメージフィールドをサムネイルURLに対応させたバージョン 1.1.1 を公開しました。
Custom Field GUI Utility 1.1.1 にバージョンアップ

【2009-02-05】

WordPress 2.7.x に対応したバージョン 1.1.0 を公開しました。
Custom Field GUI Utility 1.1.0 - WordPress 2.7 でカスタムフィールドを便利に使うプラグイン

【2008-10-18】

インターフェースを刷新し、機能を向上させたバージョン 1.0.0 を公開しました。
Custom Field GUI Utility 1.0.0 にバージョンアップ

【2008-09-13】

IE で、チェックボックスのチェックが保存後に外れてしまう不具合を修正したバージョン 0.31 を公開しました。

【2008-07-07】

カスタムフィールドの「キー」と管理画面上の「表示名」を使い分けられるバージョン 0.3 を公開しました。

【2008-06-23】

イメージフィールドを追加したバージョン 0.2 を公開しました。

注意

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

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

• 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 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 でカスタムフィールドを便利に使うプラグイン
• WordPressのカスタムフィールドで選択した大分類によって小分類の内容を変えるカスタマイズ
• Custom Field GUI Utility 1.1.2 にバージョンアップ
• Custom Field GUI Utility で生成されるカスタムフィールドをユーザーごとに使い分けるカスタマイズ
• Custom Field GUI Utility 1.1.1 にバージョンアップ
• Custom Field GUI Utility 1.1.0 - WordPress 2.7 でカスタムフィールドを便利に使うプラグイン
• Custom Field GUI Utility の使い方などの FAQ
• Custom Field GUI Utility 1.0.0 にバージョンアップ
• IE で Custom Field GUI Utility のチェックが外れてしまう件を修正
• WordPressに公開承認フローを導入

以上です。