NBOXなブログ

Read Article

【ワードプレス】light box(ライトボックス)が動作しない対処法まとめ!

ワードプレスプラグイン

ライトボックスが動作しなかったので、その対処法のメモ書き。

この解決に至るまで約1時間悶絶した。

light box が動作しない症状

  • 初期症状
    画像をクリックすると画像が埋め込まれたページが表示される。
  • 症状 ケース2
    画像のみのページが表示される。
  • 症状 ケース3
    ライトボックスのロードマークが出たまま画像が表示されない。読み込もうとはする。

ライトボックスが動作しないので試したプラグイン

  • Easy FancyBo
  • FancyBox for WordPress
  • jQuery Colorbox
  • Lightbox Plus ColorBox
  • wp-jquery-lightbox
  • WP Lightbox 2

プラグインを入れ替えても全く症状が改善せず。

ライトボックスが動作しない時の対処法~基本編~

  • まずは画像を挿入した際にリンク先が「メディアファイル」になっているか確認
  • header.php に <?php wp_head(); ?> が挿入されているか確認
    ※</head>の直前に挿入する事に注意!
  • とりあえず、別のプラグインに変えてみる。

light box が動作しないのは jqueryとprototype.jsの競合が原因?~中級編~

      jqueryとprototype.jsの競合が原因のため、テーマファイルの”header.php”の直前に下記ソースを挿入。
  1. <scripttype=“text/javascript”>
  2. //jQueryとprototypeの競合を避ける
  3. jQuery.noConflict();
  4. </script>

動作せず。

pluginのjqueryを読み込ませない。~上級編~

1.functions.phpに以下のソースを埋め込んで、読み込ませないようにした。

1
2
3
4
5
6
function load_cdn() {
    if ( !is_admin() ) {
    wp_deregister_script('jquery');
    }
}
add_action('init''load_cdn');

2.テーマに直で読ませているjqueryを削除する。
3.plugin「FancyBox for WordPress」を使用する。
「FancyBox for WordPress」です。このpluginの嬉しかったところは、設定で「トラブルシューティング設定」というのがあって、「jQueryの起動スキップ。jQueryが2度起動される場合だけ使用 (初期値: off) 」にチェックを入れると競合を防ぐことができるということ。
1のjqueryの読み込みをやめさせるのをやめて、このチェックをしたら競合せずに動くようになりました。

※引用:wordpressでprettyphotoやlightboxやFancyboxがうまく動かなかったので…

http://www.terastella.com/lightbox.html

上記でもだめ。

そもそも、根本的な事ではないかと、徹底的にソースを見る。

気になるのはDreamWeaver で編集する際に不便なので、同じCSSファイルのリンクをDreamWeaver 用のローカルリンクと、PHPのソースコードでリンクした二つを挿入しておりました。しかもその表示が<head>の上にCSSのリンクがきているので、まさかと思い消して表示してみると?

ビンゴ!

ライトボックスが見事に表示されました。

CSSの競合?という事でしょうか?よく分かりませんが、希少な解決策でした。

 

URL :
TRACKBACK URL :

Leave a Reply

Return Top