SWELL│フッターにロゴを入れる方法

2022.03.302024.03.14

フッターにもサイトロゴを入れたくなることはないでしょうか？

SWELLのフックを用いると、簡単に挿入することができます。

※ロゴ設定はヘッダーと連動したままです。

本記事ではSWELLでフッターにロゴを入れる方法を紹介します。

SWELLでフッターにロゴを入れる方法

SWELLでフッターにロゴを入れる方法はフックを使ってロゴを挿入して、CSSで見た目を整えるだけです。

ロゴの表示

管理画面＞外観＞ functions.phpに下記のコードを挿入します。

swell_after_copyrightを利用しています。

add_action('swell_after_copyright', function() {
    echo SWELL_PARTS::head_logo( 'no', true ); 
});

CSSで調整

CSSは以下の通りです。

style.css等に挿入しましょう。

#footer .c-headLogo.-img {
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 110px; /* ロゴに合わせて高さ調整 */
}
@media (max-width: 768px) {
	#footer .c-headLogo.-img {
		bottom: 90px;  /* ロゴに合わせて高さ調整 */
	}
}

フッターメニューとロゴの余白は、下記を調整してみてください。

.l-footer__foot {
    padding-top: 6em;
}

以上でロゴが入りました。

フッターウィジェットを用いている人はさらにCSSを調整しましょう。

応用

このカスタマイズの応用を記載しておきます。

フッターのロゴ画像を白や黒などの色に上書きしたい

CSSのfilterを使ってロゴ画像の色を変更することができます。

黒の場合

#footer .c-headLogo__img {
    filter: brightness(0) invert(1);
}

白の場合

#footer .c-headLogo__img {
    filter: invert(1) brightness(2) contrast(1);
}

フッターのロゴ画像を別の画像に差し替えたい

以下のコードをfunctions.phpに記載します。

function motoki_changeFooterLogo() {
echo <<< EOM
    <script>
			window.onload = function() {
				var footerLogo = document.querySelector('#footer .c-headLogo.-img .c-headLogo__img');
				if (footerLogo) {
					footerLogo.src = 'https://motoki-design.co.jp/wordpress/wp-content/uploads/2023/12/logo2.png';
					footerLogo.srcset = '';
				}
			};
    </script>
EOM;
}
add_action('wp_print_footer_scripts', 'motoki_changeFooterLogo');