Welcart標準機能の関連商品表示から抜粋文を削除したり在庫表示をするカスタマイズ

Welcartに標準で実装されている関連商品では

  • 商品画像
  • 商品名
  • 説明の抜粋文
  • 価格

が表示されます。この中から説明の抜粋文を削除したり、追加で在庫表示したりするカスタマイズです。おまけに商品画像のサイズを変更する関数も書いておきます。

このカスタマイズはフィルターフックで行います。

関連商品表示のカスタマイズ

関連商品の表示はWelcartのテンプレートタグ「usces_assistance_item()」で行えます。第一引数に商品のID番号を、第二引数に関連商品エアリアのタイトル(例で言えば”関連商品”)を指定します。両引数とも必須です。

デフォルトのテーマでは

と記述されています。これは第一引数に現在の商品のID番号、第二引数に「関連商品」という文字が渡されています。

第二引数は英語が渡されていますが、翻訳ファイルで言葉が用意されているのでそれで最終的に”関連商品”という文字に変わります。自分で使うためだけにテーマをカスタマイズするのなら直接文字列を渡して良いです。

関連商品の表示関数のフィルターフック

関連商品を出力する時のフィルターフック名は「usces_filter_assistance_item_list」です。

このフィルターフックは「wp-content/plugins/usc-e-shop/functions/template_func.php」の2562行目辺りに記述されています。

関連商品表示のカスタマイズ用ソースコード

以下のソースコードを使用中のfunctions.phpに貼り付けて下さい。

軽く説明をすると

  •  8行目で商品画像の出力
  • 12行目で商品名の出力
  • 13行目で説明文の抜粋出力(コメントアウト済み)
  • 17行目で商品価格の出力
  • 20行目で在庫状態の出力(追加の処理)

という感じです。もし追加で何かを表示をしたかったり削除したい場合は該当する部分を修正して下さい。

関連商品の画像サイズを変更するソースコード

関連商品の画像サイズを変更するフィルターフックが同じ関数内に記述されてあったので、次いでにサイズを変更するソースコードをメモしておきます。

(もし先述したカスタマイズ用のソースコードを使う場合は、以降記述するソースコードを使わずに、直接カスタマイズ用ソースコードの8行目の「$width」「$height」の変数部分に代わりで数値を入れちゃっても大丈夫です。)

画像のサイズを変更するフィルターフック名は横が「usces_filter_assistance_item_width」で、縦が「usces_filter_assistance_item_height」です。それぞれ2528行目、2529行目辺りに記述されています。

それぞれ3行目、10行目の数値を変えると画像サイズを変更出来ます。

画像サイズで注意したいこと

ただ、画像サイズで注意したいのは予め専用の画像サイズが無ければ最適なサイズの画像が出力されない点です

例えば上記のソースコードで画像サイズを「縦60px、横60px」と設定しても、WordPress側で生成された画像のサイズに「60ピクセル×60ピクセル」の画像が無ければ、このサイズに近い画像が選ばれます

「60pxの画像は無いけど、80pxの画像はあるよ。これ近いね」ってことでWordPressが勝手に判断し、サイズが近いその画像を縮小して表示するようになります。

見かけ上は大丈夫なのですが、サイズの観点から言うとベストとは言い難い状況ですので、もしこの画像サイズの最適化を図りたい場合は「設定 > メディア」からサイズを設定するか、WordPressの関数「add_image_size()」で設定します。

この関数と設定については別記事『【WordPress】サムネイル表示方法と、サムネイル画像を任意の複数のサイズで出力する設定方法』にまとめていますので、ご参考までに。

最終更新日:2014年9月28日

コメント

「何かそこ違うよ」「こうした方が良い」っていう部分があったら指摘して頂けると嬉しいです。

トラックバック

トラックバックは現在ありません。

Trackback: https://increment-log.com/welcart-related-item-customize/trackback/