Edited at

WordPress テーマカスタマイザーで動画を追加して出力(ver 4.7以降の場合)

More than 1 year has passed since last update.

以前に「WordPress テーマカスタマイザーに動画セクションを追加して出力(ver 4.6以下の場合)」という記事を書きましたが、WordPress 4.7 でカスタムヘッダーにビデオがサポートされました。

これにより以前より簡単に動画ヘッダーを実装できるようになりましたので軽く紹介。

参照:https://make.wordpress.org/core/2016/11/26/video-headers-in-4-7/


カスタムヘッダーで動画を使うようにする

'video' => true, を追加

参照:https://developer.wordpress.org/themes/functionality/custom-headers/


themename_custom_header_setup

<?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,
'video' => true,
)
add_theme_support( 'custom-header', $args );
}
add_action( 'after_setup_theme', 'themename_custom_header_setup' );

これだけでカスタマイザーに「ヘッダーメディア」として追加される

スクリーンショット 2016-12-08 12.56.09.png

なお、対応しているのは

- .mp4

- YouTube の動画


出力側

表示した位置に


the_custom_header_markup.php

<?php the_custom_header_markup(); ?>


でオケ

スクリーンショット 2016-12-08 14.40.09.png


画像と動画の両方を設定した場合

動画の読み込みが完了するまでは「ヘッダー画像」が表示されます。読み込み完了後、 wp-custom-header.js が画像と動画を置き換えます。


wp-custom-header.js がレンダリングする停止・再生ボタンのソース

cssで調整したい場合はクラスを参考に

Pause Button

<button type="button" id="wp-custom-header-video-button" class="wp-custom-header-video-button wp-custom-header-video-play">Pause</button>

Play Button

<button type="button" id="wp-custom-header-video-button" class="wp-custom-header-video-button wp-custom-header-video-pause">Play</button>


カスタムヘッダーの見た目

the_custom_header_markup()wp-custom-header という cssクラスを持つ <div> タグで囲まれているので、こんな感じの css を追加しておく。


wp-custom-header.css

.wp-custom-header iframe,

.wp-custom-header img,
.wp-custom-header video {
display: block;
height: auto;
max-width: 100%;
}

現場からは以上です。