静的サイトにJavaScriptライブラリを入れたが、WordPress化するとJavaScriptが動かない

Question

自分で作った静的サイトにScrollHintというJavaScriptのライブラリを入れ、画面が小さい時はスクロールヒントが出るようにしたいと考えました。
https://appleple.github.io/scroll-hint/

ScrollHintを使うためにはscroll-hint.cssとscroll-hint.jsの2つのファイルが必須となります。
それ以外に私がコードを書いたファイル（myscript.js）も必要です。
myscript.jsにはScrollHintの設定のコードの他にjQueryのコードも書いています。

こうして作った静的サイトですが、ScrollHintはきちんと動いてくれました。

そこで次にこの静的サイトをWordPress化したのですが、WordPress化するとScrollHintが動きません。
一方、jQueryのほうはきちんと動いてくれます。

ScrollHintとjQueryはwp_enqueue_style関数とwp_enqueue_script関数を使って、functions.phpから読み込ませています。
コードは以下の通りです。

<?php 

function mytheme_enqueue() {   
    
    // 「料金」のページのみscroll-hint.cssを読み込む
    if(is_page('price')) {
        wp_enqueue_style(
             'scroll-hint-style',
             get_stylesheet_directory_uri().'/css/scroll-hint.css',
        );
    }

    // jQueryを読み込む
    wp_enqueue_script(
        'jquery-script',
        get_template_directory_uri().'/js/jquery-3.5.1.min.js'
    );

    // 「料金」のページのみscroll-hint.jsを読み込む
    if(is_page('price')) {
        wp_enqueue_script(
            'scroll-hint-script',
            get_template_directory_uri().'/js/scroll-hint.js',
        );
    }

    // myscript.jsを読み込む
    wp_enqueue_script(
        'myscript',
        get_template_directory_uri().'/js/myscript.js',
    );

}
add_action('wp_enqueue_scripts', 'mytheme_enqueue');

なぜScrollHintだけが動かないのか原因を調べたのですが、よく分かりませんでした。

たとえばScrollHintのファイルがきちんと読み込めていないのではないか？　と思い、ブラウザのディベロッパーツールからscroll-hint.css、scroll-hint.js、myscript.jsの3つのファイルを検索したところ、きちんと発見できました。

またディベロッパーツールのコンソールにエラーが出ていないことから、phpのコードが間違っているわけではないようです。

WordPress化したことから余計な<p>タグや<br>タグが入ったのかとも思いましたが、そのようなタグも入っていません。

いろいろ悩んで調べたところ、静的ファイル時には付いていたクラス名などが、WordPress化の時には付いていないことに気づきました。

どういうことかというと、ScrollHintを使いたいときは、JavaScriptファイルで（私の場合はmyscript.jsで）セレクターを指定して設定をおこなうのですが、設定をおこなうとScrollHintライブラリが自動的に独自のクラス名などを付けてくれます。

私の場合だと、myscript.jsに

new ScrollHint('.price-table', {
    applyToParents: true,
    i18n: {
      scrollable: 'スクロールできます'
    }
});

というコードを書いたのですが、そうするとディベロッパーツールで見たときに、静的サイトではprice-tableの親要素にscroll-hintやis-scrollableといったクラス名が付いたり、あるいはstyle="position:relative" overflow:auto;というスタイルが付きました。

ところがWordPress化したサイトをディベロッパーツールで確認したところ、これらのクラス名やスタイルは設定されていないことに気づきました。。

なぜWordPress化するとこれらのクラス名やスタイルが設定されないのかがわかりません。

先ほども書いたとおり、scroll-hint.css、scroll-hint.js、myscript.jsの3つのファイルはきちんと読み込まれているはずです。それなのになぜクラス名やスタイルが付かないのか？　その理由がわかりません。

なんとかこれらのクラス名やスタイルがきちんと設定されるようにしたいのですが、どのようにすればよいでしょうか？

ScrollHintは大勢に使われているライブラリのようですし、ScrollHint自体にバグがあるとは思えません。
とすると私のおこなったWordPress化の過程に問題があるのでしょうが、どこが悪かったのか分かりません。

問題のありそうな点やWordPress化する際のチェック事項などを指摘してくださると助かります。
よろしくお願いします。

Comments

[CHERRY]

WordPress 化したサイトの方で、JavaScript のエラーが出ていないでしょうか？

[cheshire-cat]

確かにJavaScriptのエラーは気にしていませんでした。
けれど指摘を受けWordPress化したサイトで確認しましたが、コンソールを見てもPHPもJavaScriptもエラーはありませんでした。

Answer 1

myscript.jsの読み込みが原因でScrollHintが作動しないことが分かりました。

現在のmyscript.jsの読み込ませ方だと、myscript.jsはwp_head()から出力されることになるのですが、これだとScrollHintは動かないようです。

これをwp_footerから出力させることでScrollHintは動いてくれました。myscript.jsの読み込ませ方を次のように修正しました。

    // myscript.jsを読み込む
    wp_enqueue_script(
        'myscript',
        get_template_directory_uri().'/js/myscript.js',
        array(),
        NULL,
        true
    );

myscript.jsの出力先をtrueとすることでwp_footerからの出力となります。

それともう1点。
ScrollHintのJavaScript書き方にも少し手をくわえ、次のように書きました。

if(document.URL.match(/price/)) {
    new ScrollHint('.price-table-plan', {
        applyToParents: true,
        i18n: {
            scrollable: 'スクロールできます'
        }
    });
}

以前に書いたコードでは、料金（price）以外のページでもScrollHintが作動するため、料金以外のページでコンソールエラーが出ていました。

今回のコードによりコンソールエラーが発生しないようになりました。

Answer 2

wp_enqueue_script の第3パラメータで、読み込み順を指定しますが、指定されていませんね。指定していない場合、読み込まれる順番は不明です。

そのため、scroll-hint.js より、scroll-hint.js を使用している myscript.js が、先に読み込まれていたりしないでしょうか？

myscript.js のwp_enqueue_scriptの第3パラメータで、scroll-hint.js に依存すると指定したらどのようになりますか？

(参考) 上記のURL より、

$deps

（配列） （オプション） このスクリプトが依存するスクリプトのハンドルの配列、つまり、このスクリプトより前に読み込まれる必要があるスクリプト。

Comments

[cheshire-cat]

ご指摘ありがとうございます。
ディベロッパーツールで確認していますが、JavaScriptは上から順にscroll-hint.js 、myscript.jsの順に読み込まれています。

順位の指定というのは書き方や意味が分からなかったので、いままで記述を避けてきたのですが、試しに

wp_enqueue_script(
'myscript',
get_template_directory_uri().'/js/myscript.js',
array('scroll-hint-script'),
);

と書いてみましたが（この書き方で合ってますか？　間違っていたら指摘していただけると助かります）、それでもScrollHintは動きませんでした（順位も変わらないし、クラス名なども付きませんでした）。