Javascript pour WordPress

En tant qu'utilisateur de WordPress, vous avez peut-être parfois souhaité pouvoir modifier vos pages ou vos publications au-delà de ce que votre thème permet, sans le casser. Vous avez peut-être voulu ajouter un élément interactif à votre site, par exemple, mais WordPress supprime votre codage lorsque vous enregistrez vos modifications.

Étant donné que l'ajout de code directement dans une page ou une publication n'est pas vraiment facile, cela peut être un obstacle frustrant. Cependant, il existe un moyen de le surmonter. JavaScript peut être utilisé dans la plate-forme WordPress pour ajouter des éléments dynamiques aux pages et aux publications, ou sur l'ensemble de votre site Web.

Dans cet article, nous examinerons JavaScript, ce qu'il est et comment vous pouvez l'utiliser pour améliorer vos expériences numériques WordPress. Nous allons également découvrir plusieurs plugins qui peuvent vous aider à implémenter JavaScript sur votre site Web. Rassemblez toutes vos idées de sites Web incroyables et commençons!

Qu'est-ce que JavaScript ?

JavaScript est l'un des langages de programmation les plus populaires. Il peut ajouter une couche de fonctionnalités dynamiques à un site Web. Alors que la plupart des éléments de base des sites sont assemblés avec HTML et CSS, JavaScript apporte une multitude d'options attrayantes à la fête. Cela peut inclure n'importe quoi, d'une calculatrice interactive à un flux d'informations en temps réel.

L'un des avantages de JavaScript est qu'il est généralement déployé en tant que programmation côté client. Cela signifie que le script est exécuté à partir du navigateur du visiteur lorsqu'il consulte la page. Une fois que HTML et CSS sont déployés et créent la structure de la page, JavaScript peut s'exécuter par-dessus les autres éléments pour atteindre un objectif dynamique.

Que fait JavaScript ?

Ainsi, nous savons maintenant que JavaScript est principalement un élément de programmation côté client qui peut modifier le code HTML et CSS existant d'un site. Mais que peut-il faire d'autre ? Vous pouvez utiliser JavaScript pour plusieurs choses utiles, notamment :

• Exécuter des événements sur une page Web
• Validation de formulaire, où vous devez stocker des valeurs dans des variables
• API tierces pouvant être placées sur des pages ou des publications

Étant donné que JavaScript est exécuté par le navigateur de l'utilisateur, il peut également collecter des données à partir de ce navigateur. Ceci est essentiel lorsqu'il s'agit de créer des sites Web rapides et efficaces qui chargent rapidement les images et répondent bien aux appareils mobiles.

Quand devriez-vous ajouter JavaScript à WordPress ?

L'ajout de JavaScript est pratique lorsque vous souhaitez ajouter un élément à votre page WordPress qui, autrement, enliserait votre serveur lors de son déploiement. Cela peut inclure des fonctionnalités complexes, telles que des lecteurs audio ou vidéo. De plus, si vous utilisez beaucoup d'applications tierces, vous devrez peut-être ajouter un morceau de JavaScript à votre site pour les faire fonctionner.

Étant donné que JavaScript est écrit dans une page HTML, c'est au navigateur de l'utilisateur de décider quoi en faire. Bien que JavaScript puisse être utilisé côté serveur, son véritable super pouvoir réside donc dans l'implémentation côté client.

Parmi les autres possibilités d'implémentation de JavaScript, citons les actions basées sur des événements. C'est à ce moment que vous avez besoin que quelque chose se produise sur votre site en réponse aux actions d'un utilisateur, telles que des clics de souris ou un redimensionnement de fenêtre.

6 meilleurs plugins WordPress JavaScript

Maintenant que nous avons couvert les bases de ce que JavaScript a à offrir, examinons quelques plugins WordPress qui peuvent vous aider à déployer des scripts en toute sécurité sur votre site Web. Ci-dessous, nous passerons en revue six plugins pour WordPress qui offrent une variété d'options et de fonctionnalités différentes.

1. Insérer des en-têtes et des pieds de page

Ce plugin WordPress est décrit comme le moyen le plus simple d'ajouter du code à votre site WordPress. Insérer des en-têtes et des pieds de page vous est proposé par WPBeginner et peut vous aider à intégrer des API tierces à partir de plateformes de médias sociaux et plus encore. Tout cela est possible sans avoir besoin de modifier directement votre thème WordPress.

Principales caractéristiques:

• Fournit une interface simple pour l'édition et l'insertion de scripts d'en-tête ou de pied de page à guichet unique
• Permet de choisir entre insérer du code JS dans l'en-tête ou le pied de page
• Vous permet d'ajouter Google Analytics à n'importe quel thème
• Permet de travailler avec plusieurs types de code, y compris HTML, CSS et JavaScript

Prix ​​: Il s'agit d'un plugin gratuit.

2. CSS et JS personnalisés simples

Le plugin Simple Custom CSS et JS est pratique en tant qu'outil de développement et est plus efficace s'il est mis à niveau vers la version pro. Il se concentre principalement sur les changements d'apparence de votre site. De plus, il vous permet d'ajouter du CSS personnalisé et du JavaScript personnalisé sans modifier votre thème WordPress ou vos fichiers de plug-in. Avec la possibilité d'appliquer des modifications de code à des pages ou des URL spécifiques, vous pouvez tester des éléments avant de les mettre en ligne.

Principales caractéristiques:

• Inclut un éditeur de texte avec coloration syntaxique
• Vous permet d'imprimer votre code en ligne ou dans un fichier séparé
• Permet le placement de code dans l'en-tête ou le pied de page du site
• Permet d'ajouter autant de codes que vous le souhaitez côté front-end ou côté admin
• Conserve vos modifications lorsque vous changez de thème

