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

Comment afficher l’état d’une diffusion en direct sur Twitch dans WordPress ?

Utilisez-vous Twitch ? Il s’agit d’une plateforme de diffusion vidéo directe populaire auprès des joueurs qui l’utilisent pour diffuser leur gameplay. Elle est également utilisée pour diffuser en direct des évènements de gaming, des compétitions, des tournois, etc. Récemment, l’une de nos utilisatrices/utilisateurs nous a demandé comment ajouter l’état de leur diffusion en direct sur Twitch dans WordPress. Dans cet article, nous allons vous afficher comment afficher l’état de la diffusion Twitch en direct dans WordPress.

Adding Twitch in WordPress

Tutoriel vidéo

Subscribe to WPBeginner

Si vous n’aimez pas la vidéo ou si vous avez besoin de plus d’instructions, alors continuez à lire.

La première chose à faire est d’installer et d’activer l’extension Twitch Status. Une fois activé, vous devez visiter la page Réglages  » Twitch Status pour définir les paramètres de l’extension.

Twitch status settings

Il vous suffit d’indiquer le nom de votre chaîne Twitch, puis de saisir les sélecteurs jQuery. Il peut s’agir de n’importe quelle classe CSS ou de l’attribut id d’un élément dans le code HTML de votre page. Il indiquera à l’extension où afficher votre état twitch.

Si vous ne savez pas ce que cela signifie, alors ne vous inquiétez pas nous vous afficherons comment faire ultérieurement dans l’article. Pour l’instant, vous pouvez simplement saisir .twitch comme sélecteur jQuery et cliquer sur le bouton enregistrer les Réglages.

Ajout d’un état Twitch dans la colonne latérale de WordPress

L’extension Twitch Status est livrée avec un widget astucieux qui vous permet d’afficher l’état de votre diffusion directe sur Twitch dans la colonne latérale de votre site WordPress. Il suffit d’aller dans Apparence  » Widgets et d’ajouter le widget Twitch Status dans une colonne latérale.

Twitch widget settings

Fournissez un titre pour le widget, puis sélectionnez l’endroit où le bouton de lecture doit rediriger les utilisateurs/utilisatrices. Vous pouvez ajouter un lien vers votre diffusion en direct sur Twitch, n’importe quelle URL personnalisée ou une page de blog. N’oubliez pas de cliquer sur le bouton enregistrer pour stocker les réglages de votre widget.

Vous pouvez maintenant visiter votre site pour voir le widget en action.

Twitch widget preview

Ajout de l’état de Twitch dans le menu de navigation de WordPress

Vous pouvez également ajouter l’état de votre diffusion en direct sur Twitch dans les menus de navigation de votre site. Visitez la page Apparence  » Menus et cliquez sur l’onglet lien personnalisé pour le déplier. Vous devez saisir l’URL de votre diffusion en direct avec Twitch comme texte de lien, puis cliquez sur le bouton ajouter au menu.

Adding Twitch Link

Cela ajoutera un élément de menu dans la colonne de droite. Vous devez maintenant cliquer sur le bouton Options d’écran dans le coin supérieur droit de l’écran. Un menu s’affiche, dans lequel vous devez cocher la case située à côté des classes CSS.

CSS classes

Défilez maintenant vers le bas jusqu’à l’élément de menu et cliquez dessus pour le déplier et afficher ses propriétés. Vous devez saisir .twitch ou tout autre sélecteur jQuery que vous avez ajouté dans les Réglages de l’extension. Dernier point, cliquez sur le bouton « Enregistrer » du menu.

Adding CSS class to navigation menu item in WordPress

C’est tout, vous pouvez maintenant visiter votre site pour voir l’état de la diffusion Twitch en direct dans votre menu de navigation. Pour le dépannage, consultez notre guide sur l’ajout de menus de navigation dans WordPress.

Twitch status in WordPress navigation menu

Contenu embarqué de votre diffusion Twitch en direct sur WordPress

Contrairement à YouTube, Vimeo et d’autres sites vidéo populaires qui disposent d’un contenu embarqué intégré dans WordPress, Twitch nécessite que vous colliez le code d’intégration.

Il vous suffit de visiter votre diffusion en direct sur Twitch et de cliquer sur le bouton Partager. Cela fera apparaître la fenêtre surgissante de partage où vous devez copier le code sous l’option « Contenu embarqué En direct Player ».

Getting embed code for your Twitch stream

Modifiez l’article ou la page dans WordPress où vous souhaitez intégrer la diffusion Twitch et collez le code d’intégration dans l’éditeur de l’article. Cliquez ensuite sur le bouton de publication ou de mise à jour.

Vous pouvez maintenant visiter votre site pour voir la diffusion Twitch embarquée dans votre publication ou page WordPress.

Twitch stream embedded into a WordPress page

Nous espérons que cet article vous a aidé à ajouter l’état de la diffusion Twitch en direct sur votre site WordPress. Vous pouvez également consulter notre liste des widgets WordPress les plus utiles pour votre site.

Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

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.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

Un commentaireLeave a Reply

  1. Bigwas

    I hope it is a free plugin. I have to check it out.

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.