Zenn
🔖

SWELLのテーマでヘッダー画像追加

2023/08/31に公開
CSS
WordPress
swell
wordpressカスタマイズ
バナー画像
tech

SWELLのテーマのカスタマイズで、大きなヘッダー画像を設置したいときに、役立つと思います。
大きなバナー画像でも見切れずに画像がスマホ、タブレット、PCなどで収まって表示できるように、CSSで工夫しています。

wordPressのコンテンツ幅に合わせて、メディアクエリを活用してwidthの値を設定するコードは、実際の環境に合わせて書いて下さい。

画像のアスペクト比の関係でコンテンツ幅の方が画像より大きいときに、背景色を指定できる機能があります。
この機能を活用すると、バナーの横幅がコンテンツ幅、画面の幅と同じに見える工夫ができます。

/* ヘッダーバナー画像 */
.header-image {
  max-width: 100%;
  display: block;
  margin: 0 auto;

}

/* ヘッダーバナーエリア　　*/
	.header-area {
		max-width: 100%; 
		text-align:center;
		margin-left:auto;
		margin-right:auto;
	}

/* コンテンツ背景色　*/
#content {
	background-color:#ffffff;
}

functions.phpに追加するコード

// Step 1: カスタムコントロールとセクションを追加
function swell_child_customize_register($wp_customize) {
    // セクションの追加
    $wp_customize->add_section('swell_child_header_image', array(
        'title' => 'ヘッダー画像',
        'priority' => 30,   //適宜修正して下さい。最後の数値に＋１が良いと思います。
    ));

    // ヘッダー画像フィールドの追加
    $wp_customize->add_setting('header_image_url', array(
        'default' => '',
        'sanitize_callback' => 'esc_url_raw',
    ));

    $wp_customize->add_control(new WP_Customize_Image_Control($wp_customize, 'header_image_url', array(
        'label' => 'ヘッダー画像をアップロード',
        'section' => 'swell_child_header_image',
        'settings' => 'header_image_url',
    )));

    // ヘッダー背景色の設定フィールドの追加
    $wp_customize->add_setting('header_background_color', array(
        'default' => '#ffffff', // デフォルトのカラーコードを設定
        'sanitize_callback' => 'sanitize_hex_color',
    ));

    $wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'header_background_color', array(
        'label' => 'ヘッダー背景色',
        'section' => 'swell_child_header_image',
        'settings' => 'header_background_color',
    )));



	
}

add_action('customize_register', 'swell_child_customize_register');



// Step 2: header.php でヘッダー背景色の設定を使用する
function swell_child_header_styles() {
    $header_background_color = get_theme_mod('header_background_color', '#ffffff');

    $css = "
        .header-area {
            background-color: $header_background_color;
        }
    ";
    echo '<style type="text/css">' . $css . '</style>';
}

add_action('wp_head', 'swell_child_header_styles');

header.phpに追加したコード

		<div class="header-area">
			<div class="header-block">
			<!-- ヘッダー画像 -->
			<div class="header-image">
				<?php $header_image_url = get_theme_mod('header_image_url', ''); ?>
				<?php if ($header_image_url) : ?>
					<a href="https://rakutenmatome.com/"><img src="<?php echo esc_url($header_image_url); ?>" alt="ヘッダー画像" ></a>
				<?php else : ?>
					<!-- ここにデフォルトの画像などを表示するコードを追加できます -->
				<?php endif; ?>
				</div>

			</div>			
		</div>

CSSが必要

こちらのCSSを使うと、ヘッダーの親要素の中に、上手く画像が収まります。

.header-image img {
  object-fit: cover; /* 画像が領域を完全に覆うようにする */
  width: 100%; /* 親要素の幅に合わせる */
  max-height: 100%; /* 親要素の高さに合わせる */
  position: absolute; /* 絶対位置指定を使用する */
  top: 0; /* 親要素の上端に配置する */
  left: 0; /* 親要素の左端に配置する */
}

.header-area {
  position: relative; /* 子要素の絶対位置指定の基点になる */
  overflow: hidden; /* はみ出した画像を隠す */
}

ヘッダー画像の下にナビゲーションメニューを設置したいとき

SWELLのテーマで、ナビゲーションメニューをヘッダー画像の下に設置したいときは、下記のＣＳＳを応用してください。

ナビゲーションメニューの位置は、各自調整してください。
wordPressには、ページ固有のクラス名が自動発行されます。
そのクラス名を得て、PHPでコードを書くのが良いと思います。
もしくは、対象のページでカスタムCSSを使う方法もあります。
今回のコードは、例です。
実際には、CSSが適用されないページがあると思いますので、制作されるページの構成に応じて、調整が必要です。


/* トップページのヘッダーの位置を調整 */
@media screen and (min-width: 960px) {
  .blog .l-header {
    top: 210px !important;
    left: 200px !important;
  }

  /* 他の全てのページでヘッダーの位置を調整したい場合は、以下のスタイルを使用 */
  body:not(.blog) .l-header {
    top: 0;
    left: 0;
  }

  .l-header,
  .t-fff {
    background-color: transparent !important;
  }

  /* ナビゲーションメニューの文字色を指定 */
  .l-header__gnav,
  .l-header__gnav .c-gnav > li > a {
    color: black !important;
  }
}

Discussion