home > WordPress > プラグイン > WordPressのカスタムフィールドを...
- 【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のカスタムフィールドの入力の仕方は、毎回「キー」をプルダウンメニューから選択するか入力して、それに対する「値」を入力後、「カスタムフィールドを追加」、それを繰り返して最後に記事を「公開」するという、ちょっと面倒な作業でした。
それをグッと楽にしてくれるプラグインが「Custom Field GUI」です。
このプラグインを利用すると、エントリー投稿画面に次のようなカスタムフィールドを入力するためのエリアが表示されます。なお、これはデフォルトの設定のままの画像です。
エントリー投稿画面のデフォルトのカスタムフィールド欄を使わずに、この欄にまとめて入力して「公開」すれば完了してしまいます。変更する場合も、ここを変更して「保存」するだけになります。
では、使い方を紹介します。
まず、Rhymed Code » Custom Field GUIへアクセスし、「Download Custom Field GUI 1.5」というところから「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」を「有効化」すれば準備完了です。
エントリー投稿画面を見ると次のようになります。セレクトボックスもちゃんとなっていますね。
これを実際に記事に反映させるには、テンプレートをちょっとカスタマイズ必要があります。ここでは単純に、定義リストの形式でカスタムフィールドの内容を反映させてみます。
今回は、以下のようなソースをテンプレートに挿入してみます。
<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; ?>インスタントストアにチェックが入っている場合のみこの間を表示する、というものです。
あとはこれらを応用しただけですね。
さてさて、これを実際に表示してみると次のようになります。
以上です。
TrackBack [0]
- TrackBack URL
- Link to this Entry
初歩的すぎる質問で大変もうしわけないですが、テンプレートの挿入というのはどのファイルにすればいいのでしょうか？
テーマスキンのindex.phpとかでしょうか・・・？
まおさん、はじめまして。コメントありがとうございます。
挿入するテンプレートというのは、カスタムフィールドに入力した内容をどのページに表示させたいかによってことなります。
いずれにしても。wp-content/themes の中の使用中のテーマディレクトリ内のファイルになります。
トップページに表示させたいのであれば index.php（のループの中）、投稿記事の個別ページに表示させたいのであれば single.php、ページに表示させたいのであれば page.php といった感じになります。
答えになったでしょうか？
また、当ブログでは Custom Field GUI Utility という Custom Field GUI にちょこっとだけ手に入れたプラグインも置いてあります。こちらのプラグインだと、表示名とカスタムフィールド「キー」を別々にできるので、自分で言うのも何ですがお勧めです。
IE7で使用しているところ、一度投稿した記事を投稿の管理から再編集するときに、カスタムフィールドに追加してあるチェックボックスが最初の投稿時にチェックしていても、チェックが外れて表示されてしまいます。
Firefoxでは、チェックボックスのチェックが維持されてまま表示されます。
IE7でもチェックが維持できる方法があるでしょうか？
よろしくお願い致します。
まささん、コメントありがとうございます。
ご質問いただいた不具合については、どうやらプラグインが WordPress の管理画面に生成する (X)HTML の書式が原因のようです。
解消方法をエントリーしましたので、詳細は以下をご覧ください。
IE で Custom Field GUI Utility のチェックが外れてしまう件を修正
当サイトで公開しているカスタマイズ版についても修正版を公開しております。
ご指摘ありがとうございます。
こんにちは、プラグイン利用させていただきました。
とても使いやすいです。
ただバージョン2.7だと投稿画面の一番下に表示されてしまいます。
もっと上に表示したいのですが、無理でしょうか。
今後もご活躍を期待しております。
寒いのでお体にお気をつけてください。
caz さん、コメントありがとうございます。
WordPress 2.7 になって、管理画面が大きく変わりましたので、現在当サイトで配布している Custom Field GUI Utility では、モニターのサイズによって多少表示が乱れたり、ドラッグ・ドロップで移動できなかったりします。
近日中に 2.7 対応版を作りたいと思いますので、申し訳ございませんが、少々お待ちください。
よろしくお願いいたします。
管理人様
ご回答ありがとうございました。
別の質問なのですが、textareaではdefaultは設定できませんでしょうか。
こちらのブログのコメントフォームのように最初に文字を表示させておくことは可能でしょうか。
お忙しいところ教えて君で恐縮ですがよろしくお願いいたします。
caz さん、こんにちは。
textarea に default 値を入れることは可能ですが、僕のブログのようにフォーカスしたときにデフォルト値を消すには JavaScript をかませる必要があります。ひょっとしたら全部 jQuery でやってしまった方が楽かもしれません。
ちょっとお時間をくださいませ。お待たせしてすみません。
caz さん、こんにちは。
textarea に default 値を入れることは可能ですが、僕のブログのようにフォーカスしたときにデフォルト値を消すには JavaScript をかませる必要があります。ひょっとしたら全部 jQuery でやってしまった方が楽かもしれません。
ちょっとお時間をくださいませ。お待たせしてすみません。