WordPressのテーマカスタマイザーからヘッダーにYoutubeを設置できるようにする

多くのウェブサイトには、ユーザーに訴求するために開いてすぐ目につくところに画像を表示させています。

この部分の名称はいろいろあって、制作会社によってメインビジュアルとかキービジュアルとかヘッダー画像とか呼ばれています(この記事ではメインビジュアルで統一します)。

通常はヘッダーパーツのすぐ下か最上部にあることがほとんどです。

この部分がスライダーになっていていくつもの画像を省スペースで見せるような方法は、近頃では珍しくなくなりました。

今回はこれにもう一工夫して、WordPressで制作したウェブサイトのメインビジュアルにYoutube動画を設置する方法をご紹介したいと思います。

将来的にYoutube動画を差し替えることを想定し、ソースを編集することなくWordPressのテーマカスタマイザーを利用してダッシュボードから動画を変更できるようにしていきます。

テーマカスタマイザーを有効にする

functions.phpに下記のように記入します。

functions.php

/* テーマカスタマイザー
---------------------------------------------------------- */
add_action( 'customize_register', 'theme_customize' );

function theme_customize($wp_customize){

	//メインビジュアルYouTube設定
	$wp_customize->add_section( 'youtube_section', array(
		'title' => 'メインビジュアルYouTube設定',
		'priority' => 80,
		'description' => 'メインビジュアルにYouTubeを設置する場合は、以下の設定を入力してください。',
	));

		$wp_customize->add_setting( 'youtube_id', array(
			'type'  => 'option',
		));
		$wp_customize->add_control( 'youtube_id', array(
			'section' => 'youtube_section',
			'settings' => 'youtube_id',
			'label' => 'YouTube ID(https://www.youtube.com/watch?v=○○○○)の部分',
			'type' => 'text'
		));

		$wp_customize->add_setting( 'youtube_autoplay', array(
			'type'  => 'option',
		));
		$wp_customize->add_control( 'youtube_autoplay', array(
			'section' => 'youtube_section',
			'settings' => 'youtube_autoplay',
			'label' => '自動再生(しない: 0 する: 1)',
			'type' => 'text'
		));

		$wp_customize->add_setting( 'youtube_rel', array(
			'type'  => 'option',
		));
		$wp_customize->add_control( 'youtube_rel', array(
			'section' => 'youtube_section',
			'settings' => 'youtube_rel',
			'label' => '再生終了後に関連動画を表示(しない: 0 する: 1)',
			'type' => 'text'
		));

		$wp_customize->add_setting( 'youtube_volume', array(
			'type'  => 'option',
		));
		$wp_customize->add_control( 'youtube_volume', array(
			'section' => 'youtube_section',
			'settings' => 'youtube_volume',
			'label' => '音量(ミュート: 0 最大: 100)',
			'type' => 'text'
		));

}

これでテーマカスタマイザーが有効になり、ダッシュボードの「外観」→「カスタマイズ」からメインビジュアルのYoutube動画に関する設定ができるようになりました。

なお今回のメインビジュアルYoutube動画は、以下のような仕様になっています。

Youtube IDの入力で簡単にYoutube動画を設置できる
ページを開いたときにYoutube動画を自動再生するかしないか選択できる
Youtube動画の再生終了後に関連動画を表示させるかさせないか選択できる
初期設定の音量を設定できる

上の画像にあるように、Youtube IDとはYoutube動画ページのURL末尾についている「watch?v=」より後ろの文字列です。

↓の動画だとURLは「https://www.youtube.com/watch?v=bRqkLQ1xVyo」なので、Youtube IDは「bRqkLQ1xVyo」です。

自動再生、関連動画表示については上の画像のように「0」か「1」で選択できるようになっています。

音量の初期設定は、ページを開いた最初の状態でのYoutube動画の音量です。「0」でミュート、「100」が最大です。ここは自由に設定できるようにしてありますが、「0」にしておくことを強くおすすめします。

メインビジュアルに動画を設置する

これでWordPressからYoutube動画を設置する機能は追加できました。

次に、実際にメインビジュアルを設置する箇所のテンプレートファイルを編集していきます。

多くの場合はトップページだと思いますので、「front-page.php」「home.php」もしくは「index.php」を編集することになるのではと思います。

front-page.php

<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

function onYouTubeIframeAPIReady() {
	ytPlayer = new YT.Player(
		'youtube_movie',
		{
			width: 1280,
			height: 600,
			videoId: '<?php echo get_option('youtube_id'); ?>',
			playerVars: {
				autoplay: <?php echo get_option('youtube_autoplay'); ?>,
				rel: <?php echo get_option('youtube_rel'); ?>,
				wmode: 'transparent',
				showinfo: 0,
				vq: 'hd720'
			},
			events: {
				'onReady': onPlayerReady
			}
		}
	);
}
function onPlayerReady(event) {
	event.target.setVolume(<?php echo get_option('youtube_volume'); ?>);
}
</script>

<div id="main_vidual">
	<div id="youtube_movie"></div>
</div>

上記ソースをメインビジュアルを設置したい場所に追記します。

ちなみにID「main_vidual」がメインビジュアルを囲むdiv要素で、ID「youtube_movie」がYoutube動画が差し込まれるdiv要素です。

これで、メインビジュアルにYoutube動画を設置することができました。

レスポンシブになるようにスタイルを指定する

それでは最後に、メインビジュアルのスタイルを指定していきます。

今回はディスプレイの横幅いっぱいにYoutube動画を大きく表示させ、なおかつレスポンシブにしたいと思います。

CSS

/*--------------------------------------------------

   メインビジュアルYoutube動画

--------------------------------------------------*/

#main_vidual {
	background: #000;
}

#main_vidual {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
 }

#main_vidual iframe,
#main_vidual object,
#main_vidual embed {
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
}

お使いのWordPressテーマのスタイルシートに上記を追加してください。

Youtube動画の埋め込みコードは、動画をiframeで表示するようになっています。

上記スタイル指定では、ID「main_vidual」のdiv要素内にあるiframeを常に全幅で表示するように指定しています。

横幅の値を「%」で指定する場合、通常であればiframeの高さが取得できないため動画の下部が切れて表示されてしまいます。

そこを解決するために上記のようなスタイル指定をしています。

前提として、「width: 100%;」と指定した場合、高さは取得できません。

そのため他の方法で動画の全体が表示されるように高さを指定しなければなりません。

Youtube動画のアスペクト比(縦横比)は横幅を「100」としたときに高さは「56.25」になります。

そのため、取得できない高さの代わりにpaddingでその分の高さを確保してあげます。

あとは、ID「main_vidual」のdiv要素内にあるiframeが親要素であるID「main_vidual」のdiv要素の縦横いっぱいに表示されるようにスタイルを指定すれば大丈夫です。

この方法はYoutube動画だけでなく、他のiframeやなどembedなどの要素をレスポンシブにしたいときにも使えます。

レスポンシブデザインで制作する場合(現在ではほとんどかもしれませんが)に結構な頻度で使用しますので覚えておくと便利かもです。