Comment WordPress introduit-il correctement JavaScript ?Chargement personnalisé des fichiers JS et CSS

用Site web Wordpressprogrammeurs, développementPlugin WordPressOu lors de la personnalisation d'un thème WordPress, certaines ressources de script JavaScript et CSS sont référencées.

• Habituellement, les gens utilisent des liens, des balises de script directement pour HTML.
• En fait, WordPress intègre des fonctions et des méthodes sophistiquées pour référencer les scripts.
• Ainsi, l'utilisation des références de méthodes intégrées de WordPress est plus professionnelle et plus extensible.

La mauvaise méthode de citation

Il existe deux méthodes de citation courantes, c'est bien, ce n'est tout simplement pas parfait ou raisonnable.

Type 1:les balises de lien font référence aux fichiers CSS

• Les balises de script appliquent les fichiers JS.Non détaillé ici.

Type 2:Utilisez la fonction wp_head

• La fonction wp_head est utilisée pour générer du contenu personnalisé ou défini par le système.
• Nous utilisons parfois le code suivant pour référencer ce fichier :

<?php
add_action('wp_head', 'wpcwl_normal_script');
function wpcwl_normal_script() {
echo '资源文件的链接';
}
?>

• Copiez le code ci-dessus dans le fichier functions.php pour référencer les fichiers correspondants.

Mécanisme de ressources WordPress Enqueue Scripts

Comme nous le savons tous, WordPress a beaucoup de plugins :

• Presque tous les plugins font référence à un fichier de ressources.
• Inévitablement, il y aura des conflits entre les ressources référencées par deux plugins, qui deviendront instables et pourront affecter l'efficacité.

Utilisez la fonction wp_enqueue_script

• Pour référencer une ressource dans WordPress, vous devez utiliserwp_enqueue_scriptUne fonction qui contient le mot enqueue dans le nom de la fonction mise en file d'attente ou triée.
• Avec cette méthode WordPress de mise en file d'attente des ressources (scripts de mise en file d'attente), les références sont séparées des fichiers correspondants et du code principal.
• Si l'utilisateur souhaite désactiver la ressource, il peut la supprimer, la modifier et la commenter sans la modifier depuis le code du noyau.

En outre, certaines bibliothèques couramment utilisées telles que jQuery, jQuery UI, etc. sont intégrées à WordPress.

Nous pouvons utiliser la fonction wp_enqueue_script pour appeler directement la bibliothèque intégrée, ce qui permet d'économiser du code et une spécification plus propre.

Si vous utilisez cette fonction pour référencer vos propres fichiers JS et CSS, vous devez utiliserwp_register_scriptLa fonction enregistre un identifiant (handle) puis utilisewp_enqueue_scriptLa fonction appelle la ressource correspondant à ce drapeau.

Comment importer correctement des fichiers JS et CSS dans WordPress ?

WordPress fournit des méthodes d'importation sensibles pour les méthodes JS et CSS.

Vous pouvez utiliser le code suivant pour importer le fichier plugin.css dans le plugin ▼

<?php
function wpcwl_add_styles() {
wp_register_script('plugin_stylesheet', plugins_url('plugin.css', __FILE__));
wp_enqueue_script('plugin_stylesheet');
}

add_action( 'wp_enqueue_scripts', 'wpcwl_add_styles' ); 
?>

Ce qui précède utilise la fonction wp_register_script pour créer une ressource avec l'identifiant plugin_stylesheet.

Ensuite, ajoutez ses requêtes en file d'attente àwp_enqueue_scriptsles actions sont en cours.

Bien que le nom de la fonction soit un script, il n'a rien à voir avec le type de fichier de ressources et est valide pour CSS et JS.

La fonction wp_register_script n'est vraiment pas si simple, elle peut avoir cinq paramètres :

1) $handle :Identificateur de ressource.

• 由wp_enqueue_scripttransférer.

2) $src :L'emplacement de la ressource.

• Les adresses relatives ou absolues utilisent les fonctions intégrées de WordPress pour obtenir des adresses, etc.
• CommunPositionnementla fonction aplugins_url,get_template_directory_uriAttendez.

3) $déps :compter.

• Si vous faites référence au plugin jQuery et que vous devez vous fier à la version jQuery, vous devez remplir jQuery.
• Notez qu'il est passé sous forme de tableau.

4) $ver :Version de ressource, facultative.

5) $in_footer :Tu le mets en bas ?

• Normalement, les fichiers JS doivent être placés en bas de la page, vous pouvez définir ce paramètre sur True, le laisser vide ou False pour afficher en haut.

Regardons un exemple de référence de fichier JavaScript plus complet ▼

<?php
function wpcwl_add_scripts() {
wp_register_script('plugin_script', plugins_url('plugin_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('plugin_script');
}

add_action( 'wp_enqueue_scripts', 'wpcwl_add_scripts' ); 
?>

Les thèmes WordPress utilisent wp_enqueue_script pour importer des ressources

Programmeurs en développement de thèmes WordPress, utilisationwp_enqueue_scriptImporter des ressources.

• Les exemples ci-dessus sont des exemples de ressources référencées pour le développement de plugins WordPress.
• La méthode référencée dans la rubrique est similaire.

La principale différence est d'utiliser la fonction correspondante pour obtenir le répertoire du thème afin d'obtenir l'adresse du fichier de ressources sous le thème.

vous pouvez utiliserget_template_directory_urifonction pour obtenir le répertoire du thème actuel.

Si vous utilisez un thème enfant, vous devrez utiliserget_stylesheet_directory_uriLa fonction obtient le répertoire du thème parent pour obtenir les ressources correspondantes.