WordPress propose plusieurs m\u00e9thodes pour ajouter des styles et des scripts pour le frontend et l’administrateur, \u00e0 la fois pour ajouter des fichiers et pour sortir directement des variables\/sorties. Cet article d\u00e9taille avec des exemples de code comment ajouter correctement des scripts et des styles \u00e0 WordPress.<\/p>\n
Les scripts et les styles peuvent \u00eatre enregistr\u00e9s et mis en file d’attente en d\u00e9finissant des poign\u00e9es uniques (identifiants de type slug), permettant \u00e0 WordPress d’\u00e9liminer les doublons, tels que plusieurs biblioth\u00e8ques jQuery, et de g\u00e9rer les d\u00e9pendances (quel style ou script charger avant ceci et cela) .<\/p>\n
S’il n’y a pas de besoin sp\u00e9cifique d’enregistrer des styles ou des scripts, vous pouvez simplement les mettre en file d’attente imm\u00e9diatement, en sautant l’enregistrement. Il est \u00e9galement possible de d\u00e9senregistrer ou de retirer de la file d’attente des styles et des scripts ( PS: L’ajout de styles et de scripts \u00e0 Gutenberg (blocs admin et frontend) est expliqu\u00e9 dans mon article Gutenberg: The Basics<\/a>.<\/p>\n Pour ajouter des styles et des scripts \u00e0 l’interface uniquement, utilisez le hook Le troisi\u00e8me argument des styles et des scripts est un tableau avec des d\u00e9pendances. Par exemple, pour les scripts, vous pouvez charger la biblioth\u00e8que jQuery avant votre fichier de script. Remarque<\/strong>: les installations WordPress sont livr\u00e9es avec un tas de biblioth\u00e8ques de scripts communes incluses (par exemple jQuery, jQuery UI, Backbone et Underscore). Tant que vous ajoutez l’une de ces poign\u00e9es<\/a> en tant que d\u00e9pendance dans votre enqueue_script, WordPress les mettra en file d’attente, vous n’avez donc pas \u00e0 ajouter vos propres fichiers pour ces biblioth\u00e8ques.<\/p>\n Le cinqui\u00e8me argument pour les scripts est de savoir si le script doit \u00eatre charg\u00e9 ou non \u00e0 la fin de Pour une utilisation dans un plugin, vous devez utiliser d’autres m\u00e9thodes pour obtenir l’URL d’un fichier local, par exemple WordPress propose un autre crochet, \u00c9tant donn\u00e9 qu’aucun des crochets ci-dessus n’appara\u00eet dans l’\u00e9cran de connexion de l’administrateur, WordPress propose un crochet s\u00e9par\u00e9 \u00e0 cet effet, Pour g\u00e9n\u00e9rer des variables Javascript (par exemple, obtenir des chemins, des cha\u00eenes traduites ou d’autres variables, vous pouvez utiliser wp_localize_script. Cette fonction n\u00e9cessite un descripteur de script mis en file d’attente. Le deuxi\u00e8me param\u00e8tre serait le nom de la variable et le troisi\u00e8me sa valeur. La valeur peut \u00eatre un tableau, comme ceci :<\/p>\n Dans votre script, vous avez acc\u00e8s aux variables pass\u00e9es, comme ceci\u00a0:<\/p>\n Dans ce crochet, vous pouvez acc\u00e9der aux variables globales Si vous avez besoin de g\u00e9n\u00e9rer des styles en ligne, par exemple pour les variables de th\u00e8me que vous avez configur\u00e9es dans Customizer (par exemple en utilisant Malheureusement, il n’y a pas de fonction ou de filtre direct \u00e0 ajouter wp_dequeue_script<\/code>et wp_dequeue_style<\/code>) en se r\u00e9f\u00e9rant au handle. Cela aide g\u00e9n\u00e9ralement \u00e0 ajouter un nombre plus \u00e9lev\u00e9 dans la priorit\u00e9 du crochet (en le faisant courir apr\u00e8s le crochet o\u00f9 les \u00e9l\u00e9ments ont \u00e9t\u00e9 mis en file d’attente).<\/p>\nAjout de scripts et de styles \u00e0 l’interface<\/h2>\n
wp_enqueue_scripts<\/code>. Malgr\u00e9 le nom du hook, il est utilis\u00e9 \u00e0 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\u00e8me\u00a0:<\/p>\nadd_action('wp_enqueue_scripts', function() {\n \/\/ Styles\n wp_enqueue_style('main-style', get_stylesheet_directory_uri().'\/style.css', [], '1.0');\n\u00a0\n \/\/ Scripts\n wp_enqueue_script('main-script', get_stylesheet_directory_uri().'\/assets\/js\/main.js', ['jquery'], '', true);\n});<\/code><\/pre>\n<body><\/code>(dans le pied de page), plut\u00f4t qu’\u00e0 l’int\u00e9rieur de la <head><\/code>balise.<\/p>\nplugin_dir_url(__FILE__)<\/code>.<\/p>\nAjout de scripts et de styles \u00e0 l’administrateur<\/h2>\n
admin_enqueue_scripts<\/code>, pour ajouter des styles et des scripts uniquement \u00e0 l’administrateur. Utilisez les m\u00eames m\u00e9thodes que ci-dessus pour enregistrer, mettre en file d’attente et localiser les scripts et les styles\u00a0:<\/p>\nadd_action('admin_enqueue_scripts', function() {\n global $pagenow, $post_type;\n \/\/ Example: $hook == 'edit.php'\n \/\/ Example: $post_type == 'post'\n \/\/ wp_enqueue_style or wp_enqueue_script\n});<\/code><\/pre>\nAjout de scripts et de styles \u00e0 la page de connexion<\/h2>\n
login_enqueue_scripts<\/code>.<\/p>\nadd_action('login_enqueue_scripts', function() {\n \/\/ wp_enqueue_style or wp_enqueue_script\n});<\/code><\/pre>\nSortir des variables Javascript<\/h2>\n
add_action('wp_enqueue_scripts', function() {\n \/\/ wp_enqueue_script('main-script'); \/\/ Must exist!\n $variable_to_js = [\n 'ajax_url' => admin_url('admin-ajax.php')\n ];\n wp_localize_script('main-script', 'Theme_Variables', $variable_to_js);\n});<\/code><\/pre>\njQuery(document).ready(function($) { \n console.log(Theme_Variables.ajax_url);\n});<\/code><\/pre>\n$pagenow<\/code>et $post_type<\/code>sp\u00e9cifier davantage o\u00f9 vous souhaitez mettre en file d’attente vos styles et vos scripts.<\/p>\nSortie de styles en ligne<\/h2>\n
get_theme_mod<\/code>), vous pouvez les g\u00e9n\u00e9rer \u00e0 l’aide de la wp_add_inline_style<\/code>fonction. Cela fonctionne de mani\u00e8re assez similaire \u00e0 la sortie de variables Javascript, dans lesquelles vous devez fournir un handle de style en file d’attente\u00a0:<\/p>\nadd_action('wp_enqueue_scripts', function() {\n \/\/ wp_enqueue_style('main-style'); \/\/ Must exist!\n\u00a0\n $color = get_theme_mod('my-custom-color'); \/\/ e.g. #FF0000\n $custom_css = \"\n body {\n background: {$color};\n }\";\n wp_add_inline_style('main-style', $custom_css);\n});<\/code><\/pre>\nAjout de balises asynchrones aux scripts<\/h2>\n
async<\/code>\u00e0 vos balises de script, mais nous pouvons y parvenir en manipulant la cha\u00eene que WordPress utilise pour g\u00e9n\u00e9rer les balises de script pour tous les scripts en file d’attente, comme ceci (n’oubliez pas de sp\u00e9cifier votre script par son handle) :<\/p>\nadd_filter('script_loader_tag', function($tag, $handle, $src) {\n if ('main-script' != $handle) {\n return $tag;\n }\n return str_replace('<script', '<script async', $tag);\n}, 11, 3);<\/code><\/pre>\nLiens documentaires utiles<\/h2>\n
\n