カスタムヘッダー

カスタムヘッダーは、サイトの所有者が自分の「タイトル」画像をサイトにアップロードできるようにし、特定のページの上部に配置できます。これらは、管理パネルの**外観

ヘッダーセクションのビジュアルエディタを通じてユーザーによってカスタマイズおよびトリミングできます。また、ヘッダーの下または上にテキストを配置することもできます。流動的なレイアウトとレスポンシブデザインをサポートするために、これらのヘッダーは柔軟である場合もあります。ヘッダーはget_custom_header()を使用してテーマに配置されますが、最初にadd_theme_support()を使用してfunctions.phpファイルに追加する必要があります。カスタムヘッダーはオプション**です。

基本的な柔軟なカスタムヘッダーをテキスト付きで設定するには、次のコードを含めます: 

  1. <?php
  2. function themename_custom_header_setup() {
  3.     $args = array(
  4.         'default-image'      => get_template_directory_uri() . 'img/default-image.jpg',
  5.         'default-text-color' => '000',
  6.         'width'              => 1000,
  7.         'height'             => 250,
  8.         'flex-width'         => true,
  9.         'flex-height'        => true,
  10.     );
  11.     add_theme_support( 'custom-header', $args );
  12. }
  13. add_action( 'after_setup_theme', 'themename_custom_header_setup' );

カスタムヘッダーがテーマの読み込み後に登録されるように、after_setup_themeフックが使用されます。

カスタムヘッダーとは？

テーマでカスタムヘッダーを有効にすると、ユーザーはWordPressテーマカスタマイザーを使用してヘッダー画像を変更できます。これにより、ユーザーはサイトの外観に対してより多くの制御と柔軟性を持つことができます。

テーマにカスタムヘッダーサポートを追加する

テーマでカスタムヘッダーを有効にするには、functions.phpファイルに次の内容を追加します: 

  1. add_theme_support( 'custom-header' );

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

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

  1. <?php
  2. function themename_custom_header_setup() {
  3.     $defaults = array(
  4.         // Default Header Image to display.
  5.         'default-image'          => get_template_directory_uri() . '/images/headers/default.jpg',
  6.         // Display the header text along with the image.
  7.         'header-text'            => false,
  8.         // Header text color default.
  9.         'default-text-color'     => '000',
  10.         // Header image width (in pixels).
  11.         'width'                  => 1000,
  12.         // Header image height (in pixels).
  13.         'height'                 => 198,
  14.         // Header image random rotation default.
  15.         'random-default'         => false,
  16.         // Enable upload of image file in admin.
  17.         'uploads'                => false,
  18.         // Function to be called in theme head section.
  19.         'wp-head-callback'       => 'wphead_cb',
  20.         // Function to be called in preview page head section.
  21.         'admin-head-callback'    => 'adminhead_cb',
  22.         // Function to produce preview markup in the admin screen.
  23.         'admin-preview-callback' => 'adminpreview_cb',
  24.     );
  25. }
  26. add_action( 'after_setup_theme', 'themename_custom_header_setup' );

柔軟なヘッダー画像

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

ヘッダーテキスト

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

例

カスタムヘッダー画像を設定する

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

デフォルトのヘッダー画像の幅980px、高さ60pxを設定します: 

  1. <?php
  2. $header_info = array(
  3.     'width'         => 980,
  4.     'height'        => 60,
  5.     'default-image' => get_template_directory_uri() . '/images/sunset.jpg',
  6. );
  7. add_theme_support( 'custom-header', $header_info );
  9. $header_images = array(
  10.     'sunset' => array(
  11.         'url'           => get_template_directory_uri() . '/images/sunset.jpg',
  12.         'thumbnail_url' => get_template_directory_uri() . '/images/sunset_thumbnail.jpg',
  13.         'description'   => 'Sunset',
  14.     ),
  15.     'flower' => array(
  16.         'url'           => get_template_directory_uri() . '/images/flower.jpg',
  17.         'thumbnail_url' => get_template_directory_uri() . '/images/flower_thumbnail.jpg',
  18.         'description'   => 'Flower',
  19.     ),
  20. );
  21. register_default_headers( $header_images );

カスタムヘッダー（Custom Headers） - img1

デフォルトの画像を登録するためにregister_default_headers()を呼び出すことを忘れないでください。この例では、sunset.jpgがデフォルトの画像で、flower.jpgがカスタマイザーでの代替選択です。

管理画面から、**外観

ヘッダー**をクリックしてカスタマイザーにヘッダー画像メニューを表示します。add_theme_support()で指定された幅と高さが推奨サイズとして表示され、flower.jpgが選択可能なオプションとして表示されます。

柔軟なヘッダーを使用する

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

柔軟なヘッダーを設定します: 

  1. <?php
  2. $args = array(
  3.     'flex-width'    => true,
  4.     'width'         => 980,
  5.     'flex-height'   => true,
  6.     'height'        => 200,
  7.     'default-image' => get_template_directory_uri() . '/images/header.jpg',
  8. );
  9. add_theme_support( 'custom-header', $args );
  3. ``````bash
  4. <img alt="" src="<?php header_image(); ?>" width="<?php echo absint( get_custom_header()->width ); ?>" height="<?php echo absint( get_custom_header()->height ); ?>">
  5. `

カスタムヘッダーの表示

カスタムヘッダーを表示するには、関数get_header_image()がヘッダー画像を取得します。get_custom_header()がカスタムヘッダーデータを取得します。

例えば、以下はカスタムヘッダー画像を使用してテーマにヘッダーを表示する方法を示しています。以下のコードはheader.phpファイルに入ります。 

  1. <?php if ( get_header_image() ) : ?>
  2.     <div id="site-header">
  3.         <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
  4.             <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' ) ); ?>">
  5.         </a>
  6.     </div>
  7. <?php endif; ?>

後方互換性

カスタムヘッダーはWordPress 3.4以降でサポートされています。テーマが3.4より古いWordPressインストールをサポートする場合は、add_theme_support( ‘custom-header’);の代わりに次のコードを使用できます。 

  1. <?php
  2. global $wp_version;
  3. if ( version_compare( $wp_version, '3.4', '>=' ) ) :
  4.     add_theme_support( 'custom-header' );
  5. else :
  6.     add_custom_image_header( $wp_head_callback, $admin_head_callback );
  7. endif;

関数リファレンス