WordPres投稿ページの本文内で設定していたjQueryが正常に動かなくなりました。
全く動かないわけではなく、変な動作になっています。
jQueryの内容はマウスオーバーで横からスライドです。
対象要素の真ん中にマウスを当てると動かないのですが、要素の端っこにマウスを当てると正常に動作します。
ページ内リンク
原因探し
最近気づいたもので、いつ異変が起きたのかわかりません。
こんな時にまずやる事はプラグインを停止させる事です。
方法はWordPresの管理画面のプラグインのページをGoogleChrome「Full Page Screen Capture」でページ全体のスクリーンショットを撮っておいて、全部のプラグインを停止させる。
JavaScript系の動作の異常の原因の多くがプラグインです。
予想通り全プラグイン停止で本文中のjQueryは設定した当時と同じように上手く動作しました。
原因発見
後はページ全体のスクリーンショットを確認しながらプラグインを一つずつ有効化させて、その度にページの動作を確認します。
順番にやっていくと「Table of Contents Plus」を有効化させた時、又異常が。
つまり原因は「Table of Contents Plus」でした。
「Table of Contents Plus」
このプラグインはページの上部にページ内のhタイトルの付いた要素を取得してページ内リンクを設定して目次として表示させるものです。
ページ内に「h」タグがある場合、その中に「span」タグを任意の「id」名を入れるJavaScriptを使っているのだと思われます。
つまり「Table of Contents Plus」のJavaScriptと本文jQueryが反発しあった、と単純に考えたのですが、そうではありませんでした。
本当の原因
「Table of Contents Plus」は「h」タグに「span」を入れます。
その「span」のCSSに「margin-top: -5rem;」が設定されています。
これはページ内リンクによくある設定で、目次をクリックし「h」タグに移動すると、「h」タグが画面の上ぎりぎりになって見えにくくなってしまいます。
その為「margin-top: -5rem;」を設定して「span」要素の高さを、その前の要素の中にまで侵入させて、移動させた時「h」タグの「5em」上で止めるようにしています。
つまり「span」要素が上に来てしまって、jQueryを仕掛けている対象の要素の上に重なってしまっていて、対象要素の「マウスが上に着た時」という状況を妨害してしまっていました。
Table of Contents Plusが前の要素にかぶっている画像
もっとわかりやすく言うと対象要素の上にマウスを当てているつもりでも実際はそのすぐ下に設定している「h」タグの「span」にマウスを当てていたことになっていたのです。
簡単対処方法
ここまでわかると対処方法は簡単です。
「h」タグのすぐ上の要素、つまりjQueryの対象要素をCSSでそのすぐ下の「h」タグから「5em」以上離せばいいのです。
まとめ
非常に単純な事でした。
WordPresのプラグイン「Table of Contents Plus」を使う時は手前の要素を「5em」以上離す事。
これをしなければ、jQueryだけでなくリンクもおかしくなるでしょう。
原因がわかれば簡単すぎる事なのですが、原因がわからなければJavaScriptだのjQueryだの考えてしまうものです。