ワードプレスでjsが動きません。

前提・実現したいこと

発生している問題・エラーメッセージ

はじめまして。ワードプレス初心者です。
https://codepen.io/marlenesco/pen/NqOozj
こちらのものをワードプレスではない普通のホームページで使っています。
動いているものをそのままワードプレスでもコピペしてみたのですが動きません。
jQueryは<head>内でgoogleから読み込み、上記codepenのjsは</body>直前で読み込んでいるjsファイル内に書いています。
他に書いているjs(ヘッダ固定とかです)は動くので、これだけが動かない状態です。

該当のソースコード

javascript
1$(function() {
2        $('.material-card > .mc-btn-action').click(function () {
3            var card = $(this).parent('.material-card');
4            var icon = $(this).children('i');
5            icon.addClass('fa-spin-fast');
6
7            if (card.hasClass('mc-active')) {
8                card.removeClass('mc-active');
9
10                window.setTimeout(function() {
11                    icon
12                        .removeClass('fa-arrow-left')
13                        .removeClass('fa-spin-fast')
14                        .addClass('fa-bars');
15
16                }, 800);
17            } else {
18                card.addClass('mc-active');
19
20                window.setTimeout(function() {
21                    icon
22                        .removeClass('fa-bars')
23                        .removeClass('fa-spin-fast')
24                        .addClass('fa-arrow-left');
25
26                }, 800);
27            }
28        });
29    });

試したこと

調べてみたのですが、ワードプレスだと $ を jQuery に書き換えると出てきたので変えてみましたが、変えても動きませんでした。
（全部変えたり最初だけ変えたり色々試しましたがどれも動きませんでした）
何が原因なのかわからず、お手上げ状態です。

どなたかお知恵を拝借させてください。
よろしくお願いいたします。

m.ts10806

2018/06/20 03:57

質問編集画面タイトル横にある「初心者アイコン」をご活用ください。「初心者」と質問で書くよりも伝わりますし、質問一覧に表示されるのでわかりやすくなります。

m.ts10806

2018/06/20 04:01

ブラウザ開発ツールのコンソールに何かエラーが出力されていないかご確認ください。

mako_

2018/06/20 04:15

ありがとうございます。コンソールとはF12を押したときに下に出るものですか？そこは空白です。

m.ts10806

2018/06/20 04:18

下かどうかは知りませんが、Chromeでは「Console」というタブがあるのでそちらを表示させてください。「動かない」の確認のはじめは「そもそもそのスクリプトは呼ばれているのか」でjQueryを利用している場合は「そもそもjQuery読まれているのか」の確認から、です。clickイベント直後にconsole.log()でもalert()でもいいので何かしら入れてみることが1つ目ですね。

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

回答2件

WordPressに同梱されているjQueryは少し癖があり、$では動きません。
なので、WordPress用の書き方に変える必要があります。

しかし、いちいち書き方を変えるのは面倒なので、WordPress同梱のjQueryを読み込まず、自分でCDNのjQueryを読み込むという方法があります。

function.php内にて、

PHP
1function add_files(){
2  wp_deregister_script('jquery');  //同梱版jQueryを読み込まないようにする
3  wp_enqueue_script('jquery','https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js');  //自分で読み込み
4
5  /* ...その他読み込みファイルの記述... */
6}
7add_action('wp_enqueue_scripts', 'add_files',1);

のようにすることで、通常のサイトと同様のjQueryの使い方ができます。

投稿2018/06/20 04:43

ddryo

総合スコア8

ベストアンサー

ブラウザのコンソールにどのようにエラーが出ているか教えていただけますか？

投稿2018/06/20 03:49

kenny_sayama

総合スコア1036

kenny_sayama

2018/06/20 03:50

JSファイルをwordpress関数を使って読み込んでいないのではないかと思います。。

m.ts10806

2018/06/20 03:58

回答編集されては？今のままだと本来「質問への追記・修正依頼」に書くべき内容が回答になってしまっています。

kenny_sayama

2018/06/20 03:59

mts10806さんですね！失礼しました。ご指摘ありがとうございます。

mako_

2018/06/20 04:17

ありがとうございます。functions.phpに書いて読み込むと、 <script src=''>のようにシングルクォーテーションになるのが嫌なので、footer.phpに直接書いています。 header.phpのwp_headで出力されるものも同様にシングルクォーテーションが嫌なので、タイトルタグ以外すべて削除して直接書いております。これが原因なんでしょうか？

m.ts10806

2018/06/20 04:20

jQuery利用しているならjQuery本体のファイル読み込みが先にないと動きません。「嫌なので」という個人的理由で排除すべきものではないですよ。シングルでもダブルでも動作には関係はありません。

mako_

2018/06/20 04:39

そうですか...。 jQueryは質問に記載の通りhead内で読み込み、ほかのjQuery依存のスクリプトは動いています。 jsファイルではなく、直接投稿ページで書いてもダメなので、もう諦めます。ありがとうございました。

kenny_sayama

2018/06/20 04:40

mts10806さんが回答していただいたのに自分がベストアンサーでいいのでしょうか...

m.ts10806

2018/06/20 04:40

そう難しい問題でもないはずなので、まだ諦める段階ではないのですが・・。まあお好きにどうぞ。