スワイプ表示機能を使ったYouTube Shortsフィードの作成

ご自身のサイトにYouTube Shortsを表示し、訪問者がフルスクリーンプレイヤーでスワイプして閲覧できるようにしてみませんか?

このガイドでは、「Feeds for YouTube Pro」で「Shorts」フィードを作成し、「Swipe View」に表示する方法について順を追って説明します。必要なものは、「Feeds for YouTube Pro」、YouTube API キー、そして「Shorts」を投稿している YouTube チャンネルだけです。

要件:「Shorts feeds」および「Swipe View」を利用するには、YouTube Pro バージョン 2.10.0 以降が必要です。これらは、どの有料ライセンスレベルでも利用可能です。

作業を始める前に、WordPressサイトに「Feeds for YouTube Pro」がインストールされ、有効化されていることを確認してください。また、YouTube APIキーも必要になります。

以下が今回の内容です:

「Shorts」フィードの作成

まず、WordPressのダッシュボードで「YouTubeフィード」→「すべてのフィード」に移動します。次に、「新規追加 」をクリックします。

「YouTubeフィード」の「すべてのフィード」ページ。「新規追加」ボタンに矢印が表示されている

次に、「Shorts」フィードの種類を選択します。「Shorts」フィードには、そのチャンネルの「Shorts」のみが表示され、その他の動画は表示されません。

「フィードの種類を選択」画面で、「Shorts」フィードの種類が選択されている状態

次に、「次へ」をクリックします。

「YouTubeフィードを作成」画面の上部にある「次へ」ボタン

「チャンネル ID」または「ユーザー名」の欄に、Shorts を表示したいチャンネルの情報を入力してください。チャンネルのハンドル名(例:@SmashBalloon)、チャンネル ID、またはユーザー名を使用できます。

これらのIDの探し方については、YouTubeチャンネルIDの探し方に関するガイドをご覧ください。

チャンネルハンドルが入力されている「チャンネルID」または「ユーザー名」フィールド

次に、「次へ」をクリックします。

「ソースの追加」画面の「次へ」ボタン

次に、フィードのテンプレートを選択してください。後で変更することも可能です。

迷った場合は、「デフォルト」テンプレートをそのまま使用してください。このテンプレートでは、訪問者がスワイプして閲覧できる9つのショート動画でフィードが始まります。準備ができたら、「次へ」をクリックしてください。

「テンプレートから始める」画面で、「デフォルト」テンプレートが選択されており、「次へ」の矢印が表示されている

新しいフィードがフィードエディタで開き、Shortsのプレビューが表示されます。

「スワイプ表示」レイアウトの選択

「Swipe View」は、Shortsフィードのレイアウトの一つです。

これを利用すると、フィードにショート動画がタイル形式で表示されます。各タイルをタップすると、フルスクリーンプレイヤーで再生されます。訪問者は、フィード内の他のショート動画をスワイプして閲覧できます。

これを使用するには、フィードエディタの「カスタマイズ」タブにある「フィードレイアウト」をクリックしてください。

[カスタマイズ] タブの [フィードのレイアウト] にある、矢印が付いたフィードエディタ

次に、「スワイプ表示」を選択します。

「スワイプ表示」レイアウトが選択されている場合のフィードレイアウト設定

作業が終わったら、「保存」をクリックしてください。

フィードエディタの上部にある「保存」ボタン

フィードが「Swipe View」レイアウトになったので、サイトに追加する準備が整いました。

サイトにフィードを追加する

フィードのショートコードを取得するには、フィードエディタの上部にある「埋め込み」をクリックしてください。

フィードエディタの上部にある「埋め込み」ボタン

[フィードの埋め込み] ウィンドウで、ショートコードの横にある[コピー] をクリックします。「クリップボードにコピーされました」というメッセージが表示され、コピーが完了したことが確認できます。

フィードのショートコードと、「コピー」ボタンの横に矢印が表示された「フィードを埋め込む」ウィンドウ

