メニュー未対応テーマにメニューを表示させる方法[初心者向け]

公開：2019.09.24 更新：2020.06.16

こんにちは、いつものらいどらです。

サイトに1つは欲しいメニュー（グローバルナビ）。既存のテーマを利用しているとなかなか気づけないですが、ワードプレスを使えばメニューもすぐ使える！というわけではありません。

今回はそんな、メニューに対応していないテーマにメニューを表示させる方法について説明していこうと思います。

各ファイルへの書き足し

メニューに対応しているテーマならば、ダッシュボード上でちょこっといじるだけでメニューを表示できてしまいます。

下のような画面が表示されます。メニューを表示させる～というような解説記事では、下のような画面からメニューをONにする！みたいなことしか書いてありませんよね。

ですが、メニュー未対応のテーマではそもそもこのような画面は存在しません。

なぜ、最初から対応している設定になっていないのかと言うと、WordPressに搭載可能な機能は数が多すぎるからです。

最初から搭載可能な機能が全部画面に出てしまったら、初心者が困惑してしまいますよね？そういう意味があって、ほとんどの機能は初期状態ではOFFになっています。

これをONにするには、テーマを形作るファイルにコードを書き足します。

プログラム！？じゃあいいや…..と諦めなくても大丈夫です（笑）。WordPressはメニューを初期非表示にしやがりましたが、その分ごくごく少量のコードだけでテーマをメニューに対応させることが出来るように作られています。

もちろん解説もしますが、コピペだけでも動くように書いていきますので、ぜひ参考にしてみてください。

function.phpへの追記

まずは、メニュー機能をONにさせるために[function.php]に追記をしていきます。

知らない方のために補足をしておくと、function.phpはそのテーマで使う機能の仕組みが書かれています。ここを壊すのは人間でいう脳を壊すぐらいやべーことなので気を付けてください。

そのため、見づらく編集しにくいWordPress内での直接編集はおすすめしません。FTPなどを使ってダウンロードした上できちんとバックアップしてから作業に入ることをおすすめします。

と、少々脅しが過ぎますが追記する文は簡単です。

$param =  array(
  'globalnav' => 'グローバルナビ',
  'footernav' => 'フッターメニュー'
);

register_nav_menus($param);

初心者だと全く意味が分からないと思うので、解説していきます。

まず、先ほどメニューを表示させる追記文は少量で大丈夫と言いましたが、この理由はメニューを表示させるのに必要なコードは既にWordpress本体に入っているからです。

ん？と思った方も多いと思います。そうです。メニューを表示させる機能は入っているけれど、実際にメニューを使うにはファイルにコードを書き足さなければならないという事です。ツンデレですね。

ですが、ツンデレなので追記するコードは、眠っている機能の扉を開けるパスワードのようにちょこっとだけでOKです。

そのパスワード的なコードが最終行の[register_nav_menus($param);]です。

register_nav_menusがテンプレートタグ（関数）で、paramが引数になります。

この引数によって表示させるメニューが変わります。今回はglobalnavとfooternav（サイト内の上表示と下表示）を利用したいので、register_nav_menusを実行する前に変数paramを用意して、その中に配列機能であるarrayを使って二種のメニューを記述、その後引数にparamを指定し実行、という手順になります。

これでメニュー機能の有効化は出来たと思います。あともう一息！

実際に表示させる箇所への追記

function.phpへの追記で、メニュー機能は有効化されましたが実用化するためには、実際にメニューを表示させる箇所へのコード追記も必要です。

ここではglovalnav（上に表示するメニュー）を表示させる例としてコードを書いていきます。

追記するコードは以下の通りです。

<?php
    $param = array(
      'container' =>'nav',
      'container_id' =>'navtag',
      'theme_location' => 'globalnav',
    );
    wp_nav_menu($param);
?>

function.phpにより少し難しくなりましたが、これにも配列が使われています。

変数paramの中に三つのデータを入れています。

containerは恐らくメニューの種類（ここだけ自信ないです。）container_idには表示するに付けたいid属性の名前を入れてください。theme_locationにはその場所に表示するメニューを入れます。ここでは、先ほどfunction.phpに記述したglobalnavを指定しています。

これを書いているのは上方メニューを表示させる箇所という設定ですので、「ここに表示させるのはglovalnavね！」という意味になります。下方メニューの場合は theme_location にfooternavと記述しましょう。

最後の[wp_nav_menu($param);]はこの場所にデータ:paramを使ってメニューを表示させてください、という意味です。

参考までに私が使っているフッターメニュー用のコードは以下となります。

<?php
    $param = array(
      'container' =>'nav',
      'container_id' =>'undernav',
      'theme_location' => 'footernav',
    );
    wp_nav_menu($param);
?>

これで完了になります！！ ダッシュボードに戻ればメニューが使えるようになっているはずです。

まとめ

今回はWordPressでのメニュー開発に絞って話をまとめてみました。

ワードプレスでの機能開発は最初こそ難しく感じますが、時間が経つと調べることも楽しみに変わってきます。

私も最初はPHP意味が分からな過ぎて、初めた頃萎えまくってましたが何回もファイルを開いてるうちにそこそこ意味も分かってきて、今では少しは楽しくなりました。

つまり、そういうことだ（意味不）。いろいろ頑張りましょう！

それでは。

関連する記事

if文を使ってカテゴリーごとに別途処理をする方法 [WordPress]独自テーマにコメント欄を表示させる方法[初心者向け] Sidebar.phpを完成させる・ページごとに違うサイドバーを表示する ページに上部スクロールボタンを追加する方法