Bloosh Company

Development>WordPress

Welcart商品画像のフィルターフック

, , , , ,

Welcartの商品画像を表示する際にフックを利用してカスタマイズできます。
2021.11.02 サブ画像にも対応
 
公式ページによるフィルターフックの解説はこちら
 
私がよくやるのは、
①クラス名を追加
②altに商品名を指定
③商品画像がないなら、NOIMAGE画像を表示
です。
 
商品画像がなくて、2番目のようなマークが出てると残念な気持ちになるのであらかじめ用意しておきます。

商品画像がない場合の例
NOIMAGE画像ってふしぎな名前・・・

 
NOIMAGE画像はSVGで作るとどんな場所でもきれいに表示されるよ。
 
では、下記コードをテンプレートフォルダのfunctions.phpに追加します。


/*商品画像作成フィルター*/
add_filter( 'usces_filter_main_img', 'my_filter_main_img', 10, 5 );
//サブ画像にも対応させる場合
add_filter( 'usces_filter_sub_img', 'my_filter_main_img', 10, 5 );
function my_filter_main_img( $html, $post_id, $pictid, $width, $height ) {

	$attr = array(
		//クラス名を設定できるよ
		"class"	=> "wel-img",

		//altに商品名を付与
		"alt"		=> get_post_meta( $post_id, '_itemName', true ),

		//遅延読み込み
		"loading"=> "lazy"
	);

	//画像サイズも自由に変更できるよ
	//上のattrにもwidthとheightを設定できる
	$img = wp_get_attachment_image($pictid, "medium", 0, $attr);

	//画像あればここでreturn
	if($img){
		return $img;
	}

	//画像なければNOIMAGEをreturn
	return "<img src='".get_template_directory_uri() . "/img/noimage.svg' alt='no image' loading='lazy' class='wel-img'>";

}

テンプレートフォルダの画像フォルダにnoimage.svgをアップロードしておいてください。

Welcart商品画像のフィルターフック #WordPress #ウェブデザイン #ウェブ制作 #WEBデザイン #WEB制作 #svg #welcart #フィルターフック #プラグイン #商品画像 #画像

<<次の記事

Welcartの商品画像とlightgallery.jsの組み合わせ事例

前の記事>>

swiper.js スマホ版だけレスポンシブにしたい

Tweets by blooshcompany