MENU

【WordPress】ヘッダー動画を超簡単に設置する方法!

WordPressのテーマを編集して、ヘッダー動画を追加したい…。
けれどどうやってやればいいか分からない。

そんな方に3ステップで誰でも簡単に行える設定方法をご案内します!



設定作業は、必ずバックアップを行った上で行うことをお勧めします!
(※作業自体は自己責任でお願いします。)

目次

「function.php」の設定

まず、「function.php」を編集します。
「function.php」はいわば、WordPressで使うツールを管理するファイルです。ここでヘッダー動画を挿入する機能を有効化します。


以下の構文を追加してあげます。
(既存で「add_theme_support」が存在する場合には、合わせて編集して下さい。)

add_theme_support( 'custom-header', array(
  'width'         => 1980,  
  'height'        => 600, 
  'flex-width'    => true,
  'flex-height'   => true,
  'header-text'   => true,
  'video'         => true,
  'video-active-callback' => __return_true
) );

widthは動画の横幅、heightは動画の縦幅になるので、サイトの環境に応じて数値を調整します。

「front-page.php」の設定

次に「front-page.php」です。
今回挿入したいヘッダー動画は、トップページのみに表示したいため「front-page.php」に以下の構文を追加してあげることで設定ができます。

	<?php if ( get_custom_header_markup() ) : ?>
		<?php the_custom_header_markup(); ?>
	<?php endif; ?>


実際には、「front-page.php」の「get_header」の下あたりに入れてあげることが多いかと思います。
サイトのデザインに応じて設置場所を合わせて下さい。

<?php get_header();?>

	<?php if ( get_custom_header_markup() ) : ?>
		<?php the_custom_header_markup(); ?>
	<?php endif; ?>

・・・・・・

「style.css」の設定

これで終わりと思いきや、CSSの設定が重要です。

以下の設定を「style.css」に追加してあげます。これにより動画だけが表示されます。


/* custom-header追加用 */
#wp-custom-header-video{
  display: block;
  width: 100%;
}
#wp-custom-header-video{
  display: block;
  width: 100%;
}
# wp-custom-header-video-button {
    display: none;
}
#wp-a11y-speak-polite {
    display: none;
}
よかったらシェアしてね!

この記事を書いた人

目次
閉じる