WordPress カスタムヘッダー

  Code Tips minimum Theme

作成中の「Code Tips minimum Theme」でカスタムヘッダーを使えるようにします。

カスタムヘッダー(Custom Headers)とは、フロントページのヘッダー画像やサイトロゴ画像などをダッシュボードの「外観」から変更できるようにする仕組みです。

作成中の「Code Tips minimum Theme」では、まだダッシュボードの「外観」の項に「ヘッダー画像」の設定項目は無い状態です。

 

カスタムヘッダーの登録

カスタムヘッダーを使えるようにするためには、【functions.php】に add_theme_support( 'custom-header', $args ) を登録します。

【functions.php】

// custom header
$header_params = array(
  'width' => 1140,
  'height' => 250,
  'header-text' => false
  );
add_theme_support( 'custom-header', $header_params );

 

add_theme_support( ‘custom-header’, $args )

カスタムヘッダーは、テーマのトップヘッダーセクションの代表画像として選択された画像です。

WordPress Codex : カスタムヘッダー

add_theme_support( 'custom-header', $args )
$args= array(
  'default-image' => '',
  'random-default' => false,
  'width' => 0,
  'height' => 0,
  'flex-height' => false,
  'flex-width' => false,
  'default-text-color' => '',
  'header-text' => true,
  'uploads' => true,
  'wp-head-callback' => '',
  'admin-head-callback' => '',
  'admin-preview-callback' => '',
);
add_theme_support( 'custom-header', $args);

 

パラメータ
パラメータ 説明
default-image
文字列
デフォルトヘッダー画像へのパスの指定
初期値:null
random-default
真偽値
ランダム表示のON/OFF
初期値:false
width
整数
ヘッダー画像の幅
初期値:0
height
整数
ヘッダー画像の高さ
初期値:0
flex-height
真偽値
高さをトリミングできるようにするか
初期値:false
flex-width
真偽値
幅をトリミングできるようにするか
初期値:false
default-text-color
文字列
ヘッダーテキストの文字色の指定
初期値:null
header-text
真偽値
ヘッダーテキスト機能のON/OFF
初期値:true
uploads
真偽値
他の画像をアップロードすることができるようにする
初期値:true
wp-head-callback
文字列
ヘッダーをスタイリングするためのコールバックを指定
初期値:null
admin-head-callback
文字列
管理画面でヘッダープレビューをスタイリングするためのコールバックを指定
初期値:null
admin-preview-callback
文字列
管理画面でヘッダープレビューを表示するために使用するコールバックを指定
初期値:null

 

カスタムヘッダーを出力するためのテンプレートタグの設置

カスタムヘッダーを出力するためのテンプレートタグを【header.php】に追加します。

【header.php】の wp_nav_menu() の下に header_image() を追加してカスタムヘッダーを表示するよにします。
また、 header_image() の前に条件分岐 if (get_header_image()) を使ってカスタムヘッダーがあるかどうかを判定します。

【header.php】

・・・略・・・
<body <?php body_class(); ?>>
  <h1><a href="<?php bloginfo('url'); ?>/"><?php bloginfo('name'); ?></a></h1>
  <?php wp_nav_menu(); ?>
  <?php if (get_header_image()) : ?>
  <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><img src="<?php header_image(); ?>" alt="<?php bloginfo('name'); ?>"></a>
  <?php endif; ?>
・・・略・・・

 

header_image()

ヘッダーイメージのパスを表示する。

WordPress Codex : 関数リファレンス/header image

 

get_header_image()

Retrieve header image for custom header.

WordPress Codex : Function Reference/get header image

 

以上でカスタムヘッダーの設定は完了です。
ダッシュボードの「外観」に「ヘッダー画像」の設定項目が追加されているので、そこで設定をして保存すると反映されます。

 

Code Tips minimum Theme

【functions.php】

<?php
// css
function register_style() {
  wp_register_style('style', get_stylesheet_uri(), array(), false, 'all');
}
function add_stylesheet() {
  register_style();
  wp_enqueue_style('style');
}
add_action('wp_enqueue_scripts', 'add_stylesheet');

// sidebar
function my_widgets_init() {
  $my_widgets_param = array(
    'name' => 'Sidebar',
    'id' => 'sidebar-1'
  );
  register_sidebar( $my_widgets_param );
}
add_action( 'widgets_init', 'my_widgets_init' );

// custom menu
function register_my_menu() {
  register_nav_menu('primary', 'Primary Menu');
}
add_action('after_setup_theme', 'register_my_menu');

// search-form >> html5
add_theme_support('html5', array('search-form'));

// custom background
$background_param = array(
  'default-color' => 'ffffff'
);
add_theme_support( 'custom-background', $background_param );

// custom header
$header_params = array(
  'width' => 1140,
  'height' => 250,
  'header-text' => false
  );
add_theme_support( 'custom-header', $header_params );
?>

 

【header.php】

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
  <head>
  <meta charset="<?php bloginfo( 'charset' ); ?>">
  <title><?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?></title>
  <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
  <h1><a href="<?php bloginfo('url'); ?>/"><?php bloginfo('name'); ?></a></h1>
  <?php wp_nav_menu(); ?>
  <?php if (get_header_image()) : ?>
  <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><img src="<?php header_image(); ?>" alt="<?php bloginfo('name'); ?>"></a>
  <?php endif; ?>