調査結果
- class が site-branding の
<div>に囲まれた部分は、 クリック時に JavaScript によってフォーカスを外されていた。(タブでフォーカスを当てた時は外されなかった) - 問題のソースコード該当箇所
調査に役立ったテクニックとその参考ページ
- メインメニューの検索フォームにクリックしてフォーカスした時に発火し、実行される JavaScript を調べる方法を知ることができた。
- デバッグするために JavaScript を一時的に書き換える方法を知ることができた。
実際の調査の流れ
Google Chrome バージョン: 72.0.3626.121（Official Build） （64 ビット） で行いました。
- メインメニューの検索フォームで右クリック > 検証
- DevTools ウインドウの上ペインタブ Element を選択し、下ペインは Event Listeners を選択
- イベントのリストから click を選択し、展開されて表示されたソースコードファイルをクリック
- 上ペインが Souces に切り替わり、ソースコードが表示される。
クリックで実行される JavaScript が表示されましたので、あとは、行数のところをクリックしてブレークポイントを貼ってデバッグするなり、ソースコードを編集して保存することで挙動を調べるなり、もっと深い調査を行いました。
おわりに
私は自身のこのブログを自分で検索して調べることが多いです。
ですので、サイトにアクセスしてすぐの所に検索フォームがほしいのです。
子テーマを作るにあたり、検索フォームをサイトに表示するところまでは簡単でした。 ですけれども、本投稿で取り上げている問題に遭遇しました＞＜。フッター部分には検索フォームが初めからありますけれども、もちろん同じ現象は再現しません。
ですので JavaScript あたりの問題だろうと予想はしていました。けれどもどうやって調べたらよいのか、いまいちわからなかったのです。
今回、原因を特定できたこともそうですが、それ以上に調べ方を一つ知れたのが嬉しく感じます。
あとは、どうやって、問題を解決するかですけれども、どうしましょうかね♪
以上です。