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 - ツイート
WordPressも大規模更新してみた
この年末年始はウェブサイトのデザインを大幅に見直しています。外見はあまり違いはないのですが、実は見えない内部のコーディングをかなり修正しています。
で、いちばん厄介だったのが最近放置気味だったブログのセクション。謎のredirectを繰り返してしまいページが表示されないし、管理画面にログインもできない。なにか壊れてしまったのかも。
ということで、Wordpressをクリーンインストール。テーマも今回はゼロベースで作成してみました（以前は既存のテーマを修正してました）。こちらを拝見しながらやってみたら、意外と簡単にできちゃいました。
また、Google Search Consoleで”canonicalが設定されていない”というダメ出しを大量に受けていたので、今回は自動生成する関数を埋め込んで対応させてみました。
従前のWordpressのデータベースからの移植も、思ったより順調に進んでいます。古いほうのwp_postsから.csvをエキスポートして、IDなど少し加工してから新しいほうにインポートさせて、あとバックアップしておいたwp-contentsのuploads（画像）をもとに戻せば、ほぼ元通りになりました。使いもしない画像ファイル（自動的にサイズ加工されたファイル）が大量にあって、ほんとは使ってないのは捨てたいんですが、取捨選択の作業が面倒なのでぜんぶ元に戻しました。これを教訓に、アップロードの際にサイズ加工しない設定にWordpress側の設定を変えておきました。
また一番の大きな問題は、各投稿のカテゴリ設定がデータベース内でけっこう複雑な構造をしてまして・・・これは復活を諦めました。なので過去の投稿はすべて「未分類」です😂。まぁいいっしょ。
ということで正月1日からWordpressについていい勉強になりましたとさ。
2026/01/01 4:16 PM - ツイート