jQueryを使って「カテゴリー・タグ・月別アーカイブ」の切替可能なタブメニューを設置しました。

はじめてjQueryなるものを導入しました。PHPすら分からなかった2週間前と比べて大きな進歩です。

今回は、スムーズに切り替えができるタブメニューの実装方法を紹介します。

 

jQueryとは？

jQueryって何のことだかご存知ですか？

私は４日前まで「ジェイクエリー」と呼ぶことすら知りませんでした。なので、もちろん全てを理解したわけではありませんが、JavaScriptを簡単に使うための仕組みが詰まった箱のようなもの（＝ライブラリー）だということが分かりました。

・・・え？JavaScriptが分からない？大丈夫です、私もほとんどわかっていません（笑）

ただ、今回のスムーズにシフトするタブや、企業のHPなどでよく見かけるスライドショーもjQueryを使えば簡単に設置できるもの、と勝手に解釈しています（違っていたらすいません）。

こんな私でもjQueryのタブメニューを何とか設置することができました。基本的には、みんな大好きコピペです。だから、0からWEBの勉強をはじめようかな〜という人の参考になれば幸いです。

タブメニューのリソースは？

昨年Wordpressのテーマを自作した@knk_nさんや@rakuishi07さんがタブメニューを設置しているのを見ていいな～と思っていました。

 
そこで思い切って@rakuishi07さんに直接聞いたところ、以下のサイトからコードを使ったことが判明しました。

@3_wa bit.ly/HsnrtW これですね。とりあえずサンプルコードを落とせるので、頑張って学びました。質問あれば答えれますよ。

— ラクイシさん (@rakuishi07) 3月 31, 2012

いろいろつまづきましたが、サンプルコードをとにかくいじっているうちにヒントを掴みました。やはり考えるよりも行動です。

 
また、@knk_nさんはウェビメモの@xxmiz0rexxさんを参考にしていることが分かりました。

これをそのままコピペすれば、タブメニューを設置できます・・・が、私はたったこれだけの作業に２週間近くかかりました。

全てjQueryが何なのかさっぱり分からなかったことが原因なのですが、もしつまづかれた方は@3_waまでご連絡ください。おそらく一番近い立場でご意見できるかと思います（一緒に悩みましょう！）。

カテゴリー・タグ・月別アーカイブを表示するには？

私がjQueryにはじめて挑戦する時にどこでつまづいたかは今度まとめるとして、今回は導入した３つのタグのソースコードだけ紹介します。

なお、私はサイドバーに表示してますので、sidebar.phpの中に記述しています（実はどこに記述すれば良いかでも何度かつまづきました）。

カテゴリー

タイトル（記事数）という形式で表示しています。

タグ

使用頻度が多いほど大きくなるタグクラウド形式で表示しています。

月別アーカイブ

〇〇〇〇年〇〇月という形式で表示しています。これはデフォルトです。

 
他のコードをもっと知りたい方は上のウェビメモさんの記事を読むか、Webクリエイターボックスさんの下の記事が非常に参考になります。

 
以上ですが、jQueryが少しずつ分かってきて、ブログがもっともっと楽しくなる気がしてきました。これからもコツコツ勉強していこうと思います。

@3_wa