Prix ​​: Ce plugin est une option gratuite.

3. Pied de page d'en-tête SOGO

SOGO Header Footer est idéal pour tirer parti des fonctionnalités de l'API tierce. Vous pouvez ajouter JavaScript aux en-têtes et aux pieds de page des pages qui incluent un code de remarketing Google, pour ne citer qu'un exemple. N'oubliez pas que vous devrez peut-être acheter une version professionnelle pour supprimer les publicités ou accéder aux options premium.

Principales caractéristiques:

• Inclut la prise en charge des pages de la boutique WooCommerce
• Vous permet d'appliquer du code JS à toutes les pages et publications, ou d'en spécifier certaines
• Est compatible avec Gutenberg
• Prend en charge les termes et les pages de catégories

Prix ​​: Il existe une version gratuite et une version premium à partir de 7,90 $.

4. Scripts pour le pied de page

Ce plugin WordPress puissant déplace vos scripts importants vers le pied de page de votre site. Vous voudrez peut-être le faire pour réduire les temps de chargement ou pour éliminer les goulots d'étranglement au chargement des images si votre thème exécute beaucoup de scripts. Il convient de noter que Scripts to Footer ne fonctionne que si vous avez des plugins et un thème qui utilise correctement wp_enqueue_scripts.

Principales caractéristiques:

• Vous permet de désactiver les fonctionnalités du plug-in sur des pages et des publications spécifiques directement, via la métabox de l'écran d'édition des publications/pages
• Vous permet de désactiver le plugin sur des pages d'archives spécifiques via la page des paramètres
• Permet de choisir les scripts à conserver dans l'en-tête du site

Prix ​​: Ce plugin est 100% gratuit.

5. Boîte à outils CSS et JavaScript

Ensuite, CSS & JavaScript Toolbox propose une option de tableau de bord pour gérer tous les codes et extraits de votre site. Un outil puissant pour les développeurs qui souhaitent avoir beaucoup de contrôle sur leur code, cette boîte à outils vous permet de créer des blocs de code à utiliser sur votre site. Vous pouvez ajouter et gérer du code CSS, JavaScript, HTML et PHP unique à vos blocs de code, et les ajouter à peu près n'importe où.

Principales caractéristiques:

• Vous permet d'ajouter CSS, JavaScript, PHP et HTML aux pages, publications, types de publication personnalisés, balises, catégories, URL, etc.
• Vous permet d'ajouter des styles frontaux sans modifier vos fichiers de thème
• Élimine le besoin de plugins personnalisés superflus ou de hacks pour ajouter des fonctionnalités
• Vous aide à ajouter des scripts tiers pour la publicité et le suivi des visiteurs, ou les canaux de médias sociaux
• Permet d'éviter d'utiliser le FTP et de gérer tous les ajouts et modifications de code au sein de votre tableau de bord

Prix ​​: Vous pouvez essayer le plugin gratuit ou vous procurer une version premium pour 29 $.

6. Scripts et styles

Enfin, Scripts n Styles vous permet d'ajouter des CSS et JavaScript personnalisés directement dans des publications individuelles, des pages ou tout autre type de publication personnalisé enregistré. Dans le domaine JavaScript, ce plugin est également livré avec des fonctionnalités de sécurité intégrées. Ceci est utile si vous avez plusieurs mains travaillant sur votre site WordPress.

Principales caractéristiques:

• Vous permet d'ajouter des classes à la balise body et au conteneur de publication
• Vous permet de créer des scripts pour l'ensemble du site via une page de paramètres globaux
• Ajoute de nouvelles classes au menu déroulant des formats TinyMCE, pour un style direct des publications et des pages
• Fournit la possibilité de restreindre l'utilisation à des types d'utilisateurs spécifiques

Prix ​​: L'utilisation de ce plugin est gratuite.

Ajout facile de JavaScript dans WordPress (en 2 étapes)

L'un des moyens les plus simples d'inclure JavaScript à l'échelle du site consiste à insérer le code dans votre en-tête ou votre pied de page via un plug-in. Voyons comment cela fonctionne, en utilisant Insérer des en-têtes et des pieds de page comme exemple.

Étape 1 : Installer et activer le plugin

La première étape consiste simplement à rechercher le plug-in dans l'onglet Plugin de votre site Web, puis à l'installer.

Une fois que vous avez fait cela, vous verrez un bouton Activer . Votre plugin n'est pas entièrement fonctionnel tant que vous n'avez pas terminé le processus en l'activant.

Étape 2 : Insérez le code JavaScript dans votre en-tête ou votre pied de page

Une fois le plugin activé, vous trouverez un nouvel élément dans le menu Paramètres de votre tableau de bord WordPress, intitulé Insérer des en-têtes et des pieds de page .

C'est ici que vous pouvez ajouter tous les scripts que vous souhaitez exécuter dans l'en-tête, le pied de page ou les deux. Cela inclut des ajustements à votre thème, l'intégration avec des API tierces et des modifications CSS.

C'est si simple! N'oubliez pas d'enregistrer vos modifications lorsque vous avez terminé, et le plugin chargera automatiquement votre code JavaScript aux endroits appropriés.

En savoir plus sur les astuces des développeurs avec WP Engine

Créer des modifications uniques et personnalisées sur votre site WordPress avec JavaScript peut sembler intimidant au début. Une fois que vous saurez comment implémenter avec succès ce langage de programmation clé, vous aurez un contrôle total sur vos thèmes et vos intégrations.

En tant que propriétaire ou développeur de site Web WordPress, des ressources de qualité font toute la différence dans votre travail. Chez WP Engine, nous avons des plans et des solutions pour tous les budgets. Nous sommes là pour vous apporter les meilleures solutions WordPress et vous aider à amener vos sites vers de nouvelles limites !