LoginSignup
12
12

More than 5 years have passed since last update.

WordPress テーマカスタマイザーに動画セクションを追加して出力(ver 4.6以下の場合)

Last updated at Posted at 2016-06-10

※WordPress 4.7 で「動画ヘッダー」機能が実装されました。
https://make.wordpress.org/core/2016/11/26/video-headers-in-4-7/
よってこの記事は WordPress 4.6 以前のバージョンでの内容となります。
実装に関しては WordPress テーマカスタマイザーで動画を追加して出力(ver 4.7以降の場合) を参考にどうぞ。


AMIMOTO AMI では HOME のヘッダー部分に動画を埋め込んで自動再生しています。
リニューアルでなくなってしまったけど、この部分の仕組みをご紹介します。

動画再生方法

Coverrがおすすめ。

動画を選ぶとフォールバック用の静止画像がセットでダウンロードされます。
HTML、CSS、JavaScriptはサイトに表示されるので、「How to use」セクションに従いましょう。
CMS(WordPress)に組み込まないならこのまま使いましょう。

※このCSSに 足りない記述があるため、下記を追加しておくと幸せになります

.hidden {
    display: none;
}

WordPress のテーマに組み込む

CSS と JavaScript

テーマの functions.php に記述。
_siemoto 使うと既に wp_enqueue_scripts アクションはあるのでその内部に追加するのがいいでしょう。
ファイル名やパス、ハンドルはよしなに。

functions.php
function mytheme_scripts() {
    if ( is_front_page() ) { // フロントページのみ埋め込む
        wp_enqueue_style( 'mytheme-style', get_template_directory_uri() . '/css/movie.css', array(), 'v0.1.0' );
        wp_enqueue_script( 'mytheme-js', get_template_directory_uri() . '/js/movie.js', array( 'jquery' ), 'v0.1.0', true );
    }
}
add_action( 'wp_enqueue_scripts', 'mytheme_scripts' );

HTML

header.php あたりにいい感じに組み込む。ファイル名やパス、videoタグの属性についてはお好みで。

header.php
<?php if ( is_front_page() ) : // フロントページのみ埋め込む ?>
    <div class="homepage-hero-module">
        <div class="video-container">
            <div class="filter"></div>
            <video autoplay loop class="fillWidth" poster="<?php echo get_template_directory_uri(); ?>/movie/example.jpg">
                <source src="<?php echo get_template_directory_uri(); ?>/movie/example.mp4" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.
                <source src="<?php echo get_template_directory_uri(); ?>/movie/example.webm" type="video/webm" />Your browser does not support the video tag. I suggest you upgrade your browser.
            </video>
            <div class="poster hidden">
                <img src="<?php echo get_template_directory_uri(); ?>/movie/example.jpg" alt="">
            </div>
        </div>
    </div>
<?php endif; ?>

WordPress テーマカスタマイザーに動画セクションを追加

動画を変更する際にテーマのPHPソースを直接変えるのであれば適当なところにHTMLソースを組み込むだけですが、ダッシュボード(管理画面)から動画を差し替えられるよう、WordPressのテーマカスタマイザーに機能を追加します。
その際、もともとある「ヘッダー画像」は動画のフォールバック用の画像として利用するようにして、そのセクションに動画のアップローダーを追加します。

_siemoto なら、 /テーマディレクトリ/inc/customizer.php の customize_register 部分以下のように変更。
そうじゃない場合はよしなに。

customizer.php
function my_customize_register( $wp_customize ) {
    $wp_customize->add_setting( 'mytheme_header_movie_mp4',
        array(
            'default' => '',
            'transport' => 'postMessage',
        )
    );
    $wp_customize->add_control( 
        new WP_Customize_Upload_Control( 
        $wp_customize, 
        'mytheme_header_movie_mp4', 
        array(
            'label'      => __( 'Header Movie MP4', 'mytheme' ),
            'section'    => 'header_image',
            'settings'   => 'mytheme_header_movie_mp4',
        ) ) 
    );
    $wp_customize->add_setting( 'mytheme_header_movie_webm',
        array(
            'default' => '',
            'transport' => 'postMessage',
        )
    );
    $wp_customize->add_control( 
        new WP_Customize_Upload_Control( 
        $wp_customize, 
        'mytheme_header_movie_webm', 
        array(
            'label'      => __( 'Header Movie WebM', 'mytheme' ),
            'section'    => 'header_image',
            'settings'   => 'mytheme_header_movie_webm',
        ) ) 
    );

    $wp_customize->get_setting( 'blogname' )->transport         = 'postMessage';
    $wp_customize->get_setting( 'blogdescription' )->transport  = 'postMessage';
    $wp_customize->get_setting( 'header_textcolor' )->transport = 'postMessage';
}
add_action( 'customize_register', 'my_customize_register' );

見た目はこんな感じ。なお、アップロードや保存は WordPress がよろしくやってくれます。
スクリーンショット 2016-06-10 11.09.42.png

テーマカスタマイザーで保存された動画を出力

header.php に組み込んだソースを改変。

header.php
<?php if ( is_front_page() ) : ?>
    <?php
        $header_movie_mp4  = get_theme_mod( 'mytheme_header_movie_mp4', get_template_directory_uri() . '/movie/example.mp4' );
        $header_movie_webm = get_theme_mod( 'mytheme_header_movie_webm', get_template_directory_uri() . '/movie/example.webm' );
        $header_image      = ( get_header_image() ) ? get_header_image() : get_template_directory_uri() . '/movie/example.jpg';
    ?>
    <div class="homepage-hero-module">
        <div class="video-container">
            <div class="filter"></div>
            <video autoplay loop class="fillWidth" poster="<?php echo esc_url( $header_image ); ?>">
                <source src="<?php echo esc_url( $header_movie_mp4 ); ?>" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.
                <source src="<?php echo esc_url( $header_movie_webm ); ?>" type="video/webm" />Your browser does not support the video tag. I suggest you upgrade your browser.
            </video>
            <div class="poster hidden">
                <img src="<?php echo esc_url( $header_image ); ?>" alt="">
            </div>
        </div>
    </div>
<?php endif; ?>
12
12
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12
12