お客さんからこんな要望があった
商品の画像(写真)を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
https://qiita.com/kijtra/items/68a06083d25af8b5a119
通常、テーマ設定・オプションを初期化するために使われる。これはテーマで最初に使えるアクションフックであり、有効なテーマの functions.php ファイルが読み込まれた直後にトリガーされる。
ようするに、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-slider
、wc-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プラグイン内のテンプレートなどから調べることもある。
ヒントはたくさんあるんだから、まずは試してみるのがいちばんいいと思ってる。
エラーなんて気にしない!(ローカル環境なら)