Help us understand the problem. What is going on with this article?

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

More than 3 years have 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%;
}

現場からは以上です。

gatespace
仙台で働く(株)デジタルキューブ(め組)の Director。 _s Contributor / JAWS-UG 東北 / 網元起動隊
https://gatespace.jp/
digitalcubeinc
デジタルキューブは AWS Partner Network (APN) アドバンスドテクノロジーパートナーです。
https://ja.amimoto-ami.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away