次に、そのショートコードを任意のページ、投稿、またはウィジェットに追加してください。ショートコードを初めて使う方は、「WordPressでショートコードを追加する方法」を参照して、手順に従って操作してください。

スワイプ表示でショート動画を見る

次に、訪問者がどのようにスワイプビューを見ているかを見ていきましょう。

「Swipe View」を開くには、サイトのフロントエンドにあるフィード内の「ショート」をクリックしてください。

あるウェブサイトの「Shorts」フィードで、ある「Shorts」に矢印が表示されている

ショート動画は、フルスクリーンの縦型プレイヤーで開き、再生が開始されます。その横には、訪問者がそのショート動画を共有したり、YouTubeで視聴したりできるリンクが表示されます。YouTubeから提供されている場合、プレイヤーには「いいね」やコメントの数も表示されます。

フルスクリーンの「Swipe View」プレーヤーで再生されるショート動画。ナビゲーション用矢印や、音量、いいね、コメント、共有、YouTubeでの視聴などのボタンが備わっています。

訪問者は以下のようにプレーヤーを利用できます。

  • ショートフィルムの切り替え— 画面を上にスワイプ、下にスワイプ、スクロール、またはプレーヤーの横にある矢印をクリックしてください。キーボードの上矢印キーと下矢印キーでも操作できます。
  • 音声をオンまたはオフにする— プレーヤーの横にあるスピーカーボタンをクリックします。
  • プレーヤーを閉じるには、左上隅にある「×」をクリックします。Escキーでも閉じられます。

以上です!これで、Shortsフィードを作成し、Swipe Viewに表示する方法がわかりました。次は、複数のYouTubeフィードを表示して、Shortsを他の動画と一緒に表示する方法について解説したガイドをご覧ください。

よくある質問

以下では、ショートフィードとスワイプビューに関するよくある質問についてお答えします。

「Swipe View」は他のフィードタイプでも使用できますか?

「スワイプ表示」は「Shorts」フィード用に設計されています。その他のフィードタイプについては、「グリッド」、「ギャラリー」、「リスト」、または「カルーセル」のレイアウトを選択してください。

チャンネルに「Shorts」が1つもなかった場合はどうなりますか?

そのフィードには、代わりにそのチャンネルの最新の動画が表示されます。

フィードに表示される「Shorts」の数を変更できますか?

はい。フィードエディタで、「フィードのレイアウト」に移動します。次に、「最初に表示する動画の数」を変更します。設定が完了したら、「保存」をクリックしてください。

テンプレートを変更した後、フィードで「Swipe View」が表示されなくなったのはなぜですか?

各テンプレートには独自のレイアウトが用意されています。テンプレートを変更したら、「フィードレイアウト」に移動してください。その後、再度「スワイプビュー」を選択します。設定が完了したら、「保存」をクリックしてください。

Swipe ViewはGDPRモードでも動作しますか?

はい。GDPRモードがオンの場合、訪問者が同意すると、ShortsはSwipe Viewで開きます。それまでは、訪問者にはフィード内のタイルとしてShortsが表示されます。

スワイプビューをプレビューするにはどうすればよいですか?

Swipe Viewはフロントエンドで動作するため、サイト上でフィードが表示されているページを開いてください。その後、ショートをクリックしてSwipe Viewで開いてください。

「Shorts」は「Swipe View」で音声を再生しますか?

「Swipe View」では、各「Short」を音声付きで再生しようとします。一部のブラウザでは、動画の再生開始時に音量がミュートされている状態でのみ再生が許可されています。その場合は、スピーカーボタンをクリックして音声をオンにしてください。

スマートフォンでスワイプビューは動作しますか?

はい。スマートフォンやタブレットでは、ユーザーはスワイプして上下に移動することで、1つの「ショート」から次の「ショート」へと移動できます。

サポート

ドキュメントに答えが見つからない?

サポート