WordPressにはカスタムヘッダー機能が標準で搭載されています。しかし、_s(underscores)はデフォルト設定では機能しないようにfunctions.php内で該当箇所がコメントアウトしてあります。
今回は_s(underscores)でカスタムヘッダー機能を使えるようにするる方法を試してみようと思います。
そもそもカスタムヘッダーとは
Codexにはこのように書かれています。
Custom Header is a theme feature introduced with Version 2.1. Custom header is an image that is chosen as the representative image in the theme top header section.
和訳するとこのような感じでしょうか。
カスタムヘッダーはWordPress2.1より搭載された機能で、選択された画像をテーマのヘッダー部分にサイトを象徴するイメージとして掲載する機能です。
といった具合でしょうか。
カスタムヘッダー – WordPress Codex 日本語版
functions.phpからカスタムヘッダー機能を有効化する
functions.phpを開いて122行目を確認するとこのような記述があります。
//require get_template_directory() . '/inc/custom-header.php';
こちらがカスタムヘッダー機能を使えるようにするコードになりますので、コメントアウトを解除してあげましょう。
すると、管理画面から【外観】より【ヘッダー】を選ぶことができるようになります。
custom-header.phpの中を見てみる
先ほどコメントアウトしたコードにcustom-header.phpファイルがincフォルダ内にあると書いてありました。カスタムヘッダーに関する細かい設定は全てcustom-header.php内で行うことができます。
inc（インクルード）フォルダ内のcustom-header.phpファイルを開いて25行目あたりを見てみましょう。
function olein_custom_header_setup() {
add_theme_support( 'custom-header', apply_filters( 'olein_custom_header_args', array(
'default-image' => '',
'default-text-color' => '000000',
'width' => 1280,
'height' => 300,
'flex-height' => false,
'wp-head-callback' => 'olein_header_style',
'admin-head-callback' => 'olein_admin_header_style',
'admin-preview-callback' => 'olein_admin_header_image',
) ) );
}
ここではdefault-text-colorを#000000から#ffffffに、widthを1000から1280に、heightを250から300に変更しておきました。あと、flex-heightはfalseに変更しました。大きな画像を選択した際に自分でトリミング等できるようになります。
その下に管理画面のカスタマイザで【サイトタイトルとキャッチフレーズ】の中の【ヘッダーテキストを表示する】のチェックを入れたり外したりした際に適応されるスタイルシートを記述してある部分があります。
function olein_header_style() {
$header_text_color = get_header_textcolor();
// If no custom options for text are set, let's bail
// get_header_textcolor() options: HEADER_TEXTCOLOR is default, hide text (returns 'blank') or any hex value
if ( HEADER_TEXTCOLOR == $header_text_color ) {
return;
}
// If we get this far, we have custom styles. Let's do this.
?>
<style type="text/css">
.site-title,
.site-description {
position: absolute;
clip: rect(1px, 1px, 1px, 1px);
}
.site-title a,
.site-description {
color: #<?php echo esc_attr( $header_text_color ); ?>;
}
<?php endif; ?>
</style>
<?php
}
endif; // olein_header_style
こちらの61行目からのこの部分に注目します。
.site-title,
.site-description {
position: absolute;
clip: rect(1px, 1px, 1px, 1px);
}
こちらがヘッダーテキストを表示しない際に適応されるスタイルシートです。が、こちらの機能を使う際には背景画像を入れることを想定しているので、.site-branding部分を一括で表示されないように指定しなおします。クラス名を書き換えてこのようにしておきましょう。
.site-branding {
position: absolute;
clip: rect(1px, 1px, 1px, 1px);
}
このように記述することによって、サイト名とサイト詳細テキスト部分は【サイトタイトルとキャッチフレーズ】の中の【ヘッダーテキストを表示する】のチェックを外した際に表示されなくなります。のはずなのですが、実はこれだけではだめで、customizer.jsでも同じように設定し直さなければならない箇所があります。
if ( 'blank' === to ) {
$( '.site-title, .site-description' ).css( {
'clip': 'rect(1px, 1px, 1px, 1px)',
'position': 'absolute'
} );
} else {
$( '.site-title, .site-description' ).css( {
'clip': 'auto',
'color': to,
'position': 'relative'
} );
}
} );
こちらの23行目と28行目をこのように書き換えます。
value.bind( function( to ) {
if ( 'blank' === to ) {
$( '.site-branding' ).css( {
'clip': 'rect(1px, 1px, 1px, 1px)',
'position': 'absolute'
} );
} else {
$( '.site-branding, .site-title, .site-description' ).css( {
'clip': 'auto',
'color': to,
'position': 'relative'
} );
}
} );
こうするとによってチェックボタンに切り替えで確実に要素を非表示にするとができます。
カスタムヘッダー画像の挿入設定をする
custom-header.phpファイルの8行目あたりからコメントアウトされているコードがあります。
<?php if ( get_header_image() ) : ?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
<img src="<?php header_image(); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt="">
</a>
<?php endif; // End header image check. ?>
こちらのコードがカスタムヘッダーの画像を読み込む部分となります。こちらをベースにカスタマイズしていきます。
header.phpファイルを開きます。
24行目の<header>タグ以下に先ほどのコードを埋め込みます。
<header id="masthead" class="site-header" role="banner">
<?php if ( get_header_image() ) : ?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
<img src="<?php header_image(); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt="">
</a>
<?php endif; // End header image check. ?>
<div class="site-branding">
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</div><!-- .site-branding -->
<nav id="site-navigation" class="main-navigation" role="navigation">
<button class="menu-toggle" aria-controls="menu" aria-expanded="false"><?php _e( 'Primary Menu', 'olein' ); ?></button>
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</nav><!-- #site-navigation -->
</header><!-- #masthead -->
これで動作確認してみます。ヘッダー画像を登録していないと表示されないので設定しておきましょう。
現状の表示はこのような感じになっています。
これはカスタマイズ画面にて【サイトタイトルとキャッチコピー】の【ヘッダーテキストを表示する】にチェックが入っているために、ヘッダー画像もヘッダー部分も表示されててしまっている状態です。
ヘッダー部分の調整
上の画像を見てもらうとわかるように、ヘッダー画像の下側に微妙な空白があったりしているので、マークアップを変更して修正することにします。
header.phpに記載したカスタムヘッダー表示部分を<div>で囲み、.header-imageというクラスを付与します。
<?php if ( get_header_image() ) : ?>
<div class="header-image">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
<img src="<?php header_image(); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt="">
</a>
</div><!-- /.header-image -->
<?php endif; // End header image check. ?>
次はCSSの修正を行います。
.header-image img {
display: block;
margin: 0 auto;
}
以前こちらでヘッダー用CSSを記述しましたが、同じエリアで問題ないかと思います。こちらのコードを追加します。
.header-image内のimgタグ要素に対して、display: block;とmargin: 0 auto;を設定しています。こうすることによって、該当するimg要素はブロック要素となり、左右中心に配置されるようになります。
ヘッダー部分のカスタマイズ
いまからヘッダー画像の上にサイト名とサイト詳細テキストが上に乗る形でレイアウトしていきます。
ヘッダー画像は<?php header_image(); ?>で出力されることが、カスタムヘッダー出力のテンプレートからみてもわかるかと思います。ですので、div.site-brandingにこの画像URLをCSSで背景に設定することにします。
<div class="site-branding header-background-image" style="background-image: url(<?php header_image(); ?>)">
背景画像の調整をCSSに記述するために.header-background-imageというクラスを追加しました。そして、このクラスに設定するCSSは以下のようにします。
.header-background-image {
background-repeat: no-repeat;
background-position: center center;
background-size: cover !important;
}
こうすることによって背景画像がタイル状にならずうまいこと収まってくれます。
header.phpをカスタマイズする
まず先に最終的なコードをこちらに書いてから順次説明していこうと思います。
<header id="masthead" class="site-header" role="banner">
<?php if ( get_header_image() && ('blank' == get_header_textcolor()) ) : ?>
<div class="header-image">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
<img src="<?php header_image(); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt="">
</a>
</div><!-- /.header-image -->
<?php endif; // End header image check. ?>
<?php
if ( get_header_image() && !('blank' == get_header_textcolor()) ) {
echo '<div class="site-branding header-background-image" style="background-image: url(' . get_header_image() . ')">';
} else {
echo '<div class="site-branding">';
}
?>
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</div><!-- .site-branding -->
<nav id="site-navigation" class="main-navigation" role="navigation">
<button class="menu-toggle" aria-controls="menu" aria-expanded="false"><?php _e( 'Primary Menu', 'olein' ); ?></button>
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</nav><!-- #site-navigation -->
</header><!-- #masthead -->
まず26行目のif文についてです。
<?php if ( get_header_image() && ('blank' == get_header_textcolor()) ) : ?>
この分岐の意味を簡単に言うと「カスタムヘッダー機能を使っていて、尚且つヘッダーテキストを表示する設定になっていない」時を示しています。その場合は画像だけを表示します。
<?php
if ( get_header_image() && !('blank' == get_header_textcolor()) ) {
echo '<div class="site-branding header-background-image" style="background-image: url(' . get_header_image() . ')">';
} else {
echo '<div class="site-branding">';
}
?>
こちらは少し複雑な構造になっています。
if ( get_header_image() && !('blank' == get_header_textcolor()) )は先ほど説明した分岐条件に似ていますが「!」を見落とさないでください。
この場合は「カスタムヘッダー機能を使っていて、尚且つヘッダーテキストを表示する設定になっている」となります。この場合には先ほど試したように背景画像の上にサイト名などを表示する形を採用します。ですので、36行目でdiv要素に任意のクラスを配したコードを出力します。
また、そうでない場合はelse以降に記述されている内容の処理を行います。この場合は「カスタムヘッダー機能を使っておらず、尚且つヘッダーテキストを表示する設定になっている」となります。黄色背景に白文字でサイト名が表示される当初のデザインになります。
まとめ
ちょっと長々と複雑になってしまいましたが、カスタムヘッダー機能を利用する場合は以下の条件にしっかりと対応するようにしておく必要があるようです。
- カスタムヘッダー機能をそもそも使わない場合
- カスタムヘッダー機能は使ってもサイト情報テキストは表示させない
- カスタムヘッダー機能を使い、尚且つサイト情報テキストも表示させる
これらの状況に対応するようにしておく方がユーザーには優しい設計となるでしょう。そして、このような様々な状況に対応するためにもサンプルであげた分岐などを利用してみてください。
