僕のテーマは、ECサイトとして利用できる独自の商品登録の機能を搭載しているのですが、使用する際、それをより簡単に実現させる為に、繰り返し機能が使えるとても無料とは思えない便利なスマートカスタムフィールドというプラグインを利用させて頂いています。

スマートカスタムフィールドとは。

はじめに、スマートカスタムフィールドとは、長崎県に所在する株式会社モンキーレンチという会社のキタジマタカシ様が運営&提供するWordPressプラグインの一つで、感覚的にカスタムフィールドを追加できるプラグインとなっています。

他にも、使い勝手が良いので僕もお世話になる事が多い、お問い合わせフォームのMW WP Formなどカスタマイズ性の高いフォームプラグインなどの提供をはじめ10件以上のプラグイン提供をしている会社様となっています。

投稿一覧ループへのカスタムフィールドの画像取得。

プラグインの紹介はそこそこに、今回行ったカスタマイズについて、毎度のことながら簡単ですが、ストーリーを織り交ぜながら書き留めておきたいと思います笑。

僕のテーマでは、一応商品一覧と称して、上記画像のように、人気のある登録商品のバナーとその下へ登録商品の一覧が表示されるストアトップページを用意しているのですが、

商品登録を目的として非常に使いやすいカスタムフィールドを利用させて頂いております。
今回目指している、商品一覧ページへの画像表示は、ワードプレスの通常の仕様ですと、商品画像登録とは、別にサムネイルの登録もしなければ画像が表示されない為、ほんのひと手間が余分にかかってしまいます。

ま、一枚目の画像と同じものを登録すればいいだけの話なのですが、なんか無駄な作業に思えて仕方ないので、少し便利に改善してみました。

改良前の仕様について。

もともとの仕様について。

<?php if(has_post_thumbnail()): ?><?php the_post_thumbnail(); ?><?php elseif( wp_get_attachment_url($notImage) ): ?><img src="<?php echo wp_get_attachment_url( $notImage, 'full' ); ?>" alt="表示する画像がございません。"><?php else: ?><img src="<?php echo get_stylesheet_directory_uri() ?>/lib/images/noimage.png" alt="イメージ画像が設定されていません。"><?php endif; ?>

改良する前は、分岐を使って、サムネイル登録をした場合、それが表示されますが、登録をしていない場合、初期設定のno image画像が表示されます。
ただ、初期設定のno image画像だとデザイン的に少し味気ないので、自分の用意したno image画像に代替えできるようにしておいた仕様が上記です。

実際に表示するとこのような見た目になります。
実は、ワードプレスをあまり使い慣れていない人が利用するとサムネイルの存在を無視してしまうという事が起こっていました汗。
商品画像は登録しているものの、一覧ページは上記のようなnoimageだらけになってしまいっている為、サムネイル登録を即すよりも、テーマの仕様を変えてしまうほうが、優しさというものだろう。

というわけで、今回の改善として、no imageよりも優先して実際登録してある。商品画像を表示するようにしてというわけなのです。

投稿ページのカスタムフィールドの画像の取得。

さて、実際に投稿ページに設置したカスタムフィールドの画像を出力するコードを入れてしまいましょう。

<?php $images = SCF::get( 'group-item-thumbs' );foreach ( $images as $fields ) { ?><?php $first_img = wp_get_attachment_image_url($fields['item-thumbs'] , 'full'); ?> 
<img src="<?php echo $first_img ;?>">
<?php } ?>//foreach終了

スタンダードにコードを追記すると、リピート登録したすべての画像が表示されてしまいました。
そりゃそうですよね汗。
1枚目だけを取得するようにしましょうね。

<?php $images = SCF::get( 'group-item-thumbs' );foreach ( $images as $fields ) { ?><?php $first_img = wp_get_attachment_image_url($images[0]['item-thumbs'] , 'full'); ?> 
<img src="<?php echo $first_img ;?>">
<?php } ?>//foreach終了

コードを $images[0][‘item-thumbs’] へと変更して、1番目の画像を取得できるように致しました。
・・確かに、1番目の画像が取得されていますね笑。

ただ、登録枚数分、1枚目の画像が表示されてしまいました汗。
ま、確かに間違いではないですが、僕の指示が曖昧でしたね。

<?php $i = 0; $images = SCF::get( 'group-item-thumbs' );foreach ( $images as $fields ) { ?><?php $first_img = wp_get_attachment_image_url($images[0]['item-thumbs'] , 'full'); ?> 
<img src="<?php echo $first_img ;?>">
<?php $i++; if($i >= 1){ break; }?>
<?php } ?>

三度目の正直、変数を用いてリピート回数を取得し回数の制限を行う事で、意図した表示になりました。

これで、わざわざサムネイル画像の事を考えず、販売したい商品の画像を登録するだけで、きちんと一覧もわかりやすく表示されました。

サムネイルも機能しています。

商品画像を表示といっても、サムネイルを使って別ページからインパクトのあるバナーでページへの誘導をしたい人の為にも、ちゃんとサムネイルの優先順位を一番高くしていますので、戦略的にも利用していけるのではないかと感じています。

//分岐で調整
<?php if(has_post_thumbnail()): ?>//あれば、サムネイル表示
<?php elseif( SCF::get( 'group-item-thumbs' ) ): ?>//なければ、商品画像表示
<?php elseif( wp_get_attachment_url($notImage) ): ?>//なければ、自分で作成したno image表示
<?php else: ?>//なければ、元々存在するno image表示
<?php endif; ?>

上記分岐を利用して、投稿一覧の画像のデザインを調整してみました。

途中若干、思った挙動にならず修正を繰り返してしまいましたが、また1歩テーマともども成長できたのではないかと僕自身も嬉しく思っております。

スマートカスタムフィールド全体のカスタマイズには触れておらず、部分的なカスタマイズで申し訳ないですが、こんな事ができるんだ、とか、こんなプラグインあったんだ、と何かのかきっかけとなって頂ければ幸いでございます。

では、本日はこの辺で失礼させて頂きます。
また、次の機会にお会いしましょう。