質問: 自分で作った静的サイトに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から読み込ませています。 コードは以下の通りです。 ``` タグやタグが入ったのかとも思いましたが、そのようなタグも入っていません。 いろいろ悩んで調べたところ、静的ファイル時には付いていたクラス名などが、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化する際のチェック事項などを指摘してくださると助かります。 よろしくお願いします。
回答: 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が作動するため、料金以外のページでコンソールエラーが出ていました。 今回のコードによりコンソールエラーが発生しないようになりました。