WordPress でカスタムフィールドを使うのに非常に便利なプラグイン Custom Field GUI を、もう少し使いやすいようにカスタマズした Custom Field GUI Utility。 今回このプラグインに、カスタムフィールドの値を入力するテキストフィールドに画像のURLを入力した場合に、管理画面上でサムネイル表示させる機能を追加しました。 これにより、今までは入力した画像のUR...
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
各項目の内容は以下のとおりです。
設定に問題がなけらば、管理画面(投稿やページの編集画面)の Custom Field GUI 部分に次のように表示されます。
「メディアをアップロード」は WordPress のデフォルトのアップローダーで、このプラグインとは連携していません。なんとなく、近くにあったら便利そうなので置いてみました。
生成されたイメージフィールド(造語です)部分に画像のURLを入力します。
画像のURLを入力して「確認する」をクリックするとサムネイルが表示されます。
表示されたサムネイルにマウスを乗せると、原寸大で表示され(IEでは動作が不安定)、クリックするとその画像が別ウィンドウで開きます。
サムネイルは項目ごとに「確認する」をクリックした時点で表示されます。
また、編集画面をリロードしたり、一度保存して「管理」メニューから再編集をするような場合はサムネイル表示が消えます。サムネイルを再び表示させたい場合は、再度「確認する」をクリックする必要があります。これは、このサムネイルを「確認」のために表示するという位置付けからくる仕様です。
さて、次にこのイメージフィールドに入れた内容が、カスタムフィールドの値として問題なく保存されているかどうかテストしてみます。
「投稿」及び「ページ」のテンプレートに次のようなテンプレートタグを書いてみます。
<!-- Custom Field Gui テスト -->
<h3>共通カスタムフィールド</h3>
<dl>
<dt>共通Plan</dt>
<dd><?php echo get_post_meta($post->ID,'共通Plan',TRUE); ?></dd>
<dt>共通Image1</dt>
<dd><?php echo get_post_meta($post->ID,'共通Image1',TRUE); ?><br />
<img src="<?php echo get_post_meta($post->ID,'共通Image1',TRUE); ?>" /></dd>
<dt>共通Image2</dt>
<dd><?php echo get_post_meta($post->ID,'共通Image2',TRUE); ?><br />
<img src="<?php echo get_post_meta($post->ID,'共通Image2',TRUE); ?>" /></dd>
<dt>共通Favorite Post</dt>
<dd><?php echo get_post_meta($post->ID,'共通Favorite Post',TRUE); ?></dd>
<dt>共通Miles Walked</dt>
<dd><?php echo get_post_meta($post->ID,'共通Miles Walked',TRUE); ?></dd>
<dt>共通Temper Level</dt>
<dd><?php echo get_post_meta($post->ID,'共通Temper Level',TRUE); ?></dd>
<dt>共通Hidden Thought</dt>
<dd><?php echo get_post_meta($post->ID,'共通Hidden Thought',TRUE); ?></dd>
</dl>
<h3>投稿用カスタムフィールド</h3>
<dl>
<dt>投稿Plan</dt>
<dd><?php echo get_post_meta($post->ID,'投稿Plan',TRUE); ?></dd>
<dt>投稿Image1</dt>
<dd><?php echo get_post_meta($post->ID,'投稿Image1',TRUE); ?><br />
<img src="<?php echo get_post_meta($post->ID,'投稿Image1',TRUE); ?>" /></dd>
<dt>投稿Image2</dt>
<dd><?php echo get_post_meta($post->ID,'投稿Image2',TRUE); ?><br />
<img src="<?php echo get_post_meta($post->ID,'投稿Image2',TRUE); ?>" /></dd>
<dt>投稿Favorite Post</dt>
<dd><?php echo get_post_meta($post->ID,'投稿Favorite Post',TRUE); ?></dd>
<dt>投稿Miles Walked</dt>
<dd><?php echo get_post_meta($post->ID,'投稿Miles Walked',TRUE); ?></dd>
<dt>投稿Temper Level</dt>
<dd><?php echo get_post_meta($post->ID,'投稿Temper Level',TRUE); ?></dd>
<dt>投稿Hidden Thought</dt>
<dd><?php echo get_post_meta($post->ID,'投稿Hidden Thought',TRUE); ?></dd>
</dl>
<h3>ページ用カスタムフィールド</h3>
<dl>
<dt>ページPlan</dt>
<dd><?php echo get_post_meta($post->ID,'ページPlan',TRUE); ?></dd>
<dt>ページImage1</dt>
<dd><?php echo get_post_meta($post->ID,'ページImage1',TRUE); ?><br />
<img src="<?php echo get_post_meta($post->ID,'ページImage1',TRUE); ?>" /></dd>
<dt>ページImage2</dt>
<dd><?php echo get_post_meta($post->ID,'ページImage2',TRUE); ?><br />
<img src="<?php echo get_post_meta($post->ID,'ページImage2',TRUE); ?>" /></dd>
<dt>ページFavorite Post</dt>
<dd><?php echo get_post_meta($post->ID,'ページFavorite Post',TRUE); ?></dd>
<dt>ページMiles Walked</dt>
<dd><?php echo get_post_meta($post->ID,'ページMiles Walked',TRUE); ?></dd>
<dt>ページTemper Level</dt>
<dd><?php echo get_post_meta($post->ID,'ページTemper Level',TRUE); ?></dd>
<dt>ページHidden Thought</dt>
<dd><?php echo get_post_meta($post->ID,'ページHidden Thought',TRUE); ?></dd>
</dl>
<!-- /Custom Field Gui テスト -->
これを「投稿」及び「ページ」を表示させると次のようになります。
【投稿】
【ページ】
問題なく使えることが確認できました。
このプラグイン全体の説明やダウンロードは次のページからどうぞ。
上記ページでダウンロードしたファイルを解凍すると、フォルダの中に次の3つのファイルがあるので、そのファイルで、サーバー上にあるこのプラグインの同ファイルを上書きすればOKです。
なお、今回からフォルダ名を変更してるので、サーバー上のプラグインフォルダもそれに合わせて変更してください。
今回のこのサムネイル表示の機能は、PHPが全く分からない僕が、勉強し始めたばかりの JavaScript を PHP ファイルの文字列として扱う部分(?)に記述しています。
分かる人がソースを見たら酷いもんでしょうが、それは今回は目をつむって今度の改善点にしたいと思います。
ちなみに、サムネイルにマウスを合わせた時の原寸大表示はCSSでやっています。