2008.05.08
サイドバーの折りたたみ
サイドバーのArchivesを折りたたみにするためにHTMLに以下のように記述しました。（折りたたみjavascriptを外部ファイルとして設置する方法）
以下のコードをoritatami.jsとしてサーバーの適当なディレクトリ（設置したWordPressの外部ディレクトリにしておけば複数ののWordPressを遣う場合に便利です。）に保存
function oritatami(id){
obj=(document.all)?document.all(id):((document.getElementById)?
document.getElementById(id):null);
if(obj) obj.style.display=(obj.style.display==”none”)?”block”:”none”;
}
header.phpに以下javascriptを読込むコードを書き込みます。
<script type="text/javascript" src="http://minobu.net/oritatami.js"></script>
<!–折りたたみメニューjis読込みここまで –>
サイドバーArchivesの設置部分を以下の様に書き換えます、これで一応の折りたたみの完成です。
<h2><a href="URL" onclick="oritatami(’ori1‘);return false" onkeypress="o">Archives</a></h2>
<div id="ori1" style="display:none">
<ul>
<?php wp_get_archives(); ?>
</ul>
</div>
</li>
しかし、この方法だと四角い罫に囲まれたメニュータイトルの文字にリンクが張られています、これをメニュータイトルの文字へのリンクではなく、四角い罫に囲まれた部分全体にリンクが出来ないかと考えました。そこで
<a href="URL" onclick="oritatami(’ori1‘);return false" onkeypress="o"><h2>Archives</h2></a>
<div id="ori1" style="display:none">
<ul>
<?php wp_get_archives(); ?>
</ul>
</div>
</li>
のようにArchives部分をを<h2>Archives</h2>のようにしてみました。
ori1の部分は他のidと異なる別のidを書いていきます。
なんと現在のこのサイトの左サイドバーにあるCalender部の折りたたみのように、思い通り四角い罫に囲まれた部分のどこをクリックしても折りたたみの開閉が出来ているではあ〜りませんか。
しかしです、この方法ではAnother HTML-lint に「<h2> を n行目の 〜 内に書くことはできません。」と指摘されValidでなくなってしまうのです。
小粋空間さんの以下もすてきなんですがWordPressに流用出来ないものでしょうか？
折りたたみメニュー
サイドメニューの折りたたみ（定義リスト編）
小粋空間: サイドメニューの折りたたみ（v4.0）
小粋空間: サイドメニューの折りたたみ（v5.0：ゆっくり折りたたむ）
Comment & Trackback
Comment feed
Comment