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

デフォルトだと画像1枚しか表示できないので、登録されているヘッダー画像をカルーセルでスライドショーしてやろうっていう改造についての覚書。
文中では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' おすすめかアップロード済みで1枚選択されている

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 おすすめヘッダー から1枚選択 → div>img
  • mp4動画が設定されている & 画像が選択されている → 画像→動画表示(video)
  • YoutubeのURLが設定されている & 画像が選択されている → 画像→動画表示(iframe)
  • 動画だけ設定されている → 動画表示(video/iframe)
    画像が入らないのでvideoとiframeに対してCSSでwidth, heightを設定しておく必要がある
  • 上記に当てはまらない場合 → 何も表示しない

「[WordPress] カスタムヘッダーをカルーセル表示に変更する」への2件のフィードバック

  1. Warning: strpos(): Empty needle in 下記のコードに左記のようなエラーが出てしまいました。

    if ( strpos(‘random’, $header_image_mod) !== false && 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 ”;
    }
    }

    原因を調べてもよく分からず、お忙しいとは思いますが
    もし何か分かるようでしたら、ご教示頂けましたら
    大変有り難く思います。

    返信
    • strpos(): Empty needle は strposの第二引数が空文字列である時に発生するエラーです。
      つまりこうなってます→strpos(‘random’,'')
      $header_image_mod は 22行目でテーマ設定値「header_image」を取得しています。
      $header_image_mod = get_theme_mod( 'header_image', '' );
      デフォルト値を空文字列にしているので、この値がそのままstrposに渡った結果エラーだと思います。
      何かしらheader_imageに値が設定がされたら解消すると思いますが、回避するならデフォルト値を空文字以外のnullとかに変更するか、
      文字数による条件を増やす count($header_image_mod) > 0 などしてみてください。

      返信

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください