サイドバーをjQueryでアコーディオン仕様にしてみた。

ブログロール

なんだかサイドバーが果てしなく長くなってきたので

ブログロールだけ折りたたみにしてみた。

jQueryは実装されているので、導入は簡単!
導入がまだの方は、Download jQuery | jQueryからダウンロードしてくださいませ。
意味が良くわからない方は7つのサンプルでjQueryを学ぼう!「jQueryが全く分からない人のため」の超初級者向け入門講座 | OZPAの表4をどうぞ♪

実装方法

head内に以下を挿入。

他に、jsのコードがあれば一緒にしてもいいはず。

衝突回避で、スクリプト内の”$”をすべて”jQuery”に置き換えています。

ブログロール部分は出力されると以下の様になりますので、4行目で折りたたむ(隠す)部分を指定します。
例:”.widget_links .xoxo”

5行目で、マウスオーバーして折りたたみを開く部分、ここでは”h3”タイトルにマウスオーバーしたら隠れていた部分が開きます。
例:”.widget_links”

 

追記

2013/11/25 ちょっと変えてみた。

マウスオーバーじゃわかりにくいっぽいから、クリックで動作するようにして、かつ一番目のブログロール「お友達」を開いておくように。

追記

2013/11/26 もっと、簡単な記述方法がありました。

リンクウィジェットを使用せず、Post Snippetsを使ってます。

以下を「<?php」と「?>」を省いてPost Snippets に設定。

テキストウイジェットに↑上記の様に書いてます。

参考:
リンクをリストタグで表示するwp list bookmarks | WordPress攻略本

超簡単jQuery!”toggle系メソッド”を使ってアコーディオンメニューやタブをさくっと実装する方法 | 株式会社LIG

参考サイト

[WordPress]jQueryによるカテゴリのアコーディオン表示 | HI-ROM.COM BLOG
7つのサンプルでjQueryを学ぼう!「jQueryが全く分からない人のため」の超初級者向け入門講座 | OZPAの表4

雑感

最近、お友達のブログの更新情報や、人気記事などサイドバーに表示したいものが増えてきてサイドバーがとっても長くなってきていたので、なんか良い手はないかなーと思ってたんだけど、このアコーディオン型、ほんとはちょっと冒険。



というのも、あまりインターネットに詳しくない人にとってこれって、きっと、わかりにくいと思う。
だけど、あえてやってみたのは、実験的な意味あいが大きい。
このリンクがどれほど機能しているかは、未知数ですしね。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA