Y compris javascript dans les plugins ou les thèmes, la bonne façon

Chargez efficacement le code JavaScript dans les thèmes et plugins WordPress

Points clés

• Lorsque vous incluez le code JavaScript dans les plug-ins WordPress ou les thèmes, assurez-vous de le faire attentivement pour éviter les ballonnements inutiles des pages générées. Vous pouvez utiliser la fonction wp_enqueue_script() pour éviter d'insérer plusieurs fois le même fichier.
• wp_enqueue_script() Les fonctions nécessitent au moins deux paramètres: nom de script et URL de script. Il peut également accepter trois paramètres supplémentaires pour un meilleur contrôle sur la façon dont le script est inclus.
La fonction
• wp_register_script() est utilisée pour indiquer comment inclure un script, mais il n'est pas réellement inclus. Cette fonction est très utile pour gérer les dépendances car elle permet à d'autres plugins d'utiliser des scripts enregistrés.
• Les scripts ne doivent pas être enregistrés partout. Au lieu de cela, les développeurs devraient réfléchir au moment ou au moment où leurs scripts sont nécessaires et utiliser l'API Action / Filtre ou la fonction WordPress pour inclure les scripts uniquement si nécessaire.
La fonction
• wp_enqueue_script() garantit que le même script n'est pas inclus deux fois et est correctement inclus dans l'en-tête ou le pied de page. Cependant, si des scripts sont nécessaires à un moment ou à un emplacement spécifique, l'appel wp_enqueue_script() doit être placé dans la bonne fonction.

Actuellement, il y a plus de 33 000 plugins et 2 600 thèmes sur wordpress.org, et nous pouvons également ajouter plus de thèmes et de plugins qui ne sont pas sur cette plate-forme. Ils peuvent effectuer de nombreuses opérations différentes et offrent souvent des fonctionnalités en utilisant JavaScript.

Fondamentalement, il n'est pas difficile d'inclure le code JavaScript dans un thème ou un plugin: WordPress génère juste un fichier HTML, donc utiliser des balises de script pour inclure le code directement ou un lien vers un fichier avec des attributs SRC est suffisant - - Si vous le développez seul, isolé du monde.

mais ce n'est pas le cas. Les utilisateurs utilisant WordPress peuvent installer des plugins ou des thèmes qui coexistent avec vos plug-ins ou thèmes, et les développeurs de ces outils peuvent également utiliser JavaScript. De plus, WordPress lui-même utilise également JavaScript. Le problème est que si tout le monde inclut ses scripts à volonté, la page générée deviendra inutile.

Question

Un exemple sera plus clair, et j'utiliserai un exemple que je connais: le mien.

J'ai développé le plugin WP Photo Sphere qui permet aux utilisateurs d'ajouter des images panoramiques à leurs messages. Pour ce faire, j'ai besoin de différents fichiers JavaScript: bibliothèques pour afficher des panoramas et des fichiers pour récupérer des balises spécifiques pour afficher des panoramas. De plus, dans ce dernier script, j'ai utilisé jQuery, je dois donc l'inclure.

Si je ne me soucie pas de l'utilisateur, je peux insérer ces trois scripts dans toutes les pages du site Web, ce qui signifie que les visiteurs doivent télécharger ces fichiers même si la page n'en a pas besoin.

À l'heure actuelle, le problème est déjà grave, mais si nous considérons JQuery, le problème devient encore plus grand. Et si deux plugins utilisant cette bibliothèque ont ce comportement? Les utilisateurs téléchargeront non seulement des fichiers inutiles, mais les téléchargeront également deux fois!

Plus la page est lourde, plus le temps de chargement sera long. Les sites Web avec des temps de chargement trop longs ont des visites plus faibles que les sites Web avec des vitesses de chargement plus rapides. Si vos plugins ou thèmes font du chargement trop longtemps, ils ne seront pas utilisés. C'est sans aucun doute une puissante force motrice pour optimiser vos outils, non?

Fonction d'insertion de script inévitable

Pour éviter le problème de l'insertion répétée du même fichier, WordPress offre une grande fonction: wp_enqueue_script(). Cette fonction doit être votre meilleur ami lorsque vous souhaitez insérer un script.

