WordPressで メニューを作成します。
①外観 > メニュー を開き、「新しいメニューを作成しましょう」をクリックします。
②メニュー名を入れて「メニューを作成」します。「Menu_Sample」で作成してみます。
③作成した「Menu_Sample」を選択します。公開されている固定ページが一覧に表示されますので、チェックを入れて、「メニューに追加」します。
④メニューの配置を整えて「メニューを保存」します。ここでは、App Sample-1 から3 を App Sample のサブ項目にしました。
⑤各メニューラベルは「固定ページ▲」をクリックして、実際の表示ラベルを調整できます。
WordPressでメニューの準備ができたら、次にEssential Addonsでヘッダーを作成します。
Elementorでは、有償版のElementor Proにしかヘッダーのウィジェットがないので、Essential Addonsというプラグインを追加します。Essential Addonsでは、無償版でもヘッダーのウィジェットが提供されています。
①プラグインの「Essential Addons」をインストールします。WordPress の プラグイン > プラグインを追加 から検索して、インストール、有効化します。
②ヘッダーを追加する固定ページを「Elementorで編集」で開きます。すると、Essential Addons のウィジェットが選択できるようになっています。
③Essential Addons の「Simple Menu」を追加します。
④Content>Select Menu で作成済みの「Menu_Sample」を選択すれば、すぐにメニューラベルが反映されます。
⑤表示幅が狭い場合は、三本線マーク（ハンバーガーメニュー）が表示され、メニューが縦表示になります。メニュー表示の切り替えは以下で調整します。
⑥メニューの色は以下で調整します。
⑦メニューの色は、通常時、カーソルをかざした時、クリックした時で、それぞれ、Default、Hover、Activeで背景色と文字色を設定できます。
⑧Flexboxで事前にコンテナを作成して、コンテナにメニューを追加すれば、同じ並びにアイコンなども追加できます。
⑨以下のようになれば、メニューバーの完成です。
⑩作成したメニューバーは、セクションの６点マークを右クリックして、コピーして他のページにペーストしたり、テンプレートとして保存して使い回しできます。このあと作成するフッターも同様です。
①Flexboxでコンテナを複数作成します。
②About us、Quick Link、Contact Info、Newsletter など、表示させたい情報を記載します。以下はElementorで利用できるサンプルテンプレートです。参考にしてみてください。
①Copyright を追加します。
②コンテナを追加し、背景を黒色にします。
③テキストを追加します。
「Copyright 2025 © HogeHoge Cafe. All Rights Reserved.」
④テキストを以下で設定します。
⑤以下のようになれば、フッターのCopyrightも完成です。
※Elementor Pro（有償版）であれば、「2025」も自動更新の設定ができますが、Elementor（無償版）を利用ですので、この部分は年が変われば自分で書き換えます。
