Anonim

Comme l'affirme la principale communauté de CMS, 25% d'Internet utilise WordPress. En voyant les tendances, nous n’avons pas d’autre choix que de les croire, presque tous les deuxièmes blogs et tous les quatrièmes sites semblent utiliser apparemment le système de gestion de contenu le plus puissant et le plus convivial. Dans l’attente, les utilisateurs et les développeurs ont commencé à transférer leurs sites sur WordPress Platform.

Dans cet effort pour transformer votre site web simple et convivial en un site CMS complexe et performant, les utilisateurs sont bloqués sur une étape très élémentaire et se posent la question suivante: Pour l'amour, comment puis-je obtenir ce fichier JavaScript externe (.js) travailler dans ce thème WordPress? Êtes-vous aussi celui qui pose la même question? Eh bien, amigos, vous êtes enfin au bon endroit: je suis ici pour vous guider pas à pas dans la plus simple des manières d'accomplir cette tâche!

Supposons maintenant que WordPress est installé et lancé avec un JS externe prêt, entrons dans la tâche d'inclure le fichier!

Remarque: J'utilise le fichier suivant (testrun.js) pour ce didacticiel et le thème sur lequel je travaille est Twenty Sixteen de WordPress .

alerte ('Bonjour');

Commençons!

Tous les scripts et les feuilles de style sont chargés à partir du fichier functions.php . C’est la bonne façon de les charger dans WordPress afin d’éviter tout conflit avec d’autres scripts chargés par WordPress lui-même ou par vos plugins utilisés. Si vous laissez WordPress gérer tous les fichiers inclus, vous devez lui indiquer que vous souhaitez que ce fichier soit inclus dans la partie en-tête (début) ou pied (fin) du fichier. Chaque modèle / thème a son propre functions.php donc il serait difficile de généraliser le nom exact des fonctions qui incluent tous les fichiers à inclure. Depuis que je prends vingt-seize comme thème, voici l’instantané de la façon dont mon functions.php (utilisé pour inclure des fichiers). Le vôtre devrait ressembler dans une certaine mesure à ceci:

La fonction wp_enqueue_script lie un fichier de script à la page générée au bon moment en fonction des dépendances de script, si le script n'a pas déjà été inclus et si toutes les dépendances ont été enregistrées. Vous pouvez soit lier un script avec un descripteur préalablement enregistré à l'aide de la fonction wp_register_script (), soit fournir à cette fonction tous les paramètres nécessaires pour lier un script.

Le wp_enqueue_script ($ handle, $ src, $ deps, $ ver, $ in_footer) prend en compte les paramètres suivants:

$ handle

(chaîne) (Obligatoire) Nom du script.

$ src

(chaîne | bool) (Facultatif) Chemin du script à partir du répertoire racine de WordPress. Exemple: '/js/myscript.js'.

Valeur par défaut: false

$ deps

(array) (Facultatif) Un tableau de poignées enregistrées dont dépend ce script.

Valeur par défaut: array ()

$ ver

(chaîne | bool) (Facultatif) Chaîne spécifiant le numéro de version du script, le cas échéant. Ce paramètre est utilisé pour garantir que la version correcte est envoyée au client, quelle que soit la mise en cache, et doit donc être inclus si un numéro de version est disponible et a du sens pour le script.

Valeur par défaut: false

$ in_footer

(bool) (Facultatif) Indique si le script doit être mis en file d'attente avant ou avant . Par défaut 'false'. Accepte «faux» ou «vrai».

Valeur par défaut: false

Vous pouvez ignorer la fonction wp_register_script () pour ce tutoriel. Notre objectif est d'inclure un JS externe uniquement. Cela devrait fonctionner parfaitement sans ça!

Par conséquent, si je souhaite nommer mon script comme "test", rappelez-vous que ce paramètre ($ handle) NE correspond PAS nécessairement au nom du fichier actuel, et que mon fichier a une dépendance externe sur jquery et que sa version est 1.0 et se charge avant le chargement de la page. alors ma fonction ressemblerait à:

wp_enqueue_script ('tutorial', get_template_directory_uri (). '/js/testrun.js', array ('jquery'), '1.0', false);

Si vous remarquez que j’ai utilisé get_template_directory_uri (), la chaîne concaténée après la fonction, c’est-à-dire « /js/testrun.js » est en fait le chemin du fichier vers le fichier d’ index du modèle .

Ainsi, votre attribut $ src, qui est la source de votre fichier js, devient: get_template_directory_uri (). 'Path_to_js_wrt_index_of_template'.

Par conséquent, le fichier functions.php final ressemble à ceci:

Tenez, nous avons presque fini! Enregistrez-le maintenant et cliquez sur Actualiser sur votre site Web… vous devriez voir le JS fonctionner! Voici le mien:

Comme nous avons défini la valeur false sur l' option $ in_footer, le script se charge avant la page, mais après le chargement de JQuery, car il a été ajouté en tant que dépendance!

Et .. voila! Voilà. Vous avez inclus avec succès un fichier JS personnalisé externe dans votre thème WP!

Bonne codage !!

Référence: Fonction Enqueue: Codex WordPress

Quel est le meilleur moyen d’ajouter des js externes personnalisés à wordpress