メニュー未対応テーマにメニューを表示させる方法[初心者向け]
公開: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引数になります。

この引数によって表示させるメニューが変わります。今回はglobalnavfooternav(サイト内の上表示と下表示)を利用したいので、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_locationfooternavと記述しましょう。

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

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

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

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

まとめ

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

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

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

つまり、そういうことだ(意味不)。いろいろ頑張りましょう!

それでは。

おすすめ商品

一から勉強する際に使った教材

持っていると便利なHTML&CSS辞典

コメント

内容をご確認の上、送信してください。