こんにちは。

川口市でWordPress専門でホームページ制作を行っている、Toshi Seitoです！

先日、WordPressマンツーマンレクチャーのご依頼をいただきました。

そのご依頼内容は「WordPressでヘッダー（メインビジュアル）に動画を埋め込みたいのだけれども、表示が出来ないので手伝って欲しい」と言った内容です。

また、同時にレスポンシブ対応で、スマホサイズの画面で静止画に切り替えたいというご依頼でした。

このマンツーマンレクチャーで行った内容を共有したいと思います。

WordPressの対応バージョン
もともとメイン画像があるテーマは注意が必要
この作業にはコードの記述（おまじない）が必要です
必ずバックアップを取りましょう
作業の流れ
1．functions.phpにカスタムヘッダーの表示設定の為のコードを記述
1. カスタマイザーの確認
2．動画表示用のおまじないの記述
3．カスタマイザーで動画を入れて表示の確認
4．レスポンシブの為のCSSを書く
1. 動画の下にある「停止ボタン」と「動画を再生中」を消したい
5．スマホの時静止画に切り替える為のCSS
動画のサイズに要注意
ご依頼いただいたお客様の声
まとめ

WordPressの対応バージョン

動画が、カスタムヘッダーに埋め込める機能が付いたのは、バージョン4.7からですので、管理画面でバージョンが4.7以上のWordPressを使っているか確認しましょう。

もともとメイン画像があるテーマは注意が必要

もしあなたが使っているテーマに、メイン画像を設定が可能な場合、すでにメイン画像を表示するテンプレートタグ（ここではおまじないといいます）が入っていおり、そのおまじないの書き換えが必要になります。

因みに今回はBizVectorというフリーのテーマを使った例になります。

この作業にはコードの記述（おまじない）が必要です

まず前提として、コピペではありますが、テンプレートにおまじないの記述が必要になります。

その為、ミスってしまうと表示されないという事態も起こり得ますので、サーバーに直接アクセス出来きて、何か起こった場合にバックアップファイルで上書きが出来る状態にしてから行って下さいね。（とは言え最近のWordPressの場合エラーが出そうな場合は保存が出来ないようになっています）

必ずバックアップを取りましょう

テンプレートの改造作業を行う際は、必ずバックアップを取りましょう。

バックアップの取り方は、手を加えるテンプレートファイル（テーマ内のfunctions.php）をサーバーからお使いのパソコンにダウンロードします。

作業の流れ

作業の流れはこんな感じです。

functions.phpにカスタムヘッダーの表示設定の為のおまじないを記述
動画表示用のおまじないを記述
カスタマイザーで動画を入れて表示の確認
レスポンシブの為のCSSを書く
スマホの時静止画に切り替える為のCSS

となります。

1．functions.phpにカスタムヘッダーの表示設定の為のコードを記述

それでは早速作業を始めて行きます。

先ず、テーマフォルダにあるfunctions.phpを探して、中身を開きます。

functions.phpの中身はテーマによって全然違います。

そのファイルの中から、「custom-header」という記述がないかを確認します。

もし、無ければfunctions.phpの一番下に次のように記述します。

add_theme_support( 'custom-header', array(
  'width'         => 2000, //動画の幅
  'height'        => 700, //動画の高さ
  'flex-width'    => true,
  'flex-height'   => true,
  'header-text'   => true,
  'video'         => true
) );

そして、上書き保存。

カスタマイザーの確認

もし、ファイルの更新が上手くいくと、左メニューの「カスタマイズ」の「ヘッダーメディア」を見ると、「ヘッダー動画」という項目が増えているはずです。

2．動画表示用のおまじないの記述

カスタマイザーで動画が設定できるようになっても、サイト上で表示する仕組みを作らないと設定だけできても、表示はされません。

これから、表示できるようにするためのおまじないを書きます。

多くの場合、メイン画像を表示するおまじないは、header.phpに書いてあることが多いです。

今回使っているテーマのBizVectorの場合も標準機能で付いてる、ヘッダー画像を設定するおまじない（<?php echo get_biz_vektor_header_image_home();?>）がhaeder.phpの一番下の方にありました。

<!-- [ /#gMenu ] -->'."\n";
// gMenuのHTMLにフックを設定
$gMenuHtml = apply_filters( 'bizvektor_gMenuHtml', $gMenuHtml );
// gMenuのHTMLを出力
echo $gMenuHtml;
} // if ($gMenu) 
?>

<?php echo get_biz_vektor_header_image_home(); ?> <!-- ←これです。-->

<?php if ( !is_front_page() && !is_page_template( 'page-lp.php' ) ) { ?>
<?php get_template_part('module_pageTit'); ?>
<?php get_template_part('module_panList'); ?>
<?php } ?>

<div id="main" class="main">

これを下のように書き換えます。

<!-- [ /#gMenu ] -->'."\n";
// gMenuのHTMLにフックを設定
$gMenuHtml = apply_filters( 'bizvektor_gMenuHtml', $gMenuHtml );
// gMenuのHTMLを出力
echo $gMenuHtml;
} // if ($gMenu) 
?>

<?php // echo get_biz_vektor_header_image_home(); ?>
<?php the_custom_header_markup(); ?>

