Column

WordPressのlightbox系プラグインと追従メニューの組み合わせ

Web制作

2014.05.26

wordpress

またしてもWordpress構築中にハマったので備忘録です。

現象

2カラムレイアウトの画面にて、左カラムメニューを画面スクロールに合わせて追従するよう設計。
Jqueryプラグイン「jquery.scrollfollow.js」を使用し、ローカルでは動作を確認したが、Wordpressに組み込んだ時点で追従しなくなった。

WordPressバージョン : 3.9.1
不具合発生Jqueryプラグイン : jquery.easing.1.3.js , jquery.scrollfollow.js

「jquery.scrollfollow.js」の設定用javascriptは外部ファイル化して、「jquery.scrollfollow.js」と同時に読み込むよう設定。

原因

ローカル確認時のjqueryはgoogleのAPIからバージョン1.11.0を読み込むよう設定していたが、Wordpress上ではwp-includeフォルダのjqueryバージョン1.11.0を自動で読み込んでいた。
これを、google APIのjqueryバージョン1.11.0を読み込むように変更。
変更は、テーマテンプレートのheader.phpに以下のように記述。

<?php wp_deregister_script(‘jquery’); ?>
<?php wp_enqueue_script(‘jquery’, ‘https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js’); ?>

また、jqueryを変更することで、Wordpressのプラグイン「WP Lightbox 2」が動作しなくなった。
Lightbox系プラグインである「WP-Slimbox2」を導入することで対応。
なお、以下のLightbox系プラグインは動作せず。

・WP Lightbox 2
・jQuery Colorbox
・WP jQuery Lightbox

正攻法ではない解決方法になってしまったのが気になるので、時間を見つけて他の解決方法を試して行きたいと思います……。
スクロール追従機能の書き方を改善した方が、正しい気がします……。

  • Wordpress
  • プラグイン