🦒
【WordPress】カスタムメニューの設定方法 ③メニューを動的に表示する
作成日:
2021/07/06
1
header.phpのソースコード(before)
<header class="l-header">
<div class="l-header__inner">
<div class="p-header">
<h1 class="p-header__logo"><a href="#" class="c-logo">Logo</a></h1>
<nav class="p-header__nav p-globalNav">
<!-- <ul class="p-globalNav__items">~</ul>までを書き換える -->
<ul class="p-globalNav__items">
<li class="p-globalNav__item"><a href="#a-menu1" class="p-globalNav__link">Menu1</a></li>
<li class="p-globalNav__item"><a href="#a-menu2" class="p-globalNav__link">Menu2</a></li>
<li class="p-globalNav__item"><a href="#a-menu3" class="p-globalNav__link">Menu3</a></li>
<li class="p-globalNav__item"><a href="#a-menu4" class="p-globalNav__link">Menu4</a></li>
<li class="p-globalNav__item"><a href="#a-menu5" class="p-globalNav__link">Menu5</a></li>
</ul><!-- /.p-globalNav__items -->
</nav><!-- /.p-header__nav -->
</div><!-- /.p-header -->
</div><!-- /.l-header__inner -->
</header><!-- /.l-header -->
<div class="p-hamburger">
<div class="p-hamburger__bars">
<span class="p-hamburger__bar p-hamburger__bar--top"></span>
<span class="p-hamburger__bar p-hamburger__bar--middle"></span>
<span class="p-hamburger__bar p-hamburger__bar--bottom"></span>
</div><!-- /.p-hamburger__bars -->
<div class="p-hamburger__label"></div>
</div><!-- /.p-hamburger -->
<div class="p-drawer">
<!-- <div class="p-drawer__nav p-spNav">~</div>までを書き換える -->
<div class="p-drawer__nav p-spNav">
<ul class="p-spNav__items">
<li class="p-spNav__item"><a href="#a-menu1" class="p-spNav__link">Menu1</a></li>
<li class="p-spNav__item"><a href="#a-menu2" class="p-spNav__link">Menu2</a></li>
<li class="p-spNav__item"><a href="#a-menu3" class="p-spNav__link">Menu3</a></li>
<li class="p-spNav__item"><a href="#a-menu4" class="p-spNav__link">Menu4</a></li>
<li class="p-spNav__item"><a href="#a-menu5" class="p-spNav__link">Menu5</a></li>
</ul><!-- /.p-spNav__items -->
</div><!-- /.p-spNav -->
</div><!-- /.p-drawer -->
header.phpのソースコード(after)
<header class="l-header">
<div class="l-header__inner">
<div class="p-header">
<h1 class="p-header__logo"><a href="#" class="c-logo">Logo</a></h1>
<nav class="p-header__nav p-globalNav">
<?php
wp_nav_menu(
array(
'depth' => 1, // メニュー階層の深さを設定。1は最上位のページのみに表示
'theme_location' => 'global', // functions.phpに登録したメニューの表示位置を設定
'container' => false, // ulタグをnavタグもしくはdivタグで囲むかどうかを設定。falseは何も囲まない
'menu_class' => 'p-globalNav__items', // ulタグに付けるクラス名を設定
)
);
?>
</nav><!-- /.p-header__nav -->
</div><!-- /.p-header -->
</div><!-- /.l-header__inner -->
</header><!-- /.l-header -->
~途中省略~
<div class="p-drawer">
<?php
wp_nav_menu(
array(
'depth' => 1,
'theme_location' => 'drawer',
'container' => 'div'
'container_class' => 'p-drawer__nav p-spNav', // ulタグを囲むタグに対して付けるクラス名を設定
'menu_class' => 'p-spNav__items',
)
);
?>
</div><!-- /.p-drawer -->
注意事項
- コードの書き換え前に、liタグに対してp-globalNav__itemやp-spNav__itemのように独自のクラス名を付与した場合、以下の参考記事のやり方を用いる
31歳/福岡在住/現在統合失調症の治療中/高卒後に通った予備校で人間関係に苦しむ▶大学を6年かけて卒業▶自分の力で稼ぎたい思いで投資を始めるも挫折▶けんすうさんのnoteを読みWeb制作の学習開始/日々の学習内容を発信します😌