Il existe souvent de nombreuses raisons différentes pour lesquelles vous souhaiteriez ajouter du JavaScript à WordPress, comme apporter un ajustement mineur à une fonction existante ou peut-être essayer d'ajouter un script tiers. Vous devez vous assurer de ne pas le faire de manière incorrecte, car si vous le faites, vous pourriez finir par détruire votre site Web. Cela est vrai quelle que soit la raison pour laquelle vous souhaitez le faire.
Il existe une approche fiable pour intégrer JavaScript dans WordPress. Ensuite, il y a les méthodes nuisibles, qui peuvent soit rendre votre site Web inutilisable, soit affecter négativement ses performances globales.
Dans cet article, nous fournirons diverses suggestions pour ajouter du code JavaScript aux sites Web, ainsi que des recommandations sur les options appropriées pour des scénarios spécifiques qui pourraient survenir à l'avenir.
JavaScript dans WordPress
L'extensibilité de WordPress vous permet d'ajouter de nouvelles fonctionnalités et capacités à votre site Web sans avoir à reconstruire ou modifier l'ensemble de votre thème . Ceci est rendu possible par le fait que WordPress peut être facilement personnalisé. Plutôt que de repartir de zéro pour créer un nouveau thème WordPress, vous pouvez ajouter des fonctionnalités à votre site en installant simplement des plugins.
Vous pouvez également ajouter du JavaScript à WordPress sans créer de plugin si la fonctionnalité que vous souhaitez ajouter ne nécessite pas de plugin et que vous ne souhaitez pas en créer ou en installer un. Javascript n’étant pas un plugin, il ne peut pas être installé sur WordPress.
L'utilisation de cette stratégie pose un problème, même s'il est simple d'insérer du code JavaSript directement dans votre fichier header.php. Cela peut entrer en conflit avec d’autres plugins lorsqu’ils chargent leurs propres scripts JS.
Le guide étape par étape pour installer JavaScript sur WordPress
Votre site WordPress peut contenir du code JavaScript personnalisé ajouté selon plusieurs méthodes différentes, chacune ayant son objectif :
Incorporez un script dans certaines pages en utilisant des plugins comme les en-têtes et les pieds de page.
Vous pouvez ajouter le script à une seule page de votre choix, à une page spécifiée ou à plusieurs pages en utilisant le fichier function.php
Incluez un fichier JavaScript dans l'en-tête de votre thème.
Incluez JavaScript dans l'en-tête de votre thème
Dans certains cas, vous souhaiterez peut-être que le fichier JavaScript apparaisse sur l'ensemble du site sans utiliser de plugin.
L'ajout d'un script tiers à toutes vos pages peut être effectué en insérant le script ou en ajoutant le script référencé lui-même dans l'en-tête de votre fichier modèle header.php. Par exemple, le script instantpage.js optimise le chargement de votre site web. Vous pouvez ajouter instantpage.js, par exemple.
Vous risquez de perdre ces modifications si vous mettez à niveau votre thème. Il est fortement suggéré de créer un thème enfant si vous souhaitez néanmoins y parvenir, même si cela est fortement encouragé.
Dans ce cas particulier, dans lequel vous souhaitez que ce script soit inclus partout, vous pouvez ajouter le fichier directement au modèle en suivant les méthodes fournies ci-dessous :
var script = document.createElement('script'); script.src = « http://votredomaine.com/filepath/myfile.js » ; document.head.appendChild(script);
Il faut insérer cet appel au fichier (ou script) dans l'espace entre les balises méta et le lien vers la feuille de style. Pour ajouter du JavaScript à une page HTML, suivez les mêmes étapes que pour d'autres pages HTML.
Commentaires finaux
Un point fondamental à retenir est que le wp head hook n’est utile que sur le front-end de votre site Web. Pour cette raison, tout JavaScript personnalisé introduit à l'aide de cette méthode ne sera pas visible dans les parties d'administration ou de connexion du site. Cependant, vous pourrez peut-être obtenir le même résultat en utilisant le hook d'action de la tête d'administration ou le hook d'action de la tête de connexion. Ces deux crochets sont situés dans la section d’en-tête de la page.
Reportez-vous à Seahawk Media pour plus d’articles de ce type.
