【WordPress】Typed.js が読み込まれない

個人的な学習でWordPressを勉強しており、その中でタイピング風な動きを出してくれるTyped.jsを使用しようと考えました。
Typed.jsからファイルをダウンロードし、そちらを子テーマ内に保存しました。
そして呼び出しを行ったところ、下記のようなエラーとなりました。

Uncaught TypeError: $(...).typed is not a function
    at HTMLDocument.<anonymous> ((index):149)
    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)

Typed.jsが読み込まれていなく、typedメソッドが呼ばれていないのかな、と予想はしたのですが、
そのあとのアクションが立てられません。。。
問題の切り分けなど、ご教授いただけないでしょうか？

下記に、functions.phpと、JSのファイルを記載します。

php
1<?php
2add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
3function theme_enqueue_styles() {
4    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
5    wp_enqueue_script('typed',
6        get_stylesheet_directory_uri().'/assets/js/typed.js',
7        array('jquery'), false, false);
8    wp_enqueue_script('functions',
9        get_stylesheet_directory_uri().'/assets/js/functions.js',
10        array('typed'), false, false);
11}
12?>

js
1jQuery(document).ready(function($) {
2  $(".typed-element").typed({
3    strings: ["テスト１", "テスト２"],
4    typeSpeed: 0,
5    startDelay: 0,
6    backSpeed: 0,
7    shuffle: false,
8    backDelay: 500,
9    loop: false,
10    loopCount: null,
11    showCursor: true,
12    cursorChar: "|"
13  });
14});

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

回答1件

ベストアンサー

問題の切り分けなど、ご教授いただけないでしょうか？

とりあえずPHPでの出力が問題か、JavaScriptの記述場所や記述方法に問題があるかを特定します。

デバッグモードにする ⇒ http://mignonstyle.com/debug-mode/
エラーが出ていないか確認。（PHP/JavaScript双方）
script要素が出力されているか確認。（Ctrl+Uでソースを見る→デベロッパーツールでHTMLとして認識されているか確認）
（出ているなら）呼び出し順に問題が無いか確認
console.log( 'true' ); とかで「どこまで実行されているか」を調査

【JavascriptのChromeでのデバッグ方法個人的まとめ2016 - Qiita】
http://qiita.com/snoguchi/items/8f6bb62a3166eca23ac3#networknetworkで通信をチェック

【Chrome DevToolsを使いこなそう！ Web開発に必須なブラウザ開発ツールによるデバッグの基本 - エンジニアHub｜若手Webエンジニアのキャリアを考える！】
https://employment.en-japan.com/engineerhub/entry/2017/05/30/110000

投稿2018/02/25 05:30

kei344

総合スコア69407

naoki855

2018/02/26 14:58

ご回答いただき、ありがとうございます！確認したところ、[typed.js](https://github.com/mattboldt/typed.js/tree/v1.1.7)の現在のmasterではJQueryが動かないようなので、古いバージョンをダウンロードすることで動きました。ありがとうございました！

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