※当サイトにはプロモーションが含まれています。
クライアント SWELLの記事スライダーの背景画像を動画にしてくれ！
にゃテック おけまるだにゃ
ワードプレス（WordPress）テーマの「SWELL（スウェル）」には、トップページで投稿ページをスライドさせる記事スライダーという機能があります。
しかし、記事スライダーの背景には画像しか設定することができません。
その為、今回は、記事スライダーの背景を動画にして、下記のようなヘッダーを作成したいと思います。
なお、検証したSWELLの環境は以下の通りです。
SWELLバージョン：2.13
WordPressバージョン：6.7.x
PHPバージョン：8.2.x
サーバー：エックスサーバー
※セキュリティの観点から、マイナーバージョンの一部をxとさせて頂きます
SWELLの記事スライダーの背景画像を動画にする方法
SWELLの記事スライダーの背景画像を動画にする方法についてです。
作業に入る前に、背景にしたい動画をメディアにアップロードして、URLをコピーしてメモ帳に貼り付けておきましょう。
①メインビジュアルと記事スライダーについて
SWELLでは、“メインビジュアル”と“記事スライダー”、それぞれに高さが設定されています。
その為、メインビジュアルを非表示にして、記事スライダーのみを表示させたいと思います。
②メインビジュアルを非表示にする
左メニューのカスタマイズ > トップページ
を選択。
③記事スライダーを表示させる
④親テーマにあるpost_slider.phpをダウンロードする
（WinSCPやFileZillaなどの）FTPソフトを使用して、ローカルホスト（自分のパソコン）に、親テーマにあるsearch.phpをダウンロードします。
なお、フォルダの構成は、概ね下記のようになっていると思います。
/home/（あなたが契約した名前）/（ドメイン名）/public_html/wp-content/themes/swell/parts/top
⑤post_slider.phpの内容を編集する
post_slider.phpの96行目付近に記載されている
<?php echo $bgimg; //phpcs:ignore?>を削除するか、コメントアウトします。
コメントアウトは、コードの意図や処理の説明、TODOリストの記述、デバッグ時の無効化などをしたい時に記述します。記述方法としては、 `//` や `#` を用い、詳細な説明は `/* … */` を使うのが一般的です。
なお、今回はHTMLとして出力されるので、<!– –>で無効化しています。
その下に以下のコードを追加します。
<video class="p-postSlider__videoLayer" autoplay loop muted playsinline>
<source src="（動画のURL）" type="video/mp4">
お使いのブラウザはビデオタグをサポートしていません。
</video>実際のコードを見るとこんな感じになります。
コードを記述したら保存して、子テーマにアップロードしますが、その前にCSSを「追加CSS」に記述しておきます。
⑥追加CSSに記述する
表示させる動画が適切なサイズになるように、以下のCSSを追加します。
.p-postSlider {
position: relative;
width: 100%;
height: auto;
overflow: hidden;
}
.p-postSlider__videoLayer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.7;
z-index: -1;
}
⑦子テーマ内にpartsフォルダ、topフォルダを作成する
FTPソフトを使用して、子テーマ内に「partsフォルダ」を作成します。
作成方法は使用するFTPソフトによって違うと思いますが、概ね右クリックして「新規 > ディレクトリ」で作成できると思います。
※画像例はWinSCP
さらに続いて、作成したpartsフォルダ内に「topフォルダ」を新規作成します。
※通常、post_listフォルダはありません
⑧修正したpost_slider.phpを子テーマのtopフォルダ内にアップロードする
修正したpost-slider.phpを、前項で作成したtopフォルダ内にアップロードします。
これで、ヘッダー画像の箇所に動画が表示されるようになるはずです。
もし、デザインが崩れるなどの不具合があった場合は、子テーマにアップロードしたpost-slider.phpを削除すれば元に戻ります。
何故なら、親テーマには一切変更を加えてないからです。
ご支援のお願い
この記事が役に立ったと感じたら･･･
この記事が少しでもお役に立ったと感じていただけましたら、ぜひ下の“ボタン”をクリックしてお買い物をしていただけると嬉しいです。
ご購入いただいた商品の金額の一部が私に入り、より多くの有益な記事を作るための励みになります。