2011年2月27日

カスタムメニューをぐるぐる回す(実験)

当サイトのトップページのような、ぐるぐる回るメニューを簡単に実装する Roundabout for jQuery お世話になってます。

そこで、でも追加とかするときに、HTMLを書き換えたりとかが面倒くさいし、、、なのでWordPressのカスタムメニューをぐるぐる回す方法を「実験的に」考えてみました。

まずは、カスタムメニューを画像にするから、コードを参考にさせていただき、functions.phpにコードを記述。

//カスタムメニューを画像に
add_filter( 'the_title', 'img_nav_menu_title' );
function img_nav_menu_title($title) {

	if( preg_match( "/\[\[([0-9]+)\]\]/", $title, $match ) ) {
        $get_no=$match[1];
        $imgData=wp_get_attachment_image_src($get_no);
        $get_img_url=$imgData[0];
        $get_alt = preg_replace( "/\[\[(.*)\]\]/", '', $title );
        $title = '<img src="'.$get_img_url.'" class="guruguru" alt="' . $get_alt . '" />';
        return $title;
    }else {
        return $title;
	}
}

こうすると
メディアライブラリにアップロードした画像のID番号を指定して、メニューを画像に置き換えることができます。
メニュー名[[画像ID番号]]

<img src="画像URL“ alt="タイトル" >

に置き換わります。

これであとは、カスタムメニューが吐き出すul要素に対して

<script>
   $(document).ready(function() {
      $(要素のidとか).roundabout();
   });
</script>

で出来上がりです。
簡単ですね。

※この記事は、書いた人間の都合(怠慢)で、途中の工程とかすっ飛ばして書いている部分がありますので、ご注意を。
そのうち完全版にしたいなと思ったりしています。