Tout sur l’ajout de styles et de scripts dans WordPress

Last updated Nov 12, 2022

Teneur

Ajout de scripts et de styles à l’interface

Ajout de scripts et de styles à l’administrateur

Ajout de scripts et de styles à la page de connexion

Sortir des variables Javascript

Sortie de styles en ligne

Ajout de balises asynchrones aux scripts

Liens documentaires utiles

WordPress propose plusieurs méthodes pour ajouter des styles et des scripts pour le frontend et l’administrateur, à la fois pour ajouter des fichiers et pour sortir directement des variables/sorties. Cet article détaille avec des exemples de code comment ajouter correctement des scripts et des styles à WordPress.

Les scripts et les styles peuvent être enregistrés et mis en file d’attente en définissant des poignées uniques (identifiants de type slug), permettant à WordPress d’éliminer les doublons, tels que plusieurs bibliothèques jQuery, et de gérer les dépendances (quel style ou script charger avant ceci et cela) .

S’il n’y a pas de besoin spécifique d’enregistrer des styles ou des scripts, vous pouvez simplement les mettre en file d’attente immédiatement, en sautant l’enregistrement. Il est également possible de désenregistrer ou de retirer de la file d’attente des styles et des scripts (wp_dequeue_scriptet wp_dequeue_style) en se référant au handle. Cela aide généralement à ajouter un nombre plus élevé dans la priorité du crochet (en le faisant courir après le crochet où les éléments ont été mis en file d’attente).

PS: L’ajout de styles et de scripts à Gutenberg (blocs admin et frontend) est expliqué dans mon article Gutenberg: The Basics.

Ajout de scripts et de styles à l’interface

Pour ajouter des styles et des scripts à l’interface uniquement, utilisez le hook wp_enqueue_scripts. Malgré le nom du hook, il est utilisé à la fois pour les scripts et les styles. Voici un exemple de mise en file d’attente d’une feuille de style et d’un fichier javascript dans un thème :


add_action('wp_enqueue_scripts', function() {
    // Styles
    wp_enqueue_style('main-style', get_stylesheet_directory_uri().'/style.css', [], '1.0');
 
    // Scripts
    wp_enqueue_script('main-script', get_stylesheet_directory_uri().'/assets/js/main.js', ['jquery'], '', true);
});

Le troisième argument des styles et des scripts est un tableau avec des dépendances. Par exemple, pour les scripts, vous pouvez charger la bibliothèque jQuery avant votre fichier de script. Remarque: les installations WordPress sont livrées avec un tas de bibliothèques de scripts communes incluses (par exemple jQuery, jQuery UI, Backbone et Underscore). Tant que vous ajoutez l’une de ces poignées en tant que dépendance dans votre enqueue_script, WordPress les mettra en file d’attente, vous n’avez donc pas à ajouter vos propres fichiers pour ces bibliothèques.

Le cinquième argument pour les scripts est de savoir si le script doit être chargé ou non à la fin de <body>(dans le pied de page), plutôt qu’à l’intérieur de la <head>balise.

Pour une utilisation dans un plugin, vous devez utiliser d’autres méthodes pour obtenir l’URL d’un fichier local, par exemple plugin_dir_url(__FILE__).

Ajout de scripts et de styles à l’administrateur

WordPress propose un autre crochet, admin_enqueue_scripts, pour ajouter des styles et des scripts uniquement à l’administrateur. Utilisez les mêmes méthodes que ci-dessus pour enregistrer, mettre en file d’attente et localiser les scripts et les styles :


add_action('admin_enqueue_scripts', function() {
    global $pagenow, $post_type;
    // Example: $hook == 'edit.php'
    // Example: $post_type == 'post'
    // wp_enqueue_style or wp_enqueue_script
});

Ajout de scripts et de styles à la page de connexion

Étant donné qu’aucun des crochets ci-dessus n’apparaît dans l’écran de connexion de l’administrateur, WordPress propose un crochet séparé à cet effet, login_enqueue_scripts.


add_action('login_enqueue_scripts', function() {
    // wp_enqueue_style or wp_enqueue_script
});

Sortir des variables Javascript

Pour générer des variables Javascript (par exemple, obtenir des chemins, des chaînes traduites ou d’autres variables, vous pouvez utiliser wp_localize_script. Cette fonction nécessite un descripteur de script mis en file d’attente. Le deuxième paramètre serait le nom de la variable et le troisième sa valeur. La valeur peut être un tableau, comme ceci :

Dans votre script, vous avez accès aux variables passées, comme ceci :


jQuery(document).ready(function($) { 
    console.log(Theme_Variables.ajax_url);
});

Dans ce crochet, vous pouvez accéder aux variables globales $pagenowet $post_typespécifier davantage où vous souhaitez mettre en file d’attente vos styles et vos scripts.

Sortie de styles en ligne

Si vous avez besoin de générer des styles en ligne, par exemple pour les variables de thème que vous avez configurées dans Customizer (par exemple en utilisant get_theme_mod), vous pouvez les générer à l’aide de la wp_add_inline_stylefonction. Cela fonctionne de manière assez similaire à la sortie de variables Javascript, dans lesquelles vous devez fournir un handle de style en file d’attente :


add_action('wp_enqueue_scripts', function() {
    // wp_enqueue_style('main-style');  // Must exist!
 
    $color = get_theme_mod('my-custom-color');  // e.g. #FF0000
    $custom_css = "
        body {
            background: {$color};
        }";
        wp_add_inline_style('main-style', $custom_css);
});

Ajout de balises asynchrones aux scripts

Malheureusement, il n’y a pas de fonction ou de filtre direct à ajouter asyncà vos balises de script, mais nous pouvons y parvenir en manipulant la chaîne que WordPress utilise pour générer les balises de script pour tous les scripts en file d’attente, comme ceci (n’oubliez pas de spécifier votre script par son handle) :

Liens documentaires utiles

Source d’enregistrement: awhitepixel.com