Custom Field GUI の管理画面にサムネイルを表示するカスタマイズ
目次
WordPress でカスタムフィールドを使うのに非常に便利なプラグイン Custom Field GUI を、もう少し使いやすいようにカスタマズした Custom Field GUI Utility。
今回このプラグインに、カスタムフィールドの値を入力するテキストフィールドに画像のURLを入力した場合に、管理画面上でサムネイル表示させる機能を追加しました。
これにより、今までは入力した画像のURLが正しいか、つまり画像がちゃんとアップロードされているかを確認するには、一度「投稿」や「ページ」を表示させないと確認できませんでしたが、これが管理画面上でできるようになります。
設定など
confi-xx.ini ファイルに次の内容を書き加えます。
[共通Image1]
type = imagefield
idname = commonimage1
size = 35
sample = input the example or the caption各項目の内容は以下のとおりです。
- [共通Image1] ： [大かっこ] 内にカスタムフィールドの「キー」入力します。（必須）
- type ： imagefield と入力します。（必須）
- idname ： イメージフィールドそれぞれに固有の id 名（半角英数）を付けます。他と重ならないように注意してください。（必須）
- size ： テキストフィールドのサイズを入力します。
- sample ： テキストフィールドの下に表示させる文字列を入力します。
設定に問題がなけらば、管理画面（投稿やページの編集画面）の Custom Field GUI 部分に次のように表示されます。
「メディアをアップロード」は WordPress のデフォルトのアップローダーで、このプラグインとは連携していません。なんとなく、近くにあったら便利そうなので置いてみました。
使い方
生成されたイメージフィールド（造語です）部分に画像のURLを入力します。
画像のURLを入力して「確認する」をクリックするとサムネイルが表示されます。
表示されたサムネイルにマウスを乗せると、原寸大で表示され（IEでは動作が不安定）、クリックするとその画像が別ウィンドウで開きます。
サムネイルは項目ごとに「確認する」をクリックした時点で表示されます。
また、編集画面をリロードしたり、一度保存して「管理」メニューから再編集をするような場合はサムネイル表示が消えます。サムネイルを再び表示させたい場合は、再度「確認する」をクリックする必要があります。これは、このサムネイルを「確認」のために表示するという位置付けからくる仕様です。
さて、次にこのイメージフィールドに入れた内容が、カスタムフィールドの値として問題なく保存されているかどうかテストしてみます。
「投稿」及び「ページ」のテンプレートに次のようなテンプレートタグを書いてみます。
共通カスタムフィールド
- 共通Plan
- ID,'共通Plan',TRUE); ?>
- 共通Image1
- ID,'共通Image1',TRUE); ?>
; ?>)
- 共通Image2
- ID,'共通Image2',TRUE); ?>
; ?>)
- 共通Favorite Post
- ID,'共通Favorite Post',TRUE); ?>
- 共通Miles Walked
- ID,'共通Miles Walked',TRUE); ?>
- 共通Temper Level
- ID,'共通Temper Level',TRUE); ?>
- 共通Hidden Thought
- ID,'共通Hidden Thought',TRUE); ?>
投稿用カスタムフィールド
- 投稿Plan
- ID,'投稿Plan',TRUE); ?>
- 投稿Image1
- ID,'投稿Image1',TRUE); ?>
; ?>)
- 投稿Image2
- ID,'投稿Image2',TRUE); ?>
; ?>)
- 投稿Favorite Post
- ID,'投稿Favorite Post',TRUE); ?>
- 投稿Miles Walked
- ID,'投稿Miles Walked',TRUE); ?>
- 投稿Temper Level
- ID,'投稿Temper Level',TRUE); ?>
- 投稿Hidden Thought
- ID,'投稿Hidden Thought',TRUE); ?>
ページ用カスタムフィールド
- ページPlan
- ID,'ページPlan',TRUE); ?>
- ページImage1
- ID,'ページImage1',TRUE); ?>
; ?>)
- ページImage2
- ID,'ページImage2',TRUE); ?>
; ?>)
- ページFavorite Post
- ID,'ページFavorite Post',TRUE); ?>
- ページMiles Walked
- ID,'ページMiles Walked',TRUE); ?>
- ページTemper Level
- ID,'ページTemper Level',TRUE); ?>
- ページHidden Thought
- ID,'ページHidden Thought',TRUE); ?>
これを「投稿」及び「ページ」を表示させると次のようになります。
【投稿】
【ページ】
問題なく使えることが確認できました。
このプラグイン全体の説明やダウンロードは次のページからどうぞ。
プラグインのアップデート方法
上記ページでダウンロードしたファイルを解凍すると、フォルダの中に次の3つのファイルがあるので、そのファイルで、サーバー上にあるこのプラグインの同ファイルを上書きすればOKです。
- rc-custom-field-gui-common.class.php
- rc-custom-field-gui-page.class.php
- rc-custom-field-gui-post.class.php
なお、今回からフォルダ名を変更してるので、サーバー上のプラグインフォルダもそれに合わせて変更してください。
- （旧）rc-custom-field-gui-1.5-utility
- （新）rc-custom-field-gui-utility
その他補足
今回のこのサムネイル表示の機能は、PHPが全く分からない僕が、勉強し始めたばかりの JavaScript を PHP ファイルの文字列として扱う部分（？）に記述しています。
分かる人がソースを見たら酷いもんでしょうが、それは今回は目をつむって今度の改善点にしたいと思います。
ちなみに、サムネイルにマウスを合わせた時の原寸大表示はCSSでやっています。