サイト上部にバナー設置
管理者
修正点
先にイメージ画像として
のように、サイト上部へバナーを設置します。
作成バナーは、3つ
- プロフィール
- お問い合わせ
- Xアカウント
バナー自体の増減やバナー内容の変更なども今後あると思いますが、見栄えや使用感の向上のため実装を目指します。
修正方法
まずは、現状確認です。
現在で言うと、パンくずリストが配置されている位置へ、バナーを配置したい。
パンくずリストはこれのこと
今までのサイトデザインの修正は、ウィジェットでの HTML と追加CSSでの CSS をそれぞれ書き込み形にしてきました。
しかし、今回は修正エリアを対象としたウィジェットが用意されておらず、ウィジェットを頼れない...。
つまり、直接PHP（functions.php）でバナーを作成する必要があります。
できるだけ避け続けてきましたが、避けられぬのであれば本腰を据えて
独自ドメイン/public_html/wp-content/themes/lightning-child（子テーマ）/functions.php
add_action( 'lightning_breadcrumb_before', 'kimimachi_home_banner' );
function kimimachi_home_banner() {
if ( ! is_home() ) {
return;
}
?>
<div class="kimimachi-banner-wrap">
<div class="kimimachi-banner">
<a href="/profile/" class="banner-card">
<img src="画像のURL" alt="プロフィール" class="banner-icon-img">
<span class="banner-title">プロフィール</span>
</a>
<a href="お問い合わせフォームのURL" class="banner-card">
<span class="banner-icon">✉️</span>
<span class="banner-title">お問い合わせ</span>
</a>
<a href="XアカウントのURL" target="_blank" rel="noopener" class="banner-card">
<span class="banner-icon">𝕏</span>
<span class="banner-title">Xアカウント</span>
</a>
</div>
</div>
<?php
}上記は完成形です。
しかし、最初書き込みながら確認していた段階は全然認識もされませんでした。
add_action( 'wp_footer', function() {
if ( is_home() ) {
echo '<div style="position:fixed;bottom:20px;right:20px;background:red;color:#fff;padding:10px;z-index:99999;">TEST</div>';
}
});を入れて、トップページ右下に 赤い「TEST」 が出るか確認
- 出ない → functions.php が読み込まれていない、またはPHPエラーが発生している
- 出る → functions.php は正常に読み込まれている
を行い、読み込まれているか確認したり、
ちゃんと表示された！と思ったら、記事エリアで位置調整が難航...。
add_action( 'lightning_breadcrumb_before', function() {
if ( is_home() ) {
echo '<div style="background:red;color:#fff;padding:20px;text-align:center;">BREADCRUMB BEFORE</div>';
}
});や
add_action( 'lightning_breadcrumb_after', function() {
if ( is_home() ) {
echo '<div style="background:blue;color:#fff;padding:20px;text-align:center;">BREADCRUMB AFTER</div>';
}
});を入れ、赤い帯と青い帯がどこに出るのか確認したことでやっと位置の確定ができました。
苦難はありましたが何とかfunctions.phpへ必要物の準備はでき、プロフィールも他と同じく絵文字の👤で記述していた部分をこキミマチアイコン
へ変更。
装飾（CSS）調整
追加CSSでいつも通り配置や見栄えの微調整を行っていき
一旦の形になったのは
この状態。（その時のCSSをメモってなくて載せられず申し訳ありません...。）
ほぼほぼ完成と言っていいでしょうと思った後に、
でも、「記事ページと同じように背景色を付けたいなぁー」と考えました。
そんなに難しくない装飾ですしサクッと終わるかと思いましたが、これも沼りました。
原因は PHP（HTML）の時と同じで、指定先の確定に手間取りました。
background:rgba(255,184,51,.18);
padding:20px 0;
margin-bottom:30px;の装飾は準備できているのに、何度指定しても反映されない。
PHP（HTML）で記述している<div class="kimimachi-banner-wrap">が反応せず、自分のコードに憎しみを感じながらの試行錯誤でした。
解決時方法としては、地道に検証からkimimachi-banner-wrapの親要素を探して、body直下にいることが分かったので
body.blog .kimimachi-banner-wrap{
background:rgba(255,184,51,.18);
padding:20px 0;
margin-bottom:30px;
}を指定することでやっと反映されました。
記事最初に記載した画像と同じですが、
これをもって完成！
このバナーたちを今後画像バナーに変更しようかサイトのデザイン協力をしてくれている奥さんと相談中ですが、変更する際はまた記事にします。
最後に
ここまで読んでいただき、ありがとうございます。
今回はかなり心身共に疲弊した作業でした。
HTMLの構造で詰まると沼りやすいので、その場だけにせず、地道に覚えていこうと思います。
苦労はしましたが、見栄えとしてはとても満足しているのでやってよかったです。
