【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.noConflict()を指定していると「$ is not a function」とエラーが出る

どうやら、原因は他のライブラリの$関数との競合らしい。

"$" ⇔ "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講師がいたら絶対いい」

なんて思ったりした。

こちらが、やっとこさの想いで作成した、

「画像を押すと下にピロっと情報が出てくる仕様」のサイト。

Bar Peazy | Have a wonderful party at Shinjuku!

本当に些細なところでつまづいたな～と思った。

もっと速く解決できる男になりたい！！

以上！！