Tuto WordPress – Comment intégrer twitch sur votre site

A l’origine, j’avais écrit cet article pour un autre site, mais étant donné que de plus en plus de monde utilise wordpress et que diffuser ses sessions de jeu est devenu un jeu d’enfant, je vous propose de diffuser cet article sur le site. Je pense que ce tuto pourra servir à plusieurs personnes.

Il est de plus en plus courant que les joueurs veuillent montrer leur partie en direct à leur communauté. Et cela twitch l’a bien compris. Et si en plus vous tenez un site, vous voudriez peut être les diffuser aussi sur ce site.

On va donc voir comment il est possible d’insérer twitch sur votre site WordPress grâce à deux plugins.

Un qui permettra de diffuser le stream aussi bien sur un widget ou une page dédiée et le second qui permet d’afficher si l’on est présent ou non dans la barre de menu du site.

J’ai choisi de diffuser les streams grâce au plugin Twitch TV Embed Suite.

Installation

Coté installation, c’est du classique, on choisit le plugin, on l’installe et on l’active.

Si tout se passe bien, vous devriez pouvoir accéder aux réglages via le menu Twitch Embed

Utilisation

Lors de la saisie des articles, deux nouveaux boutons sont apparus : Le premier permettant d’insérer un stream et le second le tchat.

Par contre en utilisant seulement ces boutons, impossible de préciser la chaine à diffuser; seul le shortcode suivant est inséré :

[plumwd_twitch_stream]

Il faudra alors insérer avant ] chanel= »<chaine_a_diffuser> »  et le tour est joué. On pourra aussi modifier à la volée la hauteur et la largeur de la vidéo.

Tout comme le stream, il est possible d’y ajouter un tchat qui lui est associé. De la même façon, on rajoute le shortcode suivant :

[plumwd_twitch_chat]

Ce qui donne le résultat suivant, et on peut même suivre la liste des connectés

Enfin il y a l’option StreamList, mais je n’ai pas encore trouvé l’utilité

online / offline

Afin d’aider vos visiteurs pour savoir si vous êtes en ligne ou non, il est aussi possible de rajouter un widget affichant votre état.

Ce qui donne le résultat suivant, pas toujours bien intégré selon le thème choisi

Besoin d’afficher le statut dans le menu

Afin d’améliorer encore votre statut il est possible d’afficher votre état dans le menu de votre site grâce au plugin Twitch Status.

Après avoir installé le plugin, rendez vous dans réglage-> twitch status. Il suffit de donner le nom de la chaine à tester ainsi que le sélecteur css à utiliser afin de pouvoir afficher le statut dans la barre de menu. Ce qui donne par exemple:

dans les menus de WordPress (Apparence->Menu)

On crée ensuite un lien personnalisé en indiquant l’url de la chaine ou un lien vers la page ou vous avez affiché twitch

Il ne vous reste plus qu’à gérer le CSS. Pour cela cliquez sur option de l’écran en haut à gauche et activez classes CSS

Enfin retournez sur votre lien et dans la case CSS écrivez twitch, et sauvegardez.

Ce qui donne par exemple: