前回の記事では、ウィジェットの簡単な設定方法についてメモしました。
今回はNeveというテーマのフッター部分を、ウィジェット機能とフッタービルダー機能を使用して作ってみましたのでメモしていきたいと思います。
1.フッタービルダーを起動する。
カスタマイズ画面を開き、「フッター」を選びます。
すると、フッター編集レイアウトに切り替わります。
フッターも、最大3段組みにすることができます。これはヘッダーと同じですね。今回は「フッター上」(上段)をメインに使用します。
2.フッターに表示する要素を決定する。
まず中身から作っていきましょう。上の図の左側の内容を作ります。
・ロゴ
・住所
・電話番号
ですね。
フッタービルダーの上段、一番左の列に「フッター1」を追加します。
もともと表示されていない場合は、フッタービルダーの空欄をクリック > フッター1を選択します。
(下図はフッター4と書いてありますが、こんな感じで選択)
追加したら、「フッター1」の歯車マークをクリックします。すると、フッター編集画面に移ります。ブロックエディタみたいな形式で、表示する内容を選択できます。
上の図では、
・画像ブロック(ロゴを表示する用。何も見えないけど、ロゴが白いからです笑)
・段落ブロック(住所)
・カスタムHTMLブロック(電話番号。数字だけCSSで大きくするため)
で構成されています。上の図のような感じで設定します。
ちなみにこのフッター1は、ウィジェット画面で編集できます。Neveのフッタービルダーでは、ウィジェットをフッタービルダーでフッターに表示でき、その位置を自由に変えられる仕組みになっているようですね。
3.レイアウトを決定する。
今回は下記のような設定をしています。
レイアウト・・・全幅-含まれる(翻訳がおかしいのだと思います笑これを設定すると、背景は全幅になりますが、要素が固定幅となります。)
列の数・・・3つ
列のレイアウト・・・お好きにどうぞ(笑)
4.スタイルを決定する。
基本的には余計な設定はせず、文字色と背景の色だけ調整しました。行の高さは0にしていますが、フッターの中の要素を追加すると、その分だけ自動で幅がとられるので気にしなくていいです。
いろいろCSSで調整してはいますが、おおむね下の感じで表示されればOKです。
まとめ
フッタービルダー、ヘッダービルダーともに3段組にまでで切るという共通点がありますが、
フッターに表示する内容はブロックエディタで編集できるという便利な点がありますね。(これは、WordPressがバージョンアップしてウィジェットをブロックエディタで編集できるようになったことと、Neveのフッタービルダーの機能が合わさってできている。)
いろんなフッターを、このフッタービルダーを使用して効率よく作ってみたいところですね。
みなさまのホームページやイメージがよくなるお手伝いをいたします。
ヘッダー画像、バナー画像、ロゴ、WordPressデザインなどお気軽にご相談ください!
WordPressデザインサービスは以下から承っております。