【2009-02-05 追記】

Custom Field GUI Utility 1.1.0 - WordPress 2.7 でカスタムフィールドを便利に使うプラグインを公開しました。WordPress 2.7 をお使いの方はこちらをお勧めします。

【2008-10-18 追記】

このブログ記事のプラグインのカスタマイズ版の『 Custom Field GUI Utility 』をバージョン 1.0.0 にバージョンアップしました。

WordPress 2.6.x をお使いの方はこちらをお勧めします。インターフェースが他のフィールドと同じになったり、画像のアップロード、サムネイル表示がスムーズにできます。

【2008-06-13 追記】

管理画面に反映されたフィールドの下にサンプルが表示できるようにしたり、「投稿の編集画面だけに表示」「ページの編集画面だけに表示」「両方の編集画面に共通して表示」という3パターンを使い分けられるようにした Custom Field GUI Utility というプラグインを公開しました。

【2008-06-05 追記】

Custom Field GUI をカスタマイズしてカスタムフィールドをもっと便利に使う方法という記事をアップしたので、あとでそちらもご覧ください。

【2008-04-10 追記】

試してみましたが、WordPress 2.5 でも問題なく動くみたいです。

WordPressのカスタムフィールド機能をグッと便利にするプラグインを紹介します。

柔軟なサイト運営を可能にするカスタムフィールド機能。Movable Typeでは4.1から追加されましたが、この機能はWordPressにもあります。

しかし、WordPressのカスタムフィールドの入力の仕方は、毎回「キー」をプルダウンメニューから選択するか入力して、それに対する「値」を入力後、「カスタムフィールドを追加」、それを繰り返して最後に記事を「公開」するという、ちょっと面倒な作業でした。

Wordpress ME 2.2.3 のカスタムフィールド入力画面

それをグッと楽にしてくれるプラグインが「Custom Field GUI」です。

このプラグインを利用すると、エントリー投稿画面に次のようなカスタムフィールドを入力するためのエリアが表示されます。なお、これはデフォルトの設定のままの画像です。

Custom Field GUIを利用した画面

エントリー投稿画面のデフォルトのカスタムフィールド欄を使わずに、この欄にまとめて入力して「公開」すれば完了してしまいます。変更する場合も、ここを変更して「保存」するだけになります。

では、使い方を紹介します。

まず、Rhymed Code » Custom Field GUIへアクセスし、「Download Custom Field GUI 1.5」というところから「rc-custom-field-gui-1.5.zip」をダウウンロードして、解凍します。

rc-custom-field-gui-1.5.zipのダウンロード

解凍したフォルダ内には次の4つのファイルが入っています。

  • conf-sample.ini
  • rc-custom-field-gui.class.php
  • rc-custom-field-gui.php
  • readmie.txt

次に、「conf-sample.ini」というファイル名を「conf.ini」に変更してからテキストエディタで開きましょう。ブログの文字コードがUTF-8であれば、このファイルもUTF-8で保存する必要があるので、UTF-8で保存できるエディタを使いましょう。僕は「秀丸」を使用しました。

このプラグインには管理画面などはありませんので、このconf.iniを書き換えることによって設定を変更することになります。

さて、conf.iniを開くとデフォルトでは以下のような内容になっています。

[Plan]
type = textfield
size = 35

[Favorite Post]
type = checkbox
default = checked

[Miles Walked]
type = radio
value = 0-9 # 10-19 # 20+
default = 10-19

[Temper Level]
type = select
value = High # Medium # Low
default = Low

[Hidden Thought]
type = textarea
rows = 4
cols = 40

[半角大かっこ]で囲まれた部分がカスタムフィールドの「キー」に該当し、その下のtypeで「値」の入力方法を指定して、value（値）、default（初期値）、rows（行数）、cols（幅）などを適宜指定します。このプラグインでは「値」の入力方法が、次の5種類に対応しています。

textfield（1行のテキスト入力フィールド）
入力されたテキストが値になります。
checkbox（チェックボックス）
ちょっと自信ないけどチェックが入っていると「TRUE」を入っていないと「FALSE」を返します。条件分岐に便利です。
radio（ラジオボタン、一つのみ選択可）
選択されたものが値になります。
select（プルダウンメニューから選択）
選択されたものが値になります。
textarea（複数行のテキスト入力フィールド）
入力されたテキストが値になります。

