wordpress 作成したテーマでjQueryを動かしたい

wordpressで作成したテーマでjQueryを動かしたいです。
構文または記述不足かと思うのですが、正しい記述をネットで調べてもわからず、ご教授頂ければと思います。

１．jQueryファイル：\themes\site\js\fadein.js

js
1jQuery(function(){
2      // 一旦hide()で隠してフェードインさせる
3      $("#anime-fadein").hide().fadeIn('6000');
4      });
5

２．呼び出す側：～themes\site\header.php

php
1<div id="anime-fadein">
2    <a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>
3</div>

３．function.php：～themes\site\functions.php

php
1function load_scripts(){ 
2  wp_enqueue_script(
3    'fadeinfunction', // ハンドル名
4    get_template_directory_uri() . '/js/fadein.js', // ソース
5    array( 'jquery' ), // 先に読み込まれているべきScript（ハンドル名）  
6    false // Bodyタグの最後でロードしますか？
7  );
8}
9add_action( 'wp_enqueue_scripts', 'load_scripts' );

また、実行後、htmlソースでは以下の<head>タグ内にfadein.jsを読み込む記述がありました。

html
1<script type='text/javascript' src='http://test.local/wp-content/themes/site/js/fadein.js?ver=5.1.1'></script>

行動規範の内容に同意します

回答2件

WordPressで読み込まれるjQueryは$を定義しないので動かないのだと思います。
jQuery()を省略せずにそのまま使うか、下記のようにする必要があります。

js
1(function ($) {
2  $(function(){
3    // 一旦hide()で隠してフェードインさせる
4    $("#anime-fadein").hide().fadeIn('6000');
5  })
6})(jQuery);

投稿2019/04/01 04:17

yhg

総合スコア2161

再現をしましたが、私のほうでは普通に動作しました。
開発者モード（F12）を押して、タブに「console」があるので、そこにエラーが出てないでしょうか。
そのエラーを見て、何が問題かを調べてみてください。

もしかしたら、jqueryが正しく読み込まれていないorファイルの読み込む順番を間違えている可能性があります。

今思ったんですが、jqueryは読み込まれてます？（WPってデフォルトで読み込まれましたっけ？）

以下追記
WPの場合、他のjsと競合を起こさないように「$」は未定義なっているようです。(初めて知った)
なので、外部からjQueryを読み込むことで、動作するようになったのではないでしょうか。
「WordPressでjQueryのコードが動かない」場合の対処方法

なので、「$」を改めて定義をして上げる必要があります。

jQuery
1jQuery(function($){
2      // 一旦hide()で隠してフェードインさせる
3      $("#anime-fadein").hide().fadeIn('6000');
4});

上記で動くようであれば、新しく追加したjQueryは、WPのjQueryと競合する恐れがあるので、削除したほうが良いでしょう。

投稿2019/04/01 01:36

編集2019/04/01 04:28

Bernadotte

総合スコア310

developer-2018

2019/04/01 04:17

ご確認をいただきありがとうございます！以下のエラーが出ていました。 fadein.js?ver=5.1.1:3 ``` Uncaught TypeError: $ is not a function　 at HTMLDocument.<anonymous> (fadein.js?ver=5.1.1:3) at i (jquery.js?ver=1.12.4:2) at Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4:2) at Function.ready (jquery.js?ver=1.12.4:2) at HTMLDocument.K (jquery.js?ver=1.12.4:2) ``` jqueryはWordPressが持ってる標準のjQueryが読み込まれるとのことだったのですが、 headタグ内に、jqueryを呼び出す以下の記述を追加したところ、正しく動作しました。 ``` <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> ``` jqueryのバージョンが違っていたのでしょうか？