{"id":70741,"date":"2023-11-10T07:00:28","date_gmt":"2023-11-10T15:00:28","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=70741"},"modified":"2025-05-26T07:51:02","modified_gmt":"2025-05-26T14:51:02","slug":"comment-passer-dun-thme-classique-des-thmes-de-blocs-wordpress-fr","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/comment-passer-dun-thme-classique-des-thmes-de-blocs-wordpress-fr\/","title":{"rendered":"Comment Passer D\u2019un Th\u00e8me Classique \u00c0 Des Th\u00e8mes De Blocs WordPress"},"content":{"rendered":"\n<p>Si tu es fan de Legos, alors tu adoreras les th\u00e8mes en blocs WordPress.<\/p>\n\n\n<p>\u00c0 partir de la version 5.9, WordPress offre un support complet pour les th\u00e8mes en blocs. Cela a \u00e9t\u00e9 un changement majeur pour la plupart des sites, qui \u00e9taient construits sur ce qui est maintenant connu sous le nom de th\u00e8mes \u00ab classiques \u00bb.<\/p>\n\n\n<p>Mais changer d&#8217;un th\u00e8me classique \u00e0 un th\u00e8me bas\u00e9 sur des blocs n\u00e9cessite un peu de travail.<\/p>\n\n\n<p>Dans cet article, nous t&#8217;expliquerons comment ils fonctionnent et quelles \u00e9tapes tu peux suivre pour passer de l&#8217;ancien style au nouveau.<\/p>\n\n\n<p>Ce ne sera pas aussi amusant que d&#8217;assembler une \u00c9toile de la Mort de collection de 2005 avec 3,441 pi\u00e8ces. Mais nous ferons de notre mieux.<\/p>\n\n\n<h2 id=\"definition\" class=\"wp-block-heading\">Qu&#8217;est-ce qu&#8217;un th\u00e8me de blocs WordPress ?<\/h2>\n\n\n<p>Les th\u00e8mes par blocs permettent aux utilisateurs et aux administrateurs de sites web de personnaliser la mise en page de leurs pages et contenus en utilisant des blocs de contenu \u00e9ditables et r\u00e9utilisables.<\/p>\n\n\n<p>Initialement connu sous le nom de &#8220;<a href=\"https:\/\/www.dreamhost.com\/blog\/wordpress-full-site-editing\/\" target=\"_blank\" rel=\"noopener\">\u00e9dition compl\u00e8te du site<\/a>&#8221; (FSE) ou &#8220;\u00e9dition du site&#8221;, ces th\u00e8mes ajoutent une fonctionnalit\u00e9 modulaire bas\u00e9e sur des blocs aux mises en page et aux mod\u00e8les de votre th\u00e8me. De mani\u00e8re similaire \u00e0 la fa\u00e7on dont l&#8217;<a href=\"https:\/\/www.dreamhost.com\/glossary\/wordpress\/gutenberg\/\" target=\"_blank\" rel=\"noopener\">\u00e9diteur Gutenberg<\/a> a introduit des <a href=\"https:\/\/www.dreamhost.com\/blog\/how-to-use-wordpress-blocks\/\" target=\"_blank\" rel=\"noopener\">blocs<\/a> et des mod\u00e8les de blocs qui peuvent \u00eatre utilis\u00e9s dans vos pages et le contenu de vos articles.<\/p>\n\n\n<p>Mais maintenant, tu peux personnaliser la disposition et le contenu de ton site entier (y compris les mod\u00e8les de pages et les mod\u00e8les personnalis\u00e9s) en utilisant des blocs visuels de style glisser-d\u00e9poser.<\/p>\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"984\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/block-editor-example.jpg\" alt=\"Exemple d'\u00e9diteur de blocs\" class=\"wp-image-42357 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/block-editor-example.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/block-editor-example-300x185.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/block-editor-example-1024x630.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/block-editor-example-768x472.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/block-editor-example-1536x945.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/block-editor-example-600x369.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/block-editor-example-1200x738.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/block-editor-example-730x449.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/block-editor-example-1460x898.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/block-editor-example-784x482.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/block-editor-example-1568x964.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/block-editor-example-877x539.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/984;\" \/><\/figure>\n\n\n<p>Ces nouvelles fonctionnalit\u00e9s d&#8217;\u00e9dition visuelle rendent extr\u00eamement facile la construction de nouvelles structures de page ou la personnalisation du contenu de n&#8217;importe quelle page au-del\u00e0 de ce qui est juste \u00e0 l&#8217;int\u00e9rieur du corps de la page.<\/p>\n\n\n<p>Cela signifie que tu n&#8217;auras pas besoin de compter sur des d\u00e9veloppeurs pour personnaliser tes fichiers de th\u00e8me ou cr\u00e9er des mod\u00e8les personnalis\u00e9s pour ajouter autre chose que des mots et des images \u00e0 ton contenu. Au lieu de cela, tu peux personnaliser le contenu en utilisant l&#8217;\u00e9diteur.<\/p>\n\n\n<p>Des blocs individuels peuvent \u00eatre cr\u00e9\u00e9s et con\u00e7us pour s&#8217;int\u00e9grer dans une mise en page r\u00e9active et correspondre \u00e0 la couleur et \u00e0 la typographie de ton site web.<\/p>\n\n\n<p>De plus, tu peux cr\u00e9er et utiliser des <a href=\"https:\/\/wordpress.org\/patterns\/\" target=\"_blank\" rel=\"noopener\">mod\u00e8les de blocs<\/a> partageables. Ce sont des blocs pr\u00e9fabriqu\u00e9s cr\u00e9\u00e9s par des individus, des entreprises et des d\u00e9veloppeurs WordPress.<\/p>\n\n\n<p>Ensemble, les th\u00e8mes par blocs transforment WordPress en un syst\u00e8me plus modulaire et flexible. Il \u00e9mule une grande partie de la fonctionnalit\u00e9 des autres cr\u00e9ateurs de sites de style glisser-d\u00e9poser rendus populaires par des entreprises comme Squarespace et Wix.<\/p>\n\n\n<p>Les th\u00e8mes construits sur le Framework de blocs viennent g\u00e9n\u00e9ralement avec des blocs personnalis\u00e9s pr\u00e9construits qui correspondent au design et au style du site web. Tu peux ensuite utiliser ces blocs dans ton site o\u00f9 tu en as besoin.<\/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=\"differences\" class=\"wp-block-heading\">Th\u00e8mes par Blocs Vs. Th\u00e8mes Classiques<\/h2>\n\n\n<p>Les th\u00e8mes classiques de WordPress \u00e9taient con\u00e7us pour cr\u00e9er un style et un design coh\u00e9rents.<\/p>\n\n\n<p>La plupart des zones du site \u00e9taient modifiables uniquement en personnalisant le th\u00e8me ou en modifiant directement les fichiers de mod\u00e8le PHP pour ajouter des fonctionnalit\u00e9s sp\u00e9cifiques au site web.<\/p>\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>PHP<\/h3>\n    <p>PHP (Pr\u00e9processeur Hypertexte) est un langage de script open-source. Il est largement utilis\u00e9 dans le d\u00e9veloppement web et peut \u00eatre int\u00e9gr\u00e9 dans HTML. Plusieurs syst\u00e8mes de gestion de contenu (CMS) populaires, tels que WordPress, sont construits avec PHP.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/web-design\/php\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Lire la suite                    <\/a>\n\n<\/div>\n\n\n<p>Ensuite, la plupart des sites disposaient de quelques mod\u00e8les standards pour chaque type de contenu. Par exemple, un mod\u00e8le de page et un mod\u00e8le de publication. Les \u00e9diteurs de blocs ont g\u00e9n\u00e9ralement toujours cette m\u00eame structure de th\u00e8me, mais tu peux tr\u00e8s facilement cr\u00e9er des variations ou personnaliser chaque mod\u00e8le en utilisant l&#8217;\u00e9diteur.<\/p>\n\n\n<p>Avec l&#8217;<a href=\"https:\/\/www.dreamhost.com\/blog\/how-to-update-old-wordpress-posts-block-editor\/\" target=\"_blank\" rel=\"noopener\">\u00e9diteur de blocs<\/a>, tu as plus de contr\u00f4le sur les diff\u00e9rentes parties de chaque page ou article, et tu peux cr\u00e9er de nouveaux mod\u00e8les \u00e0 la vol\u00e9e.<\/p>\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"517\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/add-social-icons-block.jpg\" alt=\"Ajouter un bloc d'ic\u00f4nes sociales\" class=\"wp-image-42358 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/add-social-icons-block.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/add-social-icons-block-300x97.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/add-social-icons-block-1024x331.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/add-social-icons-block-768x248.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/add-social-icons-block-1536x496.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/add-social-icons-block-600x194.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/add-social-icons-block-1200x388.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/add-social-icons-block-730x236.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/add-social-icons-block-1460x472.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/add-social-icons-block-784x253.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/add-social-icons-block-1568x507.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/add-social-icons-block-877x283.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/517;\" \/><\/figure>\n\n\n<p>Par exemple, tu peux ajouter un bloc avec des ic\u00f4nes sociales ou une galerie d&#8217;images \u00e0 tes mod\u00e8les de page pour qu&#8217;ils apparaissent sur chaque page de ton site web ou les ajouter \u00e0 un seul article.<\/p>\n\n\n<p>Il y a aussi un \u00e9diteur de style qui te permet d&#8217;ajuster les param\u00e8tres du bloc et de personnaliser les \u00e9l\u00e9ments visuels comme la palette de couleurs et la mise en page. Tu n&#8217;as m\u00eame pas besoin de modifier le CSS.<\/p>\n\n\n<p>En plus de la flexibilit\u00e9 et du contr\u00f4le accrus, les th\u00e8mes par blocs offrent de nombreux avantages.<\/p>\n\n\n<h3 class=\"wp-block-heading\">\u00c9liminez les Shortcodes et la Modification du Code HTML<\/h3>\n\n\n<p>Avec les th\u00e8mes classiques, de nombreux utilisateurs de WordPress ont adopt\u00e9 des m\u00e9thodes personnalis\u00e9es pour ajouter des fonctionnalit\u00e9s ou modifier la disposition et le design de leurs articles de blog et pages.<\/p>\n\n\n<p>Les codes courts et les extraits HTML personnalis\u00e9s \u00e9taient souvent utilis\u00e9s pour remplacer ou injecter de nouvelles fonctionnalit\u00e9s qui n&#8217;\u00e9taient pas incluses dans le th\u00e8me du site web.<\/p>\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>HTML<\/h3>\n    <p>HTML signifie HyperText Markup Language. C&#8217;est le composant de base le plus fondamental du web et le langage de balisage standard pour cr\u00e9er des pages web et des applications.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/web-design\/html\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Lire la suite                    <\/a>\n\n<\/div>\n\n\n<p>Par exemple, tu as peut-\u00eatre copi\u00e9 et coll\u00e9 un long extrait de code dans chaque publication pour ajouter un appel \u00e0 l&#8217;action ou ins\u00e9rer un formulaire d&#8217;inscription.<\/p>\n\n\n<p>Maintenant, tu peux simplement cr\u00e9er un <a href=\"https:\/\/wordpress.org\/documentation\/article\/reusable-blocks\/\" target=\"_blank\" rel=\"noopener\">motif synchronis\u00e9<\/a> (bloc r\u00e9utilisable) pour ce contenu. Ensuite, cr\u00e9e un mod\u00e8le de publication personnalis\u00e9 pour chaque appel \u00e0 l&#8217;action pertinent. Finalement, s\u00e9lectionne juste le mod\u00e8le de publication pour chaque post afin que l&#8217;appel \u00e0 l&#8217;action apparaisse.<\/p>\n\n\n<h3 class=\"wp-block-heading\">D\u00e9bloquez Les \u00c9l\u00e9ments Natifs Du Cr\u00e9ateur De Pages<\/h3>\n\n\n<p>Pour de nombreux utilisateurs, un th\u00e8me bas\u00e9 sur des blocs \u00e9liminera le besoin de plugins de cr\u00e9ation de pages qui sont devenus populaires dans la communaut\u00e9 WordPress.<\/p>\n\n\n<p>Ces plugins ont servi de solution temporaire pour les utilisateurs qui souhaitaient un syst\u00e8me modulaire et bas\u00e9 sur des blocs pour construire leur site web avant qu\u2019il ne soit disponible pour la plupart des th\u00e8mes WordPress.<\/p>\n\n\n<p>Ces th\u00e8mes sont, bien s\u00fbr, toujours populaires. Divi, Elementor, Gutenify et d&#8217;autres ont \u00e9t\u00e9 des pionniers dans ce domaine, mais maintenant tu n&#8217;as plus besoin d&#8217;utiliser ces th\u00e8mes sp\u00e9cifiques pour d\u00e9bloquer les capacit\u00e9s de construction de site modulaire.<\/p>\n\n\n<h3 class=\"wp-block-heading\">Am\u00e9liore La Performance Du Site<\/h3>\n\n\n<p>Un autre grand avantage du passage aux th\u00e8mes en blocs est l&#8217;am\u00e9lioration de la vitesse de chargement des pages et de la performance du site.<\/p>\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>Temps De Chargement De La Page<\/h3>\n    <p>Le temps de chargement d&#8217;une page est, tout simplement, la dur\u00e9e n\u00e9cessaire pour qu&#8217;une page Web se charge. En termes plus techniques, c&#8217;est le temps n\u00e9cessaire pour t\u00e9l\u00e9charger et afficher l&#8217;ensemble du contenu d&#8217;une page Web. Il est g\u00e9n\u00e9ralement mesur\u00e9 en secondes.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/hosting\/page-load-time\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Lire Plus                    <\/a>\n\n<\/div>\n\n\n<p>De nombreux sites d\u00e9pendaient de plugins tiers ou de copier-coller de morceaux de code pour obtenir la fonctionnalit\u00e9 et le design d\u00e9sir\u00e9s pour leurs pages. Cela conduit souvent \u00e0 l&#8217;ajout de scripts suppl\u00e9mentaires et de mise en forme sur les pages. Chacune de ces ressources prend du temps \u00e0 charger et ralentit votre site web.<\/p>\n\n\n<p>Donc, en passant d&#8217;un th\u00e8me classique \u00e0 un th\u00e8me par blocs, de nombreux sites pourront retirer ces pi\u00e8ces suppl\u00e9mentaires. Cela simplifiera le code sur la page et devrait <a href=\"https:\/\/www.dreamhost.com\/blog\/gtmetrix\/\" target=\"_blank\" rel=\"noopener\">am\u00e9liorer la vitesse de chargement et la performance de la page<\/a>.<\/p>\n\n\n<p>Ce qui, \u00e0 son tour, peut <a href=\"https:\/\/www.dreamhost.com\/blog\/improve-seo\/\" target=\"_blank\" rel=\"noopener\">booster le SEO<\/a>, am\u00e9liorer l&#8217;engagement et augmenter les conversions.<\/p>\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>SEO<\/h3>\n    <p>L&#8217;optimisation pour les moteurs de recherche (SEO) est la pratique consistant \u00e0 am\u00e9liorer le classement d\u2019un site dans les r\u00e9sultats de recherche. Les r\u00e9sultats de recherche sont agr\u00e9g\u00e9s en fonction de plusieurs facteurs, y compris la pertinence et la qualit\u00e9 d\u2019un site. Optimiser ton site pour ces facteurs peut aider \u00e0 am\u00e9liorer tes classements.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/seo\/seo\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Lire Plus                    <\/a>\n\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">R\u00e9duire Les Conflits, Les Mises \u00c0 Jour Et Les Vuln\u00e9rabilit\u00e9s<\/h3>\n\n\n<p>Avec moins de d\u00e9pendance aux plugins tiers, tu rencontreras \u00e9galement moins de conflits ou de mises \u00e0 jour n\u00e9cessaires pour ton <a href=\"https:\/\/www.dreamhost.com\/blog\/what-makes-up-a-wordpress-website\/\" target=\"_blank\" rel=\"noopener\">site WordPress<\/a>.<\/p>\n\n\n<p>Au fur et \u00e0 mesure que les sites deviennent plus complexes, les plugins suppl\u00e9mentaires utilis\u00e9s peuvent souvent entrer en conflit les uns avec les autres. Cela peut cr\u00e9er des probl\u00e8mes qui cassent le site, comme le tristement c\u00e9l\u00e8bre <a href=\"https:\/\/www.dreamhost.com\/blog\/troubleshooting-wordpress-white-screen-death\/\" target=\"_blank\" rel=\"noopener\">\u00c9cran Blanc de la Mort<\/a>. Et mettre \u00e0 jour des plugins peut sembler \u00eatre un v\u00e9ritable coup de d\u00e9. (\u00ab Est-ce que ce sera celui qui va casser mon site ?! \u00bb)<\/p>\n\n\n<p>Peut-\u00eatre encore plus important, une moindre d\u00e9pendance aux Plugins\/plugin tiers rendra \u00e9galement <a href=\"https:\/\/www.dreamhost.com\/blog\/secure-your-wordpress-website\/\" target=\"_blank\" rel=\"noopener\">ton site web plus s\u00e9curis\u00e9<\/a>. Ces outils peuvent souvent introduire des vuln\u00e9rabilit\u00e9s ou des exploits dans ton code. (Surtout si tu \u00e9vites de les mettre \u00e0 jour parce que tu as peur de casser quelque chose d&#8217;important.)<\/p>\n\n\n<h2 id=\"should\" class=\"wp-block-heading\">Devrais-Tu Passer \u00c0 Un Th\u00e8me Par Blocs ?<\/h2>\n\n\n<p>Avec tous ces avantages en t\u00eate, il semble \u00e9vident que, dans la plupart des cas, passer \u00e0 un th\u00e8me par blocs est une d\u00e9cision judicieuse.<\/p>\n\n\n<p><b>La plupart<\/b> des entreprises et des sites web devraient envisager de passer d&#8217;un th\u00e8me classique \u00e0 un th\u00e8me par blocs.<\/p>\n\n\n<p>Il introduit de nombreuses am\u00e9liorations de la qualit\u00e9 de vie qui facilitent la gestion de ton site web et de ton contenu, et permettent \u00e0 ton \u00e9quipe de travailler plus efficacement et de personnaliser le contenu sans temps de d\u00e9veloppement d\u00e9di\u00e9 en utilisant des capacit\u00e9s de modification sans code.<\/p>\n\n\n<p>Et c&#8217;est une \u00e9tape pr\u00e9cieuse pour am\u00e9liorer la performance et la s\u00e9curit\u00e9 de ton site web.<\/p>\n\n\n<p>Quand ne devrais-tu <b>pas <\/b>changer ?<\/p>\n\n\n<p>En bref : Si tu n&#8217;as pas le temps et les ressources pour te consacrer \u00e0 ce changement. Modifier ton th\u00e8me WordPress, surtout s&#8217;il est personnalis\u00e9 ou fortement personnalis\u00e9, n\u00e9cessite beaucoup de travail.<\/p>\n\n\n<p>Tout en conservant ton contenu, tes m\u00e9dias et autres actifs intacts, le design g\u00e9n\u00e9ral de ton site web changera pour correspondre au nouveau th\u00e8me.<\/p>\n\n\n<p>Si tu souhaites conserver l&#8217;apparence de ton th\u00e8me actuel ou d\u00e9sires un look compl\u00e8tement diff\u00e9rent, tu devras ajuster le design en cons\u00e9quence.<\/p>\n\n\n<p>Sur le c\u00f4t\u00e9 positif : Faire ces modifications sera plus facile car ton nouveau th\u00e8me sera bas\u00e9 sur des blocs et te permettra de modifier la plupart des mises en page, \u00e9l\u00e9ments, couleurs et styles du th\u00e8me sans avoir \u00e0 modifier le code.<\/p>\n\n\n<p>Regardons le processus.<\/p>\n\n\n<h2 id=\"howto\" class=\"wp-block-heading\">Comment Passer \u00c0 Un Th\u00e8me WP Block<\/h2>\n\n\n<h3 class=\"wp-block-heading\">\u00c9tape 1 : Sauvegarde Ton Site Web<\/h3>\n\n\n<p>Chaque fois que tu fais des mises \u00e0 jour majeures sur ton site web, cr\u00e9e une sauvegarde.<\/p>\n\n\n<p>C&#8217;est tellement important, nous allons le r\u00e9p\u00e9ter.<\/p>\n\n\n<p>Cr\u00e9e une sauvegarde. (S\u00e9rieusement.)<\/p>\n\n\n<p>Si tu utilises un service d&#8217;<a href=\"https:\/\/www.dreamhost.com\/wordpress\/managed\/\" target=\"_blank\" rel=\"noopener\">h\u00e9bergement WordPress g\u00e9r\u00e9<\/a>, tu devrais disposer d&#8217;options de sauvegarde automatique et manuelle.<\/p>\n\n\n<p>Si tu n&#8217;es pas, envisage d&#8217;utiliser un plugin WordPress comme <a href=\"https:\/\/blogvault.net\/\" target=\"_blank\" rel=\"noopener\">BlogVault<\/a>, <a href=\"https:\/\/wordpress.org\/plugins\/updraftplus\/\" target=\"_blank\" rel=\"noopener\">UpdraftPlus<\/a>, ou <a href=\"https:\/\/wordpress.org\/plugins\/jetpack-backup\/\" target=\"_blank\" rel=\"noopener\">Jetpack Backup<\/a> pour sauvegarder tous les fichiers et contenus de ton site.<\/p>\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>Jetpack<\/h3>\n    <p>Jetpack est un plugin WordPress cr\u00e9\u00e9 par Automattic, la soci\u00e9t\u00e9 derri\u00e8re WordPress.com. C\u2019est un plugin qui te donne acc\u00e8s \u00e0 des fonctionnalit\u00e9s habituellement disponibles uniquement sur les sites WordPress.com.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/web-design\/jetpack\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Lire la suite                    <\/a>\n\n<\/div>\n\n\n<p>Ainsi, si quelque chose tourne mal, tu auras un moyen de restaurer ton site web.<\/p>\n\n\n<h3 class=\"wp-block-heading\">\u00c9tape 2 : \u00c9value Ton Site Web<\/h3>\n\n\n<p>La prochaine chose que nous devons faire est de comprendre ce qui se passera lorsque tu feras le changement.<\/p>\n\n\n<p>Changer ton th\u00e8me a g\u00e9n\u00e9ralement deux effets imm\u00e9diats :<\/p>\n\n\n<ol class=\"wp-block-list\">\n<li>La disposition globale, les couleurs et les styles de ton site web vont changer.<\/li>\n\n\n\n<li>Tu perdras tout code personnalis\u00e9 ou modifications qui sont ajout\u00e9s directement dans les fichiers ou mod\u00e8les de ton ancien th\u00e8me.<\/li>\n\n\n<\/ol>\n\n\n<p>Au-del\u00e0 de cela, ton contenu et tout ce qui a \u00e9t\u00e9 ajout\u00e9 au corps de tes articles et pages devraient rester identiques.<\/p>\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"1537\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/just-another-theme-change.jpg\" alt=\"Juste Un Autre Changement de Th\u00e8me\" class=\"wp-image-42359 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/just-another-theme-change.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/just-another-theme-change-300x288.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/just-another-theme-change-1024x984.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/just-another-theme-change-768x738.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/just-another-theme-change-1536x1476.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/just-another-theme-change-600x576.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/just-another-theme-change-1200x1153.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/just-another-theme-change-730x701.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/just-another-theme-change-1460x1403.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/just-another-theme-change-784x753.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/just-another-theme-change-1568x1506.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/just-another-theme-change-877x842.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1537;\" \/><\/figure>\n\n\n<p>Par exemple, si tu utilises un th\u00e8me classique et que tu as personnalis\u00e9 la disposition de l&#8217;en-t\u00eate de ton site, ces modifications ne seront pas conserv\u00e9es.<\/p>\n\n\n<p>Alors, que devrais-tu faire ?<\/p>\n\n\n<p>Parcours toutes les pages de ton site web (ou du moins tous les mod\u00e8les uniques).<\/p>\n\n\n<p>Cherche tout contenu personnalis\u00e9, widgets, banni\u00e8res, graphiques, etc., qui ont \u00e9t\u00e9 ajout\u00e9s aux fichiers du th\u00e8me. Ceux-ci appara\u00eetront g\u00e9n\u00e9ralement dans les sections \u00ab statiques \u00bb comme ton en-t\u00eate, barre lat\u00e9rale ou pied de page.<\/p>\n\n\n<p>Prends note de chaque instance que tu trouves. Il est possible de rajouter ce contenu \u00e0 ton site apr\u00e8s avoir fait le changement.<\/p>\n\n\n<p>Et ne t&#8217;inqui\u00e8te pas. M\u00eame si tu manques quelque chose, tu peux g\u00e9n\u00e9ralement revenir \u00e0 ton ancien th\u00e8me pour voir ce qui apparaissait et ce qui manque maintenant sur ton nouveau site.<\/p>\n\n\n<h3 class=\"wp-block-heading\">\u00c9tape 3 : Choisis Un Th\u00e8me<\/h3>\n\n\n<p>Maintenant, il est temps de choisir ton th\u00e8me.<\/p>\n\n\n<p>Quel est le r\u00e9sultat que tu souhaites obtenir ?<\/p>\n\n\n<p>Veux-tu un th\u00e8me qui ressemble \u00e9troitement au design de ton site web existant ? Ou quelque chose de radicalement diff\u00e9rent ? Un tout nouveau look.<\/p>\n\n\n<p>Peu importe la direction, tu peux commencer par parcourir les th\u00e8mes disponibles dans l&#8217;<a href=\"https:\/\/wordpress.org\/themes\/tags\/full-site-editing\/\" target=\"_blank\" rel=\"noopener\">annuaire des th\u00e8mes WordPress<\/a>. (Clique sur \u00ab Th\u00e8mes de blocs \u00bb pour filtrer.)<\/p>\n\n\n<p>Tu peux \u00e9galement consulter notre liste des <a href=\"https:\/\/www.dreamhost.com\/blog\/wordpress-block-themes\/\" target=\"_blank\" rel=\"noopener\">27 meilleurs th\u00e8mes de bloc<\/a>.<\/p>\n\n\n<p>Garde juste \u00e0 l&#8217;esprit que les options de personnalisation sont presque illimit\u00e9es avec tous les th\u00e8mes de blocs. C&#8217;est comme lorsque tu cherches un appartement ou une maison. Ne t&#8217;attarde pas sur la peinture des murs. Tu peux toujours repeindre. Bien que tu veuilles toujours chercher des th\u00e8mes qui sont proches de tes pr\u00e9f\u00e9rences g\u00e9n\u00e9rales de style et de design, tu pourras modifier le th\u00e8me pour qu&#8217;il r\u00e9ponde \u00e0 tes besoins.<\/p>\n\n\n<p>Par exemple, si tu pr\u00e9f\u00e8res un design minimaliste, tu pourrais commencer par un th\u00e8me simple. Une autre option est de modifier un th\u00e8me complexe pour en retirer une partie du contenu.<\/p>\n\n\n<p>Enfin, regarde les blocs pr\u00e9con\u00e7us inclus dans les th\u00e8mes.<\/p>\n\n\n<p>De nombreux th\u00e8mes incluront des styles de blocs personnalis\u00e9s qui ont d\u00e9j\u00e0 \u00e9t\u00e9 construits et qui sont disponibles en tant qu&#8217;options une fois que tu actives. Cela peut repr\u00e9senter un grand gain de temps par rapport \u00e0 la cr\u00e9ation manuelle de blocs suppl\u00e9mentaires apr\u00e8s l&#8217;installation du nouveau th\u00e8me.<\/p>\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"991\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/pattern-block-examples.jpg\" alt=\"Exemples de blocs de motifs\" class=\"wp-image-42360 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/pattern-block-examples.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/pattern-block-examples-300x186.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/pattern-block-examples-1024x634.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/pattern-block-examples-768x476.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/pattern-block-examples-1536x951.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/pattern-block-examples-600x372.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/pattern-block-examples-1200x743.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/pattern-block-examples-730x452.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/pattern-block-examples-1460x904.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/pattern-block-examples-784x486.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/pattern-block-examples-1568x971.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/pattern-block-examples-877x543.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/991;\" \/><\/figure>\n\n\n<p>Explore la section \u00ab\u00a0Patterns\u00a0\u00bb du th\u00e8me pour voir comment ces blocs sont utilis\u00e9s pour cr\u00e9er des sections personnalis\u00e9es. De nombreux th\u00e8mes incluront des exemples de motifs pour les en-t\u00eates, des motifs pour les pieds de page, et d&#8217;autres sections ou composants pertinents que tu souhaiteras peut-\u00eatre utiliser sur ton site web.<\/p>\n\n\n<h3 class=\"wp-block-heading\">\u00c9tape 4 : Installer Et Activer Le Th\u00e8me<\/h3>\n\n\n<p>Une fois que tu as choisi un th\u00e8me, il est temps de l&#8217;installer.<\/p>\n\n\n<p>Tu peux t\u00e9l\u00e9charger le fichier zip du th\u00e8me de bloc localement puis le t\u00e9l\u00e9charger. Ou, si le th\u00e8me se trouve dans l&#8217;annuaire WordPress, tu peux l&#8217;installer depuis ton Admin WP.<\/p>\n\n\n<p>Pour ce faire, rends-toi dans <i>Apparence &gt; Th\u00e8mes,<\/i> et clique sur le bouton \u00ab Ajouter Nouveau \u00bb.<\/p>\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"992\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/add-new-theme-wp-admin.jpg\" alt=\"Ajouter un nouveau th\u00e8me dans l'administration WP\" class=\"wp-image-42361 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/add-new-theme-wp-admin.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/add-new-theme-wp-admin-300x186.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/add-new-theme-wp-admin-1024x635.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/add-new-theme-wp-admin-768x476.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/add-new-theme-wp-admin-1536x952.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/add-new-theme-wp-admin-600x372.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/add-new-theme-wp-admin-1200x744.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/add-new-theme-wp-admin-730x453.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/add-new-theme-wp-admin-1460x905.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/add-new-theme-wp-admin-784x486.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/add-new-theme-wp-admin-1568x972.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/add-new-theme-wp-admin-877x544.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/992;\" \/><\/figure>\n\n\n<p>Ensuite, tape le nom du th\u00e8me dans la zone de recherche. Trouve le th\u00e8me que tu souhaites installer et passe ta souris dessus. Clique sur \u00ab Installer \u00bb.<\/p>\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"991\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/install-new-theme.jpg\" alt=\"Installer Un Nouveau Th\u00e8me\" class=\"wp-image-42362 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/install-new-theme.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/install-new-theme-300x186.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/install-new-theme-1024x634.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/install-new-theme-768x476.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/install-new-theme-1536x951.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/install-new-theme-600x372.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/install-new-theme-1200x743.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/install-new-theme-730x452.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/install-new-theme-1460x904.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/install-new-theme-784x486.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/install-new-theme-1568x971.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/install-new-theme-877x543.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/991;\" \/><\/figure>\n\n\n<p>Maintenant ton nouveau th\u00e8me est install\u00e9 !<\/p>\n\n\n<p>Retourne \u00e0 ta page de <i>Th\u00e8mes<\/i> et trouve le th\u00e8me. Tu peux l&#8217;activer imm\u00e9diatement en cliquant sur \u00ab Activer \u00bb.<\/p>\n\n\n<p><b>Note De Nerd<\/b> : Si tu n&#8217;es toujours pas s\u00fbr de l&#8217;apparence de ton site web avec le nouveau th\u00e8me, utilise l&#8217;option \u00ab Aper\u00e7u en Direct \u00bb pour voir \u00e0 quoi cela ressemblera. Ou, encore mieux, installe le th\u00e8me et suis les \u00e9tapes suivantes sur une <a href=\"https:\/\/www.dreamhost.com\/blog\/website-staging-beginners-guide\/\" target=\"_blank\" rel=\"noopener\">version pr\u00e9paratoire de ton site web<\/a>. De cette mani\u00e8re, les modifications ne seront pas en direct pendant que tu mets \u00e0 jour et personnalises ton site.<\/p>\n\n\n<h3 class=\"wp-block-heading\">\u00c9tape 5 : Personnalise Le Plan Et Le Design<\/h3>\n\n\n<p>Une fois que tu as activ\u00e9 le th\u00e8me, ton site web aura (probablement) un aspect diff\u00e9rent de celui d&#8217;avant.<\/p>\n\n\n<p>C&#8217;est maintenant ton moment de personnaliser l&#8217;apparence avec la configuration de ton th\u00e8me. Tu peux recr\u00e9er le design pr\u00e9c\u00e9dent que tu utilisais pour ton site, ou tu peux le diriger dans une toute nouvelle direction.<\/p>\n\n\n<p>De toute fa\u00e7on, tu peux utiliser la fonctionnalit\u00e9 de bloc de site complet pour personnaliser en quelques clics.<\/p>\n\n\n<p>Normalement, si ton th\u00e8me peut utiliser l&#8217;\u00c9diteur de site, il affichera un nouveau message sur la page <i>customize.php<\/i>, indiquant : \u00ab Hourra ! Ton th\u00e8me prend en charge la modification de site avec des blocs ! Dis-m&#8217;en plus. Utiliser l&#8217;\u00c9diteur de site. \u00bb<\/p>\n\n\n<p>Si tu ne vois pas ce message pour une raison quelconque, depuis la page des <i>Themes<\/i>, clique sur \u00ab Customize \u00bb sur ton nouveau th\u00e8me.<\/p>\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"991\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/wordpress-customize-theme.jpg\" alt=\"Personnalisation du th\u00e8me WordPress\" class=\"wp-image-42363 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/wordpress-customize-theme.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/wordpress-customize-theme-300x186.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/wordpress-customize-theme-1024x634.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/wordpress-customize-theme-768x476.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/wordpress-customize-theme-1536x951.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/wordpress-customize-theme-600x372.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/wordpress-customize-theme-1200x743.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/wordpress-customize-theme-730x452.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/wordpress-customize-theme-1460x904.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/wordpress-customize-theme-784x486.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/wordpress-customize-theme-1568x971.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/wordpress-customize-theme-877x543.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/991;\" \/><\/figure>\n\n\n<p>Tu verras maintenant l&#8217;\u00e9cran de l&#8217;\u00e9diteur. D&#8217;ici, tu peux plonger dans et modifier n&#8217;importe quelle page ou publication sp\u00e9cifique sur ton site. Tu peux \u00e9galement modifier et cr\u00e9er de nouveaux mod\u00e8les ou motifs.<\/p>\n\n\n<p>Voici o\u00f9 tu voudras passer la majeure partie de ton temps. Selon tes objectifs pour le nouveau th\u00e8me, tu pourrais vouloir passer en revue chaque mod\u00e8le et motif par d\u00e9faut pour personnaliser le contenu et la mise en page.<\/p>\n\n\n<p>En plus de modifier la disposition et les blocs sur ton site, tu peux \u00e9galement utiliser les options d&#8217;\u00e9dition pour personnaliser tes param\u00e8tres de style.<\/p>\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"984\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/block-style-settings.jpg\" alt=\"Param\u00e8tres du Style de Bloc\" class=\"wp-image-42364 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/block-style-settings.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/block-style-settings-300x185.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/block-style-settings-1024x630.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/block-style-settings-768x472.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/block-style-settings-1536x945.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/block-style-settings-600x369.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/block-style-settings-1200x738.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/block-style-settings-730x449.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/block-style-settings-1460x898.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/block-style-settings-784x482.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/block-style-settings-1568x964.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/block-style-settings-877x539.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/984;\" \/><\/figure>\n\n\n<p>Sous les param\u00e8tres de \u00ab Bloc \u00bb, tu devrais voir plusieurs options de style. Ici, tu peux ajuster les \u00e9l\u00e9ments de design tels que la taille de la police, l&#8217;alignement, l&#8217;espacement et les sch\u00e9mas de couleurs.<\/p>\n\n\n<p>Tu peux aussi ajouter des classes CSS personnalis\u00e9es pour chaque \u00e9l\u00e9ment sous <i>Avanc\u00e9<\/i>.<\/p>\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>CSS<\/h3>\n    <p>Les feuilles de style en cascade (CSS) sont un langage de codage essentiel utilis\u00e9 pour le style des pages web. Le CSS te permet de cr\u00e9er des pages magnifiques en modifiant l&#8217;apparence de divers \u00e9l\u00e9ments, y compris le style de police, la couleur, la mise en page et plus encore.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/web-design\/css\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Lire la suite                    <\/a>\n\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">\u00c9tape 6 : V\u00e9rifier S&#8217;il Y A Des Plugins Ou Widgets D\u00e9fectueux<\/h3>\n\n\n<p>Tous les plugins, widgets ou personnalisations ne fonctionneront pas avec les th\u00e8mes \u00e0 blocs.<\/p>\n\n\n<p>Si ton site utilisait un certain nombre de plugins et de widgets (que tu aurais d\u00fb identifier \u00e0 l&#8217;\u00e9tape 2), alors tu pourrais avoir besoin de faire quelques ajustements sur le backend.<\/p>\n\n\n<p>Les plugins de blocs sont compatibles avec les th\u00e8mes de blocs, mais certains plus anciens peuvent ne pas fonctionner.<\/p>\n\n\n<p>Disons que tu souhaites ajouter un widget social que tu utilisais avec ton ancien th\u00e8me. Si tu ne vois pas l&#8217;option pour ajouter ce widget sp\u00e9cifique depuis l&#8217;\u00e9diteur de blocs, alors tu dois probablement trouver un nouveau plugin qui est pris en charge.<\/p>\n\n\n<h2 id=\"summary\" class=\"wp-block-heading\">Trouve Le Th\u00e8me De Bloc Parfait Pour Ton Site Web<\/h2>\n\n\n<p>Maintenant que tu connais les \u00e9tapes, c\u2019est le moment de s\u2019amuser.<\/p>\n\n\n<p>Trouver le th\u00e8me de bloc appropri\u00e9 pour ton site web, que ce soit un blog personnel, un site d&#8217;entreprise ou une plateforme m\u00e9diatique, peut \u00eatre excitant, avec tant d&#8217;options formidables disponibles.<\/p>\n\n\n<p>Certains de nos th\u00e8mes de blocs populaires favoris :<\/p>\n\n\n<ol class=\"wp-block-list\">\n<li><a href=\"https:\/\/wordpress.org\/themes\/twentytwentythree\/\" target=\"_blank\" rel=\"noopener\">Twenty Twenty-Trois<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/wordpress.org\/themes\/generatepress\/\" target=\"_blank\" rel=\"noopener\">GeneratePress<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/wordpress.org\/themes\/blockbase\/\" target=\"_blank\" rel=\"noopener\">Blockbase<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/wordpress.org\/plugins\/coming-soon\/\" target=\"_blank\" rel=\"noopener\">SeedProd<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.elegantthemes.com\/gallery\/divi\/\" target=\"_blank\" rel=\"noopener\">Divi<\/a><\/li>\n\n\n<\/ol>\n\n\n<p>Avec le th\u00e8me appropri\u00e9, tu es bien parti pour devenir un ma\u00eetre des <a href=\"https:\/\/www.dreamhost.com\/blog\/how-to-use-wordpress-blocks\/\" target=\"_blank\" rel=\"noopener\">blocs WordPress<\/a>, DreamHost peut t&#8217;aider !<\/p>\n\n\n<p>Bonne construction !<\/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      Tu Le R\u00eaves, Nous Le Codons\n    <\/h2>\n    <p\n      class=\"p--md\"\n    >\n      Profite de plus de 20 ans d&#8217;expertise en codage lorsque tu choisis notre service de d\u00e9veloppement Web. Dis-nous simplement ce que tu souhaites pour ton site u2014 nous prenons le relais \u00e0 partir de l\u00e0.\n    <\/p>\n\n            <a\n            href=\"https:\/\/www.dreamhost.com\/pro-services\/development\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            En Savoir Plus                    <\/a>\n\n  <\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Si tu es fan de Legos, alors tu adoreras les th\u00e8mes \u00e0 blocs WordPress. \u00c0 partir de la version 5.9, WordPress offre un support complet pour les th\u00e8mes \u00e0 blocs. Ce fut un changement majeur pour la plupart des sites, qui \u00e9taient construits sur ce qui est maintenant connu sous le nom de th\u00e8mes &#8220;classiques&#8221;. Mais passer d&#8217;un th\u00e8me classique \u00e0 un th\u00e8me bas\u00e9 sur les blocs n\u00e9cessite [\u2026]<\/p>\n","protected":false},"author":1077,"featured_media":42353,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_metadesc":"Am\u00e8ne ton site WordPress au niveau sup\u00e9rieur avec un th\u00e8me \u00e0 blocs. D\u00e9couvre ce que tu dois savoir dans ce guide.","toc_headlines":"[[\"definition\",\"Qu'est-ce qu'un th\u00e8me de blocs WordPress ?\"],[\"differences\",\"Th\u00e8mes par Blocs Vs. Th\u00e8mes Classiques\"],[\"should\",\"Devrais-Tu Passer \u00c0 Un Th\u00e8me Par Blocs ?\"],[\"howto\",\"Comment Passer \u00c0 Un Th\u00e8me WP Block\"],[\"summary\",\"Trouve Le Th\u00e8me De Bloc Parfait Pour Ton Site Web\"]]","hide_toc":false,"footnotes":""},"categories":[15017,15005,15009],"tags":[],"class_list":["post-70741","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-getting-started-fr","category-website-design-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>Comment Passer D\u2019un Th\u00e8me Classique \u00c0 Des Th\u00e8mes De Blocs WordPress - DreamHost Blog<\/title>\n<meta name=\"description\" content=\"Am\u00e8ne ton site WordPress au niveau sup\u00e9rieur avec un th\u00e8me \u00e0 blocs. D\u00e9couvre ce que tu dois savoir dans ce guide.\" \/>\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\/comment-passer-dun-thme-classique-des-thmes-de-blocs-wordpress-fr\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Comment Passer D\u2019un Th\u00e8me Classique \u00c0 Des Th\u00e8mes De Blocs WordPress\" \/>\n<meta property=\"og:description\" content=\"Am\u00e8ne ton site WordPress au niveau sup\u00e9rieur avec un th\u00e8me \u00e0 blocs. D\u00e9couvre ce que tu dois savoir dans ce guide.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/fr\/comment-passer-dun-thme-classique-des-thmes-de-blocs-wordpress-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=\"2023-11-10T15:00:28+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-26T14:51:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/Moving-From-WordPress-Classic-Themes-To-Block-Theme-HERO-Image.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"1095\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jos Velasco\" \/>\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=\"Jos Velasco\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"15 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Comment Passer D\u2019un Th\u00e8me Classique \u00c0 Des Th\u00e8mes De Blocs WordPress - DreamHost Blog","description":"Am\u00e8ne ton site WordPress au niveau sup\u00e9rieur avec un th\u00e8me \u00e0 blocs. D\u00e9couvre ce que tu dois savoir dans ce guide.","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\/comment-passer-dun-thme-classique-des-thmes-de-blocs-wordpress-fr\/","og_locale":"en_US","og_type":"article","og_title":"Comment Passer D\u2019un Th\u00e8me Classique \u00c0 Des Th\u00e8mes De Blocs WordPress","og_description":"Am\u00e8ne ton site WordPress au niveau sup\u00e9rieur avec un th\u00e8me \u00e0 blocs. D\u00e9couvre ce que tu dois savoir dans ce guide.","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/comment-passer-dun-thme-classique-des-thmes-de-blocs-wordpress-fr\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2023-11-10T15:00:28+00:00","article_modified_time":"2025-05-26T14:51:02+00:00","og_image":[{"width":1460,"height":1095,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/Moving-From-WordPress-Classic-Themes-To-Block-Theme-HERO-Image.jpg","type":"image\/jpeg"}],"author":"Jos Velasco","twitter_card":"summary_large_image","twitter_creator":"@dreamhost","twitter_site":"@dreamhost","twitter_misc":{"Written by":"Jos Velasco","Est. reading time":"15 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/comment-passer-dun-thme-classique-des-thmes-de-blocs-wordpress-fr\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/comment-passer-dun-thme-classique-des-thmes-de-blocs-wordpress-fr\/"},"author":{"name":"Jos Velasco","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/33a01bfa83e29abbe21403d23dd8ea1a"},"headline":"Comment Passer D\u2019un Th\u00e8me Classique \u00c0 Des Th\u00e8mes De Blocs WordPress","datePublished":"2023-11-10T15:00:28+00:00","dateModified":"2025-05-26T14:51:02+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/comment-passer-dun-thme-classique-des-thmes-de-blocs-wordpress-fr\/"},"wordCount":3110,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/comment-passer-dun-thme-classique-des-thmes-de-blocs-wordpress-fr\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/Moving-From-WordPress-Classic-Themes-To-Block-Theme-HERO-Image.jpg","articleSection":["Commencer","Design de Site Web","WordPress"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/comment-passer-dun-thme-classique-des-thmes-de-blocs-wordpress-fr\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/comment-passer-dun-thme-classique-des-thmes-de-blocs-wordpress-fr\/","name":"Comment Passer D\u2019un Th\u00e8me Classique \u00c0 Des Th\u00e8mes De Blocs WordPress - DreamHost Blog","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/comment-passer-dun-thme-classique-des-thmes-de-blocs-wordpress-fr\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/comment-passer-dun-thme-classique-des-thmes-de-blocs-wordpress-fr\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/Moving-From-WordPress-Classic-Themes-To-Block-Theme-HERO-Image.jpg","datePublished":"2023-11-10T15:00:28+00:00","dateModified":"2025-05-26T14:51:02+00:00","description":"Am\u00e8ne ton site WordPress au niveau sup\u00e9rieur avec un th\u00e8me \u00e0 blocs. D\u00e9couvre ce que tu dois savoir dans ce guide.","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/comment-passer-dun-thme-classique-des-thmes-de-blocs-wordpress-fr\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/fr\/comment-passer-dun-thme-classique-des-thmes-de-blocs-wordpress-fr\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/comment-passer-dun-thme-classique-des-thmes-de-blocs-wordpress-fr\/#primaryimage","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/Moving-From-WordPress-Classic-Themes-To-Block-Theme-HERO-Image.jpg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/Moving-From-WordPress-Classic-Themes-To-Block-Theme-HERO-Image.jpg","width":1460,"height":1095},{"@type":"BreadcrumbList","@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/comment-passer-dun-thme-classique-des-thmes-de-blocs-wordpress-fr\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"Comment Passer D\u2019un Th\u00e8me Classique \u00c0 Des Th\u00e8mes De Blocs WordPress"}]},{"@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\/33a01bfa83e29abbe21403d23dd8ea1a","name":"Jos Velasco","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/jos-velasco-150x150.png","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/jos-velasco-150x150.png","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/jos-velasco-150x150.png","caption":"Jos Velasco"},"description":"Jos Velasco is a WordPress Professional Consultant at DreamHost. His responsibilities include helping with advanced WordPress cases, creating training material, and identifying trends impacting the WordPress community. In his free time, he enjoys climbing mountains, eating healthy, and watching drama movies. Follow Jos on LinkedIn: https:\/\/www.linkedin.com\/in\/josvelasco\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/author\/josvelasco\/"}]}},"lang":"fr","translations":{"fr":70741,"es":42367,"en":42351,"uk":50963,"pt":56063,"de":56065,"pl":56069,"ru":56072,"it":68576,"nl":70765},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/70741","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\/1077"}],"replies":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/comments?post=70741"}],"version-history":[{"count":2,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/70741\/revisions"}],"predecessor-version":[{"id":70743,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/70741\/revisions\/70743"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/42353"}],"wp:attachment":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=70741"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=70741"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=70741"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}