本サンプルのようにするには事前に以下のプラグインを有効化及びサムネイル画像の設定が必要です※アイキャッチ画像は「Featured Video Plus」使用を想定したデザインデータです。
サンプルサイトについての補足
YouTube動画背景
「テーマ管理」>「「ヘッダー」>「YouTube背景」で設定できます。
記事トップスライドショー
トップページ
トップページトップのスライドショーは「Smart Slider 3」を併用しています。
「Smart Slider 3」で作成したショートコードを「トップページ上部ウィジェット」に設定します。
そのままでは
- サイト全体に表示される
- 周りに隙間ができる
のでPCだけに表示するショートコード([pc][/pc])と隙間をなくすCSSクラス<div class="st-eyecatch">
で囲んでいます。
記事トップ
記事トップのアイキャッチ画像をYouTube動画に変えるには「Featured Video Plus」を使用しています。
②の登録ボタンはコチラ
YouTuberスライドショー
トップページや投稿記事下のYouTubeスライドショーは同じく「Featured Video Plus」で設定したアイキャッチ動画(YouTube)をカテゴリ一覧スライドショーで表示しています。
また、<div class="youtube-slider">
で囲むことで専用CSSを適応してデザイン崩れを防いでいます。
表示速度について
YouTube動画を大量に張るとサイトの読み込み速度が低下します。
「キャッシュ系プラグイン」や「LasyLoadSEO(遅延読込プラグイン)」等と併用することで軽減できる場合があります。
※紹介している他社製プラグインはバージョンや使用方法、環境などにより正常に動作しない可能性もございます