ウェブログ

[WordPress]管理画面から追加更新ができるメニューの作成方法


管理画面から自由に追加更新ができるメニュー、「カスタムナビゲーションメニュー」の作成方法をご紹介します。

メニュー作成の流れ

functions.phpを作成

テーマフォルダ内にfunctions.phpを作成します。(すでにある場合はOK)
作成したら、以下のphp文を追加します。

これで管理画面の外観内に「メニュー」という項目が増えました。

custom_menu

※functions.phpはphpファイルのため、上記コードの前後に<?php 〜 ?>の追加を忘れないように

管理画面から設定

先ほど出来た、Wordpress管理画面内のメニュー項目の設定をしていきます。

メニューの名前を入力し、「作成」をクリックします。
custom_flow1
そして次の画面でメニューをどのようにしていくか決めます。

custom_flow2
左の枠内から
・固定ページへのメニューリンク
・独自に指定するリンクへのメニューリンク
・カテゴリーへのメニューリンク
を選びます。
固定ページ、カテゴリーへ飛ばしたい場合はそれぞれ選択し、テキストを入力。
どこか別サイトに飛ばしたい場合などは「リンク」を選択し、遷移するサイトのURLを入力という感じです。

表示したい箇所にWordpressテンプレートタグを入力

表示したい箇所(例:header.php等)に直接以下のコードを入力します。

wp nav menuはカスタムメニューを表示させるためのテンプレートタグです。
上記の場合、「gMenu」というカスタムメニューを表示するので、先ほど設定した名前に変更してご自身のファイルへ貼り付けてください。

このままだと以下のように生成され、

<div>
<ul>
<li><a href=””>メニューで設定したリンクテキスト</a></li>
</ul>
</div>

このように先頭にdivが入ってしまいます。例えばこれを不要にし、自動的に生成されるulに固有のid名[gMenu]をつけたい場合は

このように設定します。
そうすると以下のように。

<ul id=”gMenu”>
<li><a href=””></a></li>
</ul>

まとめ

wp_nav_menuは他にも様々なパラメータあり設定できます。詳しくはマニュアルをご覧ください。
テンプレートタグ/wp nav menu – WordPress Codex 日本語版

カスタムメニュー、よくある使い方としてはクライアントへ納品する際に管理画面からグローバルメニュー、サイドバーへリンク追加などすべてクライアント側で修正できるようにすることができます。こういった使い方があればわざわざ更新の依頼をしなくても自社でウェブ担当者が更新というのは簡単にできるようになりますね。

この記事を書いた人

池田祐太郎

池田祐太郎

WordPress好きの池田です。Webの仕事の前はライブハウスでブッキングや音響をしてました。PHP, JavaScriptを自由に操りたいと思いつつ、つい訪れたサイトのソースコードを見てしまいます。


CONTACTお問い合わせ / お見積もり