お久しぶりです、デザイナーのぱぴーです。前回書いた記事からなんと約半年経っていました・・・。(本当にすいません)
前回に引き続き、WordPressの便利なプラグインを紹介していきたいと思います。

今回ご紹介するプラグインは『Custom Field GUI Utility』という、カスタムフィールドを使いやすくするプラグインです。

27971a334558278d0cd5c92351d88dd8

機能の説明をしますと、

  • 投稿、ページ、カスタム投稿タイプごとにカスタムフィールドの表示・非表示を切り替えることができる
  • カスタムフィールドの表示名を自由に変更できる
  • 画像専用のイメージフィールドを付けることができる
  • ファイル専用のファイルフィールドを付けることができる
  • 複数選択可能なチェックボックスグループを付けることができる
  • バリデーションを設定できる

などなど…
ひとつのプラグインでこんなにたくさんの機能が付いているのです・・・。恐ろしいほど便利・・・!
※出典元:かたつむりくんのWWW

このプラグインはこんな人におすすめです。

  • ブログ(又はサイト)を複数人で回していて、更新する際、必ず記入してもらいたい項目がある
  • 決まった位置に画像や文章を配置したい
  • 管理画面上でカスタムフィールドの項目を固定表示させたい
  • 投稿タイプやカテゴリーごとに違うカスタムフィールドを表示させたい
  • TOPページやカテゴリーページで、アイキャッチ画像以外に表示させたい画像がある

当てはまる項目が1つでもありましたら、是非使ってみてください!

今回は以下の流れでご紹介していきたいと思います。

インストール、アップロード方法

まず、Custom Field GUI Utilityをhttps://code.google.com/p/custom-field-gui-utility-3/downloads/listからインストールします。
※ご自身のWordPressのバージョンをご確認の上インストールを行ってください。
※この記事は【WP3.5対応版】で紹介していきます。
インストール、アップロード方法
インストールしたファイルをアップロードし、有効化します。

主な設定項目とその手順

既存のカスタムフィールドはプルダウン形式になっていて、投稿のたび選択しなければなりません。正直ちょっと面倒くさいですよね。
Custom Field GUI Utilityを使用すれば、そんなお悩みもちょちょいのちょいです!!

先ほどアップロードしたフォルダの中に「conf.ini」というファイルがあります。
そのファイルの中身を見てもらうと、以下のサンプルコードが書いてあります。
(管理画面の「設定」から「カスタムフィールド設定」からでも編集可能です)
conf.ini

以下の設定項目があります。(必須)と書かれている箇所は必須項目になりますので、必ず目を通しておきましょう。

  • boxname
  • カスタムフィールドのキー(必須)
  • fieldname (必須)
  • category
  • type (必須)
  • class
  • value
  • default
  • placeholder
  • rows
  • cols
  • size
  • sample
  • must
  • validation

boxnameの設定方法

上記のコードはカスタムフィールドのタイトル名を指定する部分です。
例えば、boxnameを「動物の名前を入れるカスタムフィールド」と設定した場合、
boxnameの設定方法
このようにタイトル名を変更することが出来ます。必ず設定しましょう!

カスタムフィールドのキー設定(必須項目)

[大カッコ内] にカスタムフィールドのキーを設定します。
※半角英数、「 _ 」「 – 」のみ使用できます。

カスタムフィールドのキーは、サイトに反映させる際に必要になるので必ず指定しましょう。

fieldnameの設定(必須項目)

fieldnameがカスタムフィールドの項目名を固定表示させる部分です!
例えばfield名を「犬」と設定した場合、

fieldname

このように項目名が固定表示できました。
これでプルダウンメニューから選ぶ手間もなくなりますし、抜け漏れも減りますね!

カテゴリーの設定

もし、カテゴリーごとに項目名の表示・非表示の設定をしたい場合、categoryオプションでカテゴリのスラッグを指定することにより、カテゴリごとに表示を制御することができます。
※ただし、「投稿」の場合のみになります。

例えば、dogとcatという2つのカテゴリーがあった場合、以下のように設定します。

typeの設定(必須項目)

こちら必須項目になります。9種類の中からどれか1つ選択しましょう。

  • textfield
  • imagefield
  • filefield
  • checkbox
  • multi_checkbox
  • radio
  • select
  • textarea
  • hr