Comme son nom l'indique, cette fonction ajoutera votre script à la file d'attente et l'inclura dans l'en-tête ou le pied de page au bon moment, donc aucune balise de script n'est ajoutée au milieu de la page.

Lorsqu'il est utilisé seul, la fonction

nécessite au moins deux paramètres: le nom du script et l'URL de script. Par exemple, si je souhaite inclure les scripts dont mes besoins au plugin, j'ajoute cette ligne à son fichier principal (nous verrons la bonne voie ci-dessous). wp_enqueue_script()

wp_enqueue_script('test', plugin_dir_url(__FILE__) . 'test.js');

Cependant, trois paramètres supplémentaires vous permettent de mieux contrôler la façon dont le script est inclus, en particulier le dernier paramètre booléen: par défaut, cette valeur booléenne est définie sur FALS To True et votre script sera inclus dans la balise de pied de page.

Le quatrième paramètre est utile lorsque vous créez différentes versions du script: il s'agit d'une chaîne contenant le numéro de version, qui sera annexée à la fin de l'URL. L'ajout d'un numéro de version garantit que les visiteurs obtiennent la version correcte du script, quel que soit le cache.

Le troisième paramètre est l'un des plus intéressants, car il vous permet d'indiquer les dépendances du script. Par exemple, si votre script nécessite une bibliothèque jQuery, vous pouvez utiliser ce paramètre.

wp_enqueue_script('test', plugin_dir_url(__FILE__) . 'test.js', array('jquery'));

Comme vous pouvez le voir, même s'il n'y a qu'une seule dépendance, la dépendance doit être indiquée dans le tableau. Le nom que vous indiquez dans ce tableau est le nom du script enregistré avec la deuxième fonction:

. wp_register_script()

La deuxième fonction est utilisée exactement la même que la première fonction: vous indiquez le nom du script, son URL, ses dépendances, son numéro de version et s'il doit être inclus dans le pied de page. Les trois derniers paramètres sont facultatifs, mais d'autres paramètres sont nécessaires.

wp_register_script('test', plugin_dir_url(__FILE__) . 'test.js', array('jquery'), '1.0', true);

Le script d'enregistrement ne l'inclura pas. Vous devez toujours utiliser la fonction

pour inclure votre script, mais son utilisation sera simplifiée: vous n'avez qu'à indiquer le nom du script. wp_enqueue_script()

wp_enqueue_script('test');

Vous vous demandez peut-être à quel point

est utile parce que wp_register_script() peut faire tout le travail. Cette fonction est utilisée pour indiquer comment le script doit être inclus, mais s'il n'est pas nécessaire, il ne sera pas inclus. wp_enqueue_script()

Un exemple serait plus clair, alors imaginez que vous devez inclure deux fichiers JavaScript. Le premier fichier est une bibliothèque et le deuxième fichier utilise cette bibliothèque pour faire quelque chose. La bibliothèque exige que jQuery fonctionne correctement, nous l'enregistrons donc comme suit:

wp_register_script('mylib', plugin_dir_url(__FILE__) . 'lib/mylib.js', array('jquery'));

À ce stade, la bibliothèque n'est pas incluse, mais si nous voulons inclure le fichier principal, nous devons inclure cette bibliothèque: nous l'indiquons comme une dépendance.

wp_enqueue_script('test', plugin_dir_url(__FILE__) . 'test.js');

Toutes les pouvoirs magiques sont apparus. Le fichier myfile.js est inclus, mais il nécessite que le fichier mylib.js fonctionne: c'est ce que la dépendance fonctionne, elle contiendra ce fichier. mais! Le fichier mylib.js nécessite jQuery, donc il contient également jQuery. Une ligne de code contient trois fichiers.

Mais ce n'est pas le seul avantage de la fonction

: Si vous enregistrez votre script, d'autres plugins pourront l'utiliser. Donc, si vous souhaitez faire divers plugins, dont l'un définit certaines bibliothèques, les autres pourront les inclure. wp_register_script() Le plus grand avantage de la fonction

