Streams Twitch sur WordPress : instructions

Tu veux Intégrez les flux Twitch à votre site Web WordPresspour donner à vos visiteurs accès à du contenu en direct directement sur votre site. C’est un moyen efficace d’impliquer votre communauté et d’augmenter le temps de visite. Voici un guide détaillé sur la façon de procéder en toute sécurité et efficacement.

Il existe plusieurs façons d'intégrer des flux Twitch dans WordPress, l'éditeur Gutenberg étant la méthode la plus simple pour les installations WordPress modernes. Nous passerons en revue toutes les options courantes afin que vous puissiez choisir l'option qui vous convient.

1. Selon le bloc Gutenberg

Depuis WordPress 5.0, l’éditeur Gutenberg est la norme. Il propose un bloc dédié aux flux Twitch, ce qui rend l'intégration un jeu d'enfant.

Étape 1 : Ajouter un nouveau bloc Ouvrez la publication ou la page dans laquelle vous souhaitez intégrer le flux. Cliquez sur le +icône (Ajouter un bloc) et recherchez « Twitch ». Sélectionnez le bloc Twitch.

Étape 2 : Insérer l’URL Twitch Le bloc vous demandera de saisir une URL Twitch. Ici, vous pouvez soit :

L'URL d'un flux en direct spécifique (par exemple https://www.twitch.tv/dein_streamer_name)
L'URL d'une VOD (vidéo à la demande, par exemple) https://www.twitch.tv/videos/123456789)
L'URL d'un clip (par exemple https://www.twitch.tv/dein_streamer_name/clip/AmazingClipName)

Collez l’URL souhaitée et cliquez sur « Intégrer ». WordPress s'occupe du reste et génère le code d'intégration approprié.

Étape 3 : Ajuster les options de blocage (facultatif) Après l'intégration, vous verrez le lecteur de flux dans l'éditeur. Dans le panneau latéral droit (Paramètres de blocage), vous trouverez d’autres options :

Largeur et hauteur : Vous pouvez spécifier des valeurs de pixels absolues ou des largeurs en pourcentage. Pour un affichage réactif, une largeur en pourcentage (par exemple 100%) et une hauteur fixe sont souvent recommandées, ou vous pouvez laisser le comportement par défaut pour la mise à l'échelle automatique.
Afficher le chat : Activez cette option si vous souhaitez afficher le chat Twitch à côté du flux.
Lecture automatique : La lecture automatique est désactivée par défaut. Pour des raisons de convivialité (lecture audio inattendue) et de performances (pollution sonore directe), vous ne devez pas activer la lecture automatique, sauf si vous avez un cas d'utilisation très spécifique où elle est attendue.
Domaine « parent » : Pour que l'intégration fonctionne correctement, en particulier si un chat ou certaines interactions sont nécessaires, Twitch peut nécessiter un domaine « parent » dans les paramètres d'intégration. Ceci est souvent géré automatiquement dans les paramètres du bloc, mais c'est important lors de l'utilisation de la méthode manuelle (voir ci-dessous).

Avantages du bloc Gutenberg :

Extrêmement facile à utiliser.
Aucune intervention manuelle du code n'est nécessaire.
WordPress s'occupe des ajustements nécessaires.

2. Via oEmbed (obsolète)

WordPress prend en charge oEmbed pour de nombreux services externes, notamment Twitch. Cela signifie que vous avez souvent juste besoin de placer l'URL sur une nouvelle ligne dans votre éditeur, et WordPress la convertira automatiquement en code d'intégration approprié. Cela fonctionne à la fois dans l'éditeur classique et dans l'éditeur Gutenberg (si vous collez simplement une URL dans un bloc de paragraphe).

Étape 1 : Copiez l’URL Twitch Accédez au flux Twitch ou à la VOD que vous souhaitez intégrer et copiez l'URL complète depuis la barre d'adresse de votre navigateur.

Étape 2 : Collez l’URL dans l’éditeur Collez l’URL copiée dans une nouvelle ligne dans votre éditeur WordPress. Assurez-vous qu'il n'y a rien d'autre sur cette ligne.

Exemple:

https://www.twitch.tv/dein_streamer_name

https://www.twitch.tv/videos/123456789

Étape 3 : Enregistrer/Mettre à jour Lorsque vous enregistrez ou mettez à jour la publication, WordPress convertit automatiquement l'URL en lecteur.

Avantages d'oEmbed :

Encore plus simple que le bloc Gutenberg si vous voulez juste le joueur sans chat.
Fonctionne également dans les anciennes versions de WordPress avec l'éditeur classique.

Inconvénient:

Moins d’options de personnalisation directement dans l’éditeur ; Pour le chat, etc., vous avez besoin de la méthode du code d'intégration complet.

3. Via le code d'intégration Twitch (iframe)

Cette méthode est la plus flexible et offre le plus d’options de personnalisation. Il est idéal si vous souhaitez contrôler des paramètres spécifiques tels que la position du chat, la lecture automatique ou d'autres options du lecteur.

Étape 1 : Générer le code d'intégration Twitch

Pour une chaîne en direct : Accédez à la chaîne du streamer (par exemple https://www.twitch.tv/dein_streamer_name). Cliquez sur l’icône « Partager » sous le lecteur vidéo. Sélectionnez « Intégrer ».
Pour une VOD/Highlight/Clip : Ouvrez la vidéo/le clip. Cliquez sur l’icône « Partager ». Sélectionnez « Intégrer ».

Une fenêtre s'ouvre avec le code d'intégration. Vous pouvez ajuster différentes options ici avant de copier le code :

Largeur et hauteur : Ajustez la taille du lecteur.
Afficher le chat : Ajouter ou supprimer la fenêtre de discussion.
Domaines « parents » : Il s’agit d’un point important pour la sécurité et la fonctionnalité de l’intégration Twitch. Vous devez saisir votre/vos domaine(s) à partir duquel le flux sera intégré. Par exemple: VotreDomaine.de. Si vous ne le faites pas, des erreurs peuvent survenir (par exemple, « Erreur 404 : introuvable » pour le chat ou le flux ne se chargera pas). Ajoutez chaque domaine et sous-domaine à partir duquel l'intégration est accessible dans ce champ (par exemple. votredomaine.de, www.votredomaine.de, blog.votredomaine.de).

Copiez le généré -Code.

Exemple de code d'intégration : (Notez les espaces réservés VOTRE_NOM_DE_CHAÎNE_ICI et VOTRE_DOMAINE_PARENT_ICI)

Pour intégrer en plus le chat, le code ressemblerait à ceci :

Un avis: Le mère Les paramètres sont essentiels pour la fonctionnalité et la sécurité. Sans spécifier le(s) domaine(s) correct(s), l'intégration ne se chargera pas correctement ou le chat affichera des erreurs.

Étape 2 : Insérer le code dans WordPress

Dans l'éditeur Gutenberg : Ajoutez un bloc « HTML personnalisé » et collez le texte copié -code là.
Dans l'éditeur classique : Passez du mode « Visuel » au mode « Texte » (anciennement « mode HTML ») et collez le code où vous le souhaitez.

Avantages du code d'intégration directe :

Contrôle maximal sur la taille, le chat et le comportement du joueur.
Utile pour des cas d'utilisation spécifiques, tels que l'ajout de paramètres supplémentaires (par exemple muet=vrai pour un démarrage silencieux).

Inconvénients :

Nécessite une compréhension de base du HTML.
Plus sujet aux erreurs si les paramètres ne sont pas définis correctement.

4. Plugins Twitch

Il existe des plugins WordPress qui facilitent l'intégration de Twitch. Un exemple serait «EmbedPress" ou des plugins Twitch spécifiques. Cependant, les fonctionnalités natives de WordPress (bloc Gutenberg, oEmbed) offrent déjà des options suffisantes dans la plupart des cas.

Quand un plugin peut être utile :

Si vous avez besoin de fonctionnalités spéciales qui vont au-delà de l'intégration standard (par exemple, plusieurs flux en même temps, des listes de flux automatiques, des options de style spécifiques qui ne peuvent pas être résolues via CSS).
Si vous utilisez l'éditeur classique et le manuel méthode mais nécessite plus d'options que oEmbed.

Et c'est là que le plugin StreamWP entre en jeu.

StreamWP

StreamWP est actuellement en cours de développement et sera bientôt publié.

Conclusion

L'intégration de flux Twitch dans WordPress est simple grâce à l'éditeur Gutenberg et à la prise en charge d'oEmbed. Pour un contrôle maximal et des réglages individuels, le direct Le code Twitch offre la plus grande flexibilité, mais nécessite une configuration correcte des domaines parents.

L'intégration de flux Twitch dans WordPress est incroyablement facile grâce aux blocs natifs et aux fonctions oEmbed et peut être effectuée manuellement iframe-Les adaptations aux besoins particuliers peuvent être affinées.

Sources :