WordPressでセンタリングされた横並びナビゲーションメニューを追加する方法

ここでは、WordPressでセンタリングされた横並びナビゲーションメニューを追加する方法を紹介します。当サイトでは、ヘッダーにはカテゴリリンク、フッターには固定ページで作成したサイト運営に関するリンク(免責事項など)をメニュー機能で管理しています。

HMTLを多少理解している人であれば、テンプレートファイルにリンクをHTMLで直接入力すれば済む話なのですが、WordPressで複数サイトを運営し、自作テーマファイルを使い回しする際に、ナビゲーションメニューをメニュー機能で管理することでサイトのメンテナンス性が向上します。

テンプレートファイルへの記述

まず、カスタムナビゲーションメニュー機能を追加するコードを functions.php に記述します。

<?PHP
// カスタムナビゲーションメニュー
add_theme_support('menus');
?>

次に、テンプレートファイル( header.php や footer.php など)を開き、ナビゲーションメニューを表示したい箇所にテンプレートタグ wp_nav_menu を入力します。

<?php wp_nav_menu( array('menu' => 'footer-nav' )); ?>

上記の例では、menu というパラメータに ‘footer-nav’ という名前を設定していますが、利用環境に合わせて、適宜、変更して下さい。

メニューの管理

テンプレートファイルへの記述が終わったら、WordPressのメニュー管理画面から「新規メニューを作成」に進み、「メニューの名前」に wp_nav_menu で設定した menu のパラーメータ名(今回の例は ‘footer-nav’ )を入力し、「メニューを作成」ボタンをクリックします。

how-to-add-a-side-by-side-navigation-menu-in-wordpress-01

新規メニューが作成できたら、固定ページやリンク、カテゴリーからメニュー構造を編集し、メニューを保存します。

how-to-add-a-side-by-side-navigation-menu-in-wordpress-02

メニューのセンタリングと横並び

wp_nav_menu はデフォルトで以下のようなHMTLを出力します。

<div><ul>
  <li><a href="http://gratife.com/about/">About</a></li>
  <li><a href="http://gratife.com/privacy/">Privacy Policy</a></li>
  <li><a href="http://gratife.com/contact/">Contact</a></li>
</ul></div>

※)上記のHTMLコードでは、idやclassを省略しています。

how-to-add-a-side-by-side-navigation-menu-in-wordpress-03

フッターに設置してみましたが、このままだと見栄えが悪いので、センタリングとリストの横並びを実現したいと思います。

テンプレートファイルの記述

出力される属性にはメニューの名前にちなんだ固有の属性名が適用されますが、メニューの名前を変更するとid属性名も変わってしまいます。これではメニューの名前を変更するたびにCSSのid属性名も変更しなければならず、メンテナンス性が悪くなります。

そこで、あらかじめ、固有のid属性名を持たせたdiv要素でメニューを出力させるように wp_nav_menu のパラメータを変更します。

<?php wp_nav_menu( array('menu' => 'footer-nav', 'container_id' => 'footer-nav' )); ?>

container_id パラメータで、ulをラップするdivコンテナにid属性(こここでは footer-nav というid属性名)を適用させています。

CSSの記述

#footer-nav {
    position: relative;
    overflow: hidden;
}

#footer-nav ul {
    position: relative;
    left: 50%;
    float: left;
}

#footer-nav li {
    position: relative;
    left: -50%;
    float: left;
}

how-to-add-a-side-by-side-navigation-menu-in-wordpress-04

floatでli要素を横並びにしているのですが、float: left; を指定するだけでは、センタリングされません。

そこで、floatで並べたリストのセンタリング – Weblog – Hail2u.netを参考に、ul要素を右に50%移動、li要素を左に50%移動させ、センタリングを実現しています。

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)