{"id":32478,"date":"2024-05-27T21:40:24","date_gmt":"2024-05-27T21:40:24","guid":{"rendered":"\/tutoriels\/?p=32478"},"modified":"2024-05-27T21:40:27","modified_gmt":"2024-05-27T21:40:27","slug":"wp_enqueue_style","status":"publish","type":"post","link":"\/fr\/tutoriels\/wp_enqueue_style","title":{"rendered":"Comment ajouter une feuille de style CSS \u00e0 WordPress en utilisant wp_enqueue_style"},"content":{"rendered":"<p>Lors du d&eacute;veloppement de th&egrave;mes ou de plugins WordPress, il est essentiel de mettre en file d&rsquo;attente les feuilles de style pour qu&rsquo;elles se chargent correctement.<\/p><p>Pour ce faire, nous vous recommandons d&rsquo;utiliser la <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_enqueue_style\/\" target=\"_blank\" rel=\"noopener\">fonction wp_enqueue_style()<\/a>. Il s&rsquo;agit d&rsquo;un outil puissant pour ajouter des feuilles de style personnalis&eacute;es &agrave; votre <a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/meilleur-theme-wordpress-gratuit\">th&egrave;me WordPress<\/a> ou &agrave; votre plugin. Cette fonction garantit &eacute;galement que les feuilles de style ne sont charg&eacute;es que lorsque cela est n&eacute;cessaire et permet d&rsquo;&eacute;viter les conflits avec d&rsquo;autres plugins ou th&egrave;mes.<\/p><p>Dans ce tutoriel, nous allons voir comment vous pouvez utiliser la fonction <strong>wp_enqueue_style() <\/strong>pour am&eacute;liorer l&rsquo;apparence de votre site WordPress et l&rsquo;exp&eacute;rience globale de l&rsquo;utilisateur. &nbsp; &nbsp;<\/p><figure class=\"wp-block-image size-full\"><a href=\"https:\/\/assets.hostinger.com\/content\/tutorials\/pdf\/Mega-WordPress-Cheat-FR.pdf\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" width=\"1024\" height=\"283\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR_Intext-banners_Mega-WordPress-Cheat-Sheet-1024x283-1.png\/public\" alt=\"\" class=\"wp-image-41459\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR_Intext-banners_Mega-WordPress-Cheat-Sheet-1024x283-1.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR_Intext-banners_Mega-WordPress-Cheat-Sheet-1024x283-1.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR_Intext-banners_Mega-WordPress-Cheat-Sheet-1024x283-1.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR_Intext-banners_Mega-WordPress-Cheat-Sheet-1024x283-1.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-comment-utiliser-wp-enqueue-style-pour-charger-les-feuilles-de-style-css-sur-wordpress\">Comment utiliser wp_enqueue_style pour charger les feuilles de style CSS sur WordPress<\/h2><p>Nous allons commencer par quelques exemples de base pour vous aider &agrave; mieux comprendre le fonctionnement de la fonction <strong>wp_enqueue_style().<\/strong><\/p><h3 class=\"wp-block-heading\" id=\"h-comment-mettre-en-file-d-attente-la-feuille-de-style-principale-style-css\">Comment mettre en file d&rsquo;attente la feuille de style principale style.css<\/h3><p>Pour mettre en file d&rsquo;attente la feuille de style <strong>style.css <\/strong>du<strong> <\/strong>th&egrave;me principal, utilisez la fonction <strong>wp_enqueue_style() <\/strong>dans le<strong> <\/strong>fichier <strong>functions.php <\/strong>de votre th&egrave;me.&nbsp;<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69f81ee870f7c\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"943\" height=\"686\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/05\/twentytwentytwo-Fichiers-File-Browser.png\/public\" alt=\"le fichier functions.php dans le r&eacute;pertoire du th&egrave;me twentytwentytwo dans le gestionnaire de fichiers.\" class=\"wp-image-32497\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/05\/twentytwentytwo-Fichiers-File-Browser.png\/w=943,fit=scale-down 943w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/05\/twentytwentytwo-Fichiers-File-Browser.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/05\/twentytwentytwo-Fichiers-File-Browser.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/05\/twentytwentytwo-Fichiers-File-Browser.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 943px) 100vw, 943px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Agrandir\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>Voici un exemple de ce que cela donne :<\/p><pre class=\"wp-block-preformatted\">function my_theme_enqueue_styles() {<br>    wp_enqueue_style( 'my_theme_style', get_stylesheet_uri() );<br>}<br>add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );<\/pre><p>Dans le code, <strong>my-theme-style <\/strong>est un nom unique pour la feuille de style que vous mettez en file d&rsquo;attente, tandis que la fonction <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/get_stylesheet_uri\/\" target=\"_blank\" rel=\"noopener\">get_stylesheet_uri()<\/a> g&egrave;re l&rsquo;URL du fichier <strong>style.css <\/strong>du th&egrave;me principal.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69f81ee871df8\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"943\" height=\"686\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/05\/untitled-3.png\/public\" alt=\"Le r&eacute;pertoire du th&egrave;me twentytwentytwo dans le gestionnaire de fichiers. Le fichier style.css est mis en &eacute;vidence\" class=\"wp-image-32498\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/05\/untitled-3.png\/w=943,fit=scale-down 943w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/05\/untitled-3.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/05\/untitled-3.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/05\/untitled-3.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 943px) 100vw, 943px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Agrandir\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>Ensuite, la fonction <strong>wp_enqueue_style() <\/strong>enregistre le style et l&rsquo;ajoute &agrave; la file d&rsquo;attente. Enfin, la fonction <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/add_action\/\" target=\"_blank\" rel=\"noopener\">add_action()<\/a> ajoute votre fonction personnalis&eacute;e <strong>my_theme_enqueue_styles() <\/strong>au hook <strong>wp_enqueue_scripts<\/strong>, ce qui garantit que la feuille de style est mise en file d&rsquo;attente correctement. &nbsp;&nbsp;<\/p><h3 class=\"wp-block-heading\" id=\"h-comment-mettre-en-file-d-attente-d-autres-feuilles-de-style\">Comment mettre en file d&rsquo;attente d&rsquo;autres feuilles de style <\/h3><p>Vous pouvez &eacute;galement utiliser la fonction <strong>wp_enqueue_style() <\/strong>pour ajouter des styles suppl&eacute;mentaires &agrave; la feuille de style principale. Par exemple, ajouter des options de style suppl&eacute;mentaires dans un fichier s&eacute;par&eacute;.<\/p><p>En ce qui concerne le code, vous pouvez r&eacute;utiliser la plupart des &eacute;l&eacute;ments de l&rsquo;exemple pr&eacute;c&eacute;dent avec quelques ajouts suppl&eacute;mentaires :<\/p><pre class=\"wp-block-preformatted\">function my_theme_enqueue_styles() {<br>    wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );<br> wp_enqueue_style('my-theme-extra-style', get_theme_file_uri('extra.css') );<br>}<br>add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );<\/pre><p>Dans cette m&eacute;thode, nous avons utilis&eacute; la fonction <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/get_theme_file_uri\/\" target=\"_blank\" rel=\"noopener\">get_theme_file_uri()<\/a>, qui renvoie l&rsquo;URL du fichier dans le r&eacute;pertoire du th&egrave;me actuel. Dans notre cas, il s&rsquo;agit de <strong>extra.css<\/strong>. De cette mani&egrave;re, la fonction mettra en file d&rsquo;attente la feuille de style principale d&rsquo;abord, puis les styles suppl&eacute;mentaires. &nbsp;<\/p><h3 class=\"wp-block-heading\" id=\"h-comment-charger-des-feuilles-de-style-externes-dans-wordpress\">Comment charger des feuilles de style externes dans WordPress<\/h3><p>Il est possible d&rsquo;utiliser la fonction <strong>wp_enqueue_style() <\/strong>pour mettre en file d&rsquo;attente une feuille de style &agrave; partir d&rsquo;une source externe. Ce processus peut s&rsquo;av&eacute;rer utile si vous souhaitez utiliser des polices personnalis&eacute;es ou une feuille de style h&eacute;berg&eacute;e sur un r&eacute;seau de diffusion de contenu (CDN).&nbsp;<\/p><p>Le code est tr&egrave;s similaire aux exemples pr&eacute;c&eacute;dents :<\/p><pre class=\"wp-block-preformatted\">function theme_files() { <br>    wp_enqueue_style('theme_custom', 'INSERER URL'); <br>} <br><br>add_action('wp_enqueue_scripts', 'theme_files');<\/pre><p>N&rsquo;oubliez pas de remplacer la partie <strong>INSERER URL <\/strong>par une v&eacute;ritable URL de feuille de style. &nbsp;<\/p><h3 class=\"wp-block-heading\" id=\"h-comment-ajouter-des-fichiers-de-script-a-wordpress-en-utilisant-wp-enqueuing-style\">Comment ajouter des fichiers de script &agrave; WordPress en utilisant wp_enqueuing_style<\/h3><p>WordPress dispose d&rsquo;une fonction int&eacute;gr&eacute;e appel&eacute;e <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_enqueue_script\/\" target=\"_blank\" rel=\"noopener\">wp_enqueue_script()<\/a> qui vous permet de mettre en file d&rsquo;attente JavaScript ou des scripts similaires. Ajoutez le code suivant au fichier <strong>functions.php <\/strong>de votre th&egrave;me :<\/p><pre class=\"wp-block-preformatted\">function theme_scripts() {<br>    wp_enqueue_script( 'my-script', get_template_directory_uri() . '\/js\/my-script.js', array(), '1.0', true );<br>}<br>add_action( 'wp_enqueue_scripts', 'theme_scripts' );<\/pre><p>Notez que cette fonction utilise plus de param&egrave;tres :<\/p><ul class=\"wp-block-list\">\n<li><strong>my-script <\/strong><em>&ndash; <\/em>le nom de votre script. Vous pouvez choisir n&rsquo;importe quel nom.<\/li>\n\n\n\n<li><strong>\/js\/mon-script.js <\/strong>&ndash; emplacement de votre script. Dans ce cas, il se trouve dans le r&eacute;pertoire <strong>js <\/strong>du th&egrave;me WordPress.<\/li>\n\n\n\n<li><strong>array() <\/strong>&ndash; d&eacute;finit les d&eacute;pendances que votre script peut avoir.<\/li>\n\n\n\n<li><strong>1.0 <\/strong>&ndash; le num&eacute;ro de version de la feuille de style.<\/li>\n\n\n\n<li><strong>true <\/strong>&ndash; d&eacute;termine si le script doit &ecirc;tre charg&eacute; dans le pied de page.<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-exemples-utiles-de-wp-enqueue-style\">Exemples utiles de wp_enqueue_style<\/h2><p>D&eacute;couvrez quelques cas pratiques d&rsquo;utilisation de la fonction <strong>wp_enqueue_style() <\/strong>pour am&eacute;liorer votre site WordPress.&nbsp;<\/p><h3 class=\"wp-block-heading\" id=\"h-chargement-des-feuilles-de-style-css-uniquement-sur-des-pages-specifiques\">Chargement des feuilles de style CSS uniquement sur des pages sp&eacute;cifiques<\/h3><p>Le chargement de CSS sur des pages sp&eacute;cifiques peut pr&eacute;senter plusieurs avantages pour un site web WordPress :<\/p><ul class=\"wp-block-list\">\n<li><strong>Temps de chargement des pages plus rapides <\/strong>&ndash; lorsque vous ne chargez le CSS que sur les pages o&ugrave; il est n&eacute;cessaire, vous &eacute;vitez d&rsquo;avoir du code inutile. La vitesse globale de votre site s&rsquo;en trouve am&eacute;lior&eacute;e.&nbsp;<\/li>\n\n\n\n<li><strong>Maintenance plus facile <\/strong>&ndash; vous pouvez modifier les fichiers CSS sans affecter les autres pages.<\/li>\n<\/ul><p>Dans l&rsquo;exemple ci-dessous, nous allons enregistrer et charger le CSS pour la page <strong>Contact Us <\/strong>avec l&rsquo;aide du hook WordPress <strong>wp_enqueue_scripts <\/strong>et de la fonction <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/is_page\/\" target=\"_blank\" rel=\"noopener\">is_page()<\/a> :<\/p><pre class=\"wp-block-preformatted\">&lt;?php<br>add_action('init', 'register_custom_styles');<br>function register_custom_styles() {<br>    wp_register_style( 'custom-design', '\/wp-content\/design.css' );<br>}<br>add_action( 'wp_enqueue_scripts', 'conditionally_enqueue_styles_scripts' );<br>function conditionally_enqueue_styles_scripts() {<br>    if ( is_page('contactus') ) {<br>        wp_enqueue_style( 'custom-design' );<br>    }<br>}<br>?&gt;<\/pre><h3 class=\"wp-block-heading\" id=\"h-chargement-du-fichier-css-dans-le-pied-de-page\">Chargement du fichier CSS dans le pied de page<\/h3><p>En d&eacute;pla&ccedil;ant les feuilles de style CSS vers le bas de la page, le navigateur peut donner la priorit&eacute; au chargement du code HTML et des autres ressources importantes. Par cons&eacute;quent, le chargement du CSS en bas de page am&eacute;liore le temps de chargement de votre page.&nbsp;&nbsp;<\/p><p>La meilleure fa&ccedil;on de charger le CSS dans le pied de page est d&rsquo;utiliser le <a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/hooks-wordpress\">hook WordPress<\/a><strong> get_footer() <\/strong>:<\/p><pre class=\"wp-block-preformatted\">&lt;?php<br>function footer_style() {<br>    wp_enqueue_style('custom-design', '\/wp-content\/design.css');<br>};<br>add_action( 'get_footer', 'footer_style' );<br>?&gt;<\/pre><p>N&rsquo;oubliez pas que le chargement de feuilles de style CSS dans le pied de page peut entra&icirc;ner des probl&egrave;mes de rendu et donner &agrave; la page un aspect d&eacute;fectueux ou non stylis&eacute;. Pour cette raison, chargez d&rsquo;abord les feuilles de style CSS les plus importantes dans la section de l&rsquo;en-t&ecirc;te, puis passez &agrave; la partie du pied de page.&nbsp;<\/p><h3 class=\"wp-block-heading\" id=\"h-ajout-de-styles-dynamiques-en-ligne\">Ajout de styles dynamiques en ligne<\/h3><p>Les styles dynamiques en ligne vous permettent d&rsquo;ajouter des styles personnalis&eacute;s &agrave; des &eacute;l&eacute;ments individuels d&rsquo;une page web. La mani&egrave;re la plus simple d&rsquo;ajouter des styles en ligne est d&rsquo;utiliser la fonction <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_add_inline_style\/\" target=\"_blank\" rel=\"noopener\">wp_add_inline_style()<\/a>, qui les charge apr&egrave;s un fichier CSS sp&eacute;cifique.&nbsp;<\/p><p>Dans l&rsquo;exemple suivant, nous allons combiner les fonctions <strong>wp_enqueue_style() <\/strong>et <strong>wp_add_inline_style() <\/strong>pour appliquer le style du fichier <strong>design.css <\/strong>et mettre les titres en gras :<\/p><pre class=\"wp-block-preformatted\">&lt;?php<br>function theme_style() {<br>\twp_enqueue_style( 'custom-style', get_template_directory_uri() . '\/wp-content\/design.css' );<br>\t$bold_headlines = get_theme_mod( 'headline-font-weight' ); <br>\t$inline_style = '.headline { font-weight: ' . $bold_headlines . '; }';<br>\twp_add_inline_style( 'custom-style', $inline_style );<br>}<br>add_action( 'wp_enqueue_scripts', 'theme_style' );<br>?&gt;<\/pre><p>Gardez &agrave; l&rsquo;esprit que le style en ligne ne fonctionnera qu&rsquo;une fois que le fichier <strong>design.css<\/strong> aura &eacute;t&eacute; correctement mis en file d&rsquo;attente.&nbsp;<\/p><h3 class=\"wp-block-heading\" id=\"h-verification-de-l-etat-de-la-mise-en-file-d-attente-de-la-feuille-de-style\">V&eacute;rification de l&rsquo;&eacute;tat de la mise en file d&rsquo;attente de la feuille de style<\/h3><p>Utilisez la fonction <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_style_is\/\" target=\"_blank\" rel=\"noopener\">wp_style_is()<\/a> si vous souhaitez obtenir davantage d&rsquo;informations sur l&rsquo;&eacute;tat de la feuille de style. Cette fonction permet de v&eacute;rifier si un fichier de feuille de style CSS est dans la file d&rsquo;attente, en file d&rsquo;attente, enregistr&eacute; ou pr&ecirc;t &agrave; &ecirc;tre affich&eacute;.<\/p><pre class=\"wp-block-preformatted\">&lt;?php<br>function check_styles() {<br>\tif( wp_style_is( 'main' ) {<br>    <br>\t\twp_enqueue_style( 'my-theme', '\/custom-theme.css' );<br>\t}<br>}<br>add_action( 'wp_enqueue_scripts', 'check_styles' );<br>?&gt;<\/pre><h3 class=\"wp-block-heading\" id=\"h-inserer-des-metadonnees-dans-la-feuille-de-style\">Ins&eacute;rer des m&eacute;tadonn&eacute;es dans la feuille de style<\/h3><p>Vous pouvez &eacute;galement utiliser la fonction <strong>wp_enqueue_style <\/strong>avec l&rsquo;extrait de code suivant pour mettre en file d&rsquo;attente une feuille de style CSS avec des m&eacute;tadonn&eacute;es de titre :<\/p><pre class=\"wp-block-preformatted\">&lt;?php<br>function theme_extra_styles() {<br>\twp_enqueue_style( 'add-metadata', '\/wp-content\/design.css' );<br>\twp_style_add_data( 'add-metadata', 'title', 'My Awesome Title' );<br>\t}<br>add_action( 'wp_enqueue_scripts', 'theme_extra_styles' );<br>?&gt;<\/pre><p>Dans cet exemple, nous avons utilis&eacute; la fonction <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_style_add_data\/\" target=\"_blank\" rel=\"noopener\">wp_style_add_data()<\/a> et ajout&eacute; un titre &agrave; la feuille de style CSS.&nbsp;<\/p><h3 class=\"wp-block-heading\" id=\"h-desenregistrement-des-fichiers-de-style\">D&eacute;senregistrement des fichiers de style<\/h3><p>Il est important de d&eacute;senregistrer les fichiers de style CSS que vous n&rsquo;utilisez plus. Lorsque plusieurs plugins ou th&egrave;mes utilisent le m&ecirc;me fichier de style, cela peut entra&icirc;ner des conflits et des probl&egrave;mes sur le site web.&nbsp;<\/p><p>Le code suivant supprime l&rsquo;enregistrement et la mise en file d&rsquo;attente d&rsquo;un style sp&eacute;cifique et le remplace par une nouvelle feuille de style :<\/p><pre class=\"wp-block-preformatted\">add_action( 'wp_enqueue_scripts', 'remove_default_stylesheet', 20 );<br>function remove_default_stylesheet() {<br>    wp_dequeue_style( 'original-enqueue-stylesheet-handle' );<br>    wp_deregister_style( 'original-register-stylesheet-handle' );<br><br>    wp_register_style( 'new-style', get_stylesheet_directory_uri() . '\/new.css', false, '1.0.0' ); <br>    wp_enqueue_style( 'new-style' );<br>}<\/pre><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.hostinger.com\/fr\/hebergement-wordpress\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-New-WP_in-text-banner.png\/public\" alt=\"\" class=\"wp-image-41453\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-New-WP_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-New-WP_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-New-WP_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-New-WP_in-text-banner.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><h2 class=\"wp-block-heading\" id=\"h-conclusion\">Conclusion<\/h2><p>La fonction <strong>wp_enqueue_style() <\/strong>est un &eacute;l&eacute;ment essentiel du d&eacute;veloppement de WordPress. Elle fournit un moyen simple et efficace de charger les feuilles de style sur votre site web.<\/p><p>Dans ce tutoriel, nous avons abord&eacute; la fonction <strong>wp_enqueue_style() <\/strong>et fourni quelques exemples de la mani&egrave;re dont vous pouvez l&rsquo;utiliser pour personnaliser l&rsquo;apparence de votre site web et am&eacute;liorer sa vitesse.&nbsp;<\/p><p>Nous esp&eacute;rons que ce tutoriel vous sera utile et que vous pourrez utiliser la fonction <strong>wp_enqueue_style() <\/strong>avec succ&egrave;s dans vos projets WordPress.<br>Si vous avez des questions ou des remarques, consultez notre <a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/tuto-wordpress\">guide WordPress<\/a> ou laissez un commentaire ci-dessous.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Lors du d&eacute;veloppement de th&egrave;mes ou de plugins WordPress, il est essentiel de mettre en file d&rsquo;attente les feuilles de style pour qu&rsquo;elles se chargent correctement. Pour ce faire, nous vous recommandons d&rsquo;utiliser la fonction wp_enqueue_style(). Il s&rsquo;agit d&rsquo;un outil puissant pour ajouter des feuilles de style personnalis&eacute;es &agrave; votre th&egrave;me WordPress ou &agrave; votre [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/fr\/tutoriels\/wp_enqueue_style\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":355,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"Comment ajouter CSS \u00e0 WordPress en utilisant wp_enqueue_style","rank_math_description":"Apprenez \u00e0 utiliser la fonction wp_enqueue_style pour charger une feuille de style CSS dans WordPress + quelques exemples pratiques.","rank_math_focus_keyword":"wp_enqueue_style","footnotes":""},"categories":[4777],"tags":[],"class_list":["post-32478","post","type-post","status-publish","format-standard","hentry","category-wordpress"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/how-to-use-wp-enqueue-style-wordpress-function","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp_enqueue_style","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp_enqueue_style","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp_enqueue_style","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/cara-menggunakan-wp_enqueue_style","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/wp_enqueue_style","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/how-to-enqueue-css-stylesheet-to-wordpress-using-wp_enqueue_style","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/how-to-enqueue-css-stylesheet-to-wordpress-using-wp_enqueue_style","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp_enqueue_style","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp_enqueue_style","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp_enqueue_style","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp_enqueue_style","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/wp_enqueue_style","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/how-to-use-wp-enqueue-style-wordpress-function","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/how-to-use-wp-enqueue-style-wordpress-function","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/how-to-use-wp-enqueue-style-wordpress-function","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts\/32478","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/users\/355"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/comments?post=32478"}],"version-history":[{"count":7,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts\/32478\/revisions"}],"predecessor-version":[{"id":32500,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts\/32478\/revisions\/32500"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/media?parent=32478"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/categories?post=32478"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/tags?post=32478"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}