こんにちは。fsです。
WordPressテーマ開発シリーズの続きです。
今回はメニュー（ナビゲーションバー）をつくっていきます。
仕上がりはこんなイメージです。
画面右上にメニューが表示できるようにしていきます。
前回同様にコードを共有しながら進めていきますので、初心者の方も安心して読み進めていただければと思います。
それではご覧ください。
メニューをつくる
それでは実際にメニューを作っていきましょう。
機能の実装
WordPressの初期状態では、メニューをカスタマイズできないので、まず機能を実装していきます。
機能を追加するファイルであるfunctions.phpに追記をしていきます。
アイキャッチ画像を入れる記述の中にナビケーションメニューを登録する命令を書きます。
後でメニューを追加できるように配列(データの塊)にしておくと良いです。
配列の中にはキー（gloval_nav）と値（グローバルナビ）していきます。
これでWordpress内でメニューを作成する機能ができました。
メニューの作成
管理画面に戻って確認するとメニューをカスタマイズできるようになっています。
クリックしてメニュー編集画面に進むと、ちゃんと”グローバルナビ”というメニューができています。
作成をクリックして、項目を追加していきます。
まずはホームメニューを追加します。
カスタムリンクをクリックし、URLはスラッシュ、リンク文字列は”ホーム”とします。
次にこれまで作った固定ページ（Aboutページやお問い合わせページ）を追加していきます。
これでメニューができたので、保存して完了です。
メニューを表示
メニューができたので、あとは実際のレイアウトに反映させていきます。
まずはテンプレートタグを用いながらメニューの内容を取得していきます。
メニュー内容の取得
手順としては以下のとおりです。
- functions.phpで設定したメニューのキー（ここではglobal_nav）を変数（データの箱）に入れる
- メニューが使用されている場所（location）を取得する
- １と2をデータの塊（object）として取得する
- メニューのobjectのIDを取得する
この流れで各メニューの内容を取得していきます。
これはメニューを表示させる前の決まり文句のようなものなので、深く考えなくてもOKです。
表示処理
メニューの内容が取得できたので、あとは表示する処理をすればOKです。
複数の項目（今回はホーム、About、お問い合わせ）があるので繰り返し処理をする命令（foreach）を使います。
foreachの後は、表示のさせたいデータ（ここではmenu-items）の複数形as単数形を括弧で囲み、endforeahで閉じます。
これで繰り返し処理を行うエリアができたので、後はechoでメニューの項目とリンクを出力して完了です。
メニュー内容取得の処理でobjectができたので、表示させたい項目を矢印で指定することができます。
さらにセキュリティを確保するため（第三者が危険なプログラムを仕込むのを防ぐ）、こちらをエスケープ処理で囲っておきます。
ブラウザで読み込んでみると、ちゃんと表示されています。
後は動作確認をして問題なければ完了です。
まとめ
いかがだったでしょうか。
今回はメニュー（ナビゲーションバー）をつくりながら、
データを取得し、繰り返し処理で各項目を出力する
というをプログラムを実践していきました。
今回はWordpressでシンプルなメニューをつくっただけですが、このプログラムはLaravelなどのフレームワークを使うときにも応用ができます（SNSで投稿を表示させるときなど）。
慣れるまでは少し複雑ではありますが、こちらも覚えておくと便利です😌
以上、少しでも参考になれば幸いです。
最後までお読みいただきありがとうございました。
Macでプログラミングを始めてみよう！
コメント