jQueryのプラグインにyuga.jsという便利なスクリプトがあります。
jQueryと併用することで、画像のロールオーバーやスムーススクロールなど多くの機能を簡単に実装できる大変優れものです（ライセンスはMIT License）。
中でも重宝するのがリンクメニューの自動ハイライト機能です。
例えばホームページのグローバルナビゲーションにボタン画像を採用している場合、現在表示しているページへのリンクボタンを自動的に別の画像に差し替えてくれます。
あなたの見ているメニューはここですよと視覚的に伝えられるので、アクセシブルなホームページを制作する上では必携ともいえます。
んで、この機能をWordPressで使用した場合、ちょっとした問題が生じます。
yuga.jsはディレクトリ配下のページをハイライトの対象に含めるか否かを選択できるのですが、仮にそう設定した場合、以下のようにトップページへのリンクボタンも常にハイライト表示されてしまいます。
- http://www.be-children.jp/ [Homeボタン]
- http://www.be-children.jp/about/ [Aboutボタン]
- http://www.be-childrne.jp/about/profile/
- http://www.be-children.jp/about/profile/web-result.html
※2・4のページを表示中、About、Home両方のボタンがハイライトされてしまう。
これを回避する方法がないかとググってみたところ、開発者ご本人のブログのコメントにその対処法が投稿されていました。
http://blog.kyosuke.jp/2009/01/27/67
WordPressが自動的に吐き出す「current_page_item」や「current-cat」クラスに背景画像を紐付けすることで同等の効果を得ることも出来ますが、yuga.jsは設置が容易なうえ様々な効果も併用できますので、興味のある方は一度試してみてください。
