Custom Field GUI Utility の裏ワザ!!

WordPressのカスタムフィードは便利なのですが、クライアント様に管理画面で使ってもらうにはいささかGUIが不親切です。(というか、そのままではトラブルの元です…。)

そこで、Custom Field GUI UtilityAdvanced Custom Fields などのプラグインで入力項目のGUIを使いやすくしているWordPressが多いと思います。

(弊社の最近のオススメはAdvanced Custom FieldsですがCustom Field GUI Utilityも以前はよく使ってました(^^))

今回はCustom Field GUI Utilityの場合の話です。こういう便利なプラグインをオープンソースで公開していただいている方には頭が下がりますね!ありがたく使わせていただいています。

コチラ にこのプラグイン固有の関数を使ってカスタムフィードの画像を表示するサンプルが掲載されていますので、このまま使われている方が多いと思います。

しかし、これのままだと、画像のフルサイズの画像がそのまま表示されてしまいます。
まぁ、そういうコードですので当然なのですが場合によってはこのままでは少し困ってしまいます。

どういう場合かといいますと、クライアント様がウェブに詳しくない場合など、詳しくない方が画像アップなどをされている場合です。

画像サイズなどをあまり良くわからずデジカメ画像をそのままアップされることが多く、巨大なサイズの画像がそのままアップされていたりすることが実際、多々ありました。

勿論クライアント様に画像を加工したりサイズを小さくしてからアップしていただくように勉強していただくのが良いのですが、そうも言ってられない場面もあると思います。

このサンプルコードのままだと、その画像がそのまま表示されてしまいますので、画面の表示がブラウザによっては表示がもたついたり、「ホームページの表示が遅い!」とクレームになったりします。

CSS等でサイズを指定している場合でも、実際は無駄に大きい画像を表示しているのと変わらないので、そんな場合はちょっとひと工夫してサムネイルや最適なサイズの画像を表示して、表示速度を最適化しておきましょうというお話です。

元のサンプルコード

$imagefield = get_imagefield('product_image');
$attachment = get_attachment_object($imagefield['id']);
echo '<image src="' . $attachment['url'] . '" alt="' . $attachment['title'] . '" title="' . $attachment['content'] . '" />';

ランドマークスで少し手を加えたサンプルコード

$imagefield = get_imagefield('product_image');
$attachment = get_attachment_object($imagefield['id']);
$imgattr = wp_get_attachment_image_src($imagefield['id'], 'medium'); // thumbnail, large, medium, full を指定
echo '<image src="' . $imgattr[0] . '" width="' . $imgattr[1] . '" height="' . $imgattr[2] . '" alt="' . $attachment['title'] . '" title="' . $attachment['content'] . '" />';

一行追加して、一行修正するだけです。とっても簡単ですよね。

一応何をしているか解説をしますと、wp_get_attachment_image_src(関数の詳細はcodexを見て下さい)を使って、指定したサムネイル等の画像サイズとURLを取得しています。
その取得したサイズの画像のURLと画像サイズを使って画像を表示しています。

WordPressは画像のアップロード時に各種サイズの画像を自動で生成していますので、わざわざ元の画像(フルサイズ)を指定する必要がない場合などは、小さめのサイズを指定しておけば思わぬトラブルが避けられる、ということです。
(実際にクライアント様のWordPressにて導入しています。)

WordPressのメディア(アップロード画像)も、MovableTypeのAssets(MTAssets、mt:Assets)と似たような仕組みになっている、という訳です。(勿論厳密には違いますが。)

wp_get_attachment_image_src をうまく活用すると、画像の縦横サイズが簡単に取得できるので、縦長の画像や横長の画像が大きすぎるときに縦横サイズを比較して固定化したり、など、デザインを損なわないように自動で画像の表示を最適化するようなカスタマイズも可能です。

 

ランドマークスではWordPressのちょっとしたカスタマイズなどの案件も弊社でお受けしております。

普段更新されていて、ココがめんどくさいんだよな、、、なんてところがありましたら是非一度お問い合せ下さい。「かゆいところに手が届く」WordPressにばっちりカスタマイズさせて頂きます!

もちろん、他社で制作のWordPressやその他のCMSのカスタマイズも可能ですので、一度ご相談下さいませ。