【すぐ解決】wordpressでlightbox、FancyBoxが動かない問題
wordpressでlightbox、FancyBoxを使ったことがありますか?
ブログに投稿した画像を自動で拡大してくれるプラグインなんですが、テンプレートを鬼カスタマイズしていたり、特殊なことをしているとこれらのプラグインが動かないことってよくありますよね。
今回はそんな時に僕がやっている回避策をご紹介します思います。
以下より本文をご覧ください。
まずはご確認下さい
まず初歩的なことですが、lightbox、FancyBoxともに、投稿された画像の「リンク先」がちゃんと「メディアファイル」になっていることを確認してください。
ここが「なし」などになっている場合、基本的には上記プラグインを導入しても拡大しません。
今回はこの箇所が「メディアファイル」になっているのに、正しく「lightbox」、「FancyBox」プラグインが動いてくれない方向けの記事となっております。
動かない原因はだいたいこれ(一応)
- テンプレートをカスタマイズしている
- wordpressの初期ヘッダー・初期フッターを読み込んでいない(独自のものを使っている)
この2つが原因でうまく動かないことはよくあります。
あとは、wordpress独特のheaderに色々読み込まれちゃうjqueryなどを、以下のようなコードで消している場合も、プラグインが動かない要因の一つとなります。
↓↓
add_action( 'wp_enqueue_scripts', 'my_delete_local_jquery' );
remove_action('wp_head', 'print_emoji_detection_script', 7);
remove_action('wp_print_styles', 'print_emoji_styles');
でも、コレをやっちゃうと困るんだよな~、みたいな場合に以下の内容がお役に立つかもしれません。
lightbox、FancyBoxで上手く拡大しない…を解決する方法
①lightbox、FancyBoxを破棄しよう
今回は上記2つのメジャーなプラグインを破棄する所から始めたいと思います。
上記プラグインをインストールされている方は、lightbox、FancyBoxを【プラグイン】から無効にするか、削除してください。
②Responsive Lightboxを導入する
次に「Responsive Lightbox」を導入してみます。
【外部リンク】【プラグインリンク】Responsive Lightbox by dFactory ? WordPress プラグイン
こちらをwordpressに入れ、「有効」にして下さい。
なぜResponsive Lightboxなのか
以下の条件下でも動くことが確認できたからです。
- テンプレートをカスタマイズしている
- wordpressの初期ヘッダー・初期フッターを読み込んでいない(独自のものを使っている)
他プラグインとのコンフリクトを起こしにくい構造である点も素晴らしい。
また、起動面だけでなく、性能も一級品です。
- ポップアップの種類をボタン1つで変更できる(クライアントからの変更要求に瞬時に対応できる可能性がある)
- レスポンシブ対応
③動作確認&カスタマイズ
あとは、画像が埋め込まれたページで「Responsive Lightbox」が動くことを確認して下さい。
上画像のような挙動をすれば成功です。(画像をクリックすると実際の動きが見れます)
ポップアップの種類などは、【設定】→【Responsive Lightbox】から容易に可能です。
僕は「FancyBox」が好きです。
以上です
いかがでしたでしょうか。
早い話「Responsive Lightbox」試したらうまくいくかもよ…というだけの記事だったわけですが、実際拡大機能を実装できたという方も多いのではないでしょうか。
僕自身、有名な「lightbox」、「FancyBox」プラグインの実装に苦労した人間なので…うまくいかない時の気持はよくわかります。
もしこのプラグインを使ってもダメだった…という方がいらっしゃいましたらコメント下さい。
分かる範囲でお答えします。
おまけ いちいち「リンク先」から「メディアファイル」を選択しない方法
WordPressのoptions.phpページにアクセスし、「image_default_link_type」項目をfileに変えれば初期値が「メディアファイル」になりますよ。
options.phpページは管理画面に入った後、/wp-admin/以降の部分をoptions.phpに替えることでアクセスできます
https://●●●/wp-admin/options.php
こんな感じです。(●はドメインに)
コメント一覧
Simple Lightboxだと動かなかったのですが、こちらが動きました。
どうもありがとうございました。
Easy FancyBoxが動作せず困っていましたが解決しました!
ありがとうございます!助かりました!