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

SPONSORED LINK
JQuery tab

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

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

 

jQueryとは?

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

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

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

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

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

 

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

[email protected][email protected]るのを見ていいな~と思っていました。

けんけん.com
どんどん進化するブログ自作テーマ。いつも参考になります。
ラクイシロク
アプリまで開発した89年生まれのスーパーブロガー。とても年下には思えません。とにかく尊敬してます。

 
[email protected][email protected]しました。

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

 
[email protected]_nさんはウェビメモ[email protected]した。

jQueryを使ったスムースなタブメニュー | ウェビメモ
こちらの記事ですが、本当に参考になりました!いつも素敵なWordpress情報感謝です!

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

全てjQueryが何なのかさっぱり分からなかったこと[email protected][email protected]ご意見できるかと思います(一緒に悩みましょう!)。

 

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

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

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

カテゴリー

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

[php] <?php wp_list_categories(‘title_li=0&show_count=1’); ?>
[/php]

タグ

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

[php] <?php wp_tag_cloud(‘smallest=10&largest=24’); ?>
[/php]

月別アーカイブ

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

[php] <?php wp_get_archives(‘orderby=name&title=’); ?>
[/php]

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

日本語版 WordPress チートシート | Webクリエイターボックス
ブログテーマを作るときにも大活躍しました。素晴らしいまとめ感謝です!

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

 

@3_wa

SPONSORED LINK
jQuery_tab