ナビゲーションバーを作った@テーマ作成61日目

今日の進捗状況

・カスタムメニューを使って、ナビゲーションバーを作った。

今までヘッダーに表示されていたナビゲーションバーはhtmlで書いただけのサンプルでした。このナビゲーションバーに主要なカテゴリーを表示できるようにします。

navigation

カスタムメニューを使うのですが、デフォルトだとカスタムメニューに対応していないようなので、「function.php」にまず以下のようなコードを追加。

register_nav_menus(array(
‘navigation’ => ‘ナビゲーションバー’
));

それからダッシュボードの『外観 > メニュー』から「メニューの名前」に任意の名前をつけて、カテゴリーを追加。

それから、ヘッダーの対応する場所に

<?php wp_nav_menu(array(
‘theme_location’ => ‘navigation’
)); ?>

のように追加することで、ナビゲーションが表示されました。ただ、このままだとリスト形式で表示されるだけなので、cssで装飾します。

navigation2

その結果がこちら。3階層までは表示できるようになっています。

ちなみに右端のメニューは左方向に表示されるようにしています。

navigation3

実はナビゲーションそのものよりcssの編集に時間がかかっています。

スポンサーリンク
スポンサーリンク

シェアする

フォローする

スポンサーリンク
スポンサーリンク