Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

編集メモ: WPBeginner のパートナーリンクから手数料を得ています。手数料は編集者の意見や評価に影響を与えません。編集プロセスについて詳しく知る。

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

Adding Twitch in WordPress

動画チュートリアル

Subscribe to WPBeginner

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

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

Twitch status settings

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

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

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

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

Twitch widget settings

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

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

Twitch widget preview

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

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

Adding Twitch Link

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

CSS classes

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

Adding CSS class to navigation menu item in WordPress

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

Twitch status in WordPress navigation menu

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

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

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

Getting embed code for your Twitch stream

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

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

Twitch stream embedded into a WordPress page

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

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

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

2件のコメント返信を残す

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。