このエントリーをはてなブックマークに追加 Twitterでツイート Twenty Tenをのぞいてみる(2)

昨日に引き続きWordPress 3.0の新テーマ「Twenty Ten」のポイントを整理していこうと思います。今日は、「Twenty Ten」で目を引いた「ナビゲーションメニュー」です。
ナビゲーションメニュー

ナビゲーションメニューは、従来のテーマで独自に作成していましたが、WordPress 3.0からは標準でサポートされており、そのカスタマイズも比較的容易に行えるようです。
実際に管理者ページをのぞいてみると、サイドメニューの「外観」に「メニュー」が追加されており、その中で自由に設定できるようになっています。
管理者ページでカスタムメニューを設定

このナビゲーションメニューを表示するのは、たったの1行のみ。header.phpには次のような記述があります(WordPress 3.0 RC1より)。

<?php wp_nav_manu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>

このwp_nav_manu関数は、3.0で登場した新しい関数(WordPressタグ)で、パラメータを連想配列で指定することで、カスタマイズできるようになっています。

表示されるナビゲーションメニューの内容は、トップページへのリンクである「ホーム」、単一ページについては自動的にメニューに追加されるようになっています。出力されるHTMLタグは次のようなイメージです(ここでは構造をわかりやすくするためにタグごとに改行してインデントを付けていますが、実際は1行で出力されます)。

<div class="menu">
    <ul>
        <li class="current_page_item">
            <a href="http://elearn.local/" title="ホーム">ホーム</a>
        </li>
        <li class="page_item page-item-4">
            <a href="http://elearn.local/contact/" title="問い合わせ先">問い合わせ先</a>
        </li>
        <li class="page_item page-item-2">
            <a href="http://elearn.local/about/" title="紹介">紹介</a>
            <ul class='children'>
                <li class="page_item page-item-9">
                    <a href="http://elearn.local/about/favorite/" title="好きなもの・好きなこと">好きなもの・好きなこと</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

これに対し、管理者ページで独自のカスタムメニューを設定した場合は(ここでは’mymenu’)、次のようになります(上記のソースコードと同様、適宜改行し、インデントをつけています)。

<div class="menu-header">
    <ul id="menu-mymenu" class="menu">
        <li id="menu-item-20" class="menu-item menu-item-type-custom">
            <a href="/">トップ</a>
        </li>
        <li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-object-post_type-2 page_item page-item-2">
            <a href="http://elearn.local/about/">紹介</a>
            <ul class="sub-menu">
                <li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-object-post_type-9 page_item page-item-9">
                    <a href="http://elearn.local/about/favorite/">好きなもの・好きなこと</a>
                </li>
            </ul>
        </li>
        <li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-object-post_type-4 page_item page-item-4">
            <a href="http://elearn.local/contact/">問い合わせ先</a>
        </li>
    </ul>
</div>

出力されたHTMLソースを見るとわかるとおり、divタグやulタグなどのクラス指定が微妙に異なっています。デザインをカスタマイズする際のCSSの指定はちょっと注意が必要かもしれませんね(現状RC1の状態なので、正式版では変わる可能性があります)。

投稿日:2010年6月8日
  • ※コメントは、スパム対策などのためIPアドレスにて制限しております。
  • ※誹謗や中傷、スパムなど、不適切な内容は公開いたしません。ご了承ください。