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;
}
