Maîtrisez rapidement la méthode de chargement des scripts JavaScript dans WordPress_javascript skills

Pour charger des fichiers de script (CSS et JS, les mêmes ci-dessous) dans WordPress, l'approche de la plupart des gens consiste à ajouter directement la balise de lien au fichier header.php, ou à ajouter la balise de lien directement à la balise head via le hook wp_head. Cette pratique est contraire aux normes officielles.

La méthode de chargement de script standard devrait consister à utiliser les fonctions officiellement fournies par WordPress (cela sera discuté plus tard). L'unification de la norme présente plusieurs avantages. Le premier est qu'il est plus sécurisé et plus facile à gérer. est plus pratique et plus rapide, et non seulement le thème peut être monté, mais des scripts et des plug-ins peuvent également être utilisés, et ils peuvent également gérer les scripts, ajuster l'ordre et l'emplacement de montage, ainsi que d'autres contenus.

Dans quel crochet est chargé ?

Avant d'appeler la fonction de script de chargement, nous devons d'abord déterminer à quel hook la fonction est exécutée. Il existe quatre hooks de chargement de script couramment utilisés, à savoir wp_enqueue_scripts (chargement au premier plan), admin_enqueue_scripts (chargement en arrière-plan), login_enqueue_scripts ( chargement dans la page de connexion (load) et init (chargement global).

Le plus couramment utilisé est probablement wp_enqueue_scripts Si vous le montez ici, le script ne sera chargé qu'au premier plan.

Charger le script JavaScript

Par exemple, je souhaite charger un JS au premier plan, qui est le fichier thèmes.js dans le dossier JS du répertoire racine du thème. Tout d'abord, vous devez utiliser la fonction wp_register_script() pour ajouter JS à la bibliothèque de scripts (enregistrer le script), puis utiliser la fonction wp_enqueue_script() pour monter le script.

function Bing_enqueue_scripts(){
  wp_register_script( 'themes_js', get_bloginfo( 'template_directory' ) . '/js/themes_js.js' );//注册 ID 为 themes_js 的 JS 脚本
  wp_enqueue_script( 'themes_js' );//挂载脚本
}
add_action( 'wp_enqueue_scripts', 'Bing_enqueue_scripts' );

Charger le script CSS

function Bing_enqueue_scripts(){
  wp_register_style( 'style', get_bloginfo( 'template_directory' ) . '/style.css' );
  wp_enqueue_style( 'style' );
}
add_action( 'wp_enqueue_scripts', 'Bing_enqueue_scripts' );

Résumé

Cet article n'explique que brièvement comment charger des scripts. Une utilisation appropriée du mécanisme de mise en file d'attente des scripts peut rendre le programme plus flexible et accélérer son efficacité.