Si vous cherchez un moyen rapide et facile d’insérer JavaScript dans WordPress, cet article abordera trois approches différentes pour y parvenir. Tous peuvent être faits gratuitement et ne nécessitent aucune connaissance avancée.
Pourquoi ajouter une bibliothèque JS à WordPress?
JavaScript alimente de nombreuses interactions et effets avancés que vous voyez sur les sites Web modernes. Il existe des centaines de milliers de bibliothèques différentes qui vous aident facilement à intégrer des aspects uniques tels que la parallaxe, les interactions, les entrées utilisateur, le traitement côté client, etc.
Si vous voulez de l’inspiration sur ce que vous pouvez faire avec JavaScript et WordPress, consultez simplement CodePen ou Awwards pour voir des exemples incroyables et des sites Web utilisant WordPress.
Si vous souhaitez ajouter l’un de ces éléments à votre site Web, vous devrez ajouter cette bibliothèque JavaScript spécifique à WordPress. Heureusement, c’est relativement facile à faire, et cet article discutera de trois façons principales – vous pouvez choisir celle qui vous convient le mieux.
Bibliothèque / Fichier JS: À quoi s’attendre?
JS se présente sous différentes formes et tailles. En règle générale, il peut être téléchargé directement sous forme de fichier .JS, mais peut également être inclus sur un site Web à l’aide d’un CDN ou d’un réseau de livraison de contacts. Quoi qu’il en soit, il sera généralement inséré dans un site Web de l’une des deux manières suivantes:
Utiliser <script> et pointer vers son SRC. Cette méthode est utilisée si vous hébergez le fichier JavaScript sur votre serveur ou si vous souhaitez inclure une bibliothèque JavaScript dans WordPress à partir de mon réseau de diffusion de contacts.
Si vous voulez de l’inspiration sur ce que vous pouvez faire avec JavaScript et WordPress, consultez simplement CodePen ou Awwards pour voir des exemples incroyables et des sites Web utilisant WordPress.
Si vous souhaitez ajouter l’un de ces éléments à votre site Web, vous devrez ajouter cette bibliothèque JavaScript spécifique à WordPress. Heureusement, c’est relativement facile à faire, et cet article discutera de trois façons principales – vous pouvez choisir celle qui vous convient le mieux.
JS se présente sous différentes formes et tailles. En règle générale, il peut être téléchargé directement sous forme de fichier .JS, mais peut également être inclus sur un site Web à l’aide d’un CDN ou d’un réseau de livraison de contacts. Quoi qu’il en soit, il sera généralement inséré dans un site Web de l’une des deux manières suivantes:
Utiliser <script> et pointer vers son SRC. Cette méthode est utilisée si vous hébergez le fichier JavaScript sur votre serveur ou si vous souhaitez inclure une bibliothèque JavaScript dans WordPress à partir de mon réseau de diffusion de contacts.
Si vous voulez de l’inspiration sur ce que vous pouvez faire avec JavaScript et WordPress, consultez simplement CodePen ou Awwards pour voir des exemples incroyables et des sites Web utilisant WordPress.
Si vous souhaitez ajouter l’un de ces éléments à votre site Web, vous devrez ajouter cette bibliothèque JavaScript spécifique à WordPress. Heureusement, c’est relativement facile à faire, et cet article discutera de trois façons principales – vous pouvez choisir celle qui vous convient le mieux.
Les exemples incluent le suivi des extraits, comme ceux de Google Analytics ou GTM.
Pour tout site Web, même s’il n’est pas construit avec WordPress, lors de l’insertion d’une bibliothèque JavaScript, vous l’ajouteriez à l’en-tête ou au pied de page. En règle générale, JavaScript est inséré directement dans le pied de page, de sorte qu’il n’interfère pas avec le processus de rendu de la page Web.
Cela conduit à des temps de chargement plus rapides et à un meilleur classement sur Google.
Voici un exemple concret de la façon dont JS est inséré dans n’importe quel site Web, du 20min.
Un site WordPress n’est pas différent, JavaScript est inséré de la même manière. Jetons maintenant un coup d’œil à trois méthodes différentes que vous pouvez utiliser pour ajouter une bibliothèque JavaScript à votre site Web de WordPress. Ces méthodes varieront en difficulté, classées par ordre de plus facile à plus complexe. Chacun a son propre meilleur cas d’utilisation.
Méthode 1: Utiliser un plugin pour ajouter une bibliothèque JS à WordPress
Le moyen le plus simple d’ajouter une bibliothèque JavaScript à WordPress est probablement d’utiliser un plugin prédéfini conçu pour insérer spécifiquement JavaScript dans l’en-tête ou le pied de page de votre site. Le plugin le plus populaire pour ce faire s’appelle (sans surprise) Insert Headers and Footers par WPBeginner. Il compte + de 1 million d’installations actives.
Pour l’utiliser, installez et activez le plugin sur votre site Web, puis copiez et collez simplement votre JavaScript dans l’un des trois champs (html).
Ce plugin vous permet d’ajouter n’importe quel code HTML dans l’en-tête, le corps ou le pied de page de votre site. Cependant, c’est un peu simple et si vous recherchez plus de contrôle, envisagez d’utiliser la méthode deux.
Méthode 2: Utiliser un gestionnaire de script pour ajouter Javascript à WordPress
La deuxième méthode consiste à utiliser un gestionnaire de scripts pour ajouter et gérer des bibliothèques et des fichiers JavaScript sur votre site WordPress. Le gestionnaire de script gratuit (et le plus connu) à utiliser pour cela est Code Snippets. Ici, vous pouvez ajouter divers extraits de JavaScript, y compris les balises de script mentionnées ci-dessus, et les gérer à partir d’un tableau de bord sur le back-end de votre site Web. Cela rend très facile d’activer et de désactiver les choses, et vous pouvez également dicter où les scripts et vers le haut en utilisant PHP (c’est-à-dire, insérer dans l’en-tête ou le pied de page de votre site Web.
Pour insérer le JS dans l’en-tête d’un site WordPress, utilisez ce code :
Utilisez des scripts avancés pour ajouter et gérer JS sur un site Web WordPress
Ces deux plug-ins premium facilitent l’activation et la désactivation de javascript sur le site WP. Contrairement aux extraits de code, il existe des paramètres prédéfinis qui vous permettent d’insérer directement dans n’importe quel crochet WordPress de votre choix, ce qui peut inclure l’en-tête ou le pied de page du site Web principal, de la zone d’administration, de la page de connexion, etc. Vous pouvez également générer des codes courts, ce qui signifie que vous pouvez insérer des bibliothèques et des fichiers JavaScript dans n’importe quelle zone d’un site Web de presse Word en insérant simplement le code court généré.
Utiliser Scripts Organizer pour ajouter et gérer JavaScript sur un site WP
Nous possédons et utilisons ces deux plugins sur divers projets. Script Organizer est le meilleur lorsque vous cherchez à planifier divers scripts pour des heures ou des plages spécifiques. Advanced Scripts est idéal si vous souhaitez insérer des scripts conditionnellement (vous pouvez utiliser PHP standard ou des règles prédéfinies pour ce faire). Les deux sont très bien codés, ont des équipes de développement de qualité derrière eux et obtiennent notre sceau d’approbation. Chacun a une garantie de remboursement de 14 jours afin que vous puissiez essayer les deux, et voir ce qui fonctionne le mieux pour votre cas d’utilisation ou votre situation. Enfin, contrairement à de nombreux plug-ins WordPress, ces outils sont vendus sous forme d’offres à vie, ce qui signifie qu’il n’y aura pas de renouvellement annuel nécessaire et que vous recevrez toujours des mises à jour illimitées pendant toute la durée de vie du produit.
Méthode 3: Ajouter JS directement à votre thème ou créer un plugin personnalisé
Vous pouvez également créer votre propre plug-in de presse Word qui fait essentiellement la méthode à faire, sauf qu’au lieu d’insérer un extrait de code à partir du back-end d’un site Web de presse Word, vous le faites à partir d’un plug-in. Cela peut conduire à plus de performances, de sécurité et rendre plus difficile pour un client de casser.
Mais, en même temps, si vous insérez une bibliothèque JS entière, c’est à vous, le développeur, de mettre à jour le code dans le plug-in chaque fois que la bibliothèque elle-même reçoit une mise à jour. Il n’y a pas de moyen facile de rendre cela automatique, mais cela doit être fait pour des raisons de sécurité.
Si vous souhaitez ajouter JavaScript à un site Web de presse Word en créant votre propre plug-in, il existe un passe-partout simple appelé My Custom Functionality.
Téléchargez-le simplement, téléchargez le JavaScript dans le dossier JavaScript, puis mettez le code en file d’attente via un fichier plugin.php.
Il y a déjà des commentaires et des exemples ici, donc tout ce que vous avez à faire est de le décommenter, de changer le nom du fichier pour celui que vous avez téléchargé dans le dossier JS, de compresser le plug-in, de le télécharger sur un site Web de presse Word et de profiter de la bibliothèque JavaScript qui a été ajoutée via cette méthode.
Si vous souhaitez ajouter le JavaScript directement à votre thème de presse de mots, vous pouvez le faire en utilisant l’extrait de code trouvé ci-dessus, et en les ajoutant directement au fichier .php fonctions. Cela le rend un peu plus difficile à gérer car il n’y a pas d’interface graphique pour vous permettre de voir quel code est exécuté sur votre site Web, et si vous n’utilisez pas une équipe enfant, cela sera écrasé chaque fois que le thème est mis à jour.
Ces trois méthodes d’ajout de JavaScript à un site Web WordPress devraient vous couvrir pour n’importe quel cas d’utilisation ou scénario. Comme vous pouvez le voir, c’est un effort assez simple d’ajouter JavaScript à un site Web, et WordPress le rend probablement encore plus facile à gérer que si vous le codez en dur.
Considérations relatives au rendement
Par nature, JavaScript est une ressource bloquant le rendu, ce qui signifie qu’il retardera le chargement d’une page Web si vous ne le faites pas ou si vous ne la chargez pas de manière asynchrone. Notre recommandation est de toujours insérer des bibliothèques JavaScript dans le pied de page d’un site Web de presse de mots, et l’initialisation de la dame jusqu’à ce qu’un utilisateur en ait réellement besoin. De cette façon, la page n’est pas gonflée et il n’y a aucun impact sur les performances. Google déteste vraiment bloquer les ressources et pénalisera votre site Web en termes de classement si JS le ralentit.
Le moyen le plus simple de vous assurer que le JavaScript que vous avez inséré sur un site Web Word Press fonctionne est d’utiliser un plug-in tel que WPRocket pour optimiser complètement et tous les JS sur le site Web.
Lisez ces guides pour en savoir plus :
Conclusion
En tant qu’agence, nous allons généralement créer nos propres plugins personnalisés pour héberger JavaScript, ou utiliser un gestionnaire de script comme nous développons principalement avec Oxygen Builder (il désactive toutes les fonctions du thème, y compris le fichier .php fonctions). Cependant, si vous êtes un utilisateur standard de WordPress, nous vous recommandons la méthode un ou la méthode deux... Les deux rendent très facile la gestion de tout JavaScript sur un site Web de presse Word, ce qui est important si vous le créez vous-même et que vous devez le déboguer. En ayant une interface utilisateur graphique vous montrant ce que JavaScript exécute sur votre site à un moment précis, vous pouvez facilement l’activer et le désactiver, en corrigeant les problèmes que les bibliothèques et les plug-ins conflictuels peuvent avoir.
Si vous avez des questions sur la façon d’ajouter une bibliothèque ou un fichier JavaScript à un site Web WordPress, et quelle est la meilleure façon de le faire, n’hésitez pas à contacter dans la section commentaire ci-dessous. Nous espérons que cet article vous a été utile, et si vous avez vos propres conseils, laissez un commentaire!