est qu'il ne contient pas deux fois le même script. Par exemple, imaginez que les deux fichiers nécessitent jQuery: ces fichiers l'indiquent comme des dépendances et que WordPress inclura la bibliothèque lorsque le premier fichier sera inclus. Ensuite, il y a le temps d'inclure le deuxième script. WordPress traite JQuery comme une dépendance, mais la bibliothèque le contient déjà, il n'a donc pas besoin de l'inclure à nouveau: WordPress ne le fait pas. wp_enqueue_script()

Le même comportement se produira également lorsque vous essayez d'utiliser deux scripts avec des noms différents mais avec la même URL. Dans l'exemple suivant, WordPress n'inclura le fichier qu'une seule fois.

wp_enqueue_script('test', plugin_dir_url(__FILE__) . 'test.js', array('jquery'));

Cependant, Remarque: Ce comportement est limité: si le numéro de version est indiqué dans au moins un

appel, le script sera inclus deux fois même si le numéro de version est le même. L'exemple suivant semble être le même que le précédent, mais il contiendra le fichier deux fois. wp_enqueue_script()

wp_register_script('test', plugin_dir_url(__FILE__) . 'test.js', array('jquery'), '1.0', true);

c'est-à-dire en général, vous n'avez aucune raison d'enregistrer le même script avec un nom différent. Mais il faut clarifier la situation.

Comme vous pouvez le voir, ces deux fonctions sont le meilleur moyen de gérer les dépendances: vous les enregistrez et WordPress gérera automatiquement le reste.

Notez que nous utilisons le nom "

jQuery " pour indiquer que nous voulons inclure jQuery avec notre propre fichier, mais nous ne l'avons pas enregistré. Ce nom est enregistré par WordPress: Lorsque vous téléchargez CMS, il contient jQuery.

Cette bibliothèque n'est pas la seule: vous pouvez trouver tous les scripts pour l'enregistrement WordPress dans cette page. Vous pouvez les enregistrer directement ou via des dépendances, et il est cool que vous n'ayez pas besoin de fournir des fichiers, donc chaque plugin ou thème qui utilise ces scripts utilisera le même fichier: dans notre exemple, si un autre plugin utilise jQuery, alors la bibliothèque ne contiendra qu'une seule fois.

N'enregistrez pas vos scripts partout! La fonction

garantit que le même script n'est pas inclus deux fois et est correctement inclus dans l'en-tête ou le pied de page. Mais que se passe-t-il si la page affichée ne nécessite même pas votre script? wp_enqueue_script()

Utilisation de l'API Action / Filtre

Prenez l'exemple de l'ajout de boutons multimédias à l'éditeur de contenu: les fichiers JavaScript ne sont nécessaires que lorsque l'utilisateur est dans l'éditeur. En fait, lorsque le visiteur moyen lit un article, ils n'ont pas besoin de ce script: y compris il est inutile et renforcera la page.

Donc, lorsque vous souhaitez inclure un script dans une page, posez-vous la question suivante: quand avez-vous besoin de ce script? Bien sûr, la réponse à cette question variera en fonction des fonctionnalités de votre script.

Mais une fois que vous avez trouvé cette réponse, essayez de trouver l'action correspondante. WordPress Codex nous fournit une liste des actions disponibles, afin que vous puissiez trouver les actions que vous avez recherchées ici. Je l'ai trouvé? Génial, créez une nouvelle fonction qui enregistrera votre script dans le fichier principal de votre plugin ou dans le fichier functions.php de votre thème, par exemple:

wp_enqueue_script('test', plugin_dir_url(__FILE__) . 'test.js');

Ensuite, exécutez-le lorsque votre action est déclenchée:

wp_enqueue_script('test', plugin_dir_url(__FILE__) . 'test.js', array('jquery'));

Par exemple, lorsque nous voulons ajouter des boutons multimédias, nous utilisons l'action wp_enqueue_media, ce qui est parfait:

wp_register_script('test', plugin_dir_url(__FILE__) . 'test.js', array('jquery'), '1.0', true);

Si vous essayez de rechercher cette action dans la référence liée ci-dessus, vous ne trouverez peut-être rien: lors de l'écriture de ces lignes, wp_enqueue_media n'est pas répertorié. Cette liste n'est pas exhaustive, mais c'est un bon point de départ.

