[WordPress] カスタムヘッダーをカルーセル表示に変更する

デフォルトだと画像１枚しか表示できないので、登録されているヘッダー画像をカルーセルでスライドショーしてやろうっていう改造についての覚書。
文中ではSwiperを利用する場合のソースになっているが、別のライブラリでもマークアップ変えたら動くと思う。

なおVer4.9＆PHP7環境でこしらえたので他のバージョンでは動かないかもしれない。
（すくなくとも4.7以上は必須）

テーマサポートの追加

カスタムヘッダーは利用中のテーマのfunctions.php内で add_theme_support('custom-header') が add_action( 'after_setup_theme')フックに対して設定されていないと管理画面に出てこない。

function custom_header_setup () {

add_theme_support( 'custom-header', apply_filters( 'my_custom_header_args', array(
	'default-image'      => get_parent_theme_file_uri( '/images/header.jpg' ),
    'random-default'         => false,
  	'width'                  => 0, //画像幅
  	'height'                 => 0, //画像高さ
  	'flex-height'            => true, //フレキシブルな画像高さを許可するか
  	'flex-width'             => true, //フレキシブルな画像幅を許可するか
  	'default-text-color'     => '', //文字色
  	'header-text'            => true, //テキスト
  	'uploads'                => true, //アップロードを許可するか
	'video'                  => true, //動画のうpを許可するか
	'wp-head-callback'       => '', //カスタムヘッダーが有効である時にwp-headで実行したい関数
  	'admin-head-callback'    => '', //カスタムヘッダーが有効である時にadmin-headで実行したい関数
  	'admin-preview-callback' => '', //管理画面のプレビュー時に実行したい関数
	) ));
}
add_action( 'after_setup_theme', 'custom_header_setup' );

これで管理画面の外観のところに「ヘッダー」の項目が出るようになる。

register_default_headers によるデフォルト画像の登録

管理画面のヘッダー画像のところでは「おすすめ」と表示される、あらかじめ登録された状態になる画像。

上記add_theme_support のオプション 'default-image' に含んであるが、
register_default_headers で登録する場合は次のようになる。

function default_headers_setup() {
    register_default_headers( array(
      'default-image' => array(
        'url'           => '%s/dist/images/header.jpg',
        'thumbnail_url' => '%s/dist/images/header.jpg',
        'width'=> 1125,
        'height' => 792,
        'description'   => __( 'Default Header Image', 'my_theme' ),
      ),
      'secondary-image' => array(
        'url'           => '%s/dist/images/header2.jpg',
        'thumbnail_url' => '%s/dist/images/header2.jpg',
        'width'=>227,
        'height'=>50,
        'description'   => __( 'Secondary Header Image', 'my_theme' ),
      ),
    ) );
}
add_action( 'after_setup_theme', 'default_headers_setup' );

関数

以下 functions.php にコピペする

header.php とかの表示したいところで呼び出す

<?php custom_header_carousel(); ?>

関数についての補足

$_wp_default_headers

$_wp_default_headers はプライベートなグローバル変数だが、これに register_default_headers の値がそのまま入っている。

デフォルト画像を 'default-image'で設定している場合はこの変数ではとれないが、
current_theme_supports( 'custom-header', 'default-image' ) で設定の有無が判別できる。
設定されている場合は get_custom_header で画像の情報を取得できる。

get_theme_mod( ‘header_image’)

get_theme_mod( 'header_image') で ヘッダー画像についての変更設定を取得できる。
戻り値は以下の通り

• 'random-default-image' おすすめヘッダー（register_default_headersで登録したやつ）をランダム表示
• 'random-uploaded-image' アップロード済みヘッターをランダム表示
• 'remove-header' 未設定
• '画像URL' おすすめかアップロード済みで１枚選択されている

get_uploaded_header_images

ユーザーがアップロードした画像は get_uploaded_header_images() で取得できる。
戻り値は配列で、画像の情報の配列が枚数分入っている。

{
     ["attachment_id"]=> int
     ["url"]=> string
     ["thumbnail_url"]=> string
     ["alt_text"]=> string
     ["attachment_parent"]=> int
     ["width"]=> int
     ["height"]=> int
}

get_custom_header

設定されているカスタムヘッダーの情報を返してくれる関数。 画像単体の情報になる。

戻り値はオブジェクト

{
     ["url"]=>string
     ["thumbnail_url"]=>string
     ["width"]=>int
     ["height"]=>int
     ["video"]=>bool
     ["attachment_id"]=>int
}

動画の表示

画像から動画の入れ替えは内臓されている wp-custom-header.js がやってくれるので、
それを利用するためのソースを入れている：

  if ( is_header_video_active() && ( has_header_video() || is_customize_preview() ) ) {
    wp_enqueue_script( 'wp-custom-header' );

    wp_localize_script( 'wp-custom-header', '_wpCustomHeaderSettings', get_header_video_settings());

    if(empty($html)) {
      print '<div id="wp-custom-header" class="wp-custom-header image-empty"></div>';
    }
  }

このソースは the_custom_header_markup() にあったもの。

動画の情報が scriptタグで _wpCustomHeaderSettings に格納されるので、それを元に wp_enqueue_script( 'wp-custom-header' ) によって読み込まれた wp-custom-header.js が処理をする。

挙動について

• create_header_img_tag はimgタグを作成する関数
• アップロード済みヘッダー or おすすめヘッダー をランダム表示　を選択、
  登録されている画像が複数枚である　→ カルーセル
• アップロード済みヘッダー or おすすめヘッダー をランダム表示　を選択、
  登録されている画像が1枚である　→ div>img
• アップロード済みヘッダー or おすすめヘッダー から１枚選択　→ div>img
• mp4動画が設定されている ＆ 画像が選択されている　→ 画像→動画表示(video)
• YoutubeのURLが設定されている ＆ 画像が選択されている　→ 画像→動画表示(iframe)
• 動画だけ設定されている　→ 動画表示(video/iframe)
  画像が入らないのでvideoとiframeに対してCSSでwidth, heightを設定しておく必要がある
• 上記に当てはまらない場合　→ 何も表示しない