WordPressのカスタムメニューで出力されるulやliに任意のクラスを追加する方法

WordPressのカスタムメニューで出力されるulやliに任意のクラスを追加する方法

WordPressのカスタムメニューで出力されるulやliに任意のクラスを追加する方法

WordPressでテーマ内にカスタムメニューを出力したい時は、wp_nav_menu関数を使用します。wp_nav_menu()を記述した場所には、以下のような感じのメニューが出力されます。


<div class="container">
 <ul id="menu-xxx" class="menu">
 <li id="menu-item-1" class="menu-item menu-item-1">Menu1</li>
 <li id="menu-item-2" class="menu-item menu-item-2">Menu2</li>
 </ul>
</div>

ul要素にはmenu、li要素にはmenu-itemなどのクラスが付与されます。これらのクラスに任意のものを追加する方法についてご紹介したいと思います。

スポンサードリンク

カスタムメニューで出力されるul要素に任意のクラスを追加する方法

まず、ul要素については、以下のようにパラメータを指定することでクラスを追加します。

<?php wp_nav_menu( array( 'menu_class' => 'クラス名' ) ); ?>

「クラス名」のところに任意のクラスを指定します。

ちなみに、wp_nav_menu関数には、以下のパラメータが用意されています。クラス以外にも指定したいパラメータがあったら、arrayの中にカンマ区切りで指定してあげます。

$theme_location テーマの中で使われる位置
$container ul要素を内包するタグ。初期値:div
$container_class ul要素を内包するコンテナに付与するクラス
$container_id ul要素を内包するコンテナに付与するID
$menu_class ul要素に追加するクラス
$menu_id ul要素に追加するID
$echo メニューをHTML出力する(true)か、PHPの値で返す(false)か。初期値:true
$fallback_cb メニューが存在しない時にコールバック関数を呼び出す。初期値:wp_page_menu
$before リンクテキストの前に入れるテキスト
$after リンクテキストの後ろに入れるテキスト
$link_before リンク(a要素)の前に入れるテキスト
$link_after リンク(a要素)の後ろに入れるテキスト
$depth メニューを何階層まで表示するか。初期値:0(全階層)

詳しくは、Codexをご確認ください。

カスタムメニューで出力されるli要素に任意のクラスを追加する方法

li要素にクラスを追加する方法は簡単です。

管理画面で[外観] – [メニュー]にアクセスして、表示オプションを開きます。表示オプションの中から、「CSSクラス」にチェックを入れます。

CSSクラス

そうすると、追加したメニューのオプションとして、「CSS class」が表示されるようになります。CSS classに追加したいクラスを入力して、[メニューを保存]をクリックします。

CSS class

これでli要素に任意のクラスが追加されます。

あとがき

カスタムメニューで出力されるli要素に連番のクラスを追加したい場合は、こちらの記事をご参照ください。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です