静的サイトのワードプレス化で一部ページだけでJQが動かない
解決したいこと
静的ページをwordpress化するにあたり、Jqueryが動かなくなってしまい困っています。
基本的なつくりは、トップページと各固定ページに共通のJQを
footer.phpに記載し、各ページ固有のJQは各ページのget_footer()の下に
記載しています。
今回おかしいのは、トップページのヘッダーとその中のハンバーガーメニューです。
ヘッダーは、当初隠してあり、500pxスクロールすると表示されるように
JQでかいています。（これはトップページの固有機能なので、トップページの
index.phpに記載）
ハンバーガーメニューはクリックすると左からメニューがスライドインしますが、
これは各頁共通なのでfooter.phpに記載しています。
この状態で、テストサーバーで動かすと、トップページでヘッダーが最初から出たままで
かつ、ハンバーガーメニューも反応しません。
しかし、他のページはハンバーガーメニューはきちんと展開します。
基本的にJQの記載は静的ページの時からいじっていないこと、
トップページのみおかしいことから、原因はトップページにあると思っております。
どのあたりを点検すればいいか、アドバイスをいただけると幸いです。
該当するソースコード
【header.php】（前頁共通）
<!doctype html>
<html lang="en">
<head>
中略
<!--jq-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!--cursor-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<?php wp_head(); ?>
</head>
<body>
中略
<!--Hamburger-menu-->
<div class="header" id="g-nav">
<div class="header-spacer"></div>
<a href="<?php echo get_home_url(); ?>/index" class="header-name">hoge</a>
<label class="menu-trigger deactive" id="sp-btn">
<span></span>
<span></span>
<span></span>
</label>
</div>
<!--slide-menu-->
<section>
<div class="menu-screen slide-out" id="slide-menu">
<div class="sec-wrap sp-menu-bgc">
<h2 class="m-title">menu</h2>
<ul class="menu">
<li><a href="<?php echo get_home_url(); ?>/index">home</a></li>
中略
</ul>
</div>
</div>
</section>
【index.php】（トップページ）
<?php get_header(); ?>
<!--top page -->
<section>
中略、コンテンツ
</section>
<?php get_footer(); ?>
中略（いくつかJQのスクリプト）
<!--hamburgur-menu-->
<script>
$(function() {
var hNav = $('#g-nav');
hNav.hide();
$("#slide-menu").hide();
//scroll 500 px & appear
$(window).scroll(function () {
if ($(this).scrollTop() > 500) {
hNav.fadeIn();
$("#slide-menu").fadeIn();
} else {
hNav.fadeOut();
$("#slide-menu").fadeOut();
}
});
});
</script>
【footer.php】（各頁共通）
<!--footer-->
<div class="footer">
<div class="header-footer-wrap">
中略（コンテンツ）
</div>
</div>
<!--js/jq-->
<!--sp-menu-slidein-->
<script>
$("#sp-btn").on("click",function(){
if ($("#slide-menu").hasClass("slide-in")) {
$("#slide-menu").addClass('slide-out');
$("#slide-menu").removeClass('slide-in');
$("#sp-btn").addClass('deactive');
$("#sp-btn").removeClass('active');
} else
if (!$("#slide-menu").hasClass("slide-in")) {
$("#slide-menu").addClass('slide-in');
$("#slide-menu").removeClass('slide-out');
$("#sp-btn").addClass('active');
$("#sp-btn").removeClass('deactive');
}
})
</script>
中略（いくつかJQのスクリプト）
<?php wp_footer(); ?>
</body>
</html>
自分で試したこと
特にエラーは出ません。
ヘッダーが隠れておらず、ハンバーガーボタンもクリックしても反応なしです。
「＄」を「Jquery」に変更はやってみましたが効果ありませんでした。
よろしくお願いします。
0 likes
