WordPressテーマWelcart Basicにヘッダー動画を追加する方法

ことの始まり

本日も、先日グラスハパ中野さんの講習を受けて、ホームページの改善を行っておりました。今日行ったのはヘッダーに動画を入れる、ということ。

しかし、はじめに参考にしたサイトでは一向に動画が挿入されず、結局3時間位あれこれ費やしてしまいました。ですので、ここにメモしておきます。

環境

私がveloart intelligenceのホームページで使用しているのは、WordpressのWelcart Basicというテーマ。

WordPressのデフォルトテーマのtwenty senventeen等なら、最初からヘッダーの設定で動画を入れれるようですが、Welcart Basicは１手間必要でした。

Welcart Basicテーマへの動画挿入方法

1. function.phpの編集
直接function.phpを触るよりも、code snippetsというwordpressプラグインを使用した方が良いと思います。Add Newで以下を入れてsaveすればOK。

add_theme_support( 'custom-header', array(
 'video' => true,
) );

2. header.phpの編集
私はx serverと契約しているので、x serverのファイルマネージャに入り、 /ご自身のドメイン名/public_html/サイトトップurl/wp-content/themes/welcart_basic/ (私の例:　/veloart-intelligence.com/public_html/store/wp-content/themes/welcart_basic/) にあるheader.phpの最終行に以下を書き込みUTF-8で保存する。 注：　子テーマを作るほうが良いのかもしれませんが、以前子テーマはあまり良くない、という話も読んだし、時間もないのでとりあえず直接編集しちゃいました。

<?php the_custom_header_markup(); ?>

3. ヘッダー動画の追加

外観→ヘッダー→ヘッダーメディア　に、youtube動画のURLを入れれば、動画が再生されるはず。音声はありません。また今度暇な時にやります。また、このままではスマホで動画が再生されません。結構重大ですが、こちらもまた今度やります。

終わりに

今回は、こちらを参考にさせていただきました。

ちょっと急いでいるので、まだまだ完成形ではありませんが、メモとしてヘッダー動画挿入方法をお伝えしました。それではまた！