当レインボウ情報館のサイトで異常な現象があり、原因究明に手間取りました。最終的にWordPress 環境の正しい jQuery ライブラリ読み込みで解決しましたが、現象が不可解で悩みました。
コンテンツ どんな現象か ページトップに戻るボタンが原因か jQuery のコンフリクト？ WordPress の正しい jQuery 読み込みで解決
WordPress の jQuery は正しく読み込んでおくべき
テーマによっては WordPress の jQueryライブラリを読み込んでいますが、通常は読み込んでいません。正しく読み込む必要があります。読み込んでいなかったために、以下のような不可解な現象が発生しました。
どんな現象か
このページでもやっているように、目次やコンテンツで、クリックすると目的の場所に飛ぶようにアンカーリンクを貼りますようね。つまり、
<a href=”#a01″>おすすめのお宿</a>
・・・・・・・・・・・・・・・・
<h3 id=”a01″>おすすめのお宿</h3>
のようにしてクリックすると「おすすめのお宿」という場所に飛ぶようにすることです。
これが、クリックすると必ずページの先頭に戻ってしまうのです。よく見ると、一度目的の場所に飛んだ後すぐにページの先頭に戻っているようです。
さらに不思議なのは、ローカルホストではアンカーリンクが正しく動作して目的の場所に移動するのに、サーバーではページの先頭に戻ってしまうことです。子テーマのソースは、ローカルホストからサーバーにアップロードしているので全く同じにもかかわらずです。
ローカルホストとサーバーでただ一つ違うのは、サーバーはSSL 化して https を使用していることぐらいですが、これが関係しているとは思えません。
ページトップに戻るボタンが原因か
一つ考えられることが、少し前に導入した、右のようなページトップに戻るボタンです。
このボタンは、ページが一定の幅スクロールされると表示され、クリックするとページの先頭に戻るように、jQuery でコントロールしています。
クリックしなければページの先頭に戻らないように jQuery でプログラミングしているので、クリックというイベントが発生しないこの場合、これが直接の原因とは考えられません。
このボタンが直接の原因でないことは、このボタンをコントロールしている jQuery を無効化し、ボタン表示箇所もコメントアウトしても同じ結果になることから判断できます。
jQuery のコンフリクト？
Yahoo!知恵袋に質問したところ、「WordPress の jQuery と、独自にインストールしている jQuery のコンフリクトではないか。どちらかを無効にしてみてはどうか」という回答がありました。しかしやりかたがわかりません。
試しにローカルホストとサーバーのWordPress のバージョンを同じにしてみました。しかし結果は変わりません。
子テーマのheader.php では、下記のように jQuery ライブラリを読み込んでいます。
<script src=”https://code.jquery.com/jquery-3.2.1.min.js” integrity=”sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=” crossorigin=”anonymous”>
</script>
しかし、他に jQuery を読み込んでいるところはありません。
上の jQuery 読み込みを削除してテストすると、アンカーリンクは正しく移動します。しかし、ページトップに戻るボタンは動作しません。jQuery を他に読んでいることはないと結論できます。
WordPress の正しい jQuery 読み込みで解決
長い間悩んだ末、WordPress で正規に jQuery を読み込むのはどうするのかということに思いあたりました。もともと WordPress には jQuery が準備されていますが、上で確認したように、何もしなければ jQuery は読み込まれていません。WordPress で正しく jQuery を読み込む方法はあるのだろうかと、ネット検索してみますと、次のページが見つかりました。
この説明によりますと、header.php の<head>～</head>で、<?php wp_head(); ?> より前 jQUery ライブラリを読み込む関数を記述します。
<?php wp_enqueue_script(‘jquery’); ?>;
<?php wp_head(); ?>;
そして、上記説明に従って、
さらにもう一つの作業として、jQueryのコードを書き換える必要があります。
具体的には、コード内の「$」を「jQuery」という文字列に置き換えます。これは、WordPressにはjQuery同様に「$」をコード内で利用するprototype.jsのライブラリがあるためです。そこでWordPressでは、ライブラリのコンフリクトを避けるため、jQueryの場合は「$」を「jQuery」に置き換えます。
この通りに＄を jQuery に書き換えて、上の独自の jQuery 読み込みを削除したところ、アンカーリンクが正しく動作するようになりました。
どこがどのようにコンフリクトしていたのかわかりませんが、Yahoo!知恵袋の指摘のように、jQuery ライブラリーのコンフリクトだったようです。ローカルホストでは正しく動作するのにサーバーで正しく動作しないのは、ローカルホストとサーバーで、jQuery ライブラリーの環境が異なっていたのかもしれません。
