カスタムヘッダー

2020.04.03 2020.04.03

TOPICS

翻訳元記事はこちらです。

カスタムヘッダー

カスタムヘッダーを使用すると、サイト所有者はメイン画像をサイトにアップロードすることができ、特定のページの上部に配置することができます。
これらの画像は、管理画面の外観 > ヘッダーセクションのビジュアルエディタを使って、ユーザーがカスタマイズしたり、トリミングしたりすることができます。
また、ヘッダーの下や上部にテキストを配置することもできます。流動的なレイアウトとレスポンシブデザインをサポートするために、これらのヘッダーは柔軟性を持たせることもできます。
ヘッダーは get_custom_header() を使ってテーマに配置することができますが、まず add_theme_support() を使って functions.php ファイルに追加する必要があります。カスタムヘッダーはオプションです。

基本的で柔軟性のあるテキスト付きのカスタムヘッダーを設定するには、以下のコードを含めることになります。

function themename_custom_header_setup() {
    $args = array(
        'default-image'      => get_template_directory_uri() . 'img/default-image.jpg',
        'default-text-color' => '000',
        'width'              => 1000,
        'height'             => 250,
        'flex-width'         => true,
        'flex-height'        => true,
    )
    add_theme_support( 'custom-header', $args );
}
add_action( 'after_setup_theme', 'themename_custom_header_setup' );

after_setup_themeフックを利用して、テーマを読み込んだ後にカスタムヘッダーを登録するようにしています。

カスタムヘッダーとは？

あなたのテーマでカスタムヘッダーを有効にすると、ユーザーはWordPressテーマのカスタマイザーを使ってヘッダー画像を変更することができます。これにより、ユーザーは自分のサイトの外観をよりコントロールし、柔軟性を高めることができます。

テーマにカスタムヘッダーの機能を追加

カスタムヘッダーの機能を追加するには、以下のコードをfunctions.phpに追加します。

add_theme_support( 'custom-header' );

カスタムヘッダーを有効にすると、add_theme_support() 関数に引数を渡すことで他のいくつかのオプションを設定することができます。

特定の設定オプションを配列を使用して add_theme_support 関数に渡すことができます。

function themename_custom_header_setup() {
    $defaults = array(
        // Default Header Image to display
        'default-image'         => get_template_directory_uri() . '/images/headers/default.jpg',
        // Display the header text along with the image
        'header-text'           => false,
        // Header text color default
        'default-text-color'        => '000',
        // Header image width (in pixels)
        'width'             => 1000,
        // Header image height (in pixels)
        'height'            => 198,
        // Header image random rotation default
        'random-default'        => false,
        // Enable upload of image file in admin 
        'uploads'       => false,
        // function to be called in theme head section
        'wp-head-callback'      => 'wphead_cb',
        //  function to be called in preview page head section
        'admin-head-callback'       => 'adminhead_cb',
        // function to produce preview markup in the admin screen
        'admin-preview-callback'    => 'adminpreview_cb',
        );
}
add_action( 'after_setup_theme', 'themename_custom_header_setup' );

柔軟なヘッダー画像

flex-height または flex-width が配列に含まれていない場合、高さと幅は固定サイズとなります。
flex-heightとflex-widthが含まれている場合は、高さと幅が代わりに推奨寸法として使用されます。

ヘッダーテキスト

デフォルトでは、ユーザーは画像の上にヘッダーテキストを表示するかどうかのオプションを持つことになります。ユーザーにヘッダーテキストを強制するオプションはありませんが、もしヘッダーテキストを完全に削除したい場合は、引数の ‘header-text’ を ‘false’ に設定することができます。これにより、ヘッダーテキストとそれを切り替えるオプションが削除されます。

例

ユーザーが最初にあなたのテーマをインストールするときに、ユーザーが自分のヘッダーを選択する前に選択されるデフォルトのヘッダーを含めることができます。
これにより、ユーザーはテーマのセットアップをより迅速に行うことができ、自分の画像をアップロードする準備が整うまでデフォルトの画像を使用することができます。

デフォルトのヘッダー画像のサイズを、幅980px、高さ60pxにします。

$header_info = array(
    'width'         => 980,
    'height'        => 60,
    'default-image' => get_template_directory_uri() . '/images/sunset.jpg',
);
add_theme_support( 'custom-header', $header_info );
 
$header_images = array(
    'sunset' => array(
            'url'           => get_template_directory_uri() . '/images/sunset.jpg',
            'thumbnail_url' => get_template_directory_uri() . '/images/sunset_thumbnail.jpg',
            'description'   => 'Sunset',
    ),
    'flower' => array(
            'url'           => get_template_directory_uri() . '/images/flower.jpg',
            'thumbnail_url' => get_template_directory_uri() . '/images/flower_thumbnail.jpg',
            'description'   => 'Flower',
    ),  
);
register_default_headers( $header_images );

デフォルト画像を登録するには、 register_default_headers()を呼び出すことを忘れないでください。この例では、sunset.jpgがデフォルト画像、flower.jpgが代替の選択肢となっています。

管理画面から「外観」→「ヘッダー」をクリックして、カスタマイザーの「ヘッダー画像」メニューを表示させます。
add_theme_support()で指定した幅と高さが推奨サイズとして表示され、選択可能なオプションとしてflower.jpgが表示されていることに注目してください。

柔軟なヘッダーの使用

デフォルトでは、ユーザーはアップロードした画像を指定した幅と高さに収まるようにトリミングしなければなりません。
しかし、’flex-width’ と ‘flex-height’ を true に指定することで、ユーザーが任意の高さと幅の画像をアップロードできるようにすることができます。これにより、ユーザーは新しい写真をアップロードする際に、トリミングのステップをスキップすることができます。

$args = array(
    'flex-width'    => true,
    'width'         => 980,
    'flex-height'   => true,
    'height'        => 200,
    'default-image' => get_template_directory_uri() . '/images/header.jpg',
);
add_theme_support( 'custom-header', $args );

header.phpは以下のようになります。

<img alt="" src="<?php header_image(); ?>" width="<?php echo absint( get_custom_header()->width ); ?>" height="<?php echo absint( get_custom_header()->height ); ?>">

カスタムヘッダーの表示

カスタムヘッダーを表示するには、関数get_header_image()でヘッダー画像を取得し、get_custom_header()でカスタムヘッダーのデータを取得します。
例えば、下記はカスタムヘッダー画像を使ってテーマ内でヘッダーを表示する方法を示しています。以下のコードはheader.phpファイルの中に入っています。

<?php if ( get_header_image() ) : ?>
    <div id="site-header">
        <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
            <img src="<?php header_image(); ?>" width="<?php echo absint( get_custom_header()->width ); ?>" height="<?php echo absint( get_custom_header()->height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
        </a>
    </div>
<?php endif; ?>

下位互換性

カスタムヘッダーはWordPress 3.4以上でサポートされています。もしあなたのテーマが3.4よりも古いWordPressのインストールをサポートしたい場合は、add_theme_support( 'custom-header')の代わりに以下のコードを使用することができます。

global $wp_version;
if ( version_compare( $wp_version, '3.4', '>=' ) ) :
    add_theme_support( 'custom-header' );
else :
    add_custom_image_header( $wp_head_callback, $admin_head_callback );
endif;

関数リファレンス