動画を表示させるカスタマイザー「ヘッダーメディア」設定方法

2017年10月20日 2018年10月2日 Wordpressカスタマイズ

WordPress ver4.7の新機能で、カスタマイザーの「ヘッダー画像」が「ヘッダーメディア」に変わりました。

ヘッダーメディアでは、MP4やYoutubeの動画を管理画面で設定し、サイトに反映させる事ができるようになります。
設定がしやすく使いやすいので、ファーストビューで動画を見せるデザインのサイトに是非実装したい機能です。

WEBサイトへの動画活用事例を参考までに置いておきます。
https://chuchu-jex.jp/
https://kinugawakanaya.com/
https://picchio.co.jp/

かっこいいですねー!
動画コンテンツをキービジュアルに活用してみましょう。

ヘッダーメディアの使い方

function.phpに次のコードを追記します。

'video'trueにすることで、ヘッダーメディア機能がオンになります。
ヘッダー画像同様、widthとheightは出力される動画のサイズになります。

管理メニューの「外観→カスタマイズ」を確認してみます。

「ヘッダー画像」が「ヘッダーメディア」に変わっています。

mp4ファイルのアップロード欄と、YoutubeのURLを挿入できる欄が追加されています。
試しにYoutubeにアップされている適当なURLを入れてみます。

動画が表示されました。
ただし、再生しても音声は出ません

音声も再生したい場合は、Wordpressのコアファイルをコピーしてきて、ちょっといじくる必要があります。

参考ページ
https://teratail.com/questions/88486

注意点

動画と同時に「ヘッダー画像」も設定している場合、ヘッダー画像が一瞬だけ表示され、それに重なるように動画が表示されます。
動画はjavascriptで若干遅れて処理されるため、ロードが遅いと画像が見えてしまうので、あらかじめ画像は削除しておくか、見えても良い画像にしておくと良いと思います。

この仕様、あまりイケてないと思うのは僕だけではないはず…。

ヘッダーメディアの出力HTML

MP4ファイル、Youtube、画像では、出力されるタグが変わります。

動画の再生と停止を制御するボタンも同時に出力されます。

動画をレスポンシブ対応する

レスポンシブに対応させるには、CSSを以下のようにします。

埋め込みYoutube動画のレスポンシブ対応でお馴染みなヤツです。

制御ボタンをデザインするなら、.wp-custom-header-video-button .wp-custom-header-video-pause .wp-custom-header-video-play にCSSを追記します。

ボタンじゃなくても、動画自体をクリックすることで再生と停止を繰り返す事ができます。

コメント
  1. まめ より:

    音声を出す様にしたい場合って、方法はあるのでしょうか…?

    • ナオユ より:

      WPのコアファイルで音声をミュートにしているようなのですが、こちらのページのカスタマイズで解決できるかもしれません。
      よかったら参考にしてみてください!

      https://teratail.com/questions/88486

    • まめ より:

      ナオユさま

      お教えいただいた記事を参考にカスタムしたら、無事音声が出る様になりました!!
      ありがとうございました! m(_ _)m

お気軽にコメントをどうぞ。

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

ウェルスナビで損失?