<?php if ( !is_front_page() && !is_page_template( 'page-lp.php' ) ) { ?>
<?php get_template_part('module_pageTit'); ?>
<?php get_template_part('module_panList'); ?>
<?php } ?>

<div id="main" class="main">

先程の標準で書いてあった、<?php echo get_biz_vektor_header_image_home(); ?>のchoの前に//を入れて、次のようにコメントアウトします。

<?php // echo get_biz_vektor_header_image_home(); ?>

その次の行に今度は、<?php the_custom_header_markup(); ?>を付け加えます。

このおまじないが、動画や画像を表示するテンプレートタグになります。

3．カスタマイザーで動画を入れて表示の確認

表示用のおまじないの記述も完了したら、いよいよ動画を入れて見ましょう。（YouTubeのURLでもOK）

そうすると、こんな感じで表示されるかなと思います。

因みに画面を見ると、動画が右の方にずれて、スクロールバーまででていますよね。

これは、幅2000pxに指定しているためこんな感じになってしまいますが、後ほど表示については調整しますので、ここでは設定した動画が表示されるかだけをチェックしましょう。

4．レスポンシブの為のCSSを書く

先程の動画の表示確認では、画面をはみ出して表示されてしまいましたが、ここで画像がはみ出ないようにするための、CSSを書きます。

よく言うレスポンシブ対応というやつです。

CSSの追加は、カスタマイズの「追加CSS」で行います。

追加CSSで書く内容はこちらです。

#wp-custom-header-video{
  display:block;
  width:100%;
}

これだけで、画面を縮めるても幅に応じて画面のサイズも変わるようになります。

動画の下にある「停止ボタン」と「動画を再生中」を消したい

動画をいれると同時に、停止ボタンが表示されるようになるのでこちらは消してしまいましょう。

あと、画像には見えていませんが「動画を再生中」というテキストも表示されているのでそれも消しましょう。

消すためのCSSはこちらです。

#wp-custom-header-video{
  display:block;
  width:100%;
}
#wp-custom-header-video-button {
    display: none;
}
#wp-a11y-speak-polite {
    display: none;
}

5．スマホの時静止画に切り替える為のCSS

既にレスポンシブ対応もできているので、スマホの時も動画を表示する場合は前の段階で完了になりますが、今回のご依頼ではスマホでは設定した静止画に切り替えたいとのことだったので、静止画に切り替える方法も書きたいと思います。

設定する静止画（画像）をメディアに登録してURLをメモっておく

まず、静止画として設定したい画像を左メニューのメディアから画像を追加して、追加した後にその画像のURLをコピーを控えておいてください。

スマホ用CSSの記述

それでは動画から静止画への切替のCSSを先程と同じ様に「追加CSS」から入力します。

@media(max-width:640px){
  #wp-custom-header-video{
    display:none;
  }
  #wp-custom-header{
    height: 500px;
    width: 100%;
    background-image: url(http://（サイトのURL）/wp-content/uploads/2019/05/test.jpg);　<!--←さっきメディアでコピーしたURL -->
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
}

コードの説明

@media(max-width:640px)

これはメディアクエリというもので、画面サイズの条件指定をするときに使います。

一般の人は覚える必要はありませんが、意味としては「画面の幅が640px以下になったら括弧の中のCSSを上書きする」、という風になります。

そして、括弧の中には「#wp-custom-header-video」とありますが、これが動画を表示している部分で、命令は画面非表示としています。

つまり、「画面の幅が640px以下になったら動画非表示にする」ということです。

#wp-custom-header

ここの中では、今度は画像を表示するCSSを設定しています。

やっていることは、背景として表示する画像の設定（background-image）、背景として表示する画像の大きさ（background-size）、画像を繰り返し表示するか（background-repeat）、背景として表示する画像の位置（background-position）をそれぞれ設定しています。

切り替わるかを確認

動画から、画像に切り替わるかは、ブラウザ（画面）の幅を縮めることで確認する事が出来ます。

無事切り替わることが確認出来たら、これで作業は終了です！

動画のサイズに要注意

ところで、途中動画をアップロードする所がありましたが、動画のサイズは8Mb以下にするようにしましょう。

そうでないと、アップロードエラーが起こりますし、そもそも8Mb以上の動画を再生させるのは正直重いし、見る方も嫌がられます。

ですので、多少動画が荒くなってもビットレートを下げて、スムーズに動画が再生される位の容量でちょうど良いところを見つけましょう。

動画が再生される為に重くなって、直帰されてしまったら本末転倒です。

ご依頼いただいたお客様の声

今回はタイムチケットからご依頼いただきましたが、そのお客様からのレビューをいただきました。

参照：タイムチケットレビュー

まとめ

今回はテーマのカスタマイズに動画を追加して、表示する方法を説明してきましたが、有料テーマなどでは、独自のやり方でメイン画像を表示をしている場合がありますので、その点に注意してやってみてください。

今回の場合は、functions.phpというWordPressでもコアな部分をいじることになるので、不安な場合は間違いなく専門家にお願いするべきです。

もし分からない事があればコメントを頂ければメッセージ上にはなりますが、アドバイス出来ますのでお気軽にお問い合わせください。

以上、WordPressでヘッダー（メインビジュアル）に動画を埋め込む方法でした！