custom-header.php
カスタムヘッダーを有効にすると、管理画面の外観 > カスタマイズでヘッダー部分を変更できるようになります。_sでは、custom-header.phpという別ファイルに記述されて、functions.phpからrequireされています。
<?php
/**
* Sample implementation of the Custom Header feature
*
* You can add an optional custom header image to header.php like so ...
*
<?php the_header_image_tag(); ?>
*
* @link https://developer.wordpress.org/themes/functionality/custom-headers/
*
* @package _s
*/
/**
* Set up the WordPress core custom header feature.
*
* @uses _s_header_style()
*/
function _s_custom_header_setup() {
add_theme_support( 'custom-header', apply_filters( '_s_custom_header_args', array(
'default-image' => '',
'default-text-color' => '000000',
'width' => 1000,
'height' => 250,
'flex-height' => true,
'wp-head-callback' => '_s_header_style',
) ) );
}
add_action( 'after_setup_theme', '_s_custom_header_setup' );
if ( ! function_exists( '_s_header_style' ) ) :
/**
* Styles the header image and text displayed on the blog.
*
* @see _s_custom_header_setup().
*/
function _s_header_style() {
$header_text_color = get_header_textcolor();
/*
* If no custom options for text are set, let's bail.
* get_header_textcolor() options: Any hex value, 'blank' to hide text. Default: add_theme_support( 'custom-header' ).
*/
if ( get_theme_support( 'custom-header', 'default-text-color' ) === $header_text_color ) {
return;
}
// If we get this far, we have custom styles. Let's do this.
?>
<style type="text/css">
<?php
// Has the text been hidden?
if ( ! display_header_text() ) :
?>
.site-title,
.site-description {
position: absolute;
clip: rect(1px, 1px, 1px, 1px);
}
<?php
// If the user has set a custom color for the text use that.
else :
?>
.site-title a,
.site-description {
color: #<?php echo esc_attr( $header_text_color ); ?>;
}
<?php endif; ?>
</style>
<?php
}
endif;
カスタムヘッダーを使用可能にするfunction _s_custom_header_setup()を記述している部分と、そのコールバック関数 _s_header_style() を記述している部分と、大きく2つに分かれています。
function _s_custom_header_setup()
function _s_custom_header_setup() {
add_theme_support( 'custom-header', apply_filters( '_s_custom_header_args', array(
'default-image' => '',
'default-text-color' => '000000',
'width' => 1000,
'height' => 250,
'flex-height' => true,
'wp-head-callback' => '_s_header_style',
) ) );
}
add_action( 'after_setup_theme', '_s_custom_header_setup' );
add_theme_support( ‘custom-header’,…) でカスタムヘッダーを使用可能して、’after_setup_theme’アクションにフックしています。ここでも配列をapply_filtersしていますが、なぜわざわざこう書くのか意図はわかりません。それぞれ引数については以下codexを参照します。
https://codex.wordpress.org/Custom_Headers
codexに書いてある、admin-head-callbackやadmin-preview-callbackは、WordPressの4.1より前のカスタムヘッダー画面を使う時の設定なので、今は必要ありません。 4.1 以後は、外観 → カスタマイズに統一されています。
コールバック関数 _s_header_style()
‘wp-head-callback’
wp-haed-callbackは、その名前の通りWordPressのヘッダー部分でコールバックされる関数なのですが、実際どんな感じで動いているのか、WordPress本体のtheme.phpに記述されているので見てみます。
if ( current_theme_supports( 'custom-header' ) ) {
// In case any constants were defined after an add_custom_image_header() call, re-run.
add_theme_support( 'custom-header', array( '__jit' => true ) );
$args = get_theme_support( 'custom-header' );
if ( $args[0]['wp-head-callback'] ) {
add_action( 'wp_head', $args[0]['wp-head-callback'] );
}
if ( is_admin() ) {
require_once( ABSPATH . 'wp-admin/custom-header.php' );
$custom_image_header = new Custom_Image_Header( $args[0]['admin-head-callback'], $args[0]['admin-preview-callback'] );
}
}
‘wp_head’アクションに、コールバック関数がフックされます。つまりwp_headアクションが実行されるときに、このコールバック関数も実行されます。
header.phpで確認しましたが、wp_headアクション はwp_head()関数でdo_actionされていて、wp_head()関数は、WordPressのheader.phpに必ず記述するものなので、header.phpが読み込まれれば、このコールバック関数が実行されます。
_s_header_style()
ソースのコメントに書いてある通りですが、ヘッダーのテキストカラーが設定されている場合、そのテキストカラーのcssを生成しています。
下のcss部分が最初理解できませんでした。
if ( ! display_header_text() ) :
?>
.site-title,
.site-description {
position: absolute;
clip: rect(1px, 1px, 1px, 1px);
}
この部分は、画面表示は消しつつも、アクセサビリティのためテキストリーダーに対応させるためのcssコードだそうです。以下参考なりました。