質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.13%

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 103

score 19

自分で作った静的サイトに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化する際のチェック事項などを指摘してくださると助かります。
よろしくお願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • CHERRY

    2021/04/04 18:41

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

    キャンセル

  • cheshire-cat

    2021/04/04 19:04 編集

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

    キャンセル

回答 2

check解決した方法

0

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が作動するため、料金以外のページでコンソールエラーが出ていました。

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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

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

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

(参考) 上記のURL より、

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2021/04/05 12:22

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

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

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

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.13%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る