質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

1705閲覧

Wordpress上でjQueryが動作しない。

tkm0604

総合スコア555

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2020/11/08 06:43

他にもたくさんの同じような内容での質問もあり、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>

jsファイルは下記画像の配置しています。
イメージ説明

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>

も試してみたのですがこれも上手くいきませんでした。

解決策を教えてください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

パスの問題では。
<?php echo get_template_directory_uri(); ?>/js/script.js

投稿2020/11/08 08:36

kei344

総合スコア69606

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tkm0604

2020/11/08 09:25

まさしく、パスの問題でした。 いろいろ考えすぎてました。無事にjQuery動作しました。 ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問