ワードプレスを使ってるんですがjQueryが反映されません。
スクロールしたらトップへ戻るボタンが表示されるようにしてみたんですがうまく表示されません。
htmlは以下のような感じでフッターに書きました。
<div id="page-top">
<p><a href="#container">↑</a></p>
</div>
cssはdisplay: noneで非表示にしています。
display: noneを解除するとちゃんと表示されるんですが…
スクリプトはwp_headよりも後に書きました。
<script type="text/javascript" async>
jQuery(function(){
jQuery(window).scroll(function(){
var now = jQuery(window).scrollTop();
if(now > 1500){
jQuery(’#page-top p’).fadeIn(’slow’);
}else{
jQuery(’#page-top p’).fadeOut(’slow’);
}
});
</script>
jQueryはwp_headよりも上で読み込みました。
<?php wp_deregister_script(’jquery’);
wp_enqueue_script(’jquery’, ’http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js’, array(), ’1.11.3’); ?>
ほとんど丸コピなので自分ではよく分かりません。
でも、jQueryをwp_headよりも下に置いてみたり、<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>をwp_headよりも下に書いてみたり、いろいろ試しましたが上手くいきません。
他にどんな原因があるんでしょうか。
よろしくお願いします。
みんなの回答 5 件
wp_footerの下に書いてみて
とりあえずデベロッパーツールなりF12ツールなり開いてみて
スクリプトエラーが出てないか確認してみれば?
コンテンツが1500もねぇんだろwうけるwww
括弧はちゃんと閉じましょう。
質問者です。
wp_footerよりも下に
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" async>
jQuery(function(){
jQuery(window).scroll(function(){
var now = jQuery(window).scrollTop();
if(now > 1500){
jQuery(’#page-top p’).fadeIn(’slow’);
}else{
jQuery(’#page-top p’).fadeOut(’slow’);
}
})
});
</script>
で表示されました。
最初に外部からjqueryを読み込むときにasyncを使うと表示されないみたいです。
なのでasyncを止めました。
wp_deregister_scriptは無くても問題ありません。
参考になれば幸いです。
関連するトピックス