Loading...

Single Post

HOME > post > WordPress > カスタムメニューの設定と設置方法

カスタムメニューの設定と設置方法

| WordPress
カスタムメニュー

WordPressサイトを制作するとき、利用頻度の高い機能の1つにカスタムメニュー機能があります。クライアント様が、固定ページを制作されメニューを追加されるまでの工程で難しいプログラミングなどを使用する必要無く利用できて重宝しております。

まず最初に、カスタムメニューを使えるようにする為に、functions.phpに下記を記載します。

[php]
//カスタムメニュー
register_nav_menu(‘mainmenu’, ‘メインメニュー’);
[/php]

次にメニューを表示したい場所に下記を記載します。

[php]
<?php wp_nav_menu(array(
‘theme_location’ => ‘mainmenu’,
‘container’ => ‘nav’,
‘container_class’ => ‘tm-nav’,
‘menu_class’ => ‘tm-menu tm-menu-simple’,
));
?>
[/php]

上記を記載後カスタムメニューの設定をしていただき、出力されたコードを確認すると下記の様になっております。

[html]
<nav class="tm-nav">
<ul id="menu-tm-nav" class="tm-menu tm-menu-simple">
<li id="menu-item-38" class="menu-item current-menu-item"><a href="#">HOME</a></li>
<li id="menu-item-41" class="menu-item"><a href="#">ABOUT</a></li>
<li id="menu-item-53" class="menu-item"><a href="#">PRICE</a></li>
<li id="menu-item-40" class="menu-item"><a href="#">POST</a></li>
<li id="menu-item-54" class="menu-item"><a href="#">CONTACT</a></li>
</ul>
</nav>
[/html]

まとめ

数年前にWordPressを使い始めた時に、グローバルナビゲーションをカスタムする時にかなり悩んだので、この記事を記載させて頂きました。同じようにナビゲーションで悩まれている方のお役に立てると幸いです。

関連記事

Contact Page