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'appelwp_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()
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()
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()
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()
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()
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?
. 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?
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!

Meilleures pratiques pour passer des données PHP à JavaScript: une comparaison de WP_localize_script et WP_ADD_INLINE_Script Le stockage des données dans les chaînes statiques dans vos fichiers PHP est une pratique recommandée. Si ces données sont nécessaires dans votre code JavaScript, incorporez

Ce guide montre comment intégrer et protéger les fichiers PDF dans les articles et pages WordPress à l'aide d'un plugin PDF WordPress. Les PDF offrent un format convivial et universellement accessible pour divers contenus, des catalogues aux présentations. Cette méthode Ens

WordPress est facile pour les débutants de commencer. 1. Après se connecter à l'arrière-plan, l'interface utilisateur est intuitive et le tableau de bord simple fournit tous les liens de fonction nécessaires. 2. Les opérations de base incluent la création et l'édition de contenu. L'éditeur WYSIWYG simplifie la création de contenu. 3. Les débutants peuvent étendre les fonctions du site Web via des plug-ins et des thèmes, et la courbe d'apprentissage existe mais peut être maîtrisée par la pratique.

Les gens choisissent d'utiliser WordPress en raison de son pouvoir et de sa flexibilité. 1) WordPress est un CMS open source avec une forte facilité d'utilisation et une évolutivité, adaptée à divers besoins en site Web. 2) Il a des thèmes et des plugins riches, un énorme écosystème et un fort soutien communautaire. 3) Le principe de travail de WordPress est basé sur des thèmes, des plug-ins et des fonctions de base, et utilise PHP et MySQL pour traiter les données, et prend en charge l'optimisation des performances.

La version principale de WordPress est gratuite, mais d'autres frais peuvent être engagés pendant l'utilisation. 1. Les noms de domaine et les services d'hébergement nécessitent un paiement. 2. Des thèmes et des plug-ins avancés peuvent être facturés. 3. Les services professionnels et les fonctionnalités avancées peuvent être facturés.

WordPress lui-même est gratuit, mais il en coûte supplémentaire à utiliser: 1. WordPress.com propose un package allant du gratuit à payant, avec des prix allant de quelques dollars par mois à des dizaines de dollars; 2. WordPress.org nécessite l'achat d'un nom de domaine (10-20 dollars américains par an) et des services d'hébergement (5-50 dollars américains par mois); 3. La plupart des plug-ins sont gratuits, et le prix payant se situe entre des dizaines et des centaines de dollars; En choisissant le bon service d'hébergement, en utilisant des plug-ins et des thèmes raisonnablement, et en maintenant et en maintenant régulièrement, le coût de WordPress peut être efficacement contrôlé et optimisé.

Wix convient aux utilisateurs qui n'ont aucune expérience de programmation, et WordPress convient aux utilisateurs qui souhaitent plus de capacités de contrôle et d'extension. 1) Wix fournit des éditeurs de glisser-déposer et des modèles riches, ce qui facilite la création d'un site Web rapidement. 2) En tant que CMS open source, WordPress possède un énorme écosystème communautaire et plug-in, soutenant la personnalisation et l'expansion approfondies.

WordPressisGoodForvirontuallyAnyWebprojectDuetOtsSversatityAsacms.itexcelsin: 1) une convivialité, permettant à la manière


Outils d'IA chauds

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

AI Hentai Generator
Générez AI Hentai gratuitement.

Article chaud

Outils chauds

DVWA
Damn Vulnerable Web App (DVWA) est une application Web PHP/MySQL très vulnérable. Ses principaux objectifs sont d'aider les professionnels de la sécurité à tester leurs compétences et leurs outils dans un environnement juridique, d'aider les développeurs Web à mieux comprendre le processus de sécurisation des applications Web et d'aider les enseignants/étudiants à enseigner/apprendre dans un environnement de classe. Application Web sécurité. L'objectif de DVWA est de mettre en pratique certaines des vulnérabilités Web les plus courantes via une interface simple et directe, avec différents degrés de difficulté. Veuillez noter que ce logiciel

Version crackée d'EditPlus en chinois
Petite taille, coloration syntaxique, ne prend pas en charge la fonction d'invite de code

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

MantisBT
Mantis est un outil Web de suivi des défauts facile à déployer, conçu pour faciliter le suivi des défauts des produits. Cela nécessite PHP, MySQL et un serveur Web. Découvrez nos services de démonstration et d'hébergement.
