WordPressでメニュー(ナビゲーションバー)をつくる

Wordpress

こんにちは。fsです。
WordPressテーマ開発シリーズの続きです。

今回はメニュー(ナビゲーションバー)をつくっていきます。
仕上がりはこんなイメージです。

ウェブサイトのメニューを表示させていきます

画面右上にメニューが表示できるようにしていきます。

前回同様にコードを共有しながら進めていきますので、初心者の方も安心して読み進めていただければと思います。
それではご覧ください。

メニューをつくる

それでは実際にメニューを作っていきましょう。

機能の実装

WordPressの初期状態では、メニューをカスタマイズできないので、まず機能を実装していきます。
機能を追加するファイルであるfunctions.phpに追記をしていきます。

アイキャッチ画像を入れる記述の中にナビケーションメニューを登録する命令を書きます。
後でメニューを追加できるように配列(データの塊)にしておくと良いです。
配列の中にはキー(gloval_nav)と値(グローバルナビ)していきます。

このように書きます

これでWordpress内でメニューを作成する機能ができました。

メニューの作成

管理画面に戻って確認するとメニューをカスタマイズできるようになっています。

これでメニューを作れます

クリックしてメニュー編集画面に進むと、ちゃんと”グローバルナビ”というメニューができています。

ちゃんとメニューができていますね

作成をクリックして、項目を追加していきます。
まずはホームメニューを追加します。

カスタムリンクをクリックし、URLはスラッシュ、リンク文字列は”ホーム”とします。

このように書けばOKです

次にこれまで作った固定ページ(Aboutページやお問い合わせページ)を追加していきます。

チェックして追加をクリック

これでメニューができたので、保存して完了です。

追加が確認できたら保存します

メニューを表示

メニューができたので、あとは実際のレイアウトに反映させていきます。
まずはテンプレートタグを用いながらメニューの内容を取得していきます。

メニュー内容の取得

手順としては以下のとおりです。

  1. functions.phpで設定したメニューのキー(ここではglobal_nav)を変数(データの箱)に入れる
  2. メニューが使用されている場所(location)を取得する
  3. 1と2をデータの塊(object)として取得する
  4. メニューのobjectのIDを取得する

この流れで各メニューの内容を取得していきます。

このように書きます

これはメニューを表示させる前の決まり文句のようなものなので、深く考えなくてもOKです。

表示処理

メニューの内容が取得できたので、あとは表示する処理をすればOKです。
複数の項目(今回はホーム、About、お問い合わせ)があるので繰り返し処理をする命令(foreach)を使います。

foreachの後は、表示のさせたいデータ(ここではmenu-items)の複数形as単数形を括弧で囲み、endforeahで閉じます。

これで繰り返し処理を行うエリアができたので、後はechoでメニューの項目とリンクを出力して完了です。
メニュー内容取得の処理でobjectができたので、表示させたい項目を矢印で指定することができます。

このように書きます

さらにセキュリティを確保するため(第三者が危険なプログラムを仕込むのを防ぐ)、こちらをエスケープ処理で囲っておきます。

エスケープ処理でセキュリティ対策をしておきます

ブラウザで読み込んでみると、ちゃんと表示されています。

ちゃんとメニューの表示ができていますね

後は動作確認をして問題なければ完了です。

まとめ

いかがだったでしょうか。

今回はメニュー(ナビゲーションバー)をつくりながら、

データを取得し、繰り返し処理で各項目を出力する

というをプログラムを実践していきました。

今回はWordpressでシンプルなメニューをつくっただけですが、このプログラムはLaravelなどのフレームワークを使うときにも応用ができます(SNSで投稿を表示させるときなど)。

慣れるまでは少し複雑ではありますが、こちらも覚えておくと便利です😌

以上、少しでも参考になれば幸いです。
最後までお読みいただきありがとうございました。

Macでプログラミングを始めてみよう!

この投稿は役に立ちましたか? 役に立った 役に立たなかった 6 人中 5 人がこの 投稿 は役に立ったと言っています。

コメント

海外ブログバナー

にほんブログ村 海外生活ブログへ

海外ブログバナー

にほんブログ村 海外生活ブログへ

シンガポールの古本屋さん

タイトルとURLをコピーしました