{"id":70068,"date":"2022-03-18T08:11:24","date_gmt":"2022-03-18T15:11:24","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=70068"},"modified":"2025-05-26T07:58:53","modified_gmt":"2025-05-26T14:58:53","slug":"dcoder-wordpress-une-introduction-aux-styles-globaux-fr","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/dcoder-wordpress-une-introduction-aux-styles-globaux-fr\/","title":{"rendered":"D\u00e9coder WordPress : Une Introduction aux Styles Globaux"},"content":{"rendered":"\n<p>Les blocs WordPress et les fonctionnalit\u00e9s d&#8217;<a href=\"https:\/\/www.dreamhost.com\/blog\/wordpress-full-site-editing\/\" target=\"_blank\" rel=\"noopener\">\u00c9dition Compl\u00e8te du Site (FSE)<\/a> rendent la construction et la personnalisation d&#8217;un <a href=\"https:\/\/www.dreamhost.com\/blog\/secrets-to-successful-website\/\" target=\"_blank\" rel=\"noopener\">site web r\u00e9ussi<\/a> rapides et faciles.<\/p>\n\n\n<p>Les styles globaux peuvent t&#8217;aider \u00e0 unifier <a href=\"https:\/\/www.dreamhost.com\/wordpress\/guide-to-wp-templates\/\" target=\"_blank\" rel=\"noopener\">l&#8217;apparence de ton site WordPress<\/a> sans avoir \u00e0 modifier des blocs ou des pages individuels. Que tu souhaites changer la couleur de fond ou ajuster la typographie des titres, tu pourras r\u00e9aliser tes modifications en un seul endroit, ce qui r\u00e9sulte en une exp\u00e9rience utilisateur (UX) plus coh\u00e9rente et globalement meilleure <a href=\"https:\/\/www.dreamhost.com\/blog\/what-is-user-experience\/\" target=\"_blank\" rel=\"noopener\">User Experience (UX)<\/a>.<\/p>\n\n\n<p>Dans cet article, nous allons te guider \u00e0 travers les Styles Globaux. Nous expliquerons ce qu&#8217;ils sont, leurs avantages, et comment fonctionnent les nouvelles fonctionnalit\u00e9s. Ensuite, nous discuterons de la mani\u00e8re de les utiliser pour styliser ton site web WordPress. Commencez maintenant !<\/p>\n\n\n<h2 id=\"h-an-overview-of-wordpress-global-styles\" class=\"wp-block-heading\"><b>Vue D\u2019ensemble Des Styles Globaux De WordPress<\/b><\/h2>\n\n\n<p>Avant de travailler avec les Styles Globaux, il est important de comprendre ce qu&#8217;ils sont et comment ils fonctionnent. Cette fonctionnalit\u00e9 fonctionne en conjonction avec <i>theme.json<\/i>, un nouveau fichier de param\u00e8tres de th\u00e8me. Les d\u00e9veloppeurs peuvent <a href=\"https:\/\/developer.wordpress.org\/themes\/advanced-topics\/theme-json\/\" target=\"_blank\" rel=\"noopener\">utiliser theme.json<\/a> pour d\u00e9finir les valeurs par d\u00e9faut pour un site ainsi que pour des blocs individuels. Gutenberg applique automatiquement ce JSON lorsque vous placez le fichier dans le r\u00e9pertoire racine d&#8217;un th\u00e8me bas\u00e9 sur des blocs.<\/p>\n\n\n<p>Ce fichier est l&#8217;un des outils les plus utiles du nouvel \u00e9diteur complet de site dans WordPress 5.9. Le fichier permet aux auteurs de th\u00e8mes de partager des Styles Globaux ainsi que des Param\u00e8tres Globaux. <a href=\"https:\/\/www.dreamhost.com\/blog\/wordpress-crash-course\/\" target=\"_blank\" rel=\"noopener\">WordPress<\/a> reformate les donn\u00e9es prises de ces objets JSON et les transforme en CSS. Ensuite, les utilisateurs peuvent personnaliser davantage les styles dans l&#8217;\u00e9diteur WordPress.<\/p>\n\n\n<p>Dans les versions pr\u00e9c\u00e9dentes du <a href=\"https:\/\/wordpress.org\/plugins\/gutenberg\/\" target=\"_blank\" rel=\"noopener\">plugin Gutenberg<\/a>, tu devais enregistrer le support pour les propri\u00e9t\u00e9s de style d&#8217;un bloc avant de pouvoir travailler avec dans <i>theme.json<\/i>. De plus, dans les th\u00e8mes classiques et les versions ant\u00e9rieures, tu devais utiliser PHP pour d\u00e9finir des \u00e9l\u00e9ments tels que tes choix de couleurs <a href=\"https:\/\/www.dreamhost.com\/blog\/web-safe-fonts\/\" target=\"_blank\" rel=\"noopener\">et polices<\/a>. Ensuite, il fallait ajouter des styles pour les c\u00f4t\u00e9s frontend et backend de ton th\u00e8me.<\/p>\n\n\n<p>Cependant, avec la derni\u00e8re version, lorsque tu utilises un th\u00e8me avec le fichier <i>theme.json<\/i> en place, WordPress ajoute automatiquement les styles d\u00e9finis l\u00e0 \u00e0 ta feuille de style. Tu peux utiliser ce syst\u00e8me pour ajouter enti\u00e8rement de nouvelles palettes de couleurs, changer la typographie des th\u00e8mes, et plus encore.<\/p>\n\n\n<h2 id=\"h-why-use-wordpress-global-styles\" class=\"wp-block-heading\"><b>Pourquoi Utiliser Les Styles Globaux De WordPress<\/b><\/h2>\n\n\n<p>Peu importe ton niveau de comp\u00e9tence, tu trouveras probablement que l&#8217;utilisation des Styles Globaux est une exp\u00e9rience intuitive et accessible. Globalement, cela peut rationaliser le processus de <a href=\"https:\/\/www.dreamhost.com\/blog\/elements-of-webdesign\/\" target=\"_blank\" rel=\"noopener\">conception web<\/a> en rendant plus facile la modification de l&#8217;apparence et de la sensation de ton site. Si tu es un d\u00e9butant sur WordPress, tirer parti de ces Styles Globaux pourrait signifier que tu n&#8217;auras pas besoin de <a href=\"https:\/\/www.dreamhost.com\/blog\/how-to-hire-web-developer\/\" target=\"_blank\" rel=\"noopener\">recruter un d\u00e9veloppeur<\/a> pour <a href=\"https:\/\/www.dreamhost.com\/blog\/how-to-design-a-website\/\" target=\"_blank\" rel=\"noopener\">concevoir ton site web<\/a>. D\u00e9sol\u00e9, d\u00e9veloppeurs.<\/p>\n\n\n<p>En revanche, cette nouvelle fonctionnalit\u00e9 pourrait \u00eatre particuli\u00e8rement utile pour les d\u00e9veloppeurs de th\u00e8mes. C&#8217;est parce que les Styles Globaux aident les d\u00e9veloppeurs WordPress \u00e0 styliser les blocs dans l&#8217;<a href=\"https:\/\/www.dreamhost.com\/blog\/how-to-update-old-wordpress-posts-block-editor\/\" target=\"_blank\" rel=\"noopener\">\u00c9diteur de Blocs<\/a>. Cela peut \u00eatre tr\u00e8s avantageux, notamment pour les nouveaux auteurs de th\u00e8mes. Il offre une vari\u00e9t\u00e9 de contr\u00f4les qui minimisent le besoin de cr\u00e9er des solutions personnalis\u00e9es pour styliser un site.<\/p>\n\n\n<p>En d&#8217;autres termes, Global Styles simplifie consid\u00e9rablement le d\u00e9veloppement de th\u00e8mes. Par cons\u00e9quent, cela peut aider les d\u00e9veloppeurs \u00e0 \u00e9viter <a href=\"https:\/\/www.dreamhost.com\/blog\/scary-web-design-mistakes\/\" target=\"_blank\" rel=\"noopener\">des erreurs de conception dommageables<\/a>.<\/p>\n\n\n<div class=\"article-newsletter article-newsletter--gradient\">\n\n\n<h2>Get Content Delivered Straight to Your Inbox<\/h2><p>Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p><form class=\"nwsl-form\" id=\"newsletter_block_\" novalidate><div class=\"messages\"><\/div><div class=\"form-group\"><label for=\"input_newsletter_block_\"><input type=\"email\"name=\"email\"id=\"input_newsletter_block_\"placeholder=\"Enter your email address\"novalidatedisabled=\"disabled\"\/><\/label><button type=\"submit\"class=\"btn btn--brand\"disabled=\"disabled\"><span>Sign Me Up!<\/span><svg width=\"21\" height=\"14\" viewBox=\"0 0 21 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M13.8523 0.42524L12.9323 1.34521C12.7095 1.56801 12.7132 1.9304 12.9404 2.14865L16.7241 5.7823H0.5625C0.251859 5.7823 0 6.03416 0 6.3448V7.6573C0 7.96794 0.251859 8.2198 0.5625 8.2198H16.7241L12.9405 11.8535C12.7132 12.0717 12.7095 12.4341 12.9323 12.6569L13.8523 13.5769C14.072 13.7965 14.4281 13.7965 14.6478 13.5769L20.8259 7.39879C21.0456 7.17913 21.0456 6.82298 20.8259 6.60327L14.6477 0.42524C14.4281 0.205584 14.0719 0.205584 13.8523 0.42524Z\" fill=\"white\"\/>\n<\/svg>\n<\/button><\/div><\/form><\/div>\n\n<h2 id=\"h-creating-the-theme-json-file\" class=\"wp-block-heading\"><b>Cr\u00e9ation du fichier theme.json<\/b><\/h2>\n\n\n<p>Le fichier <i>theme.json<\/i> contient deux parties importantes : les param\u00e8tres et les styles. Les param\u00e8tres se r\u00e9f\u00e8rent \u00e0 une liste de valeurs de configuration globales ou contextuelles qui d\u00e9terminent le comportement de l&#8217;\u00e9diteur et des blocs. Par exemple, cela influence quels contr\u00f4les sont activ\u00e9s par d\u00e9faut, quels contr\u00f4les sont cach\u00e9s de l&#8217;Interface Utilisateur (UI), la palette de couleurs disponible, les param\u00e8tres de typographie, etc.<\/p>\n\n\n<p>Styles g\u00e8re le langage de conception du th\u00e8me et permet aux auteurs de th\u00e8me de d\u00e9finir des \u00e9l\u00e9ments tels que :<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li>Taille de police<\/li>\n\n\n\n<li>Hauteur de ligne<\/li>\n\n\n\n<li>Couleurs d&#8217;arri\u00e8re-plan<\/li>\n\n\n\n<li>Couleurs des liens<\/li>\n\n\n<\/ul>\n\n\n<p>Si tu veux <a href=\"https:\/\/developer.wordpress.org\/themes\/advanced-topics\/theme-json\/\" target=\"_blank\" rel=\"noopener\">cr\u00e9er un fichier <i>theme.json<\/i><\/a>, tu peux cr\u00e9er un nouveau fichier portant ce nom et ensuite le placer dans le dossier racine de ton th\u00e8me. Tous les contenus de ton fichier doivent \u00eatre ins\u00e9r\u00e9s \u00e0 l&#8217;int\u00e9rieur de deux accolades : { }.<\/p>\n\n\n<p>Ensuite, tu utiliseras des noms de propri\u00e9t\u00e9 et des valeurs entre guillemets doubles et s\u00e9par\u00e9s par un deux-points, par exemple :<\/p>\n\n\n<pre class=\"wp-block-preformatted\">{\n\n\"nom-de-propri\u00e9t\u00e9\": \"valeur\"\n\n}<\/pre>\n\n\n<p>Le nom de la propri\u00e9t\u00e9 peut \u00eatre un param\u00e8tre ou un nom de bloc. Voici un exemple d&#8217;un fichier <i>theme.json<\/i> tr\u00e8s basique :<\/p>\n\n\n<pre class=\"wp-block-preformatted\">{\n\n&nbsp;&nbsp;&nbsp;&nbsp;\"version\": 1,\n\n&nbsp;&nbsp;&nbsp;&nbsp;\"param\u00e8tres\": {},\n\n&nbsp;&nbsp;&nbsp;&nbsp;\"styles\": {},\n\n&nbsp;&nbsp;&nbsp;&nbsp;\"mod\u00e8lesPersonnalis\u00e9s\": {},\n\n&nbsp;&nbsp;&nbsp;&nbsp;\"partiesDeMod\u00e8le\": {}\n\n}<\/pre>\n\n\n<p>La version 1 du format <i>theme.json <\/i>est la plus ancienne et la plus stable. Cependant, la version 2 est utilis\u00e9e \u00e0 partir de WordPress 5.9. Bien que la section de version doit \u00eatre la premi\u00e8re \u00e0 suivre l&#8217;accolade ouvrante, les sections suivantes peuvent \u00eatre plac\u00e9es dans n&#8217;importe quel ordre.<\/p>\n\n\n<p>Comme nous l&#8217;avons mentionn\u00e9, les deux principales sections du fichier sont Param\u00e8tres et Styles. Alors, examinons de plus pr\u00e8s les pr\u00e9r\u00e9glages pour chacun.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-settings-presets\"><b>Pr\u00e9r\u00e9glages Des Param\u00e8tres<\/b><\/h3>\n\n\n<p><a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-json\/#presets\" target=\"_blank\" rel=\"noopener\">Presets<\/a> font r\u00e9f\u00e9rence aux contr\u00f4les par d\u00e9faut ainsi qu&#8217;\u00e0 toutes les propri\u00e9t\u00e9s CSS personnalis\u00e9es et sont g\u00e9n\u00e9r\u00e9s par les valeurs dans <i>theme.json<\/i>. Certaines des principales cat\u00e9gories de presets incluent :<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li>Couleur<\/li>\n\n\n\n<li>Typographie<\/li>\n\n\n\n<li>Disposition<\/li>\n\n\n\n<li>Espacement<\/li>\n\n\n<\/ul>\n\n\n<p>Les cat\u00e9gories peuvent \u00e9galement avoir des sous-cat\u00e9gories. Par exemple, une sous-cat\u00e9gorie de Couleur pourrait \u00eatre Palette de couleurs :<\/p>\n\n\n<pre class=\"wp-block-preformatted\">{\n\n\"version\": 2,\n\n\"param\u00e8tres\": {\n\n\"couleur\": {\n\n\"palette\": [\n\n{<\/pre>\n\n\n<p>Chaque pr\u00e9-r\u00e9glage cr\u00e9e \u00e9galement une propri\u00e9t\u00e9 CSS personnalis\u00e9e en utilisant la convention de nommage \u201c&#8211;wp&#8211;preset&#8211;{preset-category}&#8211;{preset-slug}\u201d.<\/p>\n\n\n<p>Il y a une tonne de pr\u00e9r\u00e9glages et d&#8217;exemples que tu peux utiliser pour cr\u00e9er ton fichier <i>theme.json<\/i>, donc nous n&#8217;allons pas tous les passer en revue ici. Cependant, tu peux consulter le <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-json\/\" target=\"_blank\" rel=\"noopener\">Manuel WordPress<\/a> pour obtenir des conseils plus d\u00e9taill\u00e9s.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-styles-presets\"><b>Pr\u00e9r\u00e9glages De Styles<\/b><\/h3>\n\n\n<p><a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-json\/#styles\" target=\"_blank\" rel=\"noopener\">Pr\u00e9r\u00e9glages de styles<\/a> contr\u00f4lent les styles des objets dans les blocs. Par exemple, la m\u00e9thode suivante serait une fa\u00e7on d&#8217;utiliser la valeur hexad\u00e9cimale pour un arri\u00e8re-plan et un pr\u00e9r\u00e9glage de Styles Globaux pour la couleur du texte :<\/p>\n\n\n<pre class=\"wp-block-preformatted\">{\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"version\": 2,\n\n\"settings\": { ... },\n\n\"styles\": {\n\n\"color\": {\n\n\"background\": \"#FBF\",\n\n\"text\": \"var(--wp--preset--color--purple)\"\n\n}\n\n}\n\n}<\/pre>\n\n\n<p>Si nous voulions changer la couleur du titre d&#8217;un bloc, cela ressemblerait \u00e0 ceci :<\/p>\n\n\n<pre class=\"wp-block-preformatted\">{\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"version\": 2,\n\n\"settings\": {...},\n\n\"styles\": {\n\n...,\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"blocks\": {\n\n &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; \"core\/heading\": {\n\n &nbsp; &nbsp; \"color\": {\n\n&nbsp; &nbsp; &nbsp; \"text\": \"var(--wp--preset--color--blue)\"\n\n &nbsp; &nbsp; }<\/pre>\n\n\n<p>Encore une fois, il existe presque une infinit\u00e9 d&#8217;exemples et de mani\u00e8res d&#8217;utiliser les pr\u00e9r\u00e9glages pour les styles de blocs. Tu peux consulter la documentation de WordPress pour une <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-json\/#block-styles\" target=\"_blank\" rel=\"noopener\">explication compl\u00e8te<\/a>.<\/p>\n\n\n<p>Il existe \u00e9galement des sections <a href=\"https:\/\/fullsiteediting.com\/lessons\/templates-and-template-parts\/\" target=\"_blank\" rel=\"noopener\">Template et parties de Template<\/a>. Celles-ci incluent les fichiers de base de ton th\u00e8me, tels que <i>index.html<\/i>, ainsi que des sections pour organiser et structurer ton th\u00e8me.<\/p>\n\n\n<h2 id=\"h-how-to-style-your-wordpress-site-using-global-styles\" class=\"wp-block-heading\"><b>Comment Styler Ton Site WordPress Avec Les Styles Globaux<\/b><\/h2>\n\n\n<p>Si tu cherches une mani\u00e8re conviviale pour les d\u00e9butants d&#8217;utiliser les Styles Globaux pour styliser ton site web, tu peux utiliser l&#8217;interface des Styles Globaux avec un th\u00e8me de bloc WordPress. Note que tu auras uniquement acc\u00e8s \u00e0 l&#8217;interface des Styles avec <a href=\"https:\/\/www.dreamhost.com\/blog\/wordpress-full-site-editing-update\/\" target=\"_blank\" rel=\"noopener\">WordPress 5.9<\/a> ou sup\u00e9rieur.<\/p>\n\n\n\n\n<div class=\"single__related-article\">\n\t<span>Related Article<\/span>\n\t<div class=\"single__related-article__wrap\">\n\t\t<div class=\"single__related-article__title\">\n\t\t\tHow To Build a Website This Weekend: Complete Beginner\u2019s Guide\n\t\t<\/div>\n\t\t<a href=\"https:\/\/www-dev.dreamhost.com\/blog\/beginners-website-guide\/\" class=\"btn btn--sm btn--brand\" target=\"_blank\" rel=\"noopener\">\n\t\t\tRead More\n\t\t<\/a>\n\t<\/div>\n<\/div>\n\n<h3 class=\"wp-block-heading\" id=\"h-choosing-a-block-based-theme\"><b>Choisir Un Th\u00e8me Bas\u00e9 Sur Des Blocs<\/b><\/h3>\n\n\n<p>Tout d&#8217;abord, tu auras besoin d&#8217;un th\u00e8me bas\u00e9 sur des blocs. Pour en trouver un, tu peux naviguer vers le <a href=\"https:\/\/wordpress.org\/themes\/\" target=\"_blank\" rel=\"noopener\">r\u00e9pertoire de th\u00e8mes WordPress<\/a> depuis ton tableau de bord admin en parcourant <i>Apparence &gt; Th\u00e8mes &gt; Ajouter Nouveau<\/i>. Ensuite, tu peux cliquer sur le <i>Filtre de fonctionnalit\u00e9s<\/i> et s\u00e9lectionner <i>\u00c9dition Compl\u00e8te du Site<\/i>, suivi de <i>Appliquer<\/i>:<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1067\" height=\"563\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-global-styles.jpg\" alt=\"Filtre de fonctionnalit\u00e9 de th\u00e8me d'\u00e9dition compl\u00e8te du site WordPress\" class=\"wp-image-33280 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-global-styles.jpg.webp 1067w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-global-styles-300x158.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-global-styles-1024x540.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-global-styles-768x405.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-global-styles-600x317.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-global-styles-730x385.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-global-styles-784x414.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-global-styles-877x463.jpg.webp 877w\" data-sizes=\"(max-width: 1067px) 100vw, 1067px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1067px; --smush-placeholder-aspect-ratio: 1067\/563;\" \/><\/figure><\/div>\n\n<p>Une fois que tu <a href=\"https:\/\/www.dreamhost.com\/blog\/how-to-pick-wordpress-theme\/\" target=\"_blank\" rel=\"noopener\">trouves un th\u00e8me WordPress<\/a> qui te pla\u00eet, tu peux passer ta souris dessus, puis s\u00e9lectionner <i>Installer<\/i> suivi de <i>Activer<\/i>. Nous utiliserons <a href=\"https:\/\/make.wordpress.org\/core\/2021\/10\/06\/introducing-twenty-twenty-two\/\" target=\"_blank\" rel=\"noopener\">Twenty Twenty-Two<\/a>, qui pourrait d\u00e9j\u00e0 \u00eatre install\u00e9 si tu utilises WordPress 5.9 ou ult\u00e9rieur.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-accessing-the-styles-interface\"><b>Acc\u00e9der \u00e0 L&#8217;interface Des Styles<\/b><\/h3>\n\n\n<p>Ensuite, dirige-toi vers ton \u00c9diteur de Th\u00e8me (<i>Apparence &gt; \u00c9diteur<\/i>). Dans le coin sup\u00e9rieur droit de l&#8217;\u00e9cran, tu verras un cercle \u00e0 demi ombrag\u00e9, qui repr\u00e9sente le panneau des Styles :<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"794\" height=\"537\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-global-styles-twenty-twenty-two.jpg\" alt=\"Panneau de styles globaux WordPress\" class=\"wp-image-33279 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-global-styles-twenty-twenty-two.jpg.webp 794w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-global-styles-twenty-twenty-two-300x203.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-global-styles-twenty-twenty-two-768x519.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-global-styles-twenty-twenty-two-600x406.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-global-styles-twenty-twenty-two-730x494.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-global-styles-twenty-twenty-two-784x530.jpg.webp 784w\" data-sizes=\"(max-width: 794px) 100vw, 794px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 794px; --smush-placeholder-aspect-ratio: 794\/537;\" \/><\/figure><\/div>\n\n<p>Lorsque tu cliques dessus pour la premi\u00e8re fois, cela affichera un Guide de Bienvenue des Styles. Si tu as besoin d&#8217;y acc\u00e9der ult\u00e9rieurement, tu peux le trouver en cliquant sur les trois points verticaux dans le coin sup\u00e9rieur droit et en s\u00e9lectionnant <i>Guide de Bienvenue<\/i>.<\/p>\n\n\n<p>La fen\u00eatre de pr\u00e9visualisation te montre \u00e0 quoi ressemble le style actuel de ton th\u00e8me. Sous le panneau Styles, tu trouveras des r\u00e9glages pour :<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li>Typographie<\/li>\n\n\n\n<li>Couleurs<\/li>\n\n\n\n<li>Mise en page<\/li>\n\n\n\n<li>Blocs<\/li>\n\n\n<\/ul>\n\n\n<p>Examinons chacun de plus pr\u00e8s.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-typography\"><b>Typographie<\/b><\/h4>\n\n\n<p>Sous <i>Typography<\/i>, tu peux g\u00e9rer les param\u00e8tres de typographie pour deux \u00e9l\u00e9ments : <i>Text<\/i> et <i>Links<\/i>.<\/p>\n\n\n<p>Tu peux changer la famille et la taille de la police :<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"663\" height=\"388\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-global-styles-4.jpg\" alt=\"\u00c9cran des param\u00e8tres de typographie des Styles Globaux WordPress\" class=\"wp-image-33278 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-global-styles-4.jpg.webp 663w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-global-styles-4-300x176.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-global-styles-4-600x351.jpg.webp 600w\" data-sizes=\"(max-width: 663px) 100vw, 663px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 663px; --smush-placeholder-aspect-ratio: 663\/388;\" \/><\/figure><\/div>\n\n<p>Tu peux aussi ajuster la hauteur de ligne et s\u00e9lectionner une graisse de police. Tu auras les m\u00eames options pour tes liens. Quand tu auras termin\u00e9, n&#8217;oublie pas de sauvegarder tes modifications.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-colors\"><b>Couleurs<\/b><\/h4>\n\n\n<p>Sous <i>Couleurs<\/i>, tu trouveras les pr\u00e9r\u00e9glages de couleurs par d\u00e9faut qui accompagnent ton th\u00e8me. Pour cr\u00e9er tes propres palettes de couleurs, tu peux entrer les num\u00e9ros de valeur <i>HEX<\/i> ou utiliser le s\u00e9lecteur de couleurs par glisser-d\u00e9poser pour g\u00e9n\u00e9rer les couleurs de ton choix :<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"663\" height=\"388\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-global-styles-3.jpg\" alt=\"Param\u00e8tres de couleur des Styles Globaux WordPress\" class=\"wp-image-33277 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-global-styles-3.jpg.webp 663w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-global-styles-3-300x176.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-global-styles-3-600x351.jpg.webp 600w\" data-sizes=\"(max-width: 663px) 100vw, 663px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 663px; --smush-placeholder-aspect-ratio: 663\/388;\" \/><\/figure><\/div>\n\n<p>Tu peux \u00e9galement renommer les couleurs par des noms plus identifiables ou descriptifs que les valeurs alphanum\u00e9riques hexad\u00e9cimales standards. Tu peux ajouter des d\u00e9grad\u00e9s personnalis\u00e9s, appliquer des filtres duo-tones aux images, et plus encore.<\/p>\n\n\n<p>Ensuite, tu peux modifier les couleurs pour trois \u00e9l\u00e9ments principaux : <i>Background<\/i>, <i>Text<\/i>, et <i>Links<\/i>. Tu peux \u00e9galement s\u00e9lectionner n&#8217;importe lequel de ces \u00e9l\u00e9ments pour personnaliser le style. Les modifications seront appliqu\u00e9es instantan\u00e9ment pendant que tu \u00e9dites.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-layout\"><b>Disposition<\/b><\/h4>\n\n\n<p>Sous <i>Layout<\/i>, tu peux ajuster les marges et d&#8217;autres \u00e9l\u00e9ments. C&#8217;est simple et peut \u00eatre tr\u00e8s utile lorsque tu dois faire un petit ajustement (par exemple, pour la sym\u00e9trie de la page).<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-blocks\"><b>Blocs<\/b><\/h4>\n\n\n<p>Enfin, tu peux modifier l&#8217;apparence des blocs individuels. Apr\u00e8s avoir s\u00e9lectionn\u00e9 <i>Blocs <\/i>dans le panneau de styles, tu trouveras une liste des blocs sur ton site.<\/p>\n\n\n<p>Disons que tu souhaites modifier le style de ton bloc de Titre. Tu peux s\u00e9lectionner <i>Heading <\/i>dans la liste, puis ajuster ses param\u00e8tres de <i>Colors <\/i>et de <i>Typography <\/i>:<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"926\" height=\"426\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-global-styles-2.jpg\" alt=\"Options de style pour le bloc d'en-t\u00eate WordPress\" class=\"wp-image-33276 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-global-styles-2.jpg.webp 926w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-global-styles-2-300x138.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-global-styles-2-768x353.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-global-styles-2-600x276.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-global-styles-2-730x336.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-global-styles-2-784x361.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-global-styles-2-877x403.jpg.webp 877w\" data-sizes=\"(max-width: 926px) 100vw, 926px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 926px; --smush-placeholder-aspect-ratio: 926\/426;\" \/><\/figure><\/div>\n\n<p>Quand tu auras termin\u00e9, tu peux cliquer sur <i>Save<\/i>. Si tu souhaites revenir aux styles de th\u00e8me que tu avais avant de faire des modifications, tu peux te rendre dans le panneau Styles, cliquer sur les trois points verticaux, puis s\u00e9lectionner <i>Reset to defaults<\/i>.<\/p>\n\n\n<h2 id=\"h-a-better-way-to-use-and-style-wordpress\" class=\"wp-block-heading\"><b>Une Meilleure Fa\u00e7on D&#8217;utiliser Et De Styliser WordPress<\/b><\/h2>\n\n\n<p>WordPress travaille continuellement \u00e0 am\u00e9liorer l&#8217;exp\u00e9rience d&#8217;\u00e9dition pour ses utilisateurs. D\u00e9sormais, gr\u00e2ce aux Styles Globaux, le d\u00e9veloppement de th\u00e8mes vient de devenir beaucoup plus facile pour les d\u00e9butants comme pour les professionnels exp\u00e9riment\u00e9s.<\/p>\n\n\n<p>Comme discut\u00e9 dans cet article, tu peux cr\u00e9er un fichier <i>theme.json<\/i> pour appliquer les configurations de Styles Globaux \u00e0 ton th\u00e8me. Tu peux \u00e9galement utiliser l&#8217;\u00e9diteur de Styles avec un th\u00e8me bas\u00e9 sur des blocs pour personnaliser l&#8217;apparence de ton site. Tout cela rend la conception d&#8217;un site web r\u00e9ussi tr\u00e8s simple.<\/p>\n\n\n<p>DreamHost est une \u00e9quipe d\u2019experts en web exp\u00e9riment\u00e9s. Nous comprenons l\u2019importance d\u2019optimiser ton exp\u00e9rience WordPress. Nous nous engageons \u00e0 soutenir tes efforts en utilisant la derni\u00e8re technologie <a href=\"https:\/\/www.dreamhost.com\/blog\/ways-to-support-open-source\/\" target=\"_blank\" rel=\"noopener\">open-source<\/a> et un support prim\u00e9. D\u00e9couvre nos <a href=\"https:\/\/www.dreamhost.com\/wordpress\/managed\/\" target=\"_blank\" rel=\"noopener\">plans d\u2019h\u00e9bergement WordPress g\u00e9r\u00e9<\/a> aujourd&#8217;hui pour en savoir plus!<\/p>\n\n\n\n\n\n\n<div\n\tclass=\"article-cta-shared article-cta-small\"\n>\n    <div class=\"tr-img-wrap-outer jsLoading\"><img decoding=\"async\" class=\"js-img-lazy \" src=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/lazy-loading-transparent.webp\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder.webp 1x, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder-x2.webp 2x\"  alt=\"Ad background image\" \/><\/div>\n\n\n\n\n  <div class=\"content-btm\">\n    <h2\n      class=\"h2--md\"\n    >\n      Fais Plus Avec DreamPress\n    <\/h2>\n    <p\n      class=\"p--md\"\n    >\n      Les utilisateurs de DreamPress Plus et Pro ont acc\u00e8s \u00e0 Jetpack Professional (et plus de 200 th\u00e8mes premium) sans co\u00fbt suppl\u00e9mentaire !\n    <\/p>\n\n            <a\n            href=\"https:\/\/www.dreamhost.com\/wordpress\/managed\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            D\u00e9couvrez Les Plans                    <\/a>\n\n  <\/div>\n<\/div>\n\n\n","protected":false},"excerpt":{"rendered":"<p>Les blocs WordPress et les fonctionnalit\u00e9s d&#8217;\u00e9dition compl\u00e8te du site (FSE) rendent la construction et le style d&#8217;un site web r\u00e9ussi rapides et faciles. Les styles globaux peuvent t&#8217;aider \u00e0 unifier l&#8217;apparence de ton site WordPress sans avoir \u00e0 \u00e9diter des blocs ou des pages individuels. Donc, que tu souhaites changer la couleur de fond ou ajuster la typographie des titres, tu pourras [\u2026]<\/p>\n","protected":false},"author":1062,"featured_media":33273,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_metadesc":"Les Styles Globaux peuvent t'aider \u00e0 contr\u00f4ler l'apparence de ton site WordPress sans avoir \u00e0 modifier chaque bloc ou page individuellement. Continue \u00e0 lire pour en savoir plus.","toc_headlines":"[[\"h-an-overview-of-wordpress-global-styles\",\"Vue D\u2019ensemble Des Styles Globaux De WordPress\"],[\"h-why-use-wordpress-global-styles\",\"Pourquoi Utiliser Les Styles Globaux De WordPress\"],[\"h-creating-the-theme-json-file\",\"Cr\u00e9ation du fichier theme.json\"],[\"h-how-to-style-your-wordpress-site-using-global-styles\",\"Comment Styler Ton Site WordPress Avec Les Styles Globaux\"],[\"h-a-better-way-to-use-and-style-wordpress\",\"Une Meilleure Fa\u00e7on D'utiliser Et De Styliser WordPress\"]]","hide_toc":false,"footnotes":""},"categories":[15011,14995,15009],"tags":[],"class_list":["post-70068","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-decoding-wordpress-fr","category-tutorials-fr","category-wordpress-fr"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.3 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>D\u00e9coder WordPress : Une Introduction aux Styles Globaux - DreamHost Blog<\/title>\n<meta name=\"description\" content=\"Les Styles Globaux peuvent t&#039;aider \u00e0 contr\u00f4ler l&#039;apparence de ton site WordPress sans avoir \u00e0 modifier chaque bloc ou page individuellement. Continue \u00e0 lire pour en savoir plus.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www-dev.dreamhost.com\/blog\/fr\/dcoder-wordpress-une-introduction-aux-styles-globaux-fr\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"D\u00e9coder WordPress : Une Introduction aux Styles Globaux\" \/>\n<meta property=\"og:description\" content=\"Les Styles Globaux peuvent t&#039;aider \u00e0 contr\u00f4ler l&#039;apparence de ton site WordPress sans avoir \u00e0 modifier chaque bloc ou page individuellement. Continue \u00e0 lire pour en savoir plus.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/fr\/dcoder-wordpress-une-introduction-aux-styles-globaux-fr\/\" \/>\n<meta property=\"og:site_name\" content=\"DreamHost Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DreamHost\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-18T15:11:24+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-26T14:58:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-full-site-editing-global-styles-featured-1.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"598\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jason Cosper\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:site\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jason Cosper\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"D\u00e9coder WordPress : Une Introduction aux Styles Globaux - DreamHost Blog","description":"Les Styles Globaux peuvent t'aider \u00e0 contr\u00f4ler l'apparence de ton site WordPress sans avoir \u00e0 modifier chaque bloc ou page individuellement. Continue \u00e0 lire pour en savoir plus.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/dcoder-wordpress-une-introduction-aux-styles-globaux-fr\/","og_locale":"en_US","og_type":"article","og_title":"D\u00e9coder WordPress : Une Introduction aux Styles Globaux","og_description":"Les Styles Globaux peuvent t'aider \u00e0 contr\u00f4ler l'apparence de ton site WordPress sans avoir \u00e0 modifier chaque bloc ou page individuellement. Continue \u00e0 lire pour en savoir plus.","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/dcoder-wordpress-une-introduction-aux-styles-globaux-fr\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2022-03-18T15:11:24+00:00","article_modified_time":"2025-05-26T14:58:53+00:00","og_image":[{"width":900,"height":598,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-full-site-editing-global-styles-featured-1.jpeg","type":"image\/jpeg"}],"author":"Jason Cosper","twitter_card":"summary_large_image","twitter_creator":"@dreamhost","twitter_site":"@dreamhost","twitter_misc":{"Written by":"Jason Cosper","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/dcoder-wordpress-une-introduction-aux-styles-globaux-fr\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/dcoder-wordpress-une-introduction-aux-styles-globaux-fr\/"},"author":{"name":"Jason Cosper","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/2273b8bf7336df78f6d99a89c17253c4"},"headline":"D\u00e9coder WordPress : Une Introduction aux Styles Globaux","datePublished":"2022-03-18T15:11:24+00:00","dateModified":"2025-05-26T14:58:53+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/dcoder-wordpress-une-introduction-aux-styles-globaux-fr\/"},"wordCount":2028,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/dcoder-wordpress-une-introduction-aux-styles-globaux-fr\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-full-site-editing-global-styles-featured-1.jpeg","articleSection":["D\u00e9coder WordPress","Tutoriels","WordPress"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/dcoder-wordpress-une-introduction-aux-styles-globaux-fr\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/dcoder-wordpress-une-introduction-aux-styles-globaux-fr\/","name":"D\u00e9coder WordPress : Une Introduction aux Styles Globaux - DreamHost Blog","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/dcoder-wordpress-une-introduction-aux-styles-globaux-fr\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/dcoder-wordpress-une-introduction-aux-styles-globaux-fr\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-full-site-editing-global-styles-featured-1.jpeg","datePublished":"2022-03-18T15:11:24+00:00","dateModified":"2025-05-26T14:58:53+00:00","description":"Les Styles Globaux peuvent t'aider \u00e0 contr\u00f4ler l'apparence de ton site WordPress sans avoir \u00e0 modifier chaque bloc ou page individuellement. Continue \u00e0 lire pour en savoir plus.","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/dcoder-wordpress-une-introduction-aux-styles-globaux-fr\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/fr\/dcoder-wordpress-une-introduction-aux-styles-globaux-fr\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/dcoder-wordpress-une-introduction-aux-styles-globaux-fr\/#primaryimage","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-full-site-editing-global-styles-featured-1.jpeg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-full-site-editing-global-styles-featured-1.jpeg","width":900,"height":598,"caption":"WordPress Full Site Editing Global Styles"},{"@type":"BreadcrumbList","@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/dcoder-wordpress-une-introduction-aux-styles-globaux-fr\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"D\u00e9coder WordPress : Une Introduction aux Styles Globaux"}]},{"@type":"WebSite","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website","url":"https:\/\/www-dev.dreamhost.com\/blog\/","name":"DreamHost Blog","description":"","publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www-dev.dreamhost.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization","name":"DreamHost","url":"https:\/\/www-dev.dreamhost.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","contentUrl":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","width":1200,"height":168,"caption":"DreamHost"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DreamHost\/","https:\/\/x.com\/dreamhost","https:\/\/www.instagram.com\/dreamhost\/","https:\/\/www.linkedin.com\/company\/dreamhost\/","https:\/\/www.youtube.com\/user\/dreamhostusa"]},{"@type":"Person","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/2273b8bf7336df78f6d99a89c17253c4","name":"Jason Cosper","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/02\/IMG_4807-scaled.jpeg","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/02\/IMG_4807-scaled.jpeg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/02\/IMG_4807-scaled.jpeg","caption":"Jason Cosper"},"description":"Jason is DreamHost\u2019s WordPress Product Advocate, based out of Bakersfield, CA. He is currently working on making our DreamPress product even better. In his free time, he likes to curl up on the couch and watch scary movies with his wife Sarah and three very small dogs. Follow him on Twitter.","url":"https:\/\/www-dev.dreamhost.com\/blog\/author\/jasoncosper\/"}]}},"lang":"fr","translations":{"fr":70068,"es":33260,"en":33258,"pt":52864,"de":52868,"pl":54238,"uk":54247,"ru":54273,"it":68241,"nl":70101},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/70068","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/users\/1062"}],"replies":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/comments?post=70068"}],"version-history":[{"count":2,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/70068\/revisions"}],"predecessor-version":[{"id":70070,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/70068\/revisions\/70070"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/33273"}],"wp:attachment":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=70068"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=70068"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=70068"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}