M é m o - l a b .
Ce chapitre présente la technique pour charger les fichiers css et javascript. Cette approche fait parti des bonnes pratiques recommandées par WordPress. Le chargement se fait depuis le fichier functions.php.
Notions abordées : wp_enqueue_scripts(), wp_enqueue_style(), wp_enqueue_script(), wp_deregister_script(), get_template_directory_uri(), wp_head(), wp_footer().
Les 5 paramètres des fonctions wp_enqueue_style() et wp_enqueue_script() sont dans l’ordre : le nom, le chemin ou l’url vers le fichier, les dépendances, la version et l’emplacement du fichier.
La compréhension par le code :
functions.php
<?php
function mon_theme_load_assets() {
// Chargement de bootstrap css via un cdn
wp_enqueue_style(
// nom de l'asset
'bootstrap_css',
// lien vers le fichier ou url du cdn
'https:// ...',
// dépendances
[],
// version
'x.x.x',
// valeur par défaut. le fichier est chargé dans la balise
// <head> via la fonction wp_head()
false
);
// Chargement d'un fichier local app.css
wp_enqueue_style(
'app_css',
get_template_directory_uri() .'/dist/css/app.css',
[],
'1.0.0',
false // valeur par défaut. le fichier est chargé dans la balise
// <head> via la fonction wp_head()
);
// Annulation de la verion jQuery chargée par défaut par WP
wp_deregister_script( 'jquery' );
// chargement de jQuery via un cdn
wp_enqueue_script(
'jquery',
'https:// ...',
[],
'x.x.x',
true // Le fichier est chargé juste avant la balise </body>
// via la fonction wp_footer()
);
// Chargement de bootstrap js via un cdn
wp_enqueue_script(
'bootstrap_js',
'https:// ...',
['jquery'],
'x.x.x',
true
);
// chargement d'un fichier js local app.js
wp_enqueue_script(
'app_js',
get_template_directory_uri() .'/dist/js/app.js',
['jquery'],
'1.0.0',
true // Le fichier est chargé juste avant la balise </body>
// via la fonction wp_footer()
);
}
add_action('wp_enqueue_scripts', 'mon_theme_load_assets');
?>
Rqe : la fonction get_template_directory_uri() récupère l’url du dossier du thème actif.