サポート » 使い方全般 » jQuery Glide.jsが動作しない原因を教えてください

  • 解決済 RMVP

    (@rmvp)


    いつもお世話になっております。
    下記のサイトを参考に、CSS3で軽量ということで、導入してみたのですが全く動作しません。

    GLIDE.JS

    参考サイト
    http://techmemo.biz/javascript/glide-js/

    head部分に、サイト通りに下記の記述を追加し、各ファイルをアップ。

    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="http://example.com/wp-content/themes/example/js/glide.min.js"></script>
    <link rel="stylesheet" href="http://example.com/wp-content/themes/example/glide.theme.min.css" />
    
    <script type="text/javascript">
     jQuery('.slider').glide();
    </script>

    投稿部分には下記の記述を追加。

    <div class="slider">
     <ul class="slides">
      <li class="slide"><img src="画像URL" /></li>
      <li class="slide"><img src="画像URL" /></li>
     </ul>
    </div>

    テーマはこちらを使用し、子テーマのHeadに記述しました。

    https://ja.wordpress.org/themes/mh-newsdesk-lite/

    jQueryが正しく動作しない原因はなんでしょうか?
    プラグインを全て停止しても、変わりませんでした。

    全く原因がわからず、ご投稿させていただきました。

    お忙しい中、大変恐れ入りますがアドバイス・ご指導頂けましたら幸いでございます。
    何卒宜しくお願い申し上げます。

10件の返信を表示中 - 1 - 10件目 (全10件中)
  • 本家のGlide.jsのサイトのやり方を試してみましたが、やはり駄目でした。

    http://glide.jedrzejchalubek.com/docs.html

    やはり、jQueryがうまく作動していないということでしょうか?

    RMVPさん

    <div class="glide__wrapper">
    		<ul class="glide__track">
    
    			    <li class="glide__slide">
    					<div class="bg i-1"></div>
    				</li>
    
    			    <li class="glide__slide">
    					<div class="bg i-2"></div>
    				</li>
    
    			    <li class="glide__slide">
    					<div class="bg i-3"></div>
    				</li>
    
    			    <li class="glide__slide">
    					<div class="bg i-4"></div>
    				</li>
    
    			    <li class="glide__slide">
    					<div class="bg i-5"></div>
    				</li>
    
    		</ul>
    	</div>

    って感じで書いてみてはどうですか?
    http://glide.jedrzejchalubek.com/
    のサイトを参考にする場合ですが。

    スクリプトが実行されるときに対象となる要素、今回の場合はsliderのクラスを付与させた要素が読み込み済みでないとスクリプトは正常に動きません。

    <script type="text/javascript">
     jQuery('.slider').glide();
    </script>

    は、head内ではなく、</body>の前に記述する必要があります。

    >mura0403様

    投稿ページにて書き換えてみましたが、変わらず動作しませんでした。
    アドバイス・記述コードありがとうございます。

    >mimosafa様

    footerの<?php wp_footer(); ?></body>より上に記述し変更しましたが、変化ございませんでした。アドバイスありがとうございます。

    こちらのサイトを参考に

    http://kachibito.net/web-design/wordpress-with-jquery.html

    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="http://example.com/wp-content/themes/example/js/glide.min.js"></script>

    上記の部分をPHPでの記述などに変更したり試しましたが、変化ございませんでした。

    <?php
    wp_deregister_script('jquery');
    wp_enqueue_script('glide',get_bloginfo('template_url') . '/js/glide.min.js', array('jquery'), '1.0');
    ?>

    引き続き皆様にアドバイス頂けましたら幸いでございます。
    何卒宜しくお願い申し上げます。

    追記させて頂きます。

    全くWPに関しましてはまだまだ知識がないため、テーマも関係しているのかなと思い、Twenty Fifteenのテーマに変更し同じように試してみましたが、だめでした。

    引き続き皆様にアドバイス頂けましたら幸いでございます。
    何卒宜しくお願い申し上げます。

    <?php
    wp_deregister_script('jquery');
    wp_enqueue_script('glide',get_bloginfo('template_url') . '/js/glide.min.js', array('jquery'), '1.0');
    ?>

    wp_enqueue_scriptの第三引数に'jquery'を含めているので、wp_deregister_script'jquery'が登録されていない状態になると'glide'も読み込まれない気がします。
    'jquery'を自前のものでwp_register_scriptし直すか、またはheadに記述したjQuery部分とwp_deregister_scriptを消してください。そうすれば'glide'の読み込み時に(後者であれば、WordPressにビルドインされた)jQueryが読み込まれます。
    ちなみに上記コードはfunctions.phpに記述されていますか?これらの関数はwp_enqueue_scriptsというアクションフックにフックされている必要があります。

    add_action( 'wp_enqueue_scripts', 'my_glide_enqueue_script' );
    function my_glide_enqueue_script() {
        wp_enqueue_script( /* 略 */ );
    }

    あと、get_bloginfo('template_url')では親テーマのディレクトリーを出力するのでは?
    glide.min.jsを子テーマに格納している場合は、get_stylesheet_directory_uri()が適当と思います。

    出力されたページのソースを見てみてください。思惑通りのコードが出力されているか否か確認できます。
    またブラウザのデベロッパーズツールなどでjavascriptについてのエラーが発生していないか、というのも併せて確認いただいた方が良いと思います。
    ご健闘を祈りますっ

    head内に記述するのであれば、

    <script type="text/javascript">
    $(function(){
     jQuery('.slider').glide();
    });
    </script>
    

    DOMが準備出来たタイミングで実行させるといいと思います。

    (よくもまぁこんなテキトーな記事が書けるな…いやWP前提の記事じゃないから問題ないんだけど)

    Glide.jsですが、多分WP付属のjQueryでそのまま動作させられる気がします。
    となるとmimosafaさんの言うとおり

    addadd_action( 'wp_enqueue_scripts', 'my_glide_enqueue_script' );
    function my_glide_enqueue_script() {
       wp_enqueue_script('glide',get_bloginfo('template_url') . '/js/glide.min.js', array('jquery'), '20150823',true);
    
    }

    実行用スクリプトは

    <script type="text/javascript">
    jQuery(function(){
     jQuery('.slider').glide();
    });
    </script>

    ですね。

    (x743さんのから少しだけ修正しているので注意)

    Hinaloeさん

    すみません、そこまで見ておりませんでした。ありがとうございます。

    ご返答、御礼が大変遅れまして申し訳ございません。
    皆さまのおかげで解決致しました。

    <?php wp_enqueue_script('jquery'); ?>
    <?php wp_enqueue_script('jquery.bxslider.min.js', '/wp-content/themes/example/js/jquery.bxslider.min.js'); ?>
    <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/jquery.bxslider.css">

    最後に「.js」までつけることで、動作するようになりました。

    >mimosafa様

    大変詳しく、解説、コードを教えて頂きまして誠にありがとうございます。
    大変勉強になりました。心よりお礼申し上げます。

    >x743様

    ヘッダーへの記述の際のコードありがとうございます。
    心よりお礼申し上げます。

    >Hinaloe
    アドバイス、ご指導ありがとうございます。
    心よりお礼申し上げます。

10件の返信を表示中 - 1 - 10件目 (全10件中)
  • トピック「jQuery Glide.jsが動作しない原因を教えてください」には新たに返信することはできません。