WooCommerceのLightBoxとWordPressのFancyBoxにおける競合を回避する

  • 更新日:
  • 公開日:

WooCommerceには画像を綺麗に魅せるLightBox系のプログラムが同梱されており、商品詳細ページでの商品画像にデフォルトで適用されております。

しかし、他の固定ページや投稿でも同様にLightBox系の動作をさせようとプラグイン(有名所では「Easy FancyBox」など)を有効化すると、WooCommerceのプログラムと競合してしまいます。画像がオーバーレイで二重に表示されてしまうんですね。

これを回避し共存させる方法が日本語の記事で見当たらなかったのでメモしておきます。

用意されているフックで簡単に対応する

以下のコードをfunctions.phpに貼り付けて下さい。これだけ解決出来るはずです。(Easy FancyBoxを例にしているので、他のLightBox系プラグインの場合はコード変更が必要だと思われます)

/*
 * FancyBoxとの競合を回避: 商品メイン画像(アイキャッチ)
 */
function remove_fancybox_from_product_image( $html, $post_ID ) {
 $new_classes = str_replace( 'class="', 'class="nofancybox ', $html );
 return $new_classes;
}
add_filter( 'woocommerce_single_product_image_html', 'remove_fancybox_from_product_image', 15, 2 );

/*
 * FancyBoxとの競合を回避: 商品サムネイル画像
 */
function remove_fancybox_from_product_image_thumbnail( $html, $attachment_id, $post_ID, $image_class ) {
 $new_classes = str_replace( 'class="', 'class="nofancybox ', $html );
 return $new_classes;
}
add_filter( 'woocommerce_single_product_image_thumbnail_html', 'remove_fancybox_from_product_image_thumbnail', 15, 4 );

参考記事: Woocommerce and fancybox conflicts – Newbox Solutions

(参考元コードではサムネイルしか対応していなかったので、追加でメイン画像も対応するコードを追記しておきました)

書いた人

Symbol Mark

Ryoichi(しつ)

除菌ティッシュを買い込んで使いきれずによく乾かす人。

療養目的で退職し、どうやって生きていくか模索中。最近は勉強目的でLaravelやVue.js弄ったり、趣味で音で遊んでます。

※2019年10月16日現在ブログリニューアル中です。崩れなどが発生していたらすみません。

うぇぶ: @s_ryone