サポート » 使い方全般 » JQUERY bxsliderが動きません

  • 表題の件ですが、bxsliderが効かない状態です。
    以下 head内の抜粋ですが、
    他プラグインやjqueryとのコンフリクトかとも思い、
    色々外しながら行ったのですが、
    うまくいきません。

    以下、hogehogeなどダミーのURLを入れていますが、
    全てパスはきちんと繋がっていることを確認しています。

    動作しない理由が以下からわかりますでしょうか?
    ご教示いただければ幸いです。

    なお、以下のソースのうち、
    <link rel='stylesheet' id='admin-bar-css' href='hogehoge/css/admin-bar.css?ver=3.4.1' type='text/css' media='all' />
    以下はテンプレート上<?php wp_head(); ?>と記述してある部分に自動生成されています。(プラグインの情報はここに自動で出力されるものなのでしょうか?)

    <head>
    <meta charset="UTF-8" />
    <meta name="description" content="ダミー/>
    <link href="hogehoge/css/jquery.bxslider.css" rel="stylesheet" />
    <title>hogehoge</title>
    <link rel="stylesheet" href="hogehoge/style.css" type="text/css" />
    <script type="text/javascript">
    $(function(){
    $('img').on('contextmenu',function(e){
    return false;
    });
    });
    </script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type=”text/javascript”></script>
    <script src="hogehoge/js/jquery.bxslider.min.js" type=”text/javascript”></script>
    <script type=”text/javascript”>
    jQuery(document).ready(function($){
    $(function(){
      $('.bxslider').bxSlider();
    });
    });
    </script>
    <link rel='stylesheet' id='admin-bar-css'  href='hogehoge/css/admin-bar.css?ver=3.4.1' type='text/css' media='all' />
    <link rel='stylesheet' id='NextGEN-css'  href='hogehoge/plugins/nextgen-gallery/css/nggallery.css?ver=1.0.0' type='text/css' media='screen' />
    <link rel='stylesheet' id='contact-form-7-css'  href='hogehoge/plugins/contact-form-7/includes/css/styles.css?ver=3.2.1' type='text/css' media='all' />
    <link rel='stylesheet' id='jquery.lightbox.min.css-css'  href='hogehoge/plugins/wp-jquery-lightbox/styles/lightbox.min.css?ver=1.4' type='text/css' media='all' />
    <script type='text/javascript' src='hogehoge/js/jquery/jquery.js?ver=1.7.2'></script>
    <script type='text/javascript' src='hogehoge/plugins/nextgen-gallery/js/jquery.cycle.all.min.js?ver=2.9995'></script>
    <script type='text/javascript' src='hogehoge/plugins/nextgen-gallery/js/ngg.slideshow.min.js?ver=1.06'></script>
    <link rel="EditURI" type="application/rsd+xml" title="RSD" href="hogehoge/xmlrpc.php?rsd" />
    <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="hogehoge/wlwmanifest.xml" />
    	<!-- begin gallery scripts -->
        <link rel="stylesheet" href="hogehoge/plugins/featured-content-gallery/css/jd.gallery.css.php" type="text/css" media="screen" charset="utf-8"/>
    	<link rel="stylesheet" href="hogehoge/plugins/featured-content-gallery/css/jd.gallery.css" type="text/css" media="screen" charset="utf-8"/>
    	<script type="text/javascript" src="hogehoge/plugins/featured-content-gallery/scripts/mootools.v1.11.js"></script>
    	<script type="text/javascript" src="hogehoge/plugins/featured-content-gallery/scripts/jd.gallery.js.php"></script>
    	<script type="text/javascript" src="hogehoge/plugins/featured-content-gallery/scripts/jd.gallery.transitions.js"></script>
    	<!-- end gallery scripts -->
    <!-- <meta name="NextGEN" version="1.9.6" /> -->
    </head>
