WordPressサイト構築?グローバルメニューを設定する?!

WordPressサイト グローバルメニュー 追加 編集 PeaCie Lightning WordPressサイト構築

前回までにユーザー参加型PCファンサイトをXserverのWordPress上で企業向け無料テーマ「Lightning」のクイックスタートを使ってプラグインやコンテンツも含めて雛形サイトを構築しましたが、今回はグローバルメニューを設定する方法を紹介?

はじめに

前回は、以下の記事でWordPressサイトのサイトアイコンロゴを、ブラウザーから使えるWebアプリ「Pixlr Editor」で作成する方法や、無料テーマ「Lightning」のカスタマイズ・メニューによるサイトデザインのカスタマイズ方法について紹介しています。

構築中のサイトの現状は以下です。

https%3A%2F%2Fpeacie - WordPressサイト構築?グローバルメニューを設定する?!
PeaCie
PCライフを楽しむユーザー参加型PCファンサイト
Screenshot 2020 03 04 at 11.34.39 1024x648 - WordPressサイト構築?グローバルメニューを設定する?!

今回は、ページトップに表示される「グローバルメニュー」を、管理画面メニュー「外観 > メニュー」からカスタマイズする方法を紹介します。

管理画面からグローバルメニューを編集

構築中のサイトの管理画面にログインします。

Screenshot 2020 03 04 at 11.38.41 1024x543 - WordPressサイト構築?グローバルメニューを設定する?!

左メニューの「外観 > メニュー」をクリック。

Screenshot 2020 03 04 at 11.39.49 - WordPressサイト構築?グローバルメニューを設定する?!
Screenshot 2020 03 04 at 11.40.37 1024x710 - WordPressサイト構築?グローバルメニューを設定する?!

Header Navigationを編集

編集するメニューを選択」メニューから「HeaderNavigation(…」をクリックし「選択」をクリック。

Screenshot 2020 03 04 at 11.41.55 - WordPressサイト構築?グローバルメニューを設定する?!
Screenshot 2020 03 04 at 11.42.44 - WordPressサイト構築?グローバルメニューを設定する?!

画面トップの「表示オプション」タブをクリック。

Screenshot 2020 03 04 at 11.47.02 - WordPressサイト構築?グローバルメニューを設定する?!

説明」にチェックを入れ、「表示オプション」を再度クリックしてタブを閉じます。

ホーム」の右端の下三角をクリック。

Screenshot 2020 03 04 at 11.49.21 - WordPressサイト構築?グローバルメニューを設定する?!

説明」の欄に「HOME」が入っているので、サイトメニューの「ホーム」の下に英語の「HOME」が表示されているのを確認します。

Screenshot 2020 03 04 at 11.52.17 - WordPressサイト構築?グローバルメニューを設定する?!

この「ホーム」ページは、雛形の固定ページにすでに用意されているので、右上に「固定ページ」と表示されています。「ホーム」はこのままにします。

ホーム以降のトップレベルメニューの名前を変える

サービス案内」の右端の下三角をクリック。

Screenshot 2020 03 04 at 11.57.16 - WordPressサイト構築?グローバルメニューを設定する?!

ナビゲーションラベル」を「サービス案内」から適当なメニュー名に変更します。

Screenshot 2020 03 04 at 12.00.36 - WordPressサイト構築?グローバルメニューを設定する?!

パネル右上の「メニューを保存」をクリック。

Screenshot 2020 03 04 at 12.01.18 - WordPressサイト構築?グローバルメニューを設定する?!
Screenshot 2020 03 04 at 12.02.40 - WordPressサイト構築?グローバルメニューを設定する?!

サイトを再読込してメニューを確認します。

Screenshot 2020 03 04 at 12.03.55 - WordPressサイト構築?グローバルメニューを設定する?!

子メニューを追加

ここにこのブログ「Chrome VR」へのリンクを追加してみます。

左側の「メニュー項目を追加」の「カスタムリンク」の右端の下三角をクリック。

Screenshot 2020 03 04 at 12.05.47 - WordPressサイト構築?グローバルメニューを設定する?!
Screenshot 2020 03 04 at 12.07.59 - WordPressサイト構築?グローバルメニューを設定する?!

URL」と「リンク文字列」を入力して「メニューに追加」をクリック。

Screenshot 2020 03 04 at 12.11.25 - WordPressサイト構築?グローバルメニューを設定する?!

メニュー構造」の一番下に追加されるので、右端の下三角をクリックして、必要なら「説明」にコメントを入力し、右上の上三角をクリックして閉じます。

追加したリンクをマウスドラッグして、「リンク」メニューの子メニューまで移動します。

Screenshot 2020 03 04 at 12.18.19 - WordPressサイト構築?グローバルメニューを設定する?!

インデントによりメニューの階層化ができます。

右上の「メニューを保存」をクリックし、サイトを再読込して追加したメニューを確認し、クリックしてみます。

Screenshot 2020 03 04 at 12.22.21 - WordPressサイト構築?グローバルメニューを設定する?!

子メニューには「Lightning」の雛形サイトでは「説明」は表示されません

Screenshot 2020 03 04 at 12.24.05 1024x567 - WordPressサイト構築?グローバルメニューを設定する?!

今回はここまでとします。

グローバルメニューを子メニューも含めてすべてを考えて用意してから、それに従ってコンテンツを揃えるというのがセオリーのような気もします。

しかし、私の場合は、コンテンツを用意しながら、それに応じてメニューを追加/編集するという方法を取っています。

「走りながら、考える」

まとめ

今回は、構築中のサイトのグローバルメニューの追加/編集方法について紹介しました。

メニューを考えると、サイト全体をどのように構築していくか?について、ある程度整理して考えられるので、コンテンツの用意と並行してメニューを考えると良いと思います。

次回は、トップページのデザインを整える方法について紹介したいと思います。

ではでは、きらやん

(Visited 10 times, 1 visits today)

コメント