WordPressサイトでbxSliderが動かない場合の対処法(覚書)

悩む人

先日Wordpressを利用した新たなサイトを立ち上げた際に、どうしてもjQueryを利用した写真のスライドプラグインである「bxSlider」が機能しないという状態に陥りました。

既に別で運用しているWordpressのサイトから、bxSliderに関するcssファイルやjsファイル、そしてテーマ内のscriptコードについても全く同じように移植したにも関わらず動きません。

各種ブラウザの開発ツールで確認をすると、以下のメッセージが出力されていました。

FireFox

FireFoxエラー
TypeError: $(…).bxSlider is not a function

Internet Explorer

IEエラー
オブジェクトは ‘bxSlider’ プロパティまたはメソッドをサポートしていません。

Google Chrome

クロームエラー
Uncaught TypeError: $(…).bxSlider is not a function

色々と調べた結果、今回助けられたページはこちら

どうやら簡潔に言えばWordpressとjQueryの相性といったところのようです。

今まで動いていたWordpressのサイトと何が違うのかまでコードの解析していませんが、とにかく同じようなエラーが出ている方は対処方法としてお試しください。

ちなみに私の場合には当サイトにご紹介のある『「$」を再定義する』で対応しましたた。(テーマ内に既述されたスクリプトコードを「jQuery(function($){});」で囲むという対応)

具体的には次のとおりです。

当初のコード

<script>
$(document).ready(function(){
    $('.bxslider').bxSlider({
      mode: 'fade',
      controls    : true, 
      auto        : true, 
      speed       : 1000, 
      pause       : 4000
    });
});
</script>

修正後コード

<script>
jQuery(function($){ ←追加
    $(document).ready(function(){
        $('.bxslider').bxSlider({
          mode: 'fade',
          controls    : true, 
          auto        : true, 
          speed       : 1000, 
          pause       : 4000
        });
    });
}); ←追加
</script>

これで問題なく動作しました。

先人に感謝です。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です