Welcartに標準で実装されている関連商品では
- 商品画像
- 商品名
- 説明の抜粋文
- 価格
が表示されます。この中から説明の抜粋文を削除したり、追加で在庫表示したりするカスタマイズです。おまけに商品画像のサイズを変更する関数も書いておきます。
このカスタマイズはフィルターフックで行います。
関連商品表示のカスタマイズ
関連商品の表示はWelcartのテンプレートタグusces_assistance_item()で行えます。第一引数に商品のID番号を、第二引数に関連商品エアリアのタイトル（例で言えば”関連商品”）を指定します。両引数とも必須です。
デフォルトのテーマでは
<?php usces_assistance_item( $post->ID, __('An article concerned', 'usces') ); ?>と記述されています。これは第一引数に現在の商品のID番号、第二引数に「関連商品」という文字が渡されています。
第二引数は英語が渡されていますが、翻訳ファイルで言葉が用意されているのでそれで最終的に”関連商品”という文字に変わります。自分で使うためだけにテーマをカスタマイズするのなら直接文字列を渡して良いです。
関連商品の表示関数のフィルターフック
関連商品を出力する時のフィルターフック名はusces_filter_assistance_item_listです。
このフィルターフックは「wp-content/plugins/usc-e-shop/functions/template_func.php」の2562行目辺りに記述されています。（※2014年5月9日現在）
関連商品表示のカスタマイズ用ソースコード
以下のソースコードを使用中のfunctions.phpに貼り付けて下さい。
//Welcartの関連商品から抜粋文の削除・在庫数の表示（HTMLの整形）
add_filter('usces_filter_assistance_item_list', 'my_format_assistance_item_list',10,2);
function my_format_assistance_item_list($list, $post) {
$str = '<li>';
$str .= '<div class="listbox clearfix">';
$str .= '<div class="slit">';
$str .= '<a href="'. get_permalink() . '" rel="bookmark" title="' . wp_filter_nohtml_kses(get_the_title()) . '">' . usces_the_itemImage(0, $width, $height, $post, 'return') . '</a>'; //商品画像のHTML
$str .= '</div>';
$str .= '<div class="detail">';
$str .= '<div class="assist_excerpt">';
$str .= '<a href="'. get_permalink() . '" rel="bookmark" title="' . wp_filter_nohtml_kses(get_the_title()) . '"><h4>' . usces_the_itemName('return') . '</h4></a>'; //商品名のHTML
// $str .= get_the_excerpt(); //説明文の抜粋
$str .= '</div>';
if (usces_is_skus()) {
$str .= '<div class="assist_price">';
$str .= '￥' . number_format(usces_the_firstPrice('return')); //商品価格のHTML
$str .= '</div>';
$str .= '<div class="assist_zaiko">';
$str .= '在庫状態: [<span class="zaiko">' . usces_the_itemZaikoStatus('return') . '</span>]'; //商品の在庫状態のHTML
$str .= '</div>';
}
$str .= '</div>'; // .assist_excerptここまで
$str .= '</div>'; // .detailここまで
$str .= '</li>';
return $str;
}軽く説明をすると
- 8行目で商品画像の出力
- 12行目で商品名の出力
- 13行目で説明文の抜粋出力（コメントアウト済み）
- 17行目で商品価格の出力
- 20行目で在庫状態の出力（追加の処理）
という感じです。もし追加で何かを表示をしたかったり削除したい場合は該当する部分を修正して下さい。
関連商品の画像サイズを変更するソースコード
関連商品の画像サイズを変更するフィルターフックが同じ関数内に記述されてあったので、次いでにサイズを変更するソースコードをメモしておきます。
（もし先述したカスタマイズ用のソースコードを使う場合は、以降記述するソースコードを使わずに、直接カスタマイズ用ソースコードの8行目の$width、 $heightの変数部分に代わりで数値を入れちゃっても大丈夫です。）
画像のサイズを変更するフィルターフック名は横がusces_filter_assistance_item_widthで、縦がusces_filter_assistance_item_heightです。それぞれ2528行目、2529行目辺りに記述されています。
//関連商品画像の横幅を変える
function assistance_item_width( $width ) {
$width = 100; //この数値を変えると横幅変更
return $width;
}
add_filter( 'usces_filter_assistance_item_width', 'assistance_item_width' );
//関連商品画像の縦幅を変える
function assistance_item_height( $height ) {
$height = 100; //この数値を変えると縦幅変更
return $height;
}
add_filter( 'usces_filter_assistance_item_height', 'assistance_item_height' );それぞれ3行目、10行目の数値を変えると画像サイズを変更出来ます。
画像サイズで注意したいこと
ただ、画像サイズで注意したいのは予め専用の画像サイズが無ければ最適なサイズの画像が出力されない点です。
例えば上記のソースコードで画像サイズを「縦60px、横60px」と設定しても、WordPress側で生成された画像のサイズに「60ピクセル×60ピクセル」の画像が無ければ、このサイズに近い画像が選ばれます。
「60pxの画像は無いけど、80pxの画像はあるよ。これ近いね」ってことでWordPressが勝手に判断し、サイズが近いその画像を縮小して表示するようになります。
見かけ上は大丈夫なのですが、サイズの観点から言うとベストとは言い難い状況ですので、もしこの画像サイズの最適化を図りたい場合は「設定 > メディア」からサイズを設定するか、WordPressの関数add_image_size()で設定します。
この関数と設定については別記事にまとめていますので、ご参考までに。