4件の返信を表示中 - 1 - 4件目 (全4件中)
  • WordPressでjQueryを使う場合、少し注意が必要です。

    「WordPress jQuery」で検索してみれば、様々な注意点が見つかることでしょう。
    例えば、こちらの記事が参考になるかもしれません。
    http://eastcoder.com/2014/07/using-jquery-with-wordpress/

    WordPressは本体にjQueryを含んでいますので、外部からjQueryを持ち込んで読み込むと、jQueryが重複して読み込まれてしまい、予想外の不具合の原因になります。

    WordPressにはwp_enqueue_scriptという関数が存在していますのでその関数を通じてjQueryをはじめとするスクリプトを読み込むようにしてください。WordPressの側で読み込み順などを調整してくれます(なお、テーマにwp_headやwp_footerを忘れず書いてないと正しく機能しません、ご注意ください)。

    またWordPressにおいてjQueryを使うときは「$」はコンフリクトを避けるために使えないようになっています。「$」を「jQuery」に書き換えるか、上記参考サイトにあるように「カプセル化」を行ってください。下記の要領です。

    jQuery(function( $ ) {
    
    // ここに $ を使ったコードを書く
    
    });
    トピック投稿者 tkj_tkj

    (@tkj_tkj)

    ありがとうございます。

    たいへん申し訳ないのですがご質問失礼します。
    現在以下のように記述しているのですが、

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type=”text/javascript”></script>
    <script src="hogehoge/js/jquery.bxslider.min.js" type=”text/javascript”></script>
    <script type=”text/javascript”>
    jQuery(document).ready(function($){
    $(function(){
      $('.bxslider').bxSlider();
    });
    });
    </script>

    まずjqueryの読み込みは外す。
    以下を削除するということでよろしいでしょうか?
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type=”text/javascript”></script>

    functions.phpに以下を記述。
    こちらも記述方法がよくわかりませんでした・・・

    function my_scripts() {
    	wp_enqueue_script( 'jquery' );
    }
    add_action( 'wp_enqueue_scripts', 'my_scripts' );

    今回、/js/jquery.bxslider.min.js を使う場合は参考URL内にあるように上記記述の中に/js/jquery.bxslider.min.jsこちらを記述する、ということで正しいでしょうか?

    またWordPressにおいてjQueryを使うときは「$」はコンフリクトを避けるために使えないようになっています。

    これは以下の中にある$をjQueryに変更する、という意味でしょうか?

    <script type=”text/javascript”>
    jQuery(document).ready(function($){
    $(function(){
      $('.bxslider').bxSlider();
    });
    });
    </script>

    以下に変更?

    <script type=”text/javascript”>
    jQuery(document).ready(function(jQuery){
    jQuery(function(){
      jQuery('.bxslider').bxSlider();
    });
    });
    </script>

    色々やってみたのですが、うまくいかず・・・
    お手数おかけし恐縮なのですがご教示いただければ幸いです。

    トピック投稿者 tkj_tkj

    (@tkj_tkj)

    いったん以下のように変更しましたが
    動作しない状態です。

    何か問題な記述ありそうでしょうか?

    header.php内

    <script src="hogehoge/js/jquery.bxslider.min.js" type=”text/javascript”></script>
    <script type=”text/javascript”>
    jQuery(function( $ ) {
    jQuery(document).ready(function($){
    $(function(){
      $('.bxslider').bxSlider();
    });
    });
    });
    </script>
    <?php wp_head(); ?>

    functions.php

    function my_scripts() {
    	wp_enqueue_script( 'jquery.bxslider.min', get_template_directory_uri() . 'hogehoge/js/jquery.bxslider.min.js', array( 'jquery' ) );
    }
    add_action( 'wp_enqueue_scripts', 'my_scripts' );

    まずfunctions.php内ですが、こう書いてみてください

    function my_scripts() {
    	wp_enqueue_script( 'jquery' );
    	wp_enqueue_script(
    		'bxslider', //ここには読み込むスクリプトの名前を。命名しているだけなので間違っても動きます
    		get_stylesheet_directory_uri() . '/js/jquery.bxslider.min.js', //つづいてスクリプトのpassを指定
    		array( 'jquery' ) //関連するスクリプトのハンドルを指定
    	);}
    add_action( 'wp_enqueue_scripts', 'my_scripts' );

    これでjQuery本体とjquery.bxslider.min.jsの両方をWordPressを通じて読み込みます。これらのスクリプトはWordPress側で処理され、よき箇所に展開されます。

    で、つづいてbxsliderの挙動を定義する部分(こちらは私はfooter.php、wp_footerタグ直下に書き込むことが多いのですが)はtkj_tkjさんが書いたとおりで動くと思います。

    <script type=”text/javascript”>
    jQuery(document).ready(function($){
    $(function(){
      $('.bxslider').bxSlider();
    });
    });
    </script>

    これで私の環境では、エラー無しでスクリプトを読み込んだことを確認できました。あとはこのjQueryプラグイン付属のCSSがきちんと読み込めていることをご確認の上、確認してみてください。

    蛇足ですが、JavaScriptが止まっている箇所の特定には各種ブラウザの開発者ツールが役に立ちます。Chromeでしたら「表示→開発/管理→デベロッパーツール」から立ち上げられます。上部の「Resources」タブから目当てのスクリプトが左に表示されるかどうか(正しく読み込まれていれば表示されます)確認してみてください。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • トピック「JQUERY bxsliderが動きません」には新たに返信することはできません。