Q&A
追記に対して：エラーは出ていませんか？デベロッパーツールで確認してみてください。https://eng-entrance.com/javascript-display-error
表題の通りです。
ワードプレスにて架空のニュースメディアを制作しています。
jQueryは最初は外部に記述していたのですが、どうしても動かないので内部に移動してきました。
内部に移動しても動かず、困っています。
良くある質問で恐縮ですが、ご教授いただけないでしょうか？
以下にソースコードを記載します。
どうぞよろしくお願いします。
##header.php##
php
1<!doctype html> 2<html lang="ja"><head> 3<meta charset="utf-8"> 4<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 5<meta content="" name="description"> 6<meta property="og:title" content="" /> 7<meta property="og:type" content="" /> 8<meta property="og:url" content="" /> 9<meta property="og:site_name" content="" /> 10<title><?php echo get_bloginfo(); ?></title> 11<link href="<?php echo get_stylesheet_uri(); ?>" rel="stylesheet"> 12 13中略 14 15<link rel="stylesheet" type="text/css" href="slick/slick.css"> 16<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/> 17<link href="https://fonts.googleapis.com/css2?family=Crimson+Text:ital@1&family=Krona+One&family=Montserrat:wght@400&display=swap" rel="stylesheet"> 18<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.1/css/all.css" integrity="sha384-xxzQGERXS00kBmZW/6qxqJPyxW3UR0BPsL4c8ILaIWXva5kFi7TxkIIaMiKtqV1Q" crossorigin="anonymous"> 19 20<script src="slick/slick.js"></script> 21 22中略 23</head> 24 25<body <?php body_class(); ?>> 26<header> 27中略 28</header> 29 30</body> 31<script type="text/javascript"> 32jQuery(document).ready(function($){ 33 34$('.slider').slick({ 35autoplay: true, 36autoplaySpeed: 8000, 37 cssEase: "ease-in-out" 38 39}); 40 41}); 42 43//ヘッダーインナー高さを100px下にスクロール後小さくするjQuery 44 jQuery(document).ready(function($){ 45 var $win = $(window), 46 $header = $('header'), 47 animationClass = 'header-animation'; 48 49 $win.on('load scroll', function() { 50 var value = $(this).scrollTop(); 51 if ( value > 100 ) { 52 $header.addClass(animationClass); 53 } else { 54 $header.removeClass(animationClass); 55 } 56 }); 57}); 58 59//フッターのsearch-fixedを300pxスクロールした後表示させるjQuery 60 jQuery(window).scroll(function($){ 61 var scroll = $(window).scrollTop(); 62 if (scroll > 300){ 63 $('.search-fixed').addClass('scrollin'); 64 }else{ 65 $('.search-fixed').removeClass('scrollin'); 66 } 67 }); 68 </script> 69</html>
7月23日15:40編集機能にて追加記載しました。
php
1<!doctype html> 2<html lang="ja"><head> 3<meta charset="utf-8"> 4<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 5<meta content="" name="description"> 6<meta property="og:title" content="" /> 7<meta property="og:type" content="" /> 8<meta property="og:url" content="" /> 9<meta property="og:site_name" content="" /> 10<title><?php echo get_bloginfo(); ?></title> 11<link href="<?php echo get_stylesheet_uri(); ?>" rel="stylesheet"> 12 13 14<link rel="stylesheet" type="text/css" href="slick/slick.css"> 15<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/> 16<link href="https://fonts.googleapis.com/css2?family=Crimson+Text:ital@1&family=Krona+One&family=Montserrat:wght@400&display=swap" rel="stylesheet"> 17<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.1/css/all.css" integrity="sha384-xxzQGERXS00kBmZW/6qxqJPyxW3UR0BPsL4c8ILaIWXva5kFi7TxkIIaMiKtqV1Q" crossorigin="anonymous"> 18<script src="common/js/jquery.js"></script> 19<!--CDNのjQuery ver.3を下記に記載--> 20<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>--> 21<!--</head>直前に?php wp_head(); ?を記載しているのでSWordpressの場合はいらない--> 22 23<!--<script type="text/livescript" src="common/js/buzzdiva.js"></script>--> 24 25<!--slick読み込み--> 26<script src="slick/slick.js"></script> 27 <!--Font Awesome CDN--> 28<script src="https://use.fontawesome.com/fc99c6d9b6.js"></script> 29 <?php wp_head(); ?> 30</head> 31 32<body <?php body_class(); ?>> 33 34<header> 35<ul> 36 <li> 37 <ul class="h1_style"> 38 <li>Pick up the female singer that is now attracting attention</li> 39 <li><h1><a href="<?php echo home_url(); ?>"><img src="<?php echo get_template_directory_uri(); ?>/common/images/logo.svg" alt="BUZZ_DIVA" width="462" height="50"></a></h1></li> 40 </ul> 41 </li> 42 <li><form action="buzz_diva.php" autocomplete="on" method="post" class="pc tablet"> 43 <input id="search-input" placeholder="SEARCH" type="text" name="search-key"><input id="search-button" type="submit"> 44 </form></li> 45 <li><ul class="sns_ul pc tablet"> 46 <li class="sns_li"><a href="#" class="fb"><i class="fa fa-facebook fa-big"></i 47></a></li> 48 <li class="sns_li"><a href="#" class="tw"><i class="fa fa-twitter fa-big"></i></a> 49</li> 50 <li class="sns_li"><a href="#" class="rs"><i class="fas fa-rss"></i></a></li> 51 </ul></li> 52 53</ul> 54</header> 55 56</body> 57 <script type="text/javascript"> 58jQuery(document).ready(function($){ 59 60$('.slider').slick({ 61autoplay: true, 62autoplaySpeed: 8000, 63 cssEase: "ease-in-out" 64 65}); 66 67}); 68 69//ヘッダーインナー高さを100px下にスクロール後小さくするjQuery 70 jQuery(document).ready(function($){ 71 var $win = $(window), 72 $header = $('header'), 73 animationClass = 'header-animation'; 74 75 $win.on('load scroll', function() { 76 var value = $(this).scrollTop(); 77 if ( value > 100 ) { 78 $header.addClass(animationClass); 79 } else { 80 $header.removeClass(animationClass); 81 } 82 }); 83}); 84 85//フッターのsearch-fixedを300pxスクロールした後表示させるjQuery 86 jQuery(window).scroll(function($){ 87 var scroll = $(window).scrollTop(); 88 if (scroll > 300){ 89 $('.search-fixed').addClass('scrollin'); 90 }else{ 91 $('.search-fixed').removeClass('scrollin'); 92 } 93 }); 94 </script> 95</html> 96
以下index.phpの記載内容です。
php
1<?php get_header(); //header.phpを取得 ?> 2<main id="contents"> 3<div id="mainService"> 4<?php if (have_posts()) ://ループ開始 ?> 5 <?php while (have_posts()) : the_post();//繰り返し処理を開始 ?> 6 <h1><?php the_title(); //記事タイトルを表示 ?></h1> 7 <?php the_content(); //投稿本文を表示 ?> 8 <?php endwhile;//繰り返し処理の終了 ?> 9 <?php else://記事が見つからない場合の処理 ?> 10 <p>ページが見つかりませんでした。</p> 11<?php endif;//ループ終了 ?> 12</div> 13</main> 14<?php get_footer(); //footer.phpを取得 ?> 15
header.php
php
1<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
front-page.php
php
1<div id="wrapper"> 2 <div id="left-main"> 3 <div class="slider"> 4 <div class="slide"><a href="#"><img src="<?php echo get_template_directory_uri(); ?>/common/images/main01.jpg" alt="" width="798" height="373" class="slider__img"></a> 5 </div> 6 <div class="slide"><a href="#"><img src="<?php echo get_template_directory_uri(); ?>/common/images/main02.jpg" alt="" width="798" height="373" class="slider__img"></a> 7 </div> 8 <div class="slide"><a href="#"><img src="<?php echo get_template_directory_uri(); ?>/common/images/main03.jpg" alt="" width="798" height="373" class="slider__img"></a> 9 </div>
回答4件
0
<script src="common/js/jquery.js"></script>の読み込みに失敗しました。 <script src="slick/slick.js"></script>の読み込みに失敗しました。黄色！マークアラート↓
common ディレクトリは、どこにあるのでしょうか？
テーマディレクトリの中で有れば、
<script src="<?php echo get_template_directory_uri(); ?>/common/js/jquery.js"></script>
のように指定する必要があります。
投稿2020/07/29 03:24
総合スコア25218
0
ベストアンサー
wp_head()を書いていないとか。
【＜?php wp_head(); ?＞の役割 - Qiita】
https://qiita.com/sky-net/items/fef5de84b9626a69fa6a
【wp_head();とwp_footer();とはいったい何なのか | めしくいドットコム】
https://meshikui.com/2018/08/10/586/
投稿2020/07/23 00:56
総合スコア69606
ありがとうございます。コンソール見てみました。
黄色！マークアラート↓
<script src="common/js/jquery.js"></script>の読み込みに失敗しました。
<script src="slick/slick.js"></script>の読み込みに失敗しました。
さらに赤い！マークアラート↓
Uncaught ReferenceError: jQuery is not definedは下記二行です。
jQuery(document).ready(function($){
add_action( 'wp_enqueue_scripts', function() {
どこかで定義されていない変数を参照しています。
とのことですが、この場合はまずjQueryが読み込まれてないので($)という変数は使えないよ。
というふうに私的には読み取りましたが、解決策が見つかりません。
どうぞよろしくお願いします。
ソース（＆サイト）を見ました。
CSSの部分にパスが指定されていないので読み込まれていませんが、一応動いています。CHERRYさんの回答をスタイルシートにも適用させましょう。
「フッターのsearch-fixedを300pxスクロールした後表示させるjQuery」の部分が間違っているので削除しましょう。エラーはそこで起こっています。
また、「add_action( 'wp_enqueue_scripts',」がHTMLのscript要素の中に書かれていますが、これはPHPなのでfunctions.phpに書くものです。そこもJavaScriptのエラーが発生しています。
回答ありがとうございます。
ご指摘の通り、「フッターのsearch-fixedを300pxスクロールした後表示させるjQuery」をコメントアウトしたところ、動くようになりました。
functions.phpに関しては、エラーが出るので作成するのを今回は諦めました。次回以降の課題にします。
slickの方は、画像パスがまだ間違っているようで、表示されません。
絶対パスで記載すると良いという記事をみたのでやってみたのですが、表示されませんでした。
＞CHERRYさんの回答をスタイルシートにも適用させましょう。
とは、どういう意味でしょうか？言葉通りに受け取ると
スタイルシートに<script src="<?php echo get_template_directory_uri(); ?>/common/js/jquery.js"></script>を記述せよというふうに聞こえます。
どうぞよろしくお願いします。
0
やっと解決しました。
画像パスが間違っているのだろうとずっと思っていたのですが、
slickのパスの指定及び($)などの削除ミスでした。
ご指導いただいた皆様ありがとうございます。
投稿2020/09/19 00:48
総合スコア29
0
jquery.js がないからでは？ アップされたコードには見当たりません。
投稿2020/07/22 23:46
退会済みユーザー
総合スコア0
回答ありがとうございます。
中略を入れることによって記載ミスがあるかと思い、編集機能を使用して再度コードを記載してみました。
お手隙の時にみていただけると助かります。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/07/29 04:24