Ajouter JavaScript à WordPress : comment le faire facilement
Les personnes qui utilisent WordPress devraient en savoir plus sur JavaScript et sur son utilisation pour un site Web. Pour ajouter JavaScript à WordPress, vous devez trouver le moyen le plus approprié de l’implémenter pour votre propre site Web.
La recherche revêt une grande importance, car une mauvaise implémentation de JavaScript pourrait entraîner des conséquences difficiles à corriger.
Qu’est-ce qu’un JavaScript WordPress ?
Un JavaScript WordPress est un moyen d’ajouter des fonctions supplémentaires à un site Web sans le ralentir. JavaScript représente un langage de programmation qui s’exécute sur le navigateur de l’utilisateur. Ce type de programmation offre aux développeurs la possibilité d’ajouter toutes sortes de fonctionnalités à leurs sites, comme des lecteurs vidéo intégrés, des calculatrices ou d’autres services. Le morceau de code JavaScript doit simplement être copié et collé dans le code du site Web.
Pourquoi devriez-vous ajouter du JavaScript personnalisé dans WordPress ?
Il existe plusieurs raisons pour lesquelles vous devriez ajouter JavaScript à WordPress, mais pour ce faire, vous devez savoir comment le site Web est codé. Lors du codage d’un site Web WordPress, trois éléments peuvent vous aider :
- HTML
- CSS
- Javascript
Pour créer une base très solide pour le site WordPress, vous pouvez utiliser HTML et CSS. Même s’ils sont parfaits pour jeter les bases du site Web, ils sont limités en termes de modification du comportement du site. Lorsque vous souhaitez que votre site agisse d’une manière spécifique, vous pouvez utiliser JavaScript pour effectuer l’une des actions suivantes :
- Modifier, masquer ou afficher certains éléments HTML sur le site Web
- Ajouter des valeurs aux variables CSS, ainsi que lancer des opérations plus complexes (fusionner des variables ou rendre un élément interactif en cliquant)
- Modification de la mise en page du thème WordPress en y ajoutant un autre bloc de code
- Modifier une certaine fonctionnalité d’un plugin WordPress
- Enrichir le site avec du contenu dynamique (animations, vidéos etc.)
- Inclure un élément externe dans le site Web (API tierces)
Tout cela – et plus encore – peut être fait en utilisant JavaScript.
Utiliser Insérer des en-têtes et des pieds de page pour ajouter du JavaScript
Lors de l’ajout de JavaScript à WordPress, vous devez simplement copier et coller le bloc de code JavaScript sur le site Web. Cette action simple ajoute un outil tiers au site Web, qu’il s’agisse d’un lecteur vidéo ou d’un autre élément. Ces extraits de code ont été ajoutés soit juste sous la section d’en-tête, soit juste avant la balise dans le code principal du site Web. Cela influence l’endroit où l’élément sera placé. Pour activer ce plugin qui s’appelle Insert Headers and Footers, vous devez d’abord l’installer.
Pour l’activer après l’installation, il vous suffit d’atteindre Paramètres puis la page Insérer des en-têtes et des pieds de page. Vous pouvez cocher deux cases différentes: une pour l’en-tête, une pour le pied de page. Une fois que vous avez activé ce plugin, vous pouvez simplement coller l’extrait de code JavaScript et cliquer sur enregistrer. Comme le plugin est activé, l’extrait de code que vous avez collé se chargera automatiquement pour toutes les pages de votre site Web. Il s’agit des connaissances les plus élémentaires dont vous avez besoin pour ajouter JavaScript à WordPress.
Désactivation du filtrage WordPress
Lorsque vous utilisez JavaScript dans WordPress, vous devez également désactiver le blocage des balises de script de JavaScript. Ce paramètre se trouve dans wp-config.php, qui se trouve dans le répertoire Web racine. Pour activer les balises personnalisées, ajoutez cette ligne de code ici :
define( 'CUSTOM_TAGS', true );
Une fois que vous êtes passé à la page functions.php, copiez et collez cet extrait de code dans votre code de base :
function add_scriptfilter( $string) {global $allowedtags;$allowedtags['script'] = array( 'src' => array() );return $string;}add_filter( 'pre_kses', 'add_scriptfilter' );
Conseil supplémentaire : l’utilisation de cette méthode signifie que vous désactivez la fonction de sécurité sur votre site Web, quel que soit le niveau d’autorisation de l’utilisateur. N’utilisez cette méthode que si vous faites profondément confiance à vos auteurs. Activer la balise de script est parfois risqué de cette façon.
Apprenez à utiliser le plugin Script n Styles
Vous pouvez ajouter JavaScript à WordPress en utilisant un plugin. Normalement, vous devez charger JavaScript dans les balises et. Afin de charger JavaScript globalement, un plugin peut être utilisé. Un réactif est Script n Styles. Vous pouvez soit inclure des scripts sur l’ensemble du site Web, soit les inclure au niveau de la page ou même de la publication. Vous pouvez également modifier les autorisations des utilisateurs. Les auteurs peuvent publier des articles et rendre le JavaScript actif et les contributeurs peuvent enregistrer les articles sans les publier.
Utiliser des champs personnalisés avancés
Si vous vous demandez comment ajouter JavaScript à WordPress le plus facilement, ce plugin pourrait être la solution. Une fois que vous avez installé et activé le plugin, vous pouvez accéder à l’option Champs personnalisés dans le menu administratif. Ensuite, vous pouvez cliquer sur Ajouter nouveau. Le but est d’ajouter un champ auquel les administrateurs peuvent accéder et qui peut intégrer un fichier source JavaScript ou un code JavaScript dans les balises.
- La première étape consiste à nommer le groupe de champs. Cela peut être fait en activant une règle qui affiche cette option si l’utilisateur qui se connecte en tant qu’administrateur. Cela signifie que seul l’administrateur peut les ajouter sur le site.
- Les champs doivent être affichés sous la zone de contenu, ce qui signifie que vous sélectionnez Standard lorsqu’il s’agit de sélectionner le style du groupe de champs. Définissez la mise en forme du champ sur "Convertir HTML en balises". Cela se traduira par une bonne sortie, sinon, cela pourrait mal se traduire.
- Ajoutez le code suivant dans header.php :
<?php the_field('header_script'); ?>
Cela devrait être ajouté avant.
<?php the_field('footer_script'); ?>
Cela devrait être ajouté avant.
- Enregistrez les fichiers de modèle, mettez à jour la page et cliquez sur Publier.
La page sera publiée avec le JavaScript ajouté dessus. Les champs personnalisés avancés sont une option appropriée si vous souhaitez davantage de fonctionnalités pour les utilisateurs, des pages déjà publiées, etc.
Hé, saviez-vous que les données peuvent aussi être belles ?
wpDataTables peut le faire de cette façon. Il y a une bonne raison pour laquelle c’est le plugin WordPress #1 pour créer des tableaux et des graphiques réactifs.
Un exemple réel de wpDataTables dans la nature
Et c’est vraiment facile de faire quelque chose comme ça :
- Vous fournissez les données du tableau
- Configurez-le et personnalisez-le
- Publiez-le dans un article ou une page
Et ce n’est pas seulement joli, mais aussi pratique. Vous pouvez créer de grandes tables avec jusqu’à des millions de lignes, ou vous pouvez utiliser des filtres et une recherche avancés, ou vous pouvez vous déchaîner et les rendre modifiables.
"Ouais, mais j’aime trop Excel et il n’y a rien de tel sur les sites Web". Oui, il y en a. Vous pouvez utiliser une mise en forme conditionnelle comme dans Excel ou Google Sheets.
Vous ai-je dit que vous pouviez également créer des graphiques avec vos données ? Et ce n’est qu’une petite partie. Il y a beaucoup d’autres fonctionnalités pour vous.
Réflexions finales sur la façon d’ajouter JavaScript à WordPress
Ces conseils devraient suffire à vous apprendre à ajouter du JavaScript à WordPress de manière simple, sans rencontrer de problèmes. Après l’avoir fait une fois, la deuxième fois sera beaucoup plus facile et prendra moins de temps.
Si vous avez aimé lire cet article sur la façon d’ajouter du JavaScript à WordPress, vous devriez consulter celui-ci sur la façon de réinitialiser WordPress.
Nous avons également écrit sur quelques sujets connexes comme comment changer l’URL de WordPress, comment intégrer une vidéo dans WordPress, comment éditer le HTML dans WordPress, comment dupliquer une page dans WordPress, comment modifier les rôles d’utilisateur WordPress et comment ajouter une image en vedette WordPress..