トピック投稿者
RMVP
(@rmvp)
本家の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>の前に記述する必要があります。
トピック投稿者
RMVP
(@rmvp)
＞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');
?>
引き続き皆様にアドバイス頂けましたら幸いでございます。
何卒宜しくお願い申し上げます。
トピック投稿者
RMVP
(@rmvp)
追記させて頂きます。
全く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さん
すみません、そこまで見ておりませんでした。ありがとうございます。
トピック投稿者
RMVP
(@rmvp)
ご返答、御礼が大変遅れまして申し訳ございません。
皆さまのおかげで解決致しました。
<?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
アドバイス、ご指導ありがとうございます。
心よりお礼申し上げます。
