お客さんからこんな要望があった

商品のとこの“虫めがね”いらない。消して。

まずは、できるかできないか聞いてくれますか?
右上に虫めがねのアイコンがついてるコレ

商品の画像(写真)をPC画面(デスクトップ)で見るとき、マウスのポインターに合わせて拡大できるUI。
Amazonでの同機能が有名だと思うけど、商品によっては、拡大させる意味のない場合もあると思う。
要望のあったお客さんの商品もそれに当てはまるということで、調べて対応した。

WordPress、WooCommerceで経験のないことは、公式フォーラムのサポートで検索かけたり、WooCommerce Docsを調べたりもするけど、手っ取り早いのはGoogle先生。
ただ、WooCommerce関連のことを調べるとき、日本語で検索しても情報を見つけにくいので、英訳して検索するとたどり着きやすい。

検索結果から、それらしい見出しのサイトに行ったら、紹介されている記事の内容、コードは複数のものをチェックする。
ドンピシャなコードがある場合でも、何をどうやって動かしているのかを(多少)理解しつつ、自分の環境で検証する。
検索時に記事の鮮度は絞っているとしても、古いコードや不適切なコードを紹介している記事も存在するので、コードは信じず、そこで紹介されているコードを再検索するなど、理解を深めておけると、あとあと苦労しなくなる。

ヒントで得たのはこの2つ

  • after_setup_theme
  • remove_theme_support( ‘wc-product-gallery-zoom’ );

このafter_setup_themeっていろんな場面で見るけど、ブログを書く機会にもう一度理解を深めておくのもいいかも。
ちなみに、こちらのブログの説明がわかりやすかった。

after_setup_theme
通常、テーマ設定・オプションを初期化するために使われる。これはテーマで最初に使えるアクションフックであり、有効なテーマの functions.php ファイルが読み込まれた直後にトリガーされる。

https://qiita.com/kijtra/items/68a06083d25af8b5a119

ようするに、after_setup_themeは、WordPress(のサイト)が開くとき、優先的に読み込ませるためのアクションフックということっぽいので、使い方によっては、一緒に実行させる、別のものを実行させる。みたいなことができるわけだ。

で、最終的にこんなコードをmy-snow-monkey.phpに加えて対応できた。

add_action( 
	'after_setup_theme', 
	function () {
	remove_theme_support( 'wc-product-gallery-zoom' );
	}
,100
);

WooCommerceプラグイン内のテンプレートファイルを探してみると、wc-product-gallery-zoom以外にwc-product-gallery-sliderwc-product-gallery-lightboxも見つかったので、調べてみたら、lightbox(画像拡大)機能やスライダーも止められそうなのがわかった。

remove_theme_support( 'wc-product-gallery-zoom' );
remove_theme_support( 'wc-product-gallery-lightbox' );
remove_theme_support( 'wc-product-gallery-slider' );

今回は機能を停止させるということだったので、CSSだけで対応するにはちょっと面倒な内容だった。

今回は検索から得た情報で対応できたけど、場合によってはWooCommerceプラグイン内のテンプレートなどから調べることもある。
ヒントはたくさんあるんだから、まずは試してみるのがいちばんいいと思ってる。
エラーなんて気にしない!(ローカル環境なら)

この記事を書いた人

GONSY

印刷会社のグラフィックデザイナーだった1998年に「会社案内」のHTML化をきっかけにWebの世界へ。
WordPressはMEから使っているけどプログラムスキルは一向に上がらない。WooCommerceは2018年から。忘れっぽくなってきたので、試したこと、実装方法を記録するためにブログをスタート。
最近、WordPress、WooCommerce、Snow Monkeyがおもしろいと感じるおじさん。