WordPressのプラグイン「Elementor（エレメンター）」の無償版では、ヘッダー・フッターを作る場合には、プラグイン「Elementor Header & Footer Builder」を使えば無料で作ることが出来ますが、有償版であるElementor Proを使うことで、ヘッダー・フッターをストレスなく作成することが可能になります。
無料版でヘッダー・フッターを作成するプラグイン「Elementor Header & Footer Builder」については以下の記事にて取り上げています。
[clink url="https://recross.co.jp/elementor_header_footer_free_make/"]
| ※この記事は、Elementor Proがインストール・有効化されている前提で進めていきます。 |
ヘッダーを作ってみる
ワードプレスの管理画面から「テンプレート＞新規追加」を選択します。
選択後「NEW TEMPLATE」というポップアップが出現します。
ポップアップが出たら、「テンプレートの種類を選択」していきます。
まずは「作業を行いたいテンプレートの種類を選択」から適切なものを選択します。今回はヘッダーを作っていきますので、「Header」を選択します。
「テンプレートに名前をつける」に任意の名前をつけて、「テンプレートを作成」を選択します。
作成されると、ポップアップ「ライブラリ」が出てきますので、テンプレートを使用したい場合には、選んで進んでいきましょう。
テンプレートを使用しない場合は、右上の閉じるを選択します。
ライブラリ（テンプレート）の画面を再度開きたい場合は、フォルダのマークを選択することで「ライブラリ」をいつでも出すことが可能です。
Elementor Proのテンプレートからカスタムしてみる
自身でゼロから作ってもいいのですが、今回はテンプレートからカスタムをしてみます。
好きなテンプレートを選んで「挿入」をしてみましょう。
※テンプレートをクリックすると拡大表示がされます。
図の様に選んだテンプレートが挿入されることが分かります。
あとは、通常のエレメンターと一緒ですので、色々カスタマイズ・操作をしていきましょう。
カスタムできたら「公開」してみましょう。
「公開」すると「PUBLISH SETTINGS」というポップアップが現れます。
このポップアップは、ヘッダーの仕様される場所を決定する条件設定になります。
「ADD CONDITION」で条件を追加していきましょう。
ここで「Entire Site」を選択すれば、サイト全体に適用がされます。
右下の「SAVE ＆ CLOSE」で保存していきます。
無事保存できたら、サイトを見てみましょう。
先程作ったヘッダーが表示されていることが分かります。
| ※フッターも同じ要領で作成が可能です。 |
さいごに
このように簡単にヘッダー・フッターをはじめ、サイトのテンプレートを作っていくことが可能です。
無料でヘッダー・フッターを作成するプラグイン「Elementor Header & Footer Builder」でもほぼ同等のことはできますが、有償のPro版ではテンプレートを流用しカスタムがしていけますので、想定しているサイトイメージに近いものを選んで、カスタマイズをかけていった方が、私は早く作業が出来る感じがしています。
ロゴなどでSVG形式ファイルを使用する場合は、WordPressへSVGのアップロードを可能にする「SVG Support」や「Safe SVG」などのプラグインを使用してください。「SVG Support」については以下の記事でも取り上げています。
[clink url="https://recross.co.jp/svg-support/"]