このプラグインは、WordPress の「投稿」及び「ページ」の編集画面に、カスタムフィールドを入力するためのフォーム要素を生成し、カスタムフィールドを使いやすくするインターフェースを提供するプラグインです。

オリジナルのプラグインは、「投稿」の編集画面に、上記のインターフェースを提供するプラグイン「Custom Field GUI」です。当プラグイン（ Custom Field GUI Utility ）は、そのオリジナルのプラグインをさらに使いやすくカスタマイズしたものです。

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

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

  • 「投稿」と「ページ」に共通して使うカスタムフィールド、「投稿」のみで使うカスタムフィールド、「ページ」のみで使うカスタムフィールドの3種類を使い分けられる。
  • カスタムフィールドの「キー」と管理画面上の「表示名」を使い分けられる。
  • 「投稿」及び「ページ」の編集画面に生成されたフォームの下に、入力例や説明など任意のテキストを表示できる。
  • 画像の URL を入力すると編集画面上でサムネイル表示をさせて画像を確認できる「イメージフィールド」を搭載している。

最新版ダウンロード

チェンジログはこちら

確認済みの動作環境

WordPress

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

ブラウザ

以下、いずれも WordPress 2.6.x で確認しました。ブラウザが影響するのはイメージフィールドのアップローダーやサムネイル表示部分です。カスタムフィールドの機能自体は使用できると思います。

  • Firefox 3.0.3 （推奨）
  • Firefox 2.0
  • Safari 3.1.1 (Windows) （推奨）
  • Google chrome （推奨）
  • Internet Explorer 7
  • Internet Explorer 6

Oprera は 9.6.2 でもイメージフィールド周りがダメでした。というか、WordPress そもそものアップローダーも表示されません。上記以外の環境ではテストはしていませんが一度お試しください。

使用する前の準備

設定ファイルの編集

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

  • conf-common.ini （投稿とページの編集画面に共通して反映）
  • conf-post.ini （投稿の編集画面に反映）
  • conf-page.ini （ページの編集画面に反映）

これらの conf ファイルは、デフォルトでは以下のように設定されていますので、それを適宜変更してください。


【例】 conf-common.ini の場合

[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

[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

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

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

カスタムフィールドの「キー」に該当します。半角英数、「 _ 」「 - 」のみ使用することを強く推奨します。

cfgu_doc01.gif

fieldname （必須）

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

cfgu_doc02.gif

idname

imagefieldの「ID」（イメージフィールドのみ）
※「キー」に日本語を使用している場合は必須、重複不可）

idname はイメージフィールド専用で、カスタムフィールドの「キー」に該当する [半角大かっこ] に日本語を使用している場合のみ必要です。イメージフィールドを操作する JavaScript で使用しますので、それぞれのイメージフィールドに固有の id 名（半角英数）を付け、他と重ならないように注意してください。

type （必須）

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

value

選択項目（ラジオボタン、セレクトメニューのみ）

default

初期値（チェックボックス、ラジオボタン、セレクトメニューのみ）

rows

行数（複数行テキストエリアのみ）

cols

幅（複数行テキストエリアのみ）

size

横幅（1行テキスト、イメージフィールド、複数行テキストエリアのみ）

sample

入力例や説明

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

textfield

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

cfgu_doc03.gif

imagefield

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

cfgu_doc04.gif

checkbox

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

cfgu_doc05.gif

radio

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

cfgu_doc06.gif

select

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

cfgu_doc07.gif

textarea

複数行のテキスト入力フィールドです。入力されたテキストが値になります。
textarea 要素

cfgu_doc08.gif

今後、複数選択できるチェックボックスかセレクトメニューを追加する予定です。

なお、「今はページと投稿に共通に表示されるものだけでいい」というときなど、必要のないファイルは適当にリネームしておけば反映されなくなります。

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

facebox.js の編集

当プラグインでは、バージョン 1.0.0 から、イメージフィールドのサムネイルをクリックしたときの実画像表示に Facebox 1.2 を使用しています。

ここで、WordPress のサイトをドメイン直下以外のディレクトリにインストール下場合には注意が必要です。

WordPress のサイトをドメイン直下以外で公開する、つまり当ブログのように次のような URL でブログを運営するときは、Facebox が完全には動作しません。

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

そこで、rc-custom-field-gui-utility/facebox/facebox.js ファイルをテキストエディタで開き、77 行目を次のように変更し、デフォルトのファイルを上書きします。

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

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

インストール

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

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

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

基本的に使い方で迷うことはないと思いますが、使い方が特殊なイメージフィールドについてのみ、使用方法を説明します。

cfgu_doc04.gif

イメージフィールドは、画像の URL を入力することを前提としています。入力方法は、テキストエリアに直接入力する方法と、アップローダーを利用する方法があります。

テキストエリアに直接入力する方法

テキストエリアに画像の URL を入力します。「サムネイルを表示」をクリックするとサムネイルが表示されます。

「クリア」をクリックすると、テキストエリアに入力された URL とサムネイルが削除されます。

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

テキストエリア下の メディアを追加 のどちらかのアイコンをクリックします。左が画像専用、右がメディア全般です。どちらも WordPress オリジナルのアップローダーを使用しています。

アップローダーは通常通りの使用方法で、最後に「イメージフィールドに挿入」ボタンをクリックすると、イメージフィールドのテキストエリアに画像の URL が挿入され、サムネイルが表示されます。

これは、アップローダーの「ファイルの選択」（新規のアップロード）、「ギャラリー」、「メディアライブラリー」のすべてに対応していますが、「イメージフィールドに挿入」ボタンの位置が違うので注してください。

「ファイルの選択」（新規のアップロード）では一番下の方にボタンがあります。

cfgu_doc11.gif

「ギャラリー」、「メディアライブラリー」では、挿入するリンクURL のテキストエリアのすぐ下にあります。

cfgu_doc13.gif

サムネイルをクリックすると、実画像がオーバーレイ表示されます（ Facebox 1.2 を使用）。Facebox を起動したときに右下に「 CLOSE 」が表示されない場合は、上記の説明を参考にして facebox.js を修正してください。

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

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

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

<?php the_mete(); ?>

記事に保存されているカスタムフィールドについて、単純に「キー：値」という形式で 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>
<!-- /カスタムフィールド出力用テンプレートタグ -->

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

チェンジログ

【2008-10-18】

インターフェースを刷新し、機能を向上させたバージョン 1.0.0 を公開しました。

【2008-09-13】

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

【2008-07-07】

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

【2008-06-23】

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

注意

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

でも、もし何か不具合がありましたらコメントなりメールなりいただければ、できる範囲で頑張って対処してみます。

以上です。