【SWELL】フッターのメニューとコピーライトの間にロゴやリンク（特定のコンテンツ）を表示する方法

SWELLのフッターでは、フッターウィジェットが用意されておりフッターの上部（フッターメニューの上側）にコンテンツを配置することはできます。

しかし、フッターメニューとコピーライトの間に（ロゴなどを）表示するのはフッターウィジェットなどではできません。特別な方法（コツ）が必要です。

本記事は、2024/3/16時点（バージョン: 2.9.0）のSWELLを対象としています。

フッターメニューとコピーライトの間に表示

フッターメニューとコピーライトの間に表示したサンプルです。ペンギンのロゴ画像を表示してみました。（背景透過の png 画像を使っています）

ここ（フッターメニューとコピーライトの間）にはフッターウィジェットではコンテンツを表示することができません。特別な手法を用いる必要があります。

作成方法（フッターメニューとコピーライトの間に表示）

コンテンツを配置する

フッターメニューとコピーライトの間に表示する場合、コンテンツは通常の方法では配置できません。そのため、functions.php に処理を横取りする（フックする）コードを記載し、表示したいコンテンツを HTML 形式で記述します。

WordPress の管理画面から「外観」→「テーマファイルエディター」を選択し、「functions.php」に以下のコードを記載します。

// ----------------------------------------
add_action('swell_after_copyright', function() {
	?>
<p class="my-footer-link" style="text-align:center">
	<a href="https://www.xxxxxxxxxxxxxxxx.co.jp">
		<img src="https://xxxxxxxxxxxxxxxx/LOGO.png">
	</a>
</p>
	<?php 
});

サンプルコードではロゴ画像をリンク付きで配置していますが、テキストのみでも、長文のコンテンツでも構いません。

「swell_after_copyright」は、コピーライトの後にコンテンツを配置するフックのため、このままでは、コピーライトの下に表示されます。次のCSSで上下を入れ替えます。

CSSで位置を入れ替える

「swell_after_copyright」でコンテンツを入れただけでは、コピーライトの下に表示されます。そのため、CSSを用いて上下の位置を入れ替えます。

WordPress の管理画面から「外観」→「カスタマイズ」→「追加CSS」を選択します。

最初は、作成したコンテンツがコピーライトの下に表示されています。次のコードを入力して上下を入れ替えます。

以下のコードを記載します。

.l-footer .l-container {
    display: flex;
    flex-direction: column;
}

.copyright {
    order: 2;
}

.my-footer-link {
    order: 1;
}

完成です。

まとめ：（フッターメニューとコピーライトの間に表示）

SWELLテーマのフッターメニューとコピーライトの間にコンテンツを表示する場合は、functions.php に処理を横取りする（フックする）コードを記載します。

うまく利用して、より良いサイト、よりよいページを作ってくださいね。

おしゃれなサイトを作るコツを知りたい方は以下の記事を参照してください。