textfield
1行のテキストフォームになります。入力されたテキストが値になります。

imagefield / filefield
画像、ファイルをアップロードすることが出来ます。記事中に定位置で画像やファイルを表示させたい時などにおすすめです。
imagefieldfilefield
詳しい設定方法はこちらのリンクをご覧ください。

checkbox
チェックが入っているとtrueになり、入っていないとfalseとなります。条件分岐に大変便利です。

multi checkbox
複数選択が可能なチェックボックスグループです。

multi checkbox
valueとdefaultはまた後ほど詳しく説明します。

radio
項目は複数設定できますが、1つのみ選択することが出来ます。

select
プルダウン形式になっていて、1つだけ選択可能です。

textarea
複数行入れることが出来るテキストエリアです。

hr
区切り線になります。区切り線に名前をつけることができるので、カテゴライズしたいときや、カスタムフィールドの量が多くなってきてしまった時に使用するといいでしょう。

classの設定

「post」「page」またはカスタム投稿タイプの「post_type」 を指定します。
post、page 等の投稿タイプに限らず、半角英数であれば、自由にclassを指定することが出来ます。class名を複数指定したい場合は、スペースをあけて下さい。

指定した値がフィールドのボックスのclass 名になりますので、CSS で管理画面をカスタマイズしたい場合にもご利用いただけます。

valueとdefaultの設定

valueはtypeの設定で出てきた、「radio」「select」「multi_checkbox」の各項目名になります。

defaultは初期値になります。「radio」「select」「multi_checkbox」「textfield」「checkbox」「multi_checkbox」で使用します。
(※radio,select,multi_checkboxでdefaultの設定をすると、下記のようにチェックが入った状態で表示されます。)
default値

placeholderの設定

input要素のplaceholder属性の値です。「placeholderってなに?」という方は、こちらの記事がとても参考になりましたので、読んでみてください。
プレースホルダとHTML5のplaceholder属性

rowsとcolsの設定

rowsはtextareaの行数、colsはtextareaの横幅になります。

sizeの設定

こちらはフォームの横幅になります。「textfield」「imagefield」「filefield」で使用可能です。

sampleの設定

説明文になります。例えば「オススメのWebサイトのタイトルを入力してください」と入力した場合、下記のように表示されます。
sampleの設定

checkboxのみ、チェックボックスの右側にテキストが表示されます。
checkboxのみ、チェックボックスの右側にテキストが表示されます。

mustの設定

must=1を設定すると、必須項目になります。抜け漏れなく記入したいときにmustの設定をしておくと大変便利です。

validation

必須項目にするだけであれば、上記のmustを設定するだけで必須チェックが使用可能です。細かい設定をしたい場合は、以下のものが設定できます。

などがあります。
例えば、「validation = chkfile」のように設定すれば、「ファイルを選択してください」と表示されるようになります。

exchecker-ja.jsを書き換えれば追加や仕様の変更も出来るそうです。
(すみません・・・。追加・仕様変更は試しておりません・・・。)

こちらの記事が大変参考になりましたので目を通してみてください。
どんなフォームにでも使えるexValidationの使い方

カスタムフィールドに記入したものをサイト内に反映させる方法

〇〇の中身を、カスタムフィールドのキーで指定した名前をに書き換え、表示させたい場所にコードを挿入します。

チェックボックスの場合のみ、チェックを入れるとtrueと表示されます。
「trueが表示されてもなぁ・・・。」という方は下記のコードを使用してみてください!

既存のカスタムフィールドを非表示にする方法

非表示にする方法
投稿画面の右上に「表示オプション」がありますので、そちらクリックします。
そうしますと「表示する項目」が出てくるので、赤枠で囲ってある「カスタムフィールド」のチェックを外すと、
既存のカスタムフィールドが非表示になります。青枠の方はCustom Field GUI Utilityになります。

※WordPressのバージョンによって表示オプションの場所が異なりますのでご注意ください。

まとめ

いかがでしたか?一見難しく見えますが、ほぼコピペで出来てしまうのでとても簡単に設置できます。

「Custom Field GUI Utility」はTomohiro OkuwakiさんとTsuyoshi Kanekoさんによって開発されました。
もし、このプラグイン使用してみて便利でしたら、Tomohiro Okuwakiさんにアマゾンギフト券を贈りましょう!!
かたつむりくんのWWW