【SWELL】ページ背景に動画を表示させる方法【コピペコード付】

当ページのリンクには広告が含まれています。
悩む人

ページ背景に動画を表示させたいんだけど、管理画面メニューから、「外観」>「カスタマイズ」>「サイト全体設定」>「基本デザイン」内にあるページ背景からだと画像しか表示できません。ページ背景に動画を表示させる方法があれば教えてほしいです。

こういった疑問にお答えします。

注意点:本記事では「functions.php」を編集します。編集を誤ると「サイトが表示されない😱」「画面が真っ白に😱」といったことも。事前にバックアップを取る、かつ自己責任の上で編集をお願い致します🙇

本記事で学べること

  • ページ背景に動画を表示させる方法
本記事の内容

SWELLでページ背景に動画を表示させる【コピペコード付】

ページ背景に画像を表示させる

※本題ではないため、さらっと解説します。

手順①:管理画面メニューから、「外観」>「カスタマイズ」>「サイト全体設定」>「基本デザイン」を選択します。

手順②:基本デザインが開いた後、下へスクロールしていくと「ページ背景」が現れます。

手順③:PCとSPのページ背景画像から「画像を選択」します。

手順④:画像を選択すると下記画像のようにページ背景に画像が表示されます。

それでは、本題に入ります。

ページ背景に動画を表示させる

以下の順で解説していきます。

  • 完成型を動画で確認
  • functions.phpにコードをコピペする
  • 追加CSSにコードをコピペする

完成型を動画で確認

functions.phpにコードをコピペする

管理画面メニューから、「外観」>「テーマファイルエディター」を選択します。

テーマを編集から、「テーマファイル」>「functions.php」を選択します。

※必ず子テーマのfunctions.phpで編集を行いましょう。

子テーマで編集を行う理由:親テーマは、WordPressテーマ「SWELL」本体であり、開発者が機能追加や不具合修正のためにバージョンアップしていくため、親テーマで編集を行ったとしても「上書き」されてしまいます。

「/* その他の読み込みファイルはこの下に記述 */」直下に下記のどちらかのコードをコピペします。

ページ全体に反映


function swell_add_background_video() {
    // 動画のURLを直接指定
    $video_url = 'ここに動画のURLをコピペします。';

    // videoタグのHTMLを出力
    if ( ! empty( $video_url ) ) {
        echo '
        <div id="page-background-video">
            <video autoplay muted loop id="myVideo">
                <source src="' . esc_url( $video_url ) . '" type="video/mp4">
                お使いのブラウザはvideoタグをサポートしていません。
            </video>
        </div>
        ';
    }
}
add_action('wp_body_open', 'swell_add_background_video');

トップページのみに反映


function swell_add_background_video() {
    // トップページのみでこのコードを実行
    if ( is_front_page() ) {
        // 動画のURLを直接指定
        $video_url = 'ここに動画のURLをコピペします。';

        // videoタグのHTMLを出力
        if ( ! empty( $video_url ) ) {
            echo '
            <div id="page-background-video">
                <video autoplay muted loop id="myVideo">
                    <source src="' . esc_url( $video_url ) . '" type="video/mp4">
                    お使いのブラウザはvideoタグをサポートしていません。
                </video>
            </div>
            ';
        }
    }
}
add_action('wp_body_open', 'swell_add_background_video');

管理画面メニューから、「メディア」>「ライブラリ」を選択します。

背景動画として表示させたい動画を選択後、「URLをクリックボードにコピー」をクリックします。

その後、functions.phpの「ここに動画のURLをコピペします。」に貼り付けます。

追加CSSにコードをコピペする

管理画面メニューから、「外観」>「カスタマイズ」>「追加CSS」を選択します。

下記コードを追加CSSにコピペします。


/* ページ背景動画のスタイル */
#page-background-video {
	bottom: 0;
	overflow: hidden;
	min-height: 100%;
	min-width: 100%;
	position: fixed;
	right: 0;
	z-index: -100;
}
#page-background-video video {
	bottom: 0;
	min-height: 100%;
	min-width: 100%;
	position: absolute;
	right: 0;
}

背景に動画が表示されれば完成です。

※冒頭の動画と上記画像で見た目が違うのは、動画の方はカッコよく見せようと追加CSSでスタイルを変えているためです笑

なお、動画が表示されない場合は「公開」をクリック後、(再読み込み)してみて下さい。

それでも表示されない場合は、Macであれば「⌘++R」、Winであれば「Ctrl+Shift+R」でスーパーリロードをお試し下さい。

以上で解説を終わります。

本記事が読者の疑問を解決する役に立つと幸いです。

最後まで読んで頂きありがとうございました。

おわり。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
本記事の内容