【JavaScriptでおなじみ、"$"がWordpressで全く通用しなかった話】
つくづく問題解決能力が低いことを思い知らされた一晩だった。
(才能なさすぎ！笑)
最初に言っておかなければならないのは、この記事は面白くない。
ただ悔しさを語っているだけなのだから。
------------------------------------------
きっかけは、
「(HP上で) 画像押したらひょいって下にコンテンツが表示されるUI、かっこよくね？」
という発想だった。
Wordpressを運用していて、JavaScriptとCSSを使ってちょっとおしゃれにしたかったのだ。
教科書にも、ネットにも、先生にも、
$("#open-register").click(function() {
if( $("#register-area").is(":hidden") ){
$("#register-area").slideDown(500);
} else{
$("#register-area").slideUp(500);
}
});
のような関数は教えてもらった。
2時間くらいあれば十分だ。今のホームページを改良できる。
要は、HTML側の<input>にonclick()関数を入れて、JS側でSlideDownやSlideUpを入れてしまえばいいのだ。
これは下手したら15分で終わる
習いたてのJavaScriptの知識を早速活かして書きまくってみる。
一応教科書通りのCodeはかけた。
あれ？
しかし。。。。。
全然表示されない。
2時間苦闘しても、全く表示されない。
なぜだ。。。。
そもそも、WordpressはPHP主体の言語なので細かいJSやHTMLタグを変更したところで反映されているのだろうか。
原因はきっとWordpressだ。
WordpressのJSをいじるためのプラグインをダウンロードする。
なるほど。
これは便利だ。console.logにいれたメッセージがちゃんとconsoleに表示されるている。
いよいよ実装完了や！！
と思った。
矢先。
ChromeのConsoleから衝撃の一言。
目を疑った。
$ is not a function深夜2時に叫ぶ。
「いや、$は立派な関数だろうが！！！！！！！！！」
叫んだ。そして途方に暮れた。
ネットにも先生にも習った$を全否定された。
あまりに理不尽だ。
というか、別にアニメーションとかなくてもいいか。もう頑張った。Wordpressとは仲良くなれ無さそうだ。
諦めようともした。
だけど、問題解決能力が低い自分は、「終わるまで諦めない」。
諦めて気分転換に他の作業をやって、リフレッシュしてから取り組めばいいのに、「ここまで時間をかけたんだ。Wordpressと心中したろう。」と心を決めた。
-------------------------------------
とりあえず、「$は立派な関数だろうが！！！」
と心の叫びをそのままGoogleで検索したら、救世主が。。。
どうやら、原因は他のライブラリの$関数との競合らしい。
"$" ⇔ "jQuery"
と単純に文字を置換してやれば、つまり
jQuery("#open-register").click(function() {
if( jQuery("#register-area").is(":hidden") ){
jQuery("#register-area").slideDown(500);
} else{
jQuery("#register-area").slideUp(500);
}
});とすれば、あっさり解決。
意地になって取り組んだので、ここまで8時間はかかっている。
ちなみに、記事を見つけてから15分で解決。
つまり、
「記事早く見つけてれば30分でできたじゃん！！！！！！」
という悔いが残った。
プログラミングって、本当にささいなところで平気で1日つまづいてたりしてしまう恐ろしい言語である。特に問題解決能力の低い自分は、
「オンラインの24時間対応のWeb講師がいたら絶対いい」
なんて思ったりした。
こちらが、やっとこさの想いで作成した、
「画像を押すと下にピロっと情報が出てくる仕様」のサイト。
本当に些細なところでつまづいたな～と思った。
もっと速く解決できる男になりたい！！
以上！！