Hook : wp_enqueue_scripts

Le Hook wp_enqueue_scripts permet d'ajouter des feuilles css et js à votre site. Ce sont les fonctions wp_header() et wp_footer() qui lance les fonctions de rappel du Hook.

Complémentcss et js

Ajoutez le fichier css/base.css

1
p {
2
    color: blue;
3
}

Ajoutez le fichier js/exemple.js

1
jQuery(function($){
2
    $('p').css({'fontSize' : '1.5em'});
3
});

Méthodewp_enqueue_scripts

Dans votre fichier header.php :

1
<?php
2
...
3
function monTheme_scripts()
4
{
5
    // style : base.css
6
    wp_enqueue_style(
7
        'monTheme_style_base',
8
        get_template_directory_uri() . "/css/style.css"
9
    );
10
    // script : exemple de js dependant de jquery
11
    wp_enqueue_script(
12
        'monTheme_script_exemple',
13
        get_template_directory_uri() . "/js/exemple.js",
14
        array('jQuery'),
15
        false,
16
        true
17
    );
18
}
19
20
add_action('wp_enqueue_scripts', 'monTheme_scripts');
wp_enqueue_style : fonction qui ajoute votre feuille de style à la liste des feuilles
monTheme_style_base : identifiant de votre fichier (vous donnez le nom que vous voulez)
get_template_directory_uri() : chemin absolue de votre dossier de thème
wp_enqueue_script : fonction qui ajoute votre feuille de script à la liste des scripts, le dernier paramètre (true) indique que le script est affiché dans le footer
array('jquery') : ajoute une dépendance avec le script d'identifiant jquery.
lien WordPress -> https://developer.wordpress.org/reference/hooks/wp_enqueue_scripts/
lien wp_enqueue_script  -> https://developer.wordpress.org/reference/functions/wp_enqueue_script/
lien wp_enqueue_style -> https://developer.wordpress.org/reference/functions/wp_enqueue_style/