さて、実際に設定をカスタマイズしてみましょう。

例えば、本やセミナーなどの内容を紹介するページを作るとします。

「タイトル」を入力、「種類」「カテゴリ」「お勧め度」を選択して、「コメント」を入力します。アフィリエイトがてら、アマゾンのインスタントストアにリンクする場合は「インスタントストア」にチェックを入れて、「ISBN-10」を入力します。他のサイトにリンクしたいときは「リンク」をチェックして「参考サイト」にサイト名を入力し、「URL」にアドレスを入力する、というフィールドにしてみます。

[タイトル]
type = textfield
size = 35

[種類]
type = radio
value = 本 # 雑誌 # セミナー
default = 本

[カテゴリ]
type = select
value = XHTML # CSS # PHP # Web標準
default = XHTML

[お勧め度]
type = select
value = ★ # ★★ # ★★★ # ★★★★ # ★★★★★
default = ★★★

[コメント]
type = textarea
rows = 4
cols = 40

[インスタントストア]
type = checkbox

[ISBN-10]
type = textfield
size = 35

[リンク]
type = checkbox

[参考サイト]
type = textfield
size = 35

[URL]
type = textfield
size = 35

設定を変更したconf.iniをUTF-8で保存し、rc-custom-field-guiフォルダを「wp-content/plugins」ディレクトリにアップロード（readme.txtは削除してOK）して、Wordpressの管理画面の「プラグイン」で「rc:custom_field_gui」を「有効化」すれば準備完了です。

エントリー投稿画面を見ると次のようになります。セレクトボックスもちゃんとなっていますね。

wp-customfield04.gif

これを実際に記事に反映させるには、テンプレートをちょっとカスタマイズ必要があります。ここでは単純に、定義リストの形式でカスタムフィールドの内容を反映させてみます。

今回は、以下のようなソースをテンプレートに挿入してみます。

<dl>
  <dt>タイトル</dt>
  <dd><?php echo get_post_meta($post->ID,'タイトル',TRUE); ?></dd>

  <dt>種類</dt>
  <dd><?php echo get_post_meta($post->ID,'種類',TRUE); ?></dd>

  <dt>カテゴリ</dt>
  <dd><?php echo get_post_meta($post->ID,'カテゴリ',TRUE); ?></dd>

  <dt>お勧め度</dt>
  <dd><?php echo get_post_meta($post->ID,'お勧め度',TRUE); ?></dd>

  <dt>コメント</dt>
  <dd><?php echo get_post_meta($post->ID,'コメント',TRUE); ?></dd>

  <?php if ( get_post_meta($post->ID,'インスタントストア',TRUE) ): ?>
  <dt>インスタントストア</dt>
  <dd><a href="http://astore.amazon.co.jp/sufingbeginne-22/detail/<?php echo get_post_meta($post->ID,'ISBN-10',TRUE); ?>/249-6464091-7456369"><?php echo get_post_meta($post->ID,'タイトル',TRUE); ?></a></dd>
  <?php endif; ?>

  <?php if ( get_post_meta($post->ID,'リンク',TRUE) ): ?>
  <dt>参考サイト</dt>
  <dd><a href="<?php echo get_post_meta($post->ID,'URL',TRUE); ?>"><?php echo get_post_meta($post->ID,'参考サイト',TRUE); ?></a></dd>
  <?php endif; ?>
</dl>

テンプレートタグの部分を少し解説しておきます。

<?php echo get_post_meta($post->ID,'タイトル',TRUE); ?>

$post->IDでエントリーのIDを取得し、「タイトル」というキーに対する値をシングルの文字列（「TRUE」）で取得する、というものです。

<?php if ( get_post_meta($post->ID,'インスタントストア',TRUE) ): ?>～<?php endif; ?>

インスタントストアにチェックが入っている場合のみこの間を表示する、というものです。

あとはこれらを応用しただけですね。

さてさて、これを実際に表示してみると次のようになります。

wp-customfield05-big.jpg

以上です。

[参考リンク]