home > Custom Field GUI Utility - WordPress プラグイン
Custom Field GUI Utility - WordPress プラグイン
- 2008年10月16日 06:02
- WordPress Plugin
このプラグインは、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
各項目の役割は以下のとおりです。
- [半角大かっこ] (必須)
カスタムフィールドの「キー」に該当します。半角英数、「 _ 」「 - 」のみ使用することを強く推奨します。
- fieldname (必須)
管理画面上に表示するカスタムフィールドの名前です。
- idname
imagefieldの「ID」(イメージフィールドのみ)
※「キー」に日本語を使用している場合は必須、重複不可)idname はイメージフィールド専用で、カスタムフィールドの「キー」に該当する [半角大かっこ] に日本語を使用している場合のみ必要です。イメージフィールドを操作する JavaScript で使用しますので、それぞれのイメージフィールドに固有の id 名(半角英数)を付け、他と重ならないように注意してください。
- type (必須)
カスタムフィールドの「値」の入力方法。詳細は後述。
- value
選択項目(ラジオボタン、セレクトメニューのみ)
- default
初期値(チェックボックス、ラジオボタン、セレクトメニューのみ)
- rows
行数(複数行テキストエリアのみ)
- cols
幅(複数行テキストエリアのみ)
- size
横幅(1行テキスト、イメージフィールド、複数行テキストエリアのみ)
- sample
入力例や説明
このプラグインではカスタムフィールドの「値」の入力方法が、次の5種類に対応しています。
- textfield
1行のテキスト入力フィールドです。入力されたテキストが値になります。
input 要素 : type="text"- imagefield
画像の URL 専用の1行のテキスト入力フィールドです。入力された URL が値になります。
input 要素 : type="text"- checkbox
チェックボックスです。チェックが入っていると「 true 」、入っていないと「 false 」が値となります。条件分岐に便利です。
input 要素 : type="checkbox"- radio
ラジオボタンです。一つのみ選択可能で選択された項目名が値になります。
input 要素 : type="radio"- select
セレクトメニューです。一つのみ選択可能で選択された項目名が値になります。
select 要素- textarea
複数行のテキスト入力フィールドです。入力されたテキストが値になります。
textarea 要素
今後、複数選択できるチェックボックスかセレクトメニューを追加する予定です。
なお、「今はページと投稿に共通に表示されるものだけでいい」というときなど、必要のないファイルは適当にリネームしておけば反映されなくなります。
(例)共通のだけで良い場合
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です。
イメージフィールドの使用方法
基本的に使い方で迷うことはないと思いますが、使い方が特殊なイメージフィールドについてのみ、使用方法を説明します。
イメージフィールドは、画像の URL を入力することを前提としています。入力方法は、テキストエリアに直接入力する方法と、アップローダーを利用する方法があります。
テキストエリアに直接入力する方法
テキストエリアに画像の URL を入力します。「サムネイルを表示」をクリックするとサムネイルが表示されます。
「クリア」をクリックすると、テキストエリアに入力された URL とサムネイルが削除されます。
アップローダーを利用する方法
テキストエリア下の
のどちらかのアイコンをクリックします。左が画像専用、右がメディア全般です。どちらも WordPress オリジナルのアップローダーを使用しています。
アップローダーは通常通りの使用方法で、最後に「イメージフィールドに挿入」ボタンをクリックすると、イメージフィールドのテキストエリアに画像の URL が挿入され、サムネイルが表示されます。
これは、アップローダーの「ファイルの選択」(新規のアップロード)、「ギャラリー」、「メディアライブラリー」のすべてに対応していますが、「イメージフィールドに挿入」ボタンの位置が違うので注してください。
「ファイルの選択」(新規のアップロード)では一番下の方にボタンがあります。
「ギャラリー」、「メディアライブラリー」では、挿入するリンクURL のテキストエリアのすぐ下にあります。
サムネイルをクリックすると、実画像がオーバーレイ表示されます( 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 を公開しました。
注意
自分の環境では何度もテストはしているので大丈夫だと思いますが、僕はプログラミングは素人で手探りで作っていますので、使用は自己責任でお願いいたします。不具合が生じても一切責任を負いません。
でも、もし何か不具合がありましたらコメントなりメールなりいただければ、できる範囲で頑張って対処してみます。
以上です。
TrackBack [1]
- TrackBack URL
- Link to this Entry
- ワードプレスのカスタムフィールドの活用
-
Wordpress 2.6.2 で、お客様に納品するホームページ用にどこまで活用できるか試している最中です カスタムフィールドというものが利用出来そ...
From 毎日興味津々 on 2008年10月21日 18:40
はじめまして。
wordpress初心者ですが、本プラグイン参考にさせていただいております。
画像のイメージフィールドについて質問です。
「画像(共通表示)」となっている部分の機能ですが、
こちらは、画像のURLを出力するのみでしょうか。
<?php echo post_custom('imagefield_common') ?>
とテンプレートにいれると、画像のURLのみでimgタグは出力されませんでした。
画像を使うときは、イメージタグのパス挿入部分に<?php echo post_custom('imagefield_common') ?>を入れて使うのが正しい使い方と考えて良いでしょうか。
とはいえ、altなどが自動で入れられなくなるので、何か違う感じがしているのですが。。。
もととしているプラグインを使ったことがないので、
ヘンな質問をしているかもしれませんが、アドバイスいただけると助かります。
よろしくお願いします。
追加ですみません。
「1行テキスト(共通表示)」の項目を装飾目的で例えば、strongタグなどで囲っていたとします。
<strong><?php echo post_custom('textfield_common') ?></strong>
投稿によっては、'textfield_commonが無い(カラ)の場合があると、
<strong>タグが残ってしまいますが、これうぃ条件分岐などでカラのじ状態で出力することは可能でしょうか。
このプラグイン云々より、wordpressのソースの書き方の問題で恐縮ですが、ご教授いただけると助かります。
ちなみに、
http://affililife.blog8.fc2.com/blog-entry-252.html
と同じようにパラメータ指定できるのかなと思って、トライしてみましたが、やはりダメでした。
narumi さん、はじめまして。コメントありがとうございます。
ご質問いただいた件ですが、「Custom Field GUI Utility の使い方などの FAQ」という記事にしましたので、そちらをご参照いただければ幸いです。
また何かありましたらお気軽にご質問ください。