GeneratePressでフッターを設定する方法について2回に分けて説明します。GeneratePressでは、フッターにウィジェットエリアが設定してあり、例えば3段組みになったリッチなフッターをWordPressのウィジェット機能を使って簡単に設定できます。
その話は次回にすることにして、今回はもっと簡単な方法「フッターバー」の設定についてです。
クラシックウィジェットを有効化
今のWordPressは、ウィジェットもブロックエディターで設定するのが標準です。しかし当サイトでは、CSSの軽量化を目的として、従来型のテーマであるGeneratePressにおいては、クラシックウィジェット（従来のウィジェット画面での編集）での設定を推奨します（この理由については少し長くなるので、別の記事で再度触れます）。
GeneratePressに限りませんが、クラシックウィジェットを有効にするにはテーマ（子テーマを推奨）のfunctions.phpに以下のコードを追加します。
// クラシックウィジェットを有効にする
add_filter( 'use_widgets_block_editor', '__return_false' );クラシックウィジェットでHTMLを追加
すると、ウィジェット画面が以下のように、従来型の編集画面に戻ります。
ここに「フッターバー」というウィジェットエリアが設定されているのがわかると思います。今回はここにHTMLを追加してみます。
カスタムHTMLウィジェットを追加して、そこにHTMLを直接記述します。そうすると、もともと中央揃えになっていた「© 2025 GPcss.net • Built with GeneratePress」などというデフォルトの記述部分が左寄せとなり、新たに追加したカスタムHTMLが右揃えとなって表示されるようになります。
追加されるCSS
このようにして、ウィジェットエリアがアクティブになった場合、GeneratePressは自動的にその部分に関するCSSを出力するようになります。逆に言えば、ウィジェットエリアがなければ、その分のCSSは出力されないように、軽量化の配慮がなされています。ここがGeneratePressの素晴らしいところです。
具体的には、ウィジェットエリアがそのページにある場合、head要素に以下のようなリンクが追加されます。興味のある方は、どんなCSSが出力されているのかを見てみてください。
<link rel='stylesheet' id='generate-widget-areas-css' href='https://gpcss.net/wp-content/themes/generatepress/assets/css/components/widget-areas.min.css?ver=X.Y.Z' media='all' />フッターバーの位置を調整する
この追加したHTMLコードをどのように配置するかについて、カスタマイザーで3つの選択肢が用意されています。デフォルトは右に表示するもので、上記のとおりです。
また、「中央」に設定するとデフォルトのフッターの上に中央に縦積みで表示されます。「左」にすれば上記デフォルトの逆さまになります。
