【38日目】 jQueryが動かねぇんだけど

2019.03.10

最近また懲りもせずwordpressテンプレートを作成しています。

このテンプレートが何用かというと、一年ちょっと続けているDTM(DeskTopMusic)のブログ用のテンプレートです。

24歳から始めるエレキギター

実は私こう見えても曲作れるんですよ。えっへん。

まあそんな感じで二個目のテンプレート作成になりますが、やはり勝手が分かると進むスピードも速くなって楽しいです。

「この前作ったものからコピペすれば完成!」みたいな部分がそれなりにあるんでね、一気に上級者に駆け上がった気分です。

ただ、前と全く同じものを作っても仕方がないので、今回はJQuery(javascript)を使っておしゃれなハンバーガーメニューとかグローバルナビゲーションを作ってやろうと思っているわけですよ。

「ドットインストールで30分くらいJQueryの動画見ましたしね。まあいうて楽勝でしょ。」

そんな感じで準備万端な状態で挑んでいたはずだったんですけどね。。。

JQueryがうごかねぇ

不動

準備万端なはずだったんですけどJQueryがウンともスンとも言わないという現象が起きました。

普通に<head>タグ内で最新バージョン読み込んでいるんですけどね、意味がわからないです。

というわけで色々ググったんですが、結論から言うとwordpressは何もしなくてもデフォルトでJQuery読み込む仕様でした。

まさかwordpressさんがJQueryさんとデキてるなんてね。。。

もうちょい色々なサイト見てるとなんとなくwp_head();内の処理でJQueryを読み込んでるらしいですね。

だからwp_head();の前でjsファイルを呼び込むと死亡するとのこと。私のテンプレートの場合wp_head();すらなかったのでそりゃ動かないはずだ。

というわけで保存して再チャレンジきたのですが、、、

Syntax Error:$

クソが

wordpressでは$が使えないらしい

エラーメッセージを見るに「$って何?は?ナメてんの??」みたいなことだと思います。

そこでまた色々調べてみたんですが、なにやらwordpressではそのままの状態だと$が使えないらしいですね。

じゃあどうすればいいのか?ちゃんとそういうことを教えてくれるサイトがありました。

https://cunelwork.co.jp/blog/web/wordpress%E3%81%A7%E3%81%AE%E3%83%80%E3%83%A1%E3%81%AAjquery%E9%96%A2%E6%95%B0%E3%81%AE%E5%9B%B2%E3%81%BF%E6%96%B94%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3/

javascriptコンソールエラーなし

動いた!!!

おかげさまで

おかげさまで押したら開くハンバーガーメニューができました。

ハンバーガーメニューは他サイトを丸パクリしたのでJQueryが動いてからは割と一瞬でしたね。あざーす。

なんだかんだJQueryが動くまで1時間くらいかかりましたが、なんとか今日にやりたいことが全てできたのでよかったです。

そんな感じで終わろうと思います。

ありがとうございました!