WordPress – テンプレートタグを使用してメニューを作成
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」も同様の対応が効きますので、必要に応じてご参考にしてください。
オススメ記事
-
WordPress – 管理者画面5テーマ
WordPressのテーマは、非常に充実しており、無料配布されているものだけでも数百以上見つけることができます。デザインの質も高く、独自にテーマを作成される場合でも参考になるのではないでしょうか。その反面、管理画面のデザイン性は低く、デフォルトでは使い辛いとの指摘もあります。
-
WordPress – クリスマスのテーマ
昨日は、クリスマスイブと言うことでオフィス街は比較的早い時間帯から静まり返り、繁華街での人の往来が目立ちました。その反面、不況の影響からは自宅でパーティを開く方も多かったようで洋菓子店は例年になく繁盛したそうです。そして今日が本当のクリスマス。