WordPress

【WordPressワードプレス】カスタムメニュー機能の使い方(add_theme_support)|初心者向けに解説

 

こんにちは、イケゾーです。

 

グローバルナビ、フッターナビなどの複数のメニューを、自由に作成し配置できる機能をお探しですか?

今回は、それを簡単に実現できるカスタムメニュー機能の使い方を解説します。メニューを作成し、ページ遷移まで設定してくれる基本的な機能です。ぜひマスターしてください。

 

この記事はこんな人におすすめ!

  • WordPressのカスタムメニュー機能の使い方を知りたい
  • headerとfooterに別々のメニューを配置したい
  • メニューにリンクを設置する方法を知りたい

 

 

ワードプレスおすすめ参考書
【WordPress(ワードプレス)初心者におすすめ本】「仕事の現場でサッと使える! デザイン教科書」のレビュー

続きを見る

当ブログでは、WordPressテーマ 「WING(AFFINGER5)」 を使用しています。

 

【WordPressワードプレス】カスタムメニュー機能の使い方(add_theme_support)

カスタムメニュー機能とは、管理画面でメニューの項目や順序を作成し、それをヘッダーやフッターで表示するといった機能です。

手順は、「functions.php」に決まり文句を記述し、管理画面でメニューを作成し、WP関数で表示をするといった流れになります。さらに、カスタムメニュー機能はページ間遷移も同時に設定されるので、最後にリンクの確認も忘れずにしましょう。

 

 

カスタムメニュー機能を有効にする

functions.php

下記のように記述し、WordPressに標準装備されているカスタムメニュー機能を有効化します。

add_theme_support('menus');

 

管理画面▶︎外観▶︎「メニュー」が表示されれば、カスタムメニュー機能が有効化されています。

 

管理画面でメニューを作成する

メニュー画面で、「global」メニューを作成していきます。

 

メニューの新規作成

管理画面▶︎外観▶︎メニューをクリックします。
メニュー名に「global」と入力し、「メニューを作成」をクリックします。

 

メニューの項目と順序の設定

固定ページの「最近」「すべてを表示」「検索」から、メニューに追加したいページを選択し、「メニューに追加」をクリックします。

画面右の「メニュー構造」に項目が移動したらOKです。この画面でメニューの順序を入れ替えることができます。

項目と順序を設定したら、右上の「メニューを保存」をクリックして保存します。

 

 

header.phpにメニューを表示する

header.php

下記のように記述し、WordPressに標準装備されているカスタムメニュー機能を有効化します。

<nav class="global-nav">
<?php
$args = array(
  'menu' => 'global',// 管理画面で作成したメニューの名前
  'container' => false,// ulタグを囲んでいるdivタグを削除
);
wp_nav_menu($args);
?>
</nav>

 

headerにメニューが表示され、各リンクがちゃんと機能しているか確認します。デザインが崩れてしまっている場合は、cssが上手く当たっていない場合があります。

ページのソースを表示して構造やclass名の確認をすると良いでしょう。下記のようになります。

<ul id="menu-global" class="menu">
  <li id="menu-item-2299" class=" "><a href="http://XXX/ikezooomall/" aria-current="page">ホーム</a></li>
  <li id="menu-item-2300" class=""><a href="http://XXX/ikezooomall/company/">企業情報</a></li>
  <li id="menu-item-2301" class=""><a href="http://XXX/ikezooomall/shop/">店舗情報</a></li>
  <li id="menu-item-2302" class=""><a href="http://XXX/ikezooomall/contribution/">地域貢献活動</a></li>
  <li id="menu-item-2304" class=""><a href="http://XXX/ikezooomall/category/news/">ニュースリリース</a></li>
  <li id="menu-item-2303" class=""><a href="http://XXX/ikezooomall/contact/">お問い合わせ</a></li>
</ul>

 

 

footerメニューを作成する場合は、同じようにメニューを作成し、「footer.php」にWP関数で表示をさせることができます。

 

ワードプレスおすすめ参考書
【WordPress(ワードプレス)初心者におすすめ本】「仕事の現場でサッと使える! デザイン教科書」のレビュー

続きを見る

 

まとめ

以上で、カスタムメニューの使い方を解説してきました。
ぜひ使いこなして最適なメニューを設置しましょう。

 

イケゾー
最後まで読んでいただき、ありがとうございました。
ご不明点やご意見は、コメントやTwitterにて、お寄せください 🙂
では、またお会いしましょう

  • この記事を書いた人

ikezooo

愛知県30歳のフリーランスエンジニア。 サイト制作とブログで生き抜く。 ブログでは、月10〜15万ほど稼いでいます。 SEO検定3級保有。

-WordPress