フッターにもサイトロゴを入れたくなることはないでしょうか？
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等に挿入しましょう。
2024.5追記 -webkit-backface-visibility: hidden;
フッターのロゴ画像がぼやけるのを対策しました。
#footer .c-headLogo.-img {
display: block;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 110px; /* ロゴに合わせて高さ調整 */
-webkit-backface-visibility: hidden;/* ロゴ画像がぼやけるのを対策 */
image-rendering: -webkit-optimize-contrast;
}
@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');まとめ
見た目的に物寂しくなるフッター。
企業やメディアを強調する時にロゴイメージは見た目的に良かったりすることがありますので、
SWELLの方は是非参考にしてみてください。
ちなみに他のテーマでも#footerに疑似要素でロゴを表示することもできます。