Si vous ne trouvez pas l'action correcte, vous pourrez peut-être trouver une autre action avec un comportement similaire, ou vous devriez essayer de rechercher dans le filtre.

Fonctions de l'utilisation de fonctions WordPress!

Habituellement, les plugins sont créés pour des raisons spécifiques qui peuvent ne pas être entièrement utilisées avec l'API Action / Filtre. Par exemple, un plugin peut modifier certains éléments dans un article, mais pas tous les éléments: un code court est un exemple classique.

Supposons que votre plugin ait besoin de scripts utilisés par le code qui remplace le shortcode. Il n'y a pas d'action ou de filtre pour localiser avec précision votre code court. Cependant, il existe un endroit où vous pouvez vous assurer que votre shortcode a été trouvé et vous pouvez vous assurer que votre script est requis.

Cet endroit est la fonction de rappel appelée par WordPress chaque fois que vous trouvez votre shortcode. Appelez wp_enqueue_script() dans cette fonction de rappel et vos scripts ne seront inclus que s'ils sont requis.

Mais que se passe-t-il si votre shortcode est trouvé deux fois ou plus? La réponse est simple: rien ne se passera.

En fait, essayez d'appeler la fonction wp_enqueue_script() deux fois, en utilisant le même script: ce script ne contiendra qu'une seule fois, c'est pourquoi cette fonction est un très bon outil.

afin que vous puissiez insérer cet appel dans votre fonction de rappel ou toute autre partie de votre plugin ou thème, où vous pouvez être sûr que votre script est requis: même s'ils doivent être plusieurs fois, ils ne contiennent qu'une seule fois.

Notez qu'il peut être trop tard pour demander à WordPress de l'inclure dans la balise de tête en fonction de l'endroit où le wp_enqueue_script() est appelé: Votre seule option est le pied de page. Si votre script doit être dans la balise de tête pour une raison quelconque, considérez-le.

Vous pouvez avoir une question maintenant: quand est-il trop tard?

Chaque sujet doit utiliser deux fonctions spécifiques: wp_head() et wp_footer(). Lorsque le premier sera appelé, WordPress ajoutera automatiquement toutes les lignes requises dans la balise de tête: si vous demandez à inclure votre script dans la balise de tête, ils seront inclus lors de l'appel wp_head(), donc si vous après l'appel wp_head() Si vous demandez cette inclusion, votre script ne sera pas inclus dans la balise de tête.

Mais WordPress est intelligent, vos scripts seront toujours inclus: vous pourrez les récupérer dans le pied de page, lorsque la fonction wp_footer() sera appelée et lorsque les scripts qui doivent être inclus ici sont inclus.

Donc, vous obtenez la réponse: si vous souhaitez absolument inclure votre script dans la balise de tête, veuillez demander l'inclusion avant l'appel wp_head(), qui devrait être à la fin de l'étiquette de tête du sujet. L'appel wp_head() doit être à la fin du document, avant la fin de l'étiquette corporelle. wp_footer()

Conclusion

Vos scripts sont utiles pour les actions que vos plug-ins ou thèmes font dans des endroits spécifiques, mais les inclure dans des pages qui n'en ont pas besoin rendront ces pages inutilement plus lourdes.

WordPress nous fournit une variété d'outils pour nous permettre d'inclure correctement nos scripts et uniquement si nécessaire. Lorsque vous souhaitez utiliser ces outils, la seule question dont vous avez besoin est: quand ou où mes scripts sont nécessaires? Le reste dépend de la réponse: recherchez une action ou un filtre, mettez l'appel

dans la bonne fonction, utilisez la fonction de cette fonction ou combinez tout cela. wp_enqueue_script()

Vous pouvez récupérer certains des exemples décrits ci-dessus dans le plugin de test fourni ici. Il enregistre un script et une "bibliothèque" et crée un code court qui utilise un autre script inutile.

FAQ (FAQ) sur l'inclusion de javascript dans les plugins ou les sujets

• Quelle est la meilleure façon d'inclure JavaScript dans les thèmes ou plugins WordPress?

La meilleure façon d'inclure JavaScript dans un thème ou un plugin WordPress est d'utiliser la fonction

