Q&A
そもそもjQueryが読み込まれているのか分かりません。head全体をご提示いただけますか。
jQuery初心者です。
jQueryでsettimeoutを使って、時間差で.ttl-areaにanimeと言うクラスを付与したいのですが「Paused on exception ReferenceError: $ is not defined」というエラーが出て来てしまいjQueryが実行されません。
javascript
1<script> 2 setTimeout(function(){ 3 $(".ttl-area").addClass("anime"); 4 },2000); 5</script>
エラー内容
CMSはWordpress4.9.3を使用しています。テーマはオリジナルです。
アナリティクスとアドセンスのコードを少し読み込んでいるくらいで特殊なコードは書き込んでいないと思います。
解決しようと下記の方法を試してみたのですが、同じようなエラーが出て来ます。
・$をjqueryに書き換える
・jquery-2.2.3を使用しているのですが、他のバージョンに書き換える（CDN）
・フッターで実行するscriptを読み込む
・プラグインの停止（WP-PageNavi/Advanced Custom Fields）
・wordpressのダウングレード（4.9.2へ）
他になにか解決に繋がりそうな、対処策はありませんでしょうか。
jQueryに詳しい方、ご助言いただけると助かります。
お手数ですが、よろしくお願い致します。
----追記分-----
header.phpの内容です。
php
1<!DOCTYPE html> 2<html <?php language_attributes(); ?> class="no-js"> 3<head> 4 <meta charset="<?php bloginfo( 'charset' ); ?>"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <link rel="profile" href="http://gmpg.org/xfn/11"> 7 <?php if ( is_singular() && pings_open( get_queried_object() ) ) : ?> 8 <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>"> 9 <?php endif; ?> 10 11<!-- OGP --> 12<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#"> 13<title> 14 <?php 15 if ( is_front_page() && is_home() ) { 16 echo bloginfo('name') . bloginfo('description') ; 17 } else { 18 echo the_title(); 19 } 20 ?> 21</title> 22<meta property="og:title" content="<?php the_title(); ?>" /> 23<meta property="og:type" content="website" /> 24<meta property="og:url" content="<?php echo the_permalink(); ?>" /> 25<meta property="og:site_name" content="<?php bloginfo('name'); ?>" /> 26<meta property="og:description" content="<?php bloginfo('description'); ?>" /> 27 28<!-- Facebook用設定 --> 29<meta property="fb:app_id" content="164153340876523" /> 30 31<!-- ※ Twitter共通設定 --> 32<meta name="twitter:card" content="photo" /> 33 34<!-- OGP画像 --> 35<?php get_template_part('inc/og-image'); ?> 36 37<!-- jquery --> 38<script src="https://code.jquery.com/jquery-2.2.3.js"></script> 39 40<!-- css --> 41<link href="<?php bloginfo('template_url'); ?>/css/normalize.css" rel="stylesheet" type="text/css"> 42<link href="<?php bloginfo('template_url'); ?>/css/common.css" rel="stylesheet" type="text/css"> 43<?php if( is_front_page() && is_home() ) { ?> 44 <link href="<?php bloginfo('template_url'); ?>/css/index.css" rel="stylesheet" type="text/css"> 45<?php } else { ?> 46 47<?php } ?> 48 49<!-- WEBフォント --> 50<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 51 52<!-- 時間差でクラスを追加 --> 53<script> 54 setTimeout(function(){ 55 $(".ttl-area").addClass("anime"); 56 },2500); 57</script> 58 59<!-- アナリティクス --> 60<script 61</script> 62 63<!-- アドセンス --> 64<script> 65</script> 66 67</head> 68 69<body <?php body_class(); ?>> 70 <div class="ttl-area"> 71 <div class="ttl-inner"> 72 <h1> 73 <a href="<?php bloginfo('url'); ?>"> 74 <img src="<?php bloginfo('template_url'); ?>/img/logo-h1.png" alt="<?php bloginfo('description'); ?>"> 75 </a> 76 </h1> 77 <ul class="sns-btn"> 78 <li><a href="https://twitter.com/basser45186053?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false">Follow @basser45186053</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></li> 79 <li><div class="fb-like" data-href="https://www.facebook.com/basssoku/?ref=bookmarks" data-layout="button" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div></li> 80 <li></li> 81 </ul> 82 </div> 83</div>
申し訳ございません。拙いコードではあると思いますが、添削して頂けますと幸いです。よろしくお願い致します。
とんでもないです。記述を見るとちゃんと読み込まれているようですね。console.log(JSON.stringify($||jQuery)) 等で、どの時点までjQueryが存在しているか確認してみましょう。
<head>が二回出現したり、タグが閉じられてなかったりしているようです。開発者ツールでjQueryの読み込みのあたりを見てみるとどうなってますか？
ご回答ありがとうございます。OGP画像を取得する部分をインクルードしていたのですが、そこでphpの構文にエラーがあったようでjQueryが読み込めていなかったようで、その部分を修正すると綺麗に動きました。とても助かりました。ありがとうございました。
回答2件
0
ベストアンサー
自作テーマでしょうか、HTMLが変になっていますね。あと、wp_head() が無いので足しましょう。自分で指定しなくてもjQueryを呼んでくれます。
【関数リファレンス/wp head - WordPress Codex 日本語版】
https://wpdocs.osdn.jp/関数リファレンス/wp_head
【WordPress で jQuery を使う時の注意点 – EastCoder;】
https://eastcoder.com/2014/07/using-jquery-with-wordpress/
投稿2018/02/06 12:53
総合スコア69400
ご回答ありがとうございます。
<?php wp_head() ?>忘れておりました。。ありがとうございます。
OGP画像を取得する部分をインクルードしていたのですが、そこでphpの構文にエラーがあったようでjQueryが読み込めていなかったようで、その部分を修正すると綺麗に動きました。とても助かりました。ありがとうございました。
0
jQueryを使用する際は、
javascript
1$(function(){ 2... 3}); 4
などで囲まないとエラーになります。
以下で動きますでしょうか。
JavaScript
1$(function(){ 2 setTimeout(function(){ 3 $(".ttl-area").addClass("anime"); 4 },2500); 5});
投稿2018/02/06 12:41
総合スコア3404
あなたの回答
tips
プレビュー
