WordPress「add_theme_support」でカスタムヘッダーを有効化する

カスタムヘッダーを有効化すると、カスタマイザーからヘッダー画像を変更したりカスタマイズしたりすることができるようになる。functions.phpで有効化するとともに、テンプレートファイルの編集も必要になる。

カスタムヘッダーを有効化する

functions.phpにコードを追記する。

// カスタムヘッダー
add_theme_support('custom-header');
PHP

オプション設定をする

$custom_header_args = array(
  // デフォルトで表示するヘッダー画像(画像のURLを入力)
  'default-image' => get_template_directory_uri() . '/img/top-main.jpg',
  // ヘッダー画像の横幅
  'width' => 1171,
  // ヘッダー画像の縦幅
  'height' => 640,
  // ヘッダー画像の横幅を自由に切り取れるかどうか(trueもしくはfalse)
  'flex-width' => true,
  // ヘッダー画像の縦幅を自由に切り取れるかどうか(trueもしくはfalse)
  'flex-height' => true,
  // ヘッダーテキストを表示するかどうかを指定する機能の使うかどうか(trueもしくはfalse)
  'header-text' => true,
  // ヘッダーテキストのデフォルトの色
  // 'default-text-color' => 'fff',
  // 動画ヘッダーに対応するかどうか(trueもしくはfalse)
  'video' => true,
  // adminへの画像ファイルのアップロードを許可するか(trueもしくはfalse)
  'uploads' => false,
  // ヘッダー画像をランダムにローテーションするかどうか(trueもしくはfalse)
  'random-default' => false,
  // テーマのheadタグ内に呼び出したいコードが書かれた関数を指定(関数名)
  // 'wp-head-callback' => 'wphead_cb',
  // カスタムヘッダーページのheadタグ内に呼び出したいコードが書かれた関数を指定(関数名)
  'admin-head-callback' => 'adminhead_cb',
  // カスタムヘッダーページのプレビュー部分に表示したいコードが書かれた関数を指定(関数名)
  'admin-preview-callback' => 'adminpreview_cb',
);
add_theme_support('custom-header', $custom_header_args);
PHP

ヘッダーテキストカラーのスタイルをheadに挿入する

// ヘッダーテキストカラーをheadタグに挿入
function wphead_cb() {
  echo '<style type="text/css">';
  echo '.p-header__ttl, .p-header__info { color: #' . get_header_textcolor() . ' }';
  echo '</style>';
}

$custom_header_args = array(
  'default-text-color' => '000',
  'wp-head-callback' => 'wphead_cb'
);
add_theme_support('custom-header', $custom_header_args);
PHP

ヘッダー画像の上に載せたいテキストのタグにp-header__ttlクラスや、p-header__infoクラスを付与する。

テンプレートを編集する

6行目の<p>にp-header__ttlを付与。

<?php if (get_header_image()) : ?>
  <div class="hero">
    <!--ヘッダー画像出力-->
    <img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="" />
    <!--キャッチフレーズ出力-->
    <span class="p-header__ttl"><?php bloginfo('blogname'); ?></span>
  </div>
<?php endif; ?>
PHP

CSSで調整する

/* カスタムヘッダー */
.hero img{
    width: 100%;
    height: auto;
    max-height: 650px;
    object-fit: cover;
    vertical-align: top;
}

.hero{
    position: relative;
}
.hero::after{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-size: 2px 2px;
}
.hero span{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 1.4rem;
    width: 450px;
    z-index: 123;
    letter-spacing: 2px;
    text-align: center;
}
CSS

完成

ボリュームのあるカスタマイズだったが、動画の埋め込みやランダム表示など、カスタマイズの幅は残っている。

参考
  • WordPressカスタムヘッダーを完璧に使いこなしたい人へ告ぐ!
    https://original-game.com/wordpress-custom-header/
  • WordPressにカスタムヘッダーの機能を追加して画像を表示する
    https://shu-sait.com/custom-header-tuika/

Related Tags