WordPress - テンプレートタグを使用してメニューを作成 | Technolog.jp - ICTウェブマガジン

WordPress – テンプレートタグを使用してメニューを作成

  • 2009/07/06
  • カテゴリー:CMS

WordPressでサイトメニューを作成する際、頻繁に利用するのがテンプレートタグだと思います。中でも「wp_list_pages」と「wp_list_categories」は非常に有用です。当然、ベタ打ちでメニューを作ることが最も簡単ですが、スマートな方法とは言えません。

しかし、このふたつのテンプレートタグを使用した場合、メニューとして取り扱うには問題があります。「wp_list_categories」を例に出力されるコードを以下でご確認ください。

1
2
3
4
5
6
7
8
9
10
<ul>
    <li class="categories">カテゴリー
        <ul>
            <li class="cat_item cat-item-1 current_cat_item"><a href="#" title="1">1</a></li>
            <li class="cat_item cat-item-2"><a href="#" title="2"></a></li>
            <li class="cat_item cat-item-3"><a href="#" title="3"></a></li>
            <li class="cat_item cat-item-4"><a href="#" title="4"></a></li>
        </ul>
    </li>
</ul>

メニューを作成するのであれば明らかに「<li class=”categories”>カテゴリー<ul></ul>」が邪魔になります。function.phpでこれをコントロールするなど諸説ありますが、個人的に参考にさせていただいたのが「10 Killer WordPress Hacks」という記事の中にあった以下の内容です。

1
<?php echo preg_replace(@<li([^>]*)><a([^>]*)>(.*?)</a>@i’,'<li$1><a$2><span>$3</span></a>’, wp_list_categories(‘echo=0&title_li=&depth=1′)); ?>

この結果、以下のようなコードが出力されるようになります。

1
2
3
4
5
6
<ul>
    <li class="cat_item cat-item-1 current_cat_item"><a href="#" title="1"></a></li>
    <li class="cat_item cat-item-2"><a href="#" title="2"></a></li>
    <li class="cat_item cat-item-3"><a href="#" title="3"></a></li>
    <li class="cat_item cat-item-4"><a href="#" title="4"></a></li>
</ul>

wp_list_pages」も同様の対応が効きますので、必要に応じてご参考にしてください。

KEYWORD