WordPressテーマ”Astra3.0"を使ったサイト作成の記録
フッタービルダーの中でWidgetを使う（ヘッダも同様）。
使用サーバー：ロリポップ
使用テーマ：Astra
フッタービルダー用コンポーネントの不足を補う
フッタービルダーには専用パーツが用意されているが、ひとつ配置するたびに利用可能なパーツが減っていくので、無制限に使えるわけではない。
特にHTMLソースコードを記述できるのはHTML1、HTML2のふたつだけ（有料版でも同じ）なので、フッターの構成しだいでは思ったレイアウトができないことがある。
そこでWidgetを使って、HTMLを記述する。
Widgetとは
WordPressのテーマに含まれるパーツで、記事のアーカイブ一覧や投稿日カレンダー、タグクラウド、画像ギャラリーなどいろいろな機能を簡単に配置できる。
パーツのひとつ、”カスタムHTML”を使うとHTMLでのマークアップが可能になるので、フッタービルダーのパーツ代わりとして使える。
ウィジェットを作成する
WordPress管理画面から外観＞ウィジェットと進み、ウィジェット設定画面を開く。
フッタービルダー用のFooter Builder Widgetが1～4、ヘッダー用のHeader Builder Widgetがふたつ利用できるのがわかる。
ヘッダとフッタ用のウィジェット。
左側には、利用できるウィジェットが並んでいるので「カスタムHTML」をFooter Builder Widget1～4のどれかにドラッグ＆ドロップ（ここではFooter Builder Widget 2を使用）。
そうすると、Widget編集画面が現われるので、HTMLのソースコードを入力する。
カスタムHTMLをウィジェットに追加。
すでにFooter Builder のパーツ内で見出しにh3タグを使っているので、ここで作成するウィジェットでもh3タグを使って見出しを記述する。
「タイトル」は空欄にしておく。
タイトルが空欄の理由
本来タイトルは入力しておかないと、あとあとWidgetを入れ替えるようなばあいにどんなHTMLコードを書いたのかわからないのでめんどうだ。
ただし、今回はFooter Buider自体のパーツと併用する関係から、フッタブロック内の見出しレイアウトを簡単にデザインできるようにあえて空欄にする（見出しを入れると他のパーツで指定した見出しとのレイアウトを揃えるのがめんどう）。
見出しは入れなくてもウィジェット自体の表示にはなにも問題ない。
ただし、あとあとどのウィジェットをどこに配置しているかの確認がややめんどうになる。
フッタービルダーにWidgetを配置する
ウィジェットを作成したら、Footer Builderへ移動する。
今回、Primary Footerを4カラムにしたいので、コグアイコンをクリックしてプロパティ画面を開き、カラム設定を3から4に変更する。
3カラムから4カラムへ変更する。
4カラムになったPrimary Footer。
Primary Footer上の空いているカラムをクリックし、ポップアップメニューから先ほどHTMLコードを追加したWidget2を選択する。
空欄のカラムにウィジェットを割り当てる。
これで、ウィジェットを使ってHTMLソースを設定できた。
追加したウィジェットによる表示。
ただし、コンテンツ部分の文字色がデフォルト（黒）のため、背景色に埋もれて読みにくい（h3見出しについては、ウィジェット作成の時点で、スタイルシートを記述して白にしている）。
[Widget2]をクリックしてプロパティ設定画面を開き、「コンテンツ」の色を白に設定することでフッタ上の文字がはっきりと読みやすくなった。
ウィジェットのプロパティを開く。
テキストの配色を白にする。
ポイント
4カラムにレイアウトしなおしたことでタブレットやモバイル表示でのレイアウトが崩れている可能性があるので、必ず見直して適宜再調整する。
Astra自体にはかなりの数のウィジェットがあるが、Header BuilderやFooter Builderで使える数には限りがあるので、ページレイアウトをよく吟味してから使いたい。
