• Home
  • WordPress
  • Custom Field GUI の管理画面にサムネイルを表示するカスタマイズ

Custom Field GUI の管理画面にサムネイルを表示するカスタマイズ

WordPress でカスタムフィールドを使うのに非常に便利なプラグイン Custom Field GUI を、もう少し使いやすいようにカスタマズした Custom Field GUI Utility

今回このプラグインに、カスタムフィールドの値を入力するテキストフィールドに画像のURLを入力した場合に、管理画面上でサムネイル表示させる機能を追加しました。

cfgu02_021.jpg

これにより、今までは入力した画像の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 部分に次のように表示されます。

cfgu02.jpg

「メディアをアップロード」は WordPress のデフォルトのアップローダーで、このプラグインとは連携していません。なんとなく、近くにあったら便利そうなので置いてみました。

使い方

生成されたイメージフィールド(造語です)部分に画像のURLを入力します。

cfgu02_00.jpg

画像のURLを入力して「確認する」をクリックするとサムネイルが表示されます。

cfgu02_01.jpg

表示されたサムネイルにマウスを乗せると、原寸大で表示され(IEでは動作が不安定)、クリックするとその画像が別ウィンドウで開きます。

cfgu02_02.jpg

サムネイルは項目ごとに「確認する」をクリックした時点で表示されます。

また、編集画面をリロードしたり、一度保存して「管理」メニューから再編集をするような場合はサムネイル表示が消えます。サムネイルを再び表示させたい場合は、再度「確認する」をクリックする必要があります。これは、このサムネイルを「確認」のために表示するという位置付けからくる仕様です。

さて、次にこのイメージフィールドに入れた内容が、カスタムフィールドの値として問題なく保存されているかどうかテストしてみます。

「投稿」及び「ページ」のテンプレートに次のようなテンプレートタグを書いてみます。

<!-- 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 テスト -->

これを「投稿」及び「ページ」を表示させると次のようになります。

【投稿】

cfgu02_03.jpg

【ページ】

cfgu02_04.jpg

問題なく使えることが確認できました。

このプラグイン全体の説明やダウンロードは次のページからどうぞ。

プラグインのアップデート方法

上記ページでダウンロードしたファイルを解凍すると、フォルダの中に次の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でやっています。

Recent Entries

Pickup Categories

Movable Type

CMSとして国内5万サイト以上に導入されている Movable Type に関する記事です。

Craft CMS

CMS 業界で注目の Craft CMS に関する記事です。Craft CMS はチーム全体をハッピーにしてくれる素晴らしい CMS です。