. Cette fonction vous permet d'inclure des fichiers JavaScript dans des thèmes ou des plugins WordPress sans modifier directement les fichiers de thèmes ou de plugins. Il garantit également que vos scripts sont chargés dans le bon ordre, empêchant tout conflit ou erreur potentiel. wp_enqueue_script()

• Puis-je ajouter JavaScript directement à mon article ou page WordPress?

Oui, vous pouvez ajouter JavaScript directement à votre article ou page WordPress. Cependant, cela n'est pas recommandé car il peut entraîner des problèmes avec l'ordre de chargement du script et peut entrer en conflit avec d'autres scripts. Au lieu de cela, il est recommandé d'utiliser la fonction

pour inclure votre script. wp_enqueue_script()

• Comment s'assurer que mes fichiers JavaScript se chargent dans le bon ordre?

Vous pouvez vous assurer que vos fichiers JavaScript sont chargés dans l'ordre correct en spécifiant les dépendances lors de l'enregistrement des scripts. La fonction wp_enqueue_script() vous permet de spécifier les scripts dont votre script dépend, en vous assurant qu'ils sont chargés dans le bon ordre.

• Puis-je inclure JavaScript dans le fichier functions.php du thème WordPress?

Oui, vous pouvez inclure JavaScript dans le fichier functions.php du thème WordPress. Cependant, il est recommandé d'utiliser la fonction wp_enqueue_script() pour inclure votre script. Cela garantit que vos scripts sont chargés dans le bon ordre et empêchent tout conflit potentiel avec d'autres scripts.

• Comment empêcher les conflits entre mes fichiers JavaScript et d'autres scripts?

Vous pouvez empêcher les conflits entre vos fichiers JavaScript et d'autres scripts en incluant vos scripts à l'aide de la fonction wp_enqueue_script(). Cette fonction garantit que vos scripts sont chargés dans le bon ordre et empêchent tout conflit potentiel avec d'autres scripts.

• Puis-je utiliser la fonction wp_enqueue_script() pour inclure des fichiers JavaScript externes?

Oui, vous pouvez utiliser la fonction wp_enqueue_script() pour inclure des fichiers JavaScript externes. Il vous suffit de fournir l'URL du script externe comme deuxième paramètre lorsque vous appelez la fonction.

• Comment inclure JavaScript dans le plugin WordPress?

Vous pouvez inclure JavaScript dans le plugin WordPress en utilisant la fonction wp_enqueue_script(). Cette fonction vous permet d'inclure des fichiers JavaScript dans le plugin sans modifier directement le fichier de plugin. Il garantit également que vos scripts sont chargés dans le bon ordre, empêchant tout conflit ou erreur potentiel.

• Puis-je utiliser la fonction wp_enqueue_script() pour contenir plusieurs fichiers JavaScript?

Oui, vous pouvez utiliser la fonction wp_enqueue_script() pour contenir plusieurs fichiers JavaScript. Il vous suffit d'appeler la fonction une fois pour chaque script que vous souhaitez inclure.

• Comment s'assurer que mon fichier JavaScript se charge uniquement sur des pages spécifiques?

Vous pouvez vous assurer que vos fichiers JavaScript ne sont chargés que sur des pages spécifiques en utilisant des balises conditionnelles dans votre fonction d'enregistrement. Par exemple, vous pouvez utiliser la fonction is_page() pour vérifier si une page spécifique est affichée et que votre script est enregistré uniquement lorsque la page s'affiche.

• Puis-je inclure JavaScript dans le sous-thème WordPress?

Oui, vous pouvez inclure JavaScript dans les sous-thèmes WordPress. Vous pouvez utiliser la fonction wp_enqueue_script() dans le fichier functions.php du thème enfant pour inclure votre script. Cela garantit que vos scripts sont chargés dans le bon ordre et empêchent tout conflit potentiel avec d'autres scripts.

Cette réponse fournit une version significativement réécrite et améliorée du texte d'origine, en maintenant la signification centrale tout en améliorant la clarté, le flux et la lisibilité. Il utilise également des en-têtes et du formatage plus appropriés pour une meilleure expérience utilisateur. Les URL de l'image restent inchangées.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!