Ajouter JavaScript aux thèmes WordPress de la bonne manière

Il existe une méthode spécifique pour ajouter du JavaScript aux thèmes WordPress afin d’éviter tout conflit avec le plugin principal ou le thème WordPress. Le problème est que de nombreux développeurs appellent leurs fichiers JavaScript directement dans le fichier d’en – tête. Php ou pied de page. Php, c’est la mauvaise approche. Dans ce guide, je vais vous montrer comment appeler correctement un fichier javascript en utilisant des fonctions de fichier. PHP pour les charger directement dans la balise Head ou footer du site. Ainsi, si vous développez un thème pour le déploiement et que vos utilisateurs finaux veulent éditer des scripts à travers des sous – thèmes, ils peuvent le faire, ou s’ils utilisent des plug – ins minimize \/ cache ou d’autres optimisations, il fonctionnera correctement. Si vous utilisez des sous – thèmes, Vos scripts sont ajoutés correctement sans copier les fichiers d’en – tête. Php ou pied de page. Utilisez PHP dans votre sous – thème, ce qui n’est absolument pas nécessaire (lorsque vous utilisez un thème bien codé)
La mauvaise méthode pour ajouter JavaScript au thème WordPress appelle JavaScript dans le fichier d’en – tête. Php ou pied de page. Php montré ci – dessous n’est pas la bonne approche, et je recommande fortement de ne pas le faire, il provoque souvent des conflits avec d’autres plug – ins, et il n’est jamais une bonne idée d’utiliser CMS manuellement. La bonne façon d’ajouter du JavaScript à un thème WordPress la meilleure façon d’ajouter du JavaScript à un thème WordPress est par des fichiers de fonctions. Php utilise le script WP _ enqueue script. Le chargement du JavaScript à l’aide de l’opération WP _ enqueue scripts aidera à éviter les problèmes avec le sujet.
Exemple WP _ enqueue script (‘My – script’, get Template Directory Uri (). ‘ Js \/ mon script. JS’, array (), True); Le code ci – dessus va charger mon fichier script. JS est sur votre site. Comme vous pouvez le voir, je n’ai inclus que $handle, mais vous pouvez également ajouter des dépendances pour le script, le numéro de version et s’il doit être chargé dans l’en – tête ou le pied de page (paramètres de préparation)
Est ajouté au fichier de fonction. PHP) Comment créer une fonction et ensuite invoquer le script en utilisant le crochet WordPress. \/ * * * Script * \/ Function myprefix _ enqueue scripts () {WP enqueue script (‘My script’, get Template Directory Uri (). \/ js \/ My script.js’, array (), True);} Ajouter une action (‘WP _ enqueue scripts’,’ myprefix enqueue scripts’); Remarque: voir comment utiliser la fonction get _ Template Directory Uri lors de la définition de l’emplacement du script? Cette fonction crée l’URL du dossier sujet. Si vous utilisez un sous – thème, vous devez utiliser get _ Stylesheet Directory Uri pour qu’il pointe vers votre sous – thème au lieu du thème parent.
Bien que vous puissiez facilement coller du JavaScript inline dans n’importe quel fichier Template via des balises script, vous pouvez également ajouter du Code inline en utilisant les crochets WordPress, en particulier en ce qui concerne le plug – in de base ou le Code de thème. Voici un exemple d’ajout d’un script inline à un site: la fonction myprefix _ add inline script () {WP add inline script (‘My script’, ‘alert (\
En utilisant cette méthode, les gens peuvent facilement supprimer vos scripts en ligne via des sujets
Child ou un plug – in supplémentaire pour garder tout votre JavaScript personnalisé bien organisé et analysé par WordPress, ce qui est plus sûr. Si vous utilisez des sous – thèmes, vous pouvez télécharger des scripts via la fonction fichier. Php au lieu de copier le fichier d’en – tête. Php ou pied de page. Sous – thème de PHP. C’est – à – dire, si vous travaillez sur un sous – sujet non désiré, il suffit de télécharger le code dans l’en – tête en utilisant le crochet WP _ Head ou WP footer, comme dans l’exemple suivant:
Ajouter _ action (‘WP footer’, fonction () {? > (fonction ($) {‘use strict’; $(document). Dans (‘ready’, fonction () {\/ \/ Custom Code here}); (jquery); <? Php});