Ajouter des extraits de code JavaScript personnalisés pour le plugin YouTube Feed

Comment ajouter du code JavaScript personnalisé à côté d'un flux YouTube à l'aide de WPCode, sans avoir à modifier les fichiers du thème.

Souhaitez-vous ajouter votre propre code JavaScript à votre flux YouTube ?

Dans ce guide, nous allons vous présenter deux façons de procéder. La première consiste à utiliser le champ « JavaScript personnalisé » intégré au plugin YouTube Feed. La seconde fait appel à WPCode, un plugin gratuit développé par les créateurs de WPForms et d’All in One SEO. Dans les deux exemples, une petite note est ajoutée à la fin de votre flux.

Avant de commencer, assurez-vous que le plugin YouTube Feed est bien installé et activé sur votre site.

• Utilisation de la zone de code JavaScript personnalisé
• Utilisation de WPCode
• Exécuter votre code lorsque d'autres vidéos se chargent
• Questions fréquemment posées

Utilisation de la zone de code JavaScript personnalisé

Pour commencer, nous allons ouvrir la fenêtre « JavaScript personnalisé ». C'est le moyen le plus rapide d'ajouter du code JavaScript, car cette fonctionnalité fait partie intégrante du plugin.

Dans votre tableau de bord WordPress, rendez-vous dans « Flux YouTube » > « Paramètres ». Cliquez ensuite sur l'onglet « Flux ».

Dans l'onglet « Flux », faites défiler vers le bas jusqu'à la zone « JavaScript personnalisé ». Collez ensuite votre code dans cette zone. Dans cet exemple, nous allons coller un code qui ajoute une petite note à la fin de votre flux.

$( '.sb_youtube' ).not( ':has(.my-feed-note)' ).append( '<p class="my-feed-note">Thanks for stopping by!</p>' );

Vous n'avez pas besoin d'ajouter de balises de script. Le plugin ajoute automatiquement votre code à la page. Le $ Le signe « » sert de raccourci pour jQuery.

En bas de la page, cliquez sur « Enregistrer les modifications ».

À présent, ouvrez une page affichant votre fil d'actualité. La note apparaît à la fin du fil d'actualité.

Le plugin exécute votre code une fois les vidéos chargées. Il le réexécute chaque fois que de nouvelles vidéos sont ajoutées, par exemple lorsqu'un visiteur clique sur le bouton « Charger plus ». C'est pourquoi l'exemple vérifie d'abord la présence de la note. Sans cette vérification, la note serait ajoutée à chaque fois.

Comment « The Box » protège votre code

Cette zone est idéale pour un petit extrait de code que vous enregistrez une seule fois. Lorsque vous revenez ensuite sur l'onglet « Feeds », la zone affiche une barre oblique inversée devant chaque citation de votre code. À chaque fois que vous enregistrez à nouveau l'onglet, d'autres barres obliques s'ajoutent, si bien que le code affiché dans la zone ne correspond plus à ce que vous avez saisi.

Si vous prévoyez de modifier votre code ultérieurement, WPCode est plus adapté. Il conserve votre code exactement tel que vous l'avez écrit.

Utilisation de WPCode

Vous pouvez également ajouter votre code JavaScript grâce à WPCode. Il s'agit d'un plugin gratuit qui regroupe tous vos extraits de code personnalisés au même endroit.

Pour commencer, installez et activez le plugin WPCode. Ensuite, rendez-vous dans « Code Snippets » » « Ajouter un extrait de code ».

Sur la page « Ajouter un extrait de code », passez la souris sur la zone intitulée « Ajouter votre code personnalisé (nouvel extrait de code) ». Cliquez ensuite sur « + Ajouter un extrait de code personnalisé ».

Dans la fenêtre qui s'ouvre, sélectionnez « Extrait de code JavaScript ».

Commencez par saisir un titre pour votre extrait de code. Ensuite, collez votre code dans la zone prévue à cet effet.

Dans cet exemple, nous allons utiliser un code qui ajoute la même petite note à la fin de votre fil d'actualité. Contrairement au premier exemple, celui-ci n'utilise pas jQuery. Il fonctionne donc sans problème sur les pages qui ne chargent pas cette bibliothèque.

document.addEventListener( 'DOMContentLoaded', function() {
	document.querySelectorAll( '.sb_youtube' ).forEach( function( feed ) {
		var note = document.createElement( 'p' );
		note.className = 'my-feed-note';
		note.textContent = 'Thanks for stopping by!';
		feed.appendChild( note );
	} );
} );

Vous n'avez pas besoin d'ajouter de balises de script. WPCode s'en charge pour vous. La zone de code commence par une ligne de script que vous ne pouvez pas modifier.

Ensuite, repérez le champ « Emplacement » et cliquez dessus. Choisissez ensuite « Pied de page à l'échelle du site ». Cela permet d'ajouter votre code au bas de vos pages.

En haut de la page, cliquez sur le bouton pour faire passer l'extrait de « Inactif » à « Actif ».

Cliquez ensuite sur « Enregistrer l'extrait ».

Une fois le snippet activé, la note apparaît à la fin de votre fil d'actualité sur les pages qui l'affichent, exactement comme dans le premier exemple.

Si vous souhaitez que le code s'affiche uniquement sur certaines pages, WPCode permet de limiter l'emplacement d'exécution d'un extrait de code. Consultez la documentation de WPCode pour savoir comment procéder.

Exécuter votre code lorsque d'autres vidéos se chargent

Un extrait de code WPCode s'exécute une seule fois, une fois le chargement de la page terminé. Le champ « JavaScript personnalisé » s'exécute également à nouveau lorsque d'autres vidéos sont ajoutées, par exemple après avoir cliqué sur « Charger plus ».

Pour obtenir le même résultat avec WPCode, définissez une fonction nommée window.sbyCustomJS dans votre extrait de code. Le plugin l'appelle une fois les premières vidéos chargées, puis à chaque fois que d'autres sont ajoutées. Il s'agit de la même fonction que celle créée par la zone « JavaScript personnalisé » ; utilisez donc l'une ou l'autre, mais pas les deux.

window.sbyCustomJS = function() {
	document.querySelectorAll( '.sb_youtube' ).forEach( function( feed ) {
		if ( feed.querySelector( '.my-feed-note' ) ) {
			return;
		}
		var note = document.createElement( 'p' );
		note.className = 'my-feed-note';
		note.textContent = 'Thanks for stopping by!';
		feed.appendChild( note );
	} );
};

Utilisez ce code à la place de l'exemple WPCode précédent, en suivant les mêmes étapes. Si vous modifiez un extrait de code que vous avez déjà enregistré, le bouton « Enregistrer l'extrait » s'intitule alors « Mettre à jour ». La case à cocher en haut empêche la note d'être ajoutée à nouveau à chaque exécution de la fonction.

Et voilà ! Vous pouvez désormais ajouter votre propre code JavaScript à votre flux YouTube à l'aide du champ « JavaScript personnalisé » ou d'un extrait de code WPCode. Vous souhaiterez peut-être ensuite découvrir comment configurer le plugin YouTube Feed Pro.

Questions fréquemment posées

Vous trouverez ci-dessous les réponses à certaines des questions les plus fréquentes concernant l'ajout de code JavaScript personnalisé à votre flux.