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

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

新規登録して質問してみよう
ただいま回答率
85.50%
jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

WordPress

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

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

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

Q&A

解決済

4回答

2543閲覧

wordpressでjQueryが動かない

ema-material

総合スコア29

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

WordPress

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

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

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

0グッド

0クリップ

投稿2020/07/22 23:22

編集2020/07/31 00:26

表題の通りです。
ワードプレスにて架空のニュースメディアを制作しています。
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>

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

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

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

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

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

guest

回答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

CHERRY

総合スコア25171

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

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

ema-material

2020/07/29 04:24

ありがとうございます。 <!doctype html> <html lang="ja"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <meta content="FictitiousNewsMedia,BUZZ_DIVA.info,Womanmusician and Womanvocalist Newsmedia" name="description"> <meta property="og:title" content="BUZZ_DIVA.info" /> <meta property="og:type" content="newsmedia music" /> <meta property="og:url" content="https://lovebuzz.tokyo/buzz_diva/" /> <meta property="og:site_name" content="BUZZ_DIVA.info" /> <title><?php echo get_bloginfo(); ?></title> <link href="<?php echo get_stylesheet_uri(); ?>" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="slick/slick.css"> <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/> <link href="https://fonts.googleapis.com/css2?family=Crimson+Text:ital@1&family=Krona+One&family=Montserrat:wght@400&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.1/css/all.css" integrity="sha384-xxzQGERXS00kBmZW/6qxqJPyxW3UR0BPsL4c8ILaIWXva5kFi7TxkIIaMiKtqV1Q" crossorigin="anonymous"> <script src="<?php echo get_template_directory_uri(); ?>/common/js/jquery.js"></script> <!--CDNのjQuery ver.3を下記に記載--> <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>--> <!--</head>直前に?php wp_head(); ?を記載しているのでSWordpressの場合はいらない--> <!--<script type="text/livescript" src="common/js/buzzdiva.js"></script>--> <!--slick読み込み--> <script src="<?php echo get_template_directory_uri(); ?>/slick/slick.js"></script> <!--<script src="slick/slick.js"></script>--> <!--Font Awesome CDN--> <script src="https://use.fontawesome.com/fc99c6d9b6.js"></script> <?php wp_head(); ?> </head> のように記載しました。 わかりやすいところで言うと、slick.cssとslickのThema.cssが読み込まれていないような挙動になりました。これは<?php echo get_stylesheet_uri(); ?>に類似する記載が必要でしょうか? またコンソールでのエラーがかなり増えてしまい、ここに全部記載するのは難しいのですが、 一番上のエラ〜メッセージで こかで定義されていない変数を参照しています。この変数は、定義されている必要があります。または、現在のスクリプトか scope で利用可能か確認する必要があります。 ノート: (jQuery のような)ライブラリをロードしているときは、"$" のようなライブラリ変数にアクセスする前に、ロードされていることを確認する必要があります。コード内で使用する前に、ライブラリをロードする <script> タグを置いてください。 のような記載が出ました。 ひきつづき教えていただけますと助かります。
guest

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

kei344

総合スコア69366

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

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

ema-material

2020/07/28 07:37

ありがとうございます。コンソール見てみました。 黄色!マークアラート↓ <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が読み込まれてないので($)という変数は使えないよ。 というふうに私的には読み取りましたが、解決策が見つかりません。 どうぞよろしくお願いします。
kei344

2020/08/05 08:16

ソース(&サイト)を見ました。 CSSの部分にパスが指定されていないので読み込まれていませんが、一応動いています。CHERRYさんの回答をスタイルシートにも適用させましょう。 「フッターのsearch-fixedを300pxスクロールした後表示させるjQuery」の部分が間違っているので削除しましょう。エラーはそこで起こっています。 また、「add_action( 'wp_enqueue_scripts',」がHTMLのscript要素の中に書かれていますが、これはPHPなのでfunctions.phpに書くものです。そこもJavaScriptのエラーが発生しています。
ema-material

2020/08/13 12:40

回答ありがとうございます。 ご指摘の通り、「フッターのsearch-fixedを300pxスクロールした後表示させるjQuery」をコメントアウトしたところ、動くようになりました。 functions.phpに関しては、エラーが出るので作成するのを今回は諦めました。次回以降の課題にします。 slickの方は、画像パスがまだ間違っているようで、表示されません。 絶対パスで記載すると良いという記事をみたのでやってみたのですが、表示されませんでした。 >CHERRYさんの回答をスタイルシートにも適用させましょう。 とは、どういう意味でしょうか?言葉通りに受け取ると スタイルシートに<script src="<?php echo get_template_directory_uri(); ?>/common/js/jquery.js"></script>を記述せよというふうに聞こえます。 どうぞよろしくお願いします。
guest

0

やっと解決しました。
画像パスが間違っているのだろうとずっと思っていたのですが、
slickのパスの指定及び($)などの削除ミスでした。
ご指導いただいた皆様ありがとうございます。

投稿2020/09/19 00:48

ema-material

総合スコア29

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

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

0

jquery.js がないからでは? アップされたコードには見当たりません。

投稿2020/07/22 23:46

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

ema-material

2020/07/28 07:39

回答ありがとうございます。 中略を入れることによって記載ミスがあるかと思い、編集機能を使用して再度コードを記載してみました。 お手隙の時にみていただけると助かります。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問