他にもたくさんの同じような内容での質問もあり、webサイト上にも解決策を掲載しているページはあったのでいろいろ試してみたのですがそれでも上手くいかないので教えてください。
WPオリジナルテーマを作成しているなかでjQueryが動作しません。
jQueryは下記内容で記載しています。
jQuery
1jQuery(function($) { 2 var $nav = $('.hamburger'); 3 var $btn = $('.hambueger__btn'); 4 var $mask = $('#mask'); 5 var open = 'open'; // class 6 // menu open close 7 $btn.on( 'click', function() { 8 if ( ! $nav.hasClass( open ) ) { 9 $nav.addClass( open ); 10 } else { 11 $nav.removeClass( open ); 12 } 13 }); 14 // mask close 15 $mask.on('click', function() { 16 $nav.removeClass( open ); 17 }); 18 ////////ここまでハンバーガーメニュー 19 20 $('.faq-list__item').click(function(){ 21 var $answer = $(this).find('.faq-list__answer'); 22 if ($answer.hasClass('open')){ 23 $answer.removeClass('open'); 24 $answer.slideUp(); 25 $(this).find('span').text('+') 26 }else{ 27 $answer .addClass('open'); 28 $answer.slideDown(); 29 $(this).find('span').text('−') 30 } 31 }); 32 });
WordPressにはjQueryが含まれているということでheader.php にはjQueryを読み込む記載を削除し下記内容にしています。
HTML
1<!DOCTYPE html> 2<html <?php language_attributes(); ?>> 3<head> 4 <meta charset="<?php bloginfo( 'charset' ) ?>"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta name=”description” content=”日本人へのTOEFL指導歴豊かな講師陣のコーチング型TOEFLスクール”> 7 <link rel="stylesheet" href="<?php echo get_template_directory_uri();//使用中テーマディレクトリのURLを出力 ?>/css/normalize.css"> 8 <link rel="stylesheet" href="<?php echo get_stylesheet_uri();//使用中テーマのスタイルシートURLを出力 ?>"> 9 <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); //ピングバックURLを出力 ?>"> 10 <script src="https://kit.fontawesome.com/c143f5855b.js" crossorigin="anonymous"></script> 11 <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> --> 12 <?php wp_head();?> 13</head>
footer.phpにjsファイルを読み込む記載をしています。
HTML
1<footer> 2 <article class="footer__wrapper"> 3 <section class="footer__content"> 4 <div class="footer__left"> 5 <nav class="footer__nav"> 6 <ul class="footer__menu"> 7 <li class="footer_menu__title"><a class="footer_menu__link" href="<?php echo esc_url(home_url('/')); ?>">ホーム</a></li> 8 <li class="footer_menu__title"><a class="footer_menu__link" href="<?php echo esc_url(home_url('/info/')); ?>">お知らせ</a></li> 9 <li class="footer_menu__title"><a class="footer_menu__link" href="<?php echo esc_url(home_url('/blog/')); ?>">ブログ</a></li> 10 <li class="footer_menu__title"><a class="footer_menu__link" href="<?php echo esc_url(home_url('/fee_structure/')); ?>">コース・料金</a></li> 11 </ul> 12 </nav> 13 </div> 14 <div class="footer__right"> 15 <div class="footer__logo_area"> 16 <img src="<?php echo get_template_directory_uri(); ?>/images/logo.jpg" alt="Engress フッターロゴ"> 17 </div> 18 <div class="footer__phone"> 19 <img class="phone_footer" src="<?php echo get_template_directory_uri(); ?>/images/phone_footer.png" alt="フッター 電話 アイコン"> 20 <p class="footer__phone_num">0123-456-7890</p> 21 </div> 22 <p class="footer__time">平日08:00〜20:00</p> 23 </div> 24 </section> 25 </article> 26 <section class="footer__sig"> 27 <p class="footer__sig__txt">© 2020 Engress.</p> 28 </section> 29 </footer> 30 <script type="text/javascript" src="./js/script.js"></script> 31</body> 32</html>
Wordpressで用意されているjQueryを使わずに、自分で指定したバージョンのjQueryを使う方法として、
HTML
1<!DOCTYPE html> 2<html <?php language_attributes(); ?>> 3<head> 4 <meta charset="<?php bloginfo( 'charset' ) ?>"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta name=”description” content=”日本人へのTOEFL指導歴豊かな講師陣のコーチング型TOEFLスクール”> 7 <link rel="stylesheet" href="<?php echo get_template_directory_uri();//使用中テーマディレクトリのURLを出力 ?>/css/normalize.css"> 8 <link rel="stylesheet" href="<?php echo get_stylesheet_uri();//使用中テーマのスタイルシートURLを出力 ?>"> 9 <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); //ピングバックURLを出力 ?>"> 10 <script src="https://kit.fontawesome.com/c143f5855b.js" crossorigin="anonymous"></script> 11 <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> --> 12 <?php 13wp_deregister_script('jquery'); 14wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js', array(), '2.2.0'); 15?> 16 <?php wp_head();?> 17</head>
も試してみたのですがこれも上手くいきませんでした。
解決策を教えてください。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/11/08 09:25