WordPressでTwitchストリームの状態を表示する方法

Twitchを使っていますか？ゲーマーの間で人気のある動画ストリーミング・プラットフォームで、ゲームプレイを放送するために利用されています。また、ゲームイベント、大会、トーナメントなどのストリーミングにも利用されています。最近、あるユーザーから、WordPressでTwitchストリームの状態を追加する方法を尋ねられました。この投稿では、WordPressでTwitchストリームの状態を表示する方法を紹介します。

動画チュートリアル

動画が気に入らなかったり、もっと説明が必要な場合は、このまま読み進めてください。

最初に行う必要があるのは、Twitch Statusプラグインをインストールして有効化することです。有効化した後、Settings ” Twitch Statusページにアクセスしてプラグイン設定を行う必要があります。

Twitchチャンネル名をプロバイダーに入力し、jQueryセレクタを入力してください。これはページのHTMLコードにある要素のCSSクラスまたはid属性であれば何でもかまいません。プラグインにあなたのTwitch状態を表示する場所を伝えます。

もし意味がわからなくても、投稿の後半で説明するので心配しないでください。今すぐjQueryセレクタに.twitchと入力し、設定を保存ボタンをクリックしてください。

WordPressサイドバーにTwitch状態を追加する

Twitch Statusプラグインには、WordPressサイトのサイドバーにTwitchストリームの状態を表示することができる便利なウィジェットが付属しています。外観 ” ウィジェットにアクセスし、Twitch Statusウィジェットをサイドバーに追加するだけです。

ウィジェットのタイトルを設定し、再生ボタンがユーザーをどこにリダイレクトさせるかを選択する。Twitchストリーム、カスタマイザー、ブログページへのリンクを追加できます。保存ボタンをクリックして、ウィジェットの設定を保存することを忘れないでください。

これで、あなたのサイトにアクセスして、ウィジェットの動作を確認することができます。

WordPressナビゲーションメニューにTwitch状態を追加する

サイトのナビゲーションメニューにTwitchのストリーム状態を追加することもできます。外観 ” メニュー] ページにアクセスし、[カスタムリンク] タブをクリックして展開します。リンクテキストとしてTwitchストリームのURLを入力し、メニューに追加ボタンをクリックします。

これで右側のカラムにメニュー項目が追加されます。画面右上の表示オプションボタンをクリックします。メニューが表示されるので、CSSクラスの横にあるチェックボックスをオンにします。

メニュー項目までスクロールダウンし、クリックしてプロパティを表示させます。.twitchまたはプラグイン設定で追加したjQueryセレクタを入力する必要があります。最後に保存ボタンをクリックします。

これで、ナビゲーションメニューにTwitchストリームの状態が表示されるようになります。トラブルシューティングについては、WordPressでナビゲーションメニューを追加する方法をご覧ください。

WordPressにTwitchストリームを埋め込む

YouTubeやVimeoなど、WordPressとビルトインでoEmbed統合されている人気動画サイトとは異なり、Twitchでは埋め込みコードを実際に貼り付ける必要があります。

Twitchストリームにアクセスし、共有ボタンをクリックするだけです。すると、共有ポップアップが表示されるので、「ライブプレーヤーを埋め込む」設定の下にあるコードをコピーしてください。

WordPressでTwitchストリームを埋め込む投稿またはページを編集し、投稿エディターに埋め込みコードを貼り付けます。次に公開または更新ボタンをクリックします。

これでサイトにアクセスすると、WordPressの投稿やページに埋め込まれたTwitchストリームを見ることができます。

この投稿がWordPressサイトにTwitchストリームの状態を追加するのにお役に立てば幸いです。あなたのサイトに最も便利なWordPressウィジェットのリストもご覧ください。

この投稿が気に入った場合は、WordPress動画チュートリアルのYouTubeチャンネルを購読してください。Twitterや Facebookでも私たちを見つけることができます。