WordPress上のjQueryの読み込み
このサイト、スマホでご覧になると、右上にメニューのアイコンが表示されて、そこをクリックするとメニューがニョロっと上部に表示されるような設定になってるんですよね。
で、ブログ／Wordpress上でも同様の仕様にしようとするも、「×」が表示されるだけで、メニューはどうにもこうにも表示されず、というのが昨日からの宿題。
自分はそういう動的なサイトの設計に疎いので、ネットで検索したりちゃっぴーに相談したりして、なんとか解決しました。
まず、動的なサイトに必要なjQueryというライブラリですが、通常のHTMLページであればheadタグ内で読み込ませるのですが、Wordpressの場合、Wordpressのパッケージに含まれているので、自分が用意したjQueryではなく、Wordpressが自動生成するヘッダーの中で読み込ませるのが一般的なようです。そうしないとjQueryを使うプラグインでトラブったりする模様。
で、その設定にすると、wp_head(); のなかで自動的にjQueryが呼び出されます。
またWordpressが使っているjQueryの設定がちょいと違うようで、”$”では呼び出せず”JQuery”と明示しなければいけない、という情報もネット上にたくさん転がっていて、それもこのブログ内限定で呼び出す、ボタンを表示させるスクリプトを書き換えて対応しました。
これでいいじゃんと思ったのですが、やっぱし思ったように動かない・・・。
なんでかと思ったら、最終的なHTML上で、jQueryを呼び出す行が、自分のスクリプトを呼び出す行よりも前に存在しなければならない・・・という至極まっとうな仕様を見落としていたようです。自分が wp_head(); を/headのすぐ上くらいに置いていたので、順番が逆になってしまってましたわ・・・。ということで順序を入れ替えたら、なんのことはない、動くようになりました。
この「順序」の件は、慣れているみなさんには常識なのでしょうね。ネット上では情報がなかった（ちゃっぴーに教えてもらった）ので、ちょっとここにメモっておきます。
2026/01/02 11:50 AM - ツイート