{"id":38826,"date":"2025-03-06T18:45:13","date_gmt":"2025-03-06T18:45:13","guid":{"rendered":"\/tutoriels\/?p=38826"},"modified":"2025-03-06T18:45:16","modified_gmt":"2025-03-06T18:45:16","slug":"comment-convertir-html-vers-wordpress","status":"publish","type":"post","link":"\/fr\/tutoriels\/comment-convertir-html-vers-wordpress","title":{"rendered":"Comment convertir un site HTML vers WordPress"},"content":{"rendered":"<p>Vous avez probablement consult&eacute; les <strong>statistiques<\/strong> r&eacute;centes indiquant que WordPress alimente actuellement 33 % des sites web sur internet. En tant que propri&eacute;taire d&rsquo;un site web, vous pourriez envisager de convertir votre <a href=\"\/fr\/tutoriels\/site-web-statique\"><strong>site web HTML statique<\/strong><\/a> en WordPress.<\/p><p>Il est toujours acceptable d&rsquo;avoir un site web en HTML, surtout avec HTML5 qui est performant pour un site vitrine. Mais pour tout le reste, WordPress offre des solutions bien plus pratiques. WordPress propose de nombreux th&egrave;mes, extensions et widgets pour am&eacute;liorer votre site et enrichir ses fonctionnalit&eacute;s.<\/p><p>Il est &eacute;galement facile &agrave; g&eacute;rer. Vous pouvez ajouter et supprimer du contenu sans conna&icirc;tre le code. Avec un site HTML, c&rsquo;est une toute autre histoire. &Agrave; moins de savoir coder, la mise &agrave; jour du contenu en HTML peut s&rsquo;av&eacute;rer complexe.<\/p><p>Dans cet article, vous d&eacute;couvrirez comment convertir du HTML statique en <a href=\"\/fr\/tutoriels\/site-web-statique\"><strong>WordPress<\/strong><\/a>, et les diff&eacute;rentes m&eacute;thodes pour y parvenir. Commen&ccedil;ons.<\/p><h2 class=\"wp-block-heading\" id=\"h-points-a-considerer-avant-la-migration\"><strong>Points &agrave; consid&eacute;rer avant la migration<\/strong><\/h2><p>Avant de vous lancer, vous devez prendre en compte quelques &eacute;l&eacute;ments.<\/p><ul class=\"wp-block-list\">\n<li><strong>Service d&rsquo;h&eacute;bergement.<\/strong> Vous devez disposer d&rsquo;un plan d&rsquo;h&eacute;bergement avant de commencer, car les exigences peuvent diff&eacute;rer de celles d&rsquo;un site HTML. Vous aurez besoin d&rsquo;un h&eacute;bergement sp&eacute;cifique pour votre site WordPress. Alternativement, vous pouvez h&eacute;berger votre site en local et le mettre en ligne ult&eacute;rieurement.<\/li>\n\n\n\n<li><strong>&Eacute;diteur de code. <\/strong>Vous aurez besoin d&rsquo;un &eacute;diteur de code comme Notepad++, Atom, Sublime, etc., pour modifier le code HTML de votre site.<\/li>\n\n\n\n<li><strong>Temps et argent. <\/strong>Vous devez &eacute;valuer le temps et l&rsquo;argent que vous &ecirc;tes pr&ecirc;t &agrave; investir. Si vous &ecirc;tes motiv&eacute; et d&eacute;termin&eacute; &agrave; apprendre, ce tutoriel est parfait pour vous. Vous pouvez &eacute;galement faire appel &agrave; des d&eacute;veloppeurs ou utiliser des applications de <a href=\"\/fr\/tutoriels\/comment-migrer-un-site-wordpress\"><strong>migration WordPress<\/strong><\/a> pour faciliter la conversion. Embaucher quelqu&rsquo;un est certes plus simple, mais vous perdrez l&rsquo;opportunit&eacute; d&rsquo;apprendre, et le processus pourrait s&rsquo;av&eacute;rer co&ucirc;teux.<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-les-differentes-methodes-pour-convertir-html-vers-wordpress\"><strong>Les diff&eacute;rentes m&eacute;thodes pour convertir HTML vers WordPress<\/strong><\/h2><p>Il existe plusieurs fa&ccedil;ons de convertir HTML vers WordPress, avec diff&eacute;rents niveaux de difficult&eacute;. Les voici&nbsp;:<\/p><ul class=\"wp-block-list\">\n<li><strong>Cr&eacute;er un th&egrave;me WordPress &agrave; partir d&rsquo;un site HTML statique.<\/strong> Si vous souhaitez conserver intact le design de votre ancien site HTML, cette option est faite pour vous. C&rsquo;est &eacute;galement la m&eacute;thode la plus complexe et elle n&eacute;cessite des comp&eacute;tences en programmation. Mais ne vous laissez pas d&eacute;courager. Il s&rsquo;agit essentiellement de copier\/coller l&rsquo;ancien code HTML dans plusieurs fichiers PHP.<\/li>\n\n\n\n<li><strong>Abandonner le design et ne conserver que le contenu.<\/strong> Si vous &ecirc;tes pr&ecirc;t &agrave; laisser de c&ocirc;t&eacute; l&rsquo;ancien design de votre site et &agrave; adopter un th&egrave;me WordPress pour un nouveau d&eacute;part, cette option est id&eacute;ale. Vous n&rsquo;aurez qu&rsquo;&agrave; transf&eacute;rer le contenu vers son nouvel environnement.<\/li>\n\n\n\n<li><strong>Utiliser un th&egrave;me enfant adapt&eacute; d&rsquo;un th&egrave;me existant.<\/strong> C&rsquo;est probablement la solution la plus simple si vous souhaitez conserver l&rsquo;apparence de votre ancien site. Avec cette m&eacute;thode, vous utiliserez un th&egrave;me WordPress pr&eacute;existant comme base. En bonus, vous pourrez imm&eacute;diatement profiter des fonctionnalit&eacute;s avanc&eacute;es de WordPress.<\/li>\n<\/ul><figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.hostinger.com\/fr\/migration-site-web\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-Website-migration_in-text-banner-1024x300-1.png\/public\" alt=\"\" class=\"wp-image-41474\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-Website-migration_in-text-banner-1024x300-1.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-Website-migration_in-text-banner-1024x300-1.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-Website-migration_in-text-banner-1024x300-1.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-Website-migration_in-text-banner-1024x300-1.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h3 class=\"wp-block-heading\" id=\"h-creer-un-theme-wordpress-a-partir-d-un-site-html-statique\"><strong>Cr&eacute;er un th&egrave;me WordPress &agrave; partir d&rsquo;un site HTML statique<\/strong><\/h3><p>Si vous souhaitez recr&eacute;er votre site HTML en WordPress en conservant son apparence, voici comment proc&eacute;der. Dans ce tutoriel, nous utilisons un <a href=\"https:\/\/github.com\/rachelmccollin\/WPMU-DEV-Theme-Development-Series-Files\/tree\/master\/Starting%20code\" target=\"_blank\" rel=\"noopener\"><strong>mod&egrave;le HTML statique<\/strong><\/a> de Rachel McCollin.<\/p><h4 class=\"wp-block-heading\" id=\"h-1-creer-un-dossier-de-theme-et-les-fichiers-de-base\"><strong>1. Cr&eacute;er un dossier de th&egrave;me et les fichiers de base<\/strong><\/h4><p>Cr&eacute;ez un nouveau dossier de th&egrave;me sur votre bureau et nommez-le. Nous appellerons notre dossier <strong>my-theme<\/strong>. Ensuite, ouvrez votre &eacute;diteur de code et cr&eacute;ez les fichiers suivants :<\/p><ul class=\"wp-block-list\">\n<li><strong>style.css<\/strong><\/li>\n\n\n\n<li><strong>index.php<\/strong><\/li>\n\n\n\n<li><strong>header.php<\/strong><\/li>\n\n\n\n<li><strong>sidebar.php<\/strong><\/li>\n\n\n\n<li><strong>footer.php<\/strong><\/li>\n<\/ul><p>Notez que certains de ces fichiers peuvent &ecirc;tre facultatifs, selon les fonctionnalit&eacute;s et le design de votre th&egrave;me. Pour en savoir plus sur leurs r&ocirc;les, consultez notre article sur la <strong>cr&eacute;ation d&rsquo;un th&egrave;me WordPress avec HTML5<\/strong>.<\/p><p>Apr&egrave;s avoir cr&eacute;&eacute; les fichiers, gardez l&rsquo;&eacute;diteur ouvert. Nous y reviendrons plus tard.<\/p><h4 class=\"wp-block-heading\" id=\"h-2-transformer-l-ancien-css-du-site-en-feuille-de-style-wordpress\"><strong>2. Transformer l&rsquo;ancien CSS du site en feuille de style WordPress<\/strong><\/h4><p>Maintenant, nous allons cr&eacute;er une feuille de style WordPress en copiant votre ancien code CSS. Ouvrez le fichier <strong>style.css<\/strong> et collez ce code :<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/*\nTheme Name: My Theme\nAuthor: LakiGarang\nAuthor URL: https:\/\/hostinger.com\/tutorials\/author\/luqman\nDescription: Un th&egrave;me de d&eacute;veloppement, du HTML statique &agrave; WordPress\nVersion: 1,0\nLicense: GNU General Public License v2 or later\nLicense URL: http:\/\/www.gnu.org\/licenses\/gpl-2.0.html\n*\/<\/pre><p>Ce code indique &agrave; WordPress qu&rsquo;il s&rsquo;agit d&rsquo;un en-t&ecirc;te de feuille de style de th&egrave;me. Vous pouvez personnaliser les d&eacute;tails comme le nom du th&egrave;me, l&rsquo;auteur et l&rsquo;URL, la description, etc.<\/p><p>Juste apr&egrave;s l&rsquo;en-t&ecirc;te, copiez et collez votre ancien code CSS dans le fichier. Enregistrez et fermez-le.<\/p><h4 class=\"wp-block-heading\" id=\"h-3-diviser-l-ancien-html-de-votre-site-web\"><strong>3. Diviser l&rsquo;ancien HTML de votre site web<\/strong><\/h4><p>WordPress utilise PHP pour extraire des informations de sa base de donn&eacute;es. Vous devez donc diviser l&rsquo;ancien HTML de votre site en diff&eacute;rentes parties pour permettre &agrave; WordPress de les assembler correctement.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"880\" height=\"660\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/03\/sample-website-preview.png\/public\" alt=\"Aper&ccedil;u de la conversion d'un site html vers WordPress\" class=\"wp-image-38831\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/03\/sample-website-preview.png\/w=880,fit=scale-down 880w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/03\/sample-website-preview.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/03\/sample-website-preview.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/03\/sample-website-preview.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 880px) 100vw, 880px\" \/><\/figure><\/div><p>Si cela semble compliqu&eacute;, rassurez-vous, le processus est assez simple. Commen&ccedil;ons par examiner notre <a href=\"\/fr\/tutoriels\/site-web-statique\"><strong>site web statique<\/strong><\/a> et son code.&nbsp;<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!DOCTYPE html&gt;\n&lt;!--[if lt IE 7]&gt;&lt;html lang=\"en-US\" class=\"ie6\"&gt;&lt;![endif]--&gt;\n&lt;!--[if IE 7]&gt;&lt;html lang=\"en-US\" class=\"ie7\"&gt;&lt;![endif]--&gt;\n&lt;!--[if IE 8]&gt;&lt;html lang=\"en-US\" class=\"ie8\"&gt;&lt;![endif]--&gt;\n&lt;!--[if IE 9]&gt;&lt;html lang=\"en-US\" class=\"ie9\"&gt;&lt;![endif]--&gt;\n&lt;!--[if gt IE 9]&gt;&lt;html lang=\"en-US\"&gt;&lt;![endif]--&gt;\n&lt;!--[if !IE]&gt;&lt;html lang=\"en-US\"&gt;&lt;![endif]--&gt;\n&lt;head&gt;\n&lt;meta charset=\"UTF-8\" \/&gt;\n&lt;meta name=\"viewport\" content=\"width=device-width\" \/&gt;\n&lt;title&gt;WordPress Writer and Instructor | RACHEL McCOLLIN&lt;\/title&gt;\n&lt;link rel=\"stylesheet\" type=\"text\/css\" media=\"all\" href=\"style.css\" \/&gt;\n&lt;link href=\"https:\/\/fonts.googleapis.com\/css?family=Assistant|Oswald\" rel=\"stylesheet\"&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  \n  &lt;div class=\"header-bg\"&gt;\n  \n    &lt;header role=\"banner\"&gt;\n  \n      &lt;hgroup class=\"site-name three-quarters left\"&gt;\n        \n        &lt;!-- site name and description - site name is inside a div element on all pages execpt the front page and\/or main blog page, where it is in a h1 element --&gt;\n        &lt;h1 id=\"site-title\" class=\"one-half-left\"&gt;\n          &lt;a href=\"https:\/\/rachelmccollin.com\/\" title=\"RACHEL McCOLLIN\" rel=\"home\"&gt;RACHEL McCOLLIN&lt;\/a&gt;\n        &lt;\/h1&gt;\n        \n        &lt;h2 id=\"site-description\"&gt;Fiction and Technical Writer&lt;\/h2&gt;\n      \n      &lt;\/hgroup&gt;\n  \n      &lt;div class=\"right quarter\"&gt;\n                \n          &lt;a class=\"toggle-nav\" href=\"#\"&gt;&#9776;&lt;\/a&gt;\n          \n      &lt;\/div&gt; &lt;!-- .right quarter --&gt;\n    \n    &lt;\/header&gt;&lt;!-- header --&gt;\n    \n  &lt;\/div&gt;&lt;!-- header-bg--&gt;\n  \n      \n  &lt;!-- full width navigation menu --&gt;\n  &lt;nav class=\"menu main\"&gt;\n      \n    &lt;div class=\"skip-link screen-reader-text\"&gt;&lt;a href=\"#content\" title=\"Skip to content\"&gt;Skip to content&lt;\/a&gt;&lt;\/div&gt;\n            \n    &lt;div class=\"main-nav\"&gt;\n      &lt;ul class=\"menu\"&gt;\n        &lt;li class=\"menu-item\"&gt;&lt;a href=\"https:\/\/rachelmccollin.com\/\"&gt;Home&lt;\/a&gt;&lt;\/li&gt;\n        &lt;li class=\"menu-item\"&gt;&lt;a href=\"https:\/\/rachelmccollin.com\/about-me\/\"&gt;About Me&lt;\/a&gt;&lt;\/li&gt;\n        &lt;li class=\"menu-item\"&gt;&lt;a href=\"https:\/\/rachelmccollin.com\/books\/\"&gt;Books&lt;\/a&gt;&lt;\/li&gt;\n        &lt;li class=\"menu-item\"&gt;&lt;a href=\"https:\/\/rachelmccollin.com\/bookclub\/\"&gt;Book Club&lt;\/a&gt;&lt;\/li&gt;\n        &lt;li class=\"menu-item\"&gt;&lt;a href=\"https:\/\/rachelmccollin.com\/blog\/\"&gt;Blog&lt;\/a&gt;&lt;\/li&gt;\n        &lt;li class=\"menu-item\"&gt;&lt;a href=\"https:\/\/rachelmccollin.com\/contact\/\"&gt;Contact&lt;\/a&gt;&lt;\/li&gt;\n      &lt;\/ul&gt;\n    &lt;\/div&gt;    \n    \n  &lt;\/nav&gt;&lt;!-- .main --&gt;\n    \n  &lt;div class=\"main\"&gt;\n    \n    &lt;div id=\"content\" class=\"two-thirds left\"&gt;\n      &lt;article class=\"post\"&gt;\n      \n        &lt;h2 class=\"entry-title\"&gt;Welcome to This Website&lt;\/h2&gt;\n    \n        &lt;section class=\"entry-content\"&gt;\n      \n          &lt;p&gt;This site is comprised of one static HTML file.&lt;\/p&gt;\n          &lt;p&gt;You will be able to add more content later via the WordPress admin screens.\n            \n          &lt;h3&gt;Here's a heading so you can check how it's styled&lt;\/h3&gt;\n          &lt;p&gt;And another paragraph underneath.&lt;\/p&gt;\n          &lt;p&gt;And a list:&lt;\/p&gt;\n          \n          &lt;ul&gt;\n            &lt;li&gt;Item 1&lt;\/li&gt;\n            &lt;li&gt;Item 2&lt;\/li&gt;\n            &lt;li&gt;And so on...&lt;\/li&gt;\n          &lt;\/ul&gt;\n            \n        \n        &lt;\/section&gt;&lt;!-- .entry-content --&gt;\n      &lt;\/article&gt;&lt;!-- #post-## --&gt;\n    &lt;\/div&gt;&lt;!-- #content --&gt;\n    \n    &lt;aside class=\"sidebar one-third right\"&gt;\n      &lt;aside class=\"widget-area\"&gt;\n        \n        &lt;div class=\"widget-container\"&gt;\n          \n          &lt;h3 class=\"widget-title\"&gt;Buy My Book&lt;\/h3&gt;\n          \n          &lt;img width=\"242\" height=\"300\" src=\"https:\/\/premium.wpmudev.org\/wp-content\/themes\/wpmudev-2015-1\/assets\/img\/projects\/snapshot-hero@2x.png?v=1\" alt=\"WordPress: Pushing the Limits by Rachel McCollin\" style=\"max-width: 100%; height: auto;\" \/&gt;\n          \n          &lt;p&gt;&lt;em&gt;WordPress: Pushing the Limits&lt;\/em&gt; will help you become a professional WordPress developer.&lt;\/p&gt;\n  \n        &lt;\/div&gt;\n      \n      &lt;\/aside&gt;\n    &lt;\/aside&gt;\n    \n  &lt;\/div&gt;&lt;!-- .main --&gt;\n  &lt;footer&gt;\n  \n    &lt;div class=\"fatfooter\"&gt;\n  \n      &lt;p&gt;Add footer content here with &lt;a href=\"#\"&gt;widget areas&lt;\/a&gt; - the tutorials will show you how.&lt;\/p&gt;\n  \n    &lt;\/div&gt;\n  &lt;\/footer&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre><p>Maintenant, ouvrez le fichier <strong>index.html<\/strong> de votre ancien site statique, nous allons le r&eacute;partir dans les fichiers WordPress nouvellement cr&eacute;&eacute;s. (Les exemples ci-dessous correspondent &agrave; notre balisage).<\/p><p><strong>header.php<\/strong><\/p><p>Tout ce qui se trouve entre le d&eacute;but de votre ancien code HTML jusqu&rsquo;&agrave; la zone de contenu principal va dans ce fichier. La zone de contenu principal est g&eacute;n&eacute;ralement identifi&eacute;e par <strong>&lt;main&gt;<\/strong> ou <strong>&lt;div class=&nbsp;&raquo;main&nbsp;&raquo;&gt;.<\/strong><\/p><p>De plus, juste avant l&rsquo;&eacute;l&eacute;ment <strong>&lt;\/head&gt;,<\/strong> ajoutez ce code : &lt;?php wp_head();?&gt;. Cela garantit le bon fonctionnement des extensions WordPress. Une fois termin&eacute;, enregistrez le fichier.<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!DOCTYPE html&gt;\n&lt;!--[if lt IE 7]&gt;&lt;html lang=\"en-US\" class=\"ie6\"&gt;&lt;![endif]--&gt;\n&lt;!--[if IE 7]&gt;&lt;html lang=\"en-US\" class=\"ie7\"&gt;&lt;![endif]--&gt;\n&lt;!--[if IE 8]&gt;&lt;html lang=\"en-US\" class=\"ie8\"&gt;&lt;![endif]--&gt;\n&lt;!--[if IE 9]&gt;&lt;html lang=\"en-US\" class=\"ie9\"&gt;&lt;![endif]--&gt;\n&lt;!--[if gt IE 9]&gt;&lt;html lang=\"en-US\"&gt;&lt;![endif]--&gt;\n&lt;!--[if !IE]&gt;&lt;html lang=\"en-US\"&gt;&lt;![endif]--&gt;\n&lt;head&gt;\n&lt;meta charset=\"UTF-8\" \/&gt;\n&lt;meta name=\"viewport\" content=\"width=device-width\" \/&gt;\n&lt;title&gt;WordPress Writer and Instructor | RACHEL McCOLLIN&lt;\/title&gt;\n&lt;link rel=\"stylesheet\" type=\"text\/css\" media=\"all\" href=\"style.css\" \/&gt;\n&lt;link href=\"https:\/\/fonts.googleapis.com\/css?family=Assistant|Oswald\" rel=\"stylesheet\"&gt;\n&lt;?php wp_head();?&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  \n  &lt;div class=\"header-bg\"&gt;\n  \n    &lt;header role=\"banner\"&gt;\n  \n      &lt;hgroup class=\"site-name three-quarters left\"&gt;\n        \n        &lt;!-- site name and description - site name is inside a div element on all pages execpt the front page and\/or main blog page, where it is in a h1 element --&gt;\n        &lt;h1 id=\"site-title\" class=\"one-half-left\"&gt;\n          &lt;a href=\"https:\/\/rachelmccollin.com\/\" title=\"RACHEL McCOLLIN\" rel=\"home\"&gt;RACHEL McCOLLIN&lt;\/a&gt;\n        &lt;\/h1&gt;\n        \n        &lt;h2 id=\"site-description\"&gt;Fiction and Technical Writer&lt;\/h2&gt;\n      \n      &lt;\/hgroup&gt;\n  \n      &lt;div class=\"right quarter\"&gt;\n                \n          &lt;a class=\"toggle-nav\" href=\"#\"&gt;&#9776;&lt;\/a&gt;\n          \n      &lt;\/div&gt; &lt;!-- .right quarter --&gt;\n    \n    &lt;\/header&gt;&lt;!-- header --&gt;\n    \n  &lt;\/div&gt;&lt;!-- header-bg--&gt;\n  \n      \n  &lt;!-- full width navigation menu --&gt;\n  &lt;nav class=\"menu main\"&gt;\n      \n    &lt;div class=\"skip-link screen-reader-text\"&gt;&lt;a href=\"#content\" title=\"Skip to content\"&gt;Skip to content&lt;\/a&gt;&lt;\/div&gt;\n            \n    &lt;div class=\"main-nav\"&gt;\n      &lt;ul class=\"menu\"&gt;\n        &lt;li class=\"menu-item\"&gt;&lt;a href=\"https:\/\/rachelmccollin.com\/\"&gt;Home&lt;\/a&gt;&lt;\/li&gt;\n        &lt;li class=\"menu-item\"&gt;&lt;a href=\"https:\/\/rachelmccollin.com\/about-me\/\"&gt;About Me&lt;\/a&gt;&lt;\/li&gt;\n        &lt;li class=\"menu-item\"&gt;&lt;a href=\"https:\/\/rachelmccollin.com\/books\/\"&gt;Books&lt;\/a&gt;&lt;\/li&gt;\n        &lt;li class=\"menu-item\"&gt;&lt;a href=\"https:\/\/rachelmccollin.com\/bookclub\/\"&gt;Book Club&lt;\/a&gt;&lt;\/li&gt;\n        &lt;li class=\"menu-item\"&gt;&lt;a href=\"https:\/\/rachelmccollin.com\/blog\/\"&gt;Blog&lt;\/a&gt;&lt;\/li&gt;\n        &lt;li class=\"menu-item\"&gt;&lt;a href=\"https:\/\/rachelmccollin.com\/contact\/\"&gt;Contact&lt;\/a&gt;&lt;\/li&gt;\n      &lt;\/ul&gt;\n    &lt;\/div&gt;    \n    \n  &lt;\/nav&gt;&lt;!-- .main --&gt;<\/pre><p><strong>sidebar.php<\/strong><\/p><p>Tout ce qui appartient &agrave; la section <strong>&lt;aside &hellip; &lt;\/aside&gt;<\/strong> dans votre ancien code HTML va dans ce fichier. Une fois termin&eacute;, enregistrez le fichier.<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;aside class=\"sidebar one-third right\"&gt;\n      &lt;aside class=\"widget-area\"&gt;\n        \n        &lt;div class=\"widget-container\"&gt;\n          \n          &lt;h3 class=\"widget-title\"&gt;Buy My Book&lt;\/h3&gt;\n          \n          &lt;img width=\"242\" height=\"300\" src=\"https:\/\/premium.wpmudev.org\/wp-content\/themes\/wpmudev-2015-1\/assets\/img\/projects\/snapshot-hero@2x.png?v=1\" alt=\"WordPress: Pushing the Limits by Rachel McCollin\" style=\"max-width: 100%; height: auto;\" \/&gt;\n          \n          &lt;p&gt;&lt;em&gt;WordPress: Pushing the Limits&lt;\/em&gt; will help you become a professional WordPress developer.&lt;\/p&gt;\n  \n        &lt;\/div&gt;\n      \n      &lt;\/aside&gt;\n    &lt;\/aside&gt;<\/pre><p><strong>footer.php<\/strong><\/p><p>Maintenant, tout ce qui reste jusqu&rsquo;&agrave; la fin du fichier constitue g&eacute;n&eacute;ralement les informations de pied de page, &agrave; placer dans ce fichier.<\/p><p>Juste avant la balise de fermeture <strong>&lt;\/body&gt;,<\/strong> ajoutez ce code : &lt;?php wp_footer();?&gt; pour la m&ecirc;me raison que dans <strong>header.php<\/strong>. Une fois termin&eacute;, enregistrez-le.<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;\/div&gt;&lt;!-- .main --&gt;\n  &lt;footer&gt;\n  \n    &lt;div class=\"fatfooter\"&gt;\n  \n      &lt;p&gt;Add footer content here with &lt;a href=\"#\"&gt;widget areas&lt;\/a&gt; - the tutorials will show you how.&lt;\/p&gt;\n  \n    &lt;\/div&gt;\n  &lt;\/footer&gt;\n  &lt;?php wp_footer();?&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre><p>Vous avez maintenant termin&eacute; avec l&rsquo;ancien fichier <strong>index.html<\/strong>. Vous pouvez le fermer ainsi que les autres fichiers dans votre dossier de th&egrave;me, &agrave; l&rsquo;exception de <strong>header.php<\/strong> et <strong>index.php<\/strong>. Ces derniers n&eacute;cessitent encore quelques modifications.<\/p><h4 class=\"wp-block-heading\" id=\"h-4-adapter-le-style-au-format-wordpress\"><strong>4. Adapter le style au format WordPress<\/strong><\/h4><p>Dans l&rsquo;en-t&ecirc;te, vous devez simplement modifier la r&eacute;f&eacute;rence &agrave; la feuille de style du format HTML vers WordPress. Recherchez le lien existant dans la section <strong>&lt;head&gt;.<\/strong> Dans mon cas, il ressemble &agrave; ceci :<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;link rel=\"stylesheet\" type=\"text\/css\" media=\"all\" href=\"style.css\" \/&gt;<\/pre><p>Remplacez-le par cette ligne :<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;link rel=\"stylesheet\" href=\"&lt;?php echo get_template_directory_uri(); ?&gt;\/style.css\" type=\"text\/css\" media=\"all\" \/&gt;<\/pre><p>Vous pouvez maintenant enregistrer et fermer le fichier <strong>header.php<\/strong>.<\/p><p>Passons au fichier <strong>index.php<\/strong>. Il devrait &ecirc;tre vide pour le moment. Copiez et collez ces lignes de code :<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?php get_header(); ?&gt;\n&lt;?php get_sidebar(); ?&gt;\n&lt;?php get_footer(); ?&gt;<\/pre><p>Ce code appellera les autres fichiers de votre th&egrave;me WordPress. Vous remarquerez l&rsquo;espace entre l&rsquo;en-t&ecirc;te et la barre lat&eacute;rale. C&rsquo;est l&agrave; que vous ajouterez <strong>La Boucle<\/strong>.<\/p><p>La Boucle traitera chaque article pour l&rsquo;affichage et le formatera selon les crit&egrave;res d&eacute;finis &agrave; l&rsquo;int&eacute;rieur des balises de La Boucle. C&rsquo;est un &eacute;l&eacute;ment essentiel pour ajouter du contenu dynamique &agrave; votre site WordPress.<\/p><p>Pour ce faire, collez le code suivant juste apr&egrave;s <strong>&lt;?php get_header(); ?&gt;<\/strong> :<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?php while ( have_posts() ) : the_post(); ?&gt;\n  &lt;article class=\"&lt;?php post_class(); ?&gt;\" id=\"post-&lt;?php the_ID(); ?&gt;\"&gt;\n    &lt;h2 class=\"entry-title\"&gt;&lt;?php the_title(); ?&gt;&lt;\/h2&gt;\n    &lt;?php if ( !is_page() ):?&gt;\n      &lt;section class=\"entry-meta\"&gt;\n      &lt;p&gt;Posted on &lt;?php the_date();?&gt; by &lt;?php the_author();?&gt;&lt;\/p&gt;\n      &lt;\/section&gt;\n    &lt;?php endif; ?&gt;\n    &lt;section class=\"entry-content\"&gt;\n      &lt;?php the_content(); ?&gt;\n    &lt;\/section&gt;\n    &lt;section class=\"entry-meta\"&gt;&lt;?php if ( count( get_the_category() ) ) : ?&gt;\n      &lt;span class=\"category-links\"&gt;\n        Posted under: &lt;?php echo get_the_category_list( ', ' ); ?&gt;\n      &lt;\/span&gt;\n    &lt;?php endif; ?&gt;&lt;\/section&gt;\n  &lt;\/article&gt;\n&lt;?php endwhile; ?&gt;<\/pre><p>Une fois termin&eacute;, enregistrez votre fichier <strong>index.php<\/strong> et fermez-le. Vous avez cr&eacute;&eacute; avec succ&egrave;s un th&egrave;me WordPress. Maintenant, vous pouvez l&rsquo;ajouter &agrave; votre site WordPress.<\/p><h4 class=\"wp-block-heading\" id=\"h-5-televerser-votre-theme-sur-wordpress\"><strong>5. T&eacute;l&eacute;verser votre th&egrave;me sur WordPress<\/strong><\/h4><p>Apr&egrave;s avoir termin&eacute; la cr&eacute;ation du th&egrave;me de base, vous pouvez le t&eacute;l&eacute;verser sur WordPress. Tous les fichiers de votre dossier de th&egrave;me doivent rester ensemble. Pour cela, compressez-les en format zip.<\/p><p>Acc&eacute;dez &agrave; votre <strong>Tableau de bord d&rsquo;administration<\/strong> WordPress. Allez dans <strong>Apparence -&gt; Th&egrave;mes<\/strong>. Cliquez sur <strong>Ajouter un th&egrave;me -&gt; T&eacute;l&eacute;verser un th&egrave;me<\/strong>.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"223\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/03\/Screenshot-2025-03-06-181248.png\/public\" alt=\"T&eacute;l&eacute;verser le th&egrave;me sur WP\" class=\"wp-image-38832\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/03\/Screenshot-2025-03-06-181248.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/03\/Screenshot-2025-03-06-181248.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/03\/Screenshot-2025-03-06-181248.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/03\/Screenshot-2025-03-06-181248.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><p>Dans le menu, localisez le fichier zip de votre th&egrave;me, t&eacute;l&eacute;versez-le et cliquez sur <strong>Installer<\/strong>. N&rsquo;oubliez pas d&rsquo;activer le th&egrave;me ensuite.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"900\" height=\"541\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/03\/theme-uploaded-to-wordpress.png\/public\" alt=\"Th&egrave;me t&eacute;l&eacute;vers&eacute; sur WordPress\" class=\"wp-image-38833\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/03\/theme-uploaded-to-wordpress.png\/w=900,fit=scale-down 900w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/03\/theme-uploaded-to-wordpress.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/03\/theme-uploaded-to-wordpress.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/03\/theme-uploaded-to-wordpress.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure><\/div><p>Maintenant, l&rsquo;apparence de votre site devrait ressembler &agrave; celle de l&rsquo;ancien site. Gardez &agrave; l&rsquo;esprit que m&ecirc;me si le design de base semble identique, d&rsquo;autres ajustements sont n&eacute;cessaires pour parfaire l&rsquo;int&eacute;gration.<\/p><p>Par exemple, vous ne pouvez pas encore utiliser certaines fonctionnalit&eacute;s WordPress comme les zones de widgets. Vous devrez &eacute;galement adapter le balisage CSS pour l&rsquo;int&eacute;grer harmonieusement au design WordPress.<\/p><h3 class=\"wp-block-heading\" id=\"h-abandonner-le-design-et-ne-conserver-que-le-contenu\"><strong>Abandonner le design et ne conserver que le contenu<\/strong><\/h3><p>Si vous pr&eacute;f&eacute;rez laisser de c&ocirc;t&eacute; l&rsquo;ancien design de votre site HTML et utiliser un nouveau th&egrave;me WordPress, cette option est pour vous. Cette m&eacute;thode simplifie &eacute;galement l&rsquo;importation du contenu.<\/p><p>Il vous suffit d&rsquo;<strong>installer le th&egrave;me<\/strong> de votre choix, de l&rsquo;activer, puis de suivre les &eacute;tapes ci-dessous.<\/p><p>\n\n\n<div><p class=\"important\"><strong>Important&nbsp;!<\/strong><br>\nPensez &agrave; <a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/sauvegarde-wordpress\">sauvegarder votre site WordPress<\/a> avant toute modification.<\/p><\/div>\n\n\n\n<\/p><h4 class=\"wp-block-heading\" id=\"h-1-installer-import-plugin-2\"><strong>1. Installer Import Plugin 2<\/strong><\/h4><p>Vous devez installer <a href=\"https:\/\/wordpress.org\/plugins\/import-html-pages\/\" target=\"_blank\" rel=\"noopener\"><strong>Import Plugin<\/strong> <strong>2<\/strong><\/a>. Allez dans <strong>Extensions<\/strong> -&gt; <strong>Ajouter une extension <\/strong>et recherchez-le par son nom. Vous le trouverez un peu plus bas dans la liste, car c&rsquo;est une extension assez ancienne mais toujours efficace. Cliquez sur <strong>Installer<\/strong> puis <strong>Activer<\/strong>.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"900\" height=\"483\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/03\/html-import-plugin.png\/public\" alt=\"Extension HTML Import\" class=\"wp-image-38834\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/03\/html-import-plugin.png\/w=900,fit=scale-down 900w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/03\/html-import-plugin.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/03\/html-import-plugin.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/03\/html-import-plugin.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure><\/div><h4 class=\"wp-block-heading\" id=\"h-2-preparer-l-importation\"><strong>2. Pr&eacute;parer l&rsquo;importation<\/strong><\/h4><p>Maintenant, acc&eacute;dez &agrave; <strong>R&eacute;glages -&gt; HTML Import<\/strong>. Vous pouvez importer plusieurs pages &agrave; la fois ou une seule.<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"900\" height=\"593\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/03\/html-import-setting.png\/public\" alt=\"Param&egrave;tres d'importation HTML\" class=\"wp-image-38835\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/03\/html-import-setting.png\/w=900,fit=scale-down 900w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/03\/html-import-setting.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/03\/html-import-setting.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/03\/html-import-setting.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure><p>Vous remarquerez que l&rsquo;extension indique un chemin sp&eacute;cifique comme <strong>html-files-to-import<\/strong>. Cela signifie que vous devez t&eacute;l&eacute;verser le fichier HTML sur le m&ecirc;me serveur que votre installation WordPress. Pour plus de d&eacute;tails, consultez le <a href=\"http:\/\/stephanieleary.com\/code\/wordpress\/html-import\/html-import-2-user-guide\/\" target=\"_blank\" rel=\"noopener\"><strong>guide officiel de l&rsquo;utilisateur<\/strong><\/a>.<\/p><p>Dans ce tutoriel, nous allons importer le contenu. Pour ce faire, choisissez la balise HTML en haut et configurez les trois champs suivants.<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"900\" height=\"479\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/03\/content-import-setting.png\/public\" alt=\"Param&egrave;tre d'importation de contenu\" class=\"wp-image-38836\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/03\/content-import-setting.png\/w=900,fit=scale-down 900w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/03\/content-import-setting.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/03\/content-import-setting.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/03\/content-import-setting.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure><p>Une fois termin&eacute;, cliquez sur <strong>Enregistrer les param&egrave;tres<\/strong>.<\/p><h4 class=\"wp-block-heading\" id=\"h-3-commencer-l-importation-de-votre-contenu\"><strong>3. Commencer l&rsquo;importation de votre contenu<\/strong><\/h4><p>Le bouton <strong>Importer les fichiers<\/strong> sera disponible apr&egrave;s l&rsquo;enregistrement des param&egrave;tres. Si vous l&rsquo;avez manqu&eacute;, vous pouvez &eacute;galement y acc&eacute;der via <strong>Outils<\/strong> -&gt; <strong>Importer<\/strong> et cliquer sur <strong>Lancer l&rsquo;importateur <\/strong>dans la section HTML.<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"900\" height=\"264\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/03\/start-import-content.png\/public\" alt=\"Commencer l'importation du contenu\" class=\"wp-image-38837\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/03\/start-import-content.png\/w=900,fit=scale-down 900w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/03\/start-import-content.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/03\/start-import-content.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/03\/start-import-content.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure><p>Choisissez si vous souhaitez importer un r&eacute;pertoire de fichiers ou un seul fichier, puis cliquez sur <strong>Soumettre<\/strong>. Une fois l&rsquo;op&eacute;ration termin&eacute;e, tout votre contenu sera disponible sur votre nouveau site WordPress.<\/p><h3 class=\"wp-block-heading\" id=\"h-utiliser-un-theme-enfant-adapte-d-un-theme-existant\"><strong>Utiliser un th&egrave;me enfant adapt&eacute; d&rsquo;un th&egrave;me existant<\/strong><\/h3><p>Si vous souhaitez conserver certains aspects du design de votre ancien site mais trouvez la premi&egrave;re m&eacute;thode trop complexe, l&rsquo;utilisation d&rsquo;un th&egrave;me enfant peut &ecirc;tre une excellente alternative.<\/p><p>Les th&egrave;mes enfants vous permettent de profiter des milliers de th&egrave;mes existants (appel&eacute;s th&egrave;mes parents) sur WordPress et de construire votre nouveau site sur cette base.<\/p><p>Vous pouvez ainsi modifier l&rsquo;apparence de votre site sans alt&eacute;rer le code source du th&egrave;me parent. Vous conserverez toutes vos modifications m&ecirc;me lors des mises &agrave; jour du th&egrave;me.<\/p><p>Nous avons r&eacute;dig&eacute; un article plus d&eacute;taill&eacute; sur <strong>comment cr&eacute;er<\/strong> un th&egrave;me enfant WordPress. Dans ce tutoriel, nous utiliserons <a href=\"https:\/\/wordpress.org\/plugins\/childify-me\/\" target=\"_blank\" rel=\"noopener\"><strong>Childify Me<\/strong><\/a> pour simplifier le processus pour les d&eacute;butants.<\/p><p>\n\n\n<div><p class=\"important\"><strong>Important&nbsp;!<br>\n<\/strong>Effectuez toujours une sauvegarde de votre site WordPress avant d&rsquo;apporter des modifications.<\/p><\/div>\n\n\n\n<\/p><h4 class=\"wp-block-heading\" id=\"h-1-choisir-un-theme-approprie\"><strong>1. Choisir un th&egrave;me appropri&eacute;<\/strong><\/h4><p>Vous devez trouver un th&egrave;me qui servira de base &agrave; votre projet. L&rsquo;id&eacute;al serait de choisir un th&egrave;me dont le design se rapproche de celui de votre ancien site, afin de limiter les modifications ult&eacute;rieures.<\/p><p>Parcourez le <a href=\"https:\/\/wordpress.org\/themes\/\" target=\"_blank\" rel=\"noopener\"><strong>r&eacute;pertoire de th&egrave;mes WordPress<\/strong><\/a> pour trouver un candidat adapt&eacute;. Dans ce tutoriel, nous utiliserons le th&egrave;me <a href=\"https:\/\/wordpress.org\/themes\/twentyseventeen\/\" target=\"_blank\" rel=\"noopener\"><strong>Twenty Seventeen<\/strong><\/a> comme point de d&eacute;part.<\/p><h4 class=\"wp-block-heading\" id=\"h-2-installer-childify-me\"><strong>2. Installer<\/strong> <strong>Childify Me<\/strong><\/h4><p>Allez dans <strong>Extensions<\/strong> -&gt; <strong>Ajouter une extension <\/strong>et recherchez-le par son nom. <strong>Installez-le<\/strong> et <strong>activez-le<\/strong>.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"831\" height=\"306\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/03\/Screenshot-2025-03-06-182417.png\/public\" alt=\"Installer Childfy Me\" class=\"wp-image-38838\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/03\/Screenshot-2025-03-06-182417.png\/w=831,fit=scale-down 831w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/03\/Screenshot-2025-03-06-182417.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/03\/Screenshot-2025-03-06-182417.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/03\/Screenshot-2025-03-06-182417.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 831px) 100vw, 831px\" \/><\/figure><\/div><p>\n\n<div class=\"protip\">\n                    <h4 class=\"title\">Astuce Pro<\/h4>\n                    <p>L&rsquo;extension Childify Me cr&eacute;e automatiquement les fichiers style.css et function.php. Si vous souhaitez ajouter des fonctions personnalis&eacute;es dans un fichier functions.php ou cr&eacute;er de nouveaux dossiers\/fichiers, vous pouvez les t&eacute;l&eacute;verser via un client FTP. Si vous utilisez Hostinger, notre Gestionnaire de fichiers vous permettra de g&eacute;rer vos fichiers directement depuis le control panel.<\/p>\n                <\/div>\n\n\n\n<\/p><h4 class=\"wp-block-heading\" id=\"h-3-personnaliser-le-theme-parent\"><strong>3. Personnaliser le th&egrave;me parent<\/strong><\/h4><p>Maintenant, allez dans <strong>Apparence<\/strong> -&gt; <strong>Th&egrave;mes<\/strong>. Assurez-vous que le th&egrave;me parent est bien activ&eacute;. Cliquez sur <strong>Personnaliser<\/strong> pour acc&eacute;der au panneau de personnalisation de votre th&egrave;me actif.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"503\" height=\"398\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/03\/Screenshot-2025-03-06-183448.png\/public\" alt=\"Personnaliser le th&egrave;me actif\" class=\"wp-image-38840\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/03\/Screenshot-2025-03-06-183448.png\/w=503,fit=scale-down 503w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/03\/Screenshot-2025-03-06-183448.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/03\/Screenshot-2025-03-06-183448.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 503px) 100vw, 503px\" \/><\/figure><\/div><h4 class=\"wp-block-heading\" id=\"h-4-childifier-le-theme-parent\"><strong>4. &laquo; Childifier &raquo; le th&egrave;me parent<\/strong><\/h4><p>Cliquez sur le bouton <strong>Childify Me<\/strong>, et attribuez un nom &agrave; votre th&egrave;me enfant. Nous vous conseillons de choisir un nom similaire &agrave; celui du th&egrave;me parent. Cliquez sur <strong>Cr&eacute;er<\/strong>. Une fois termin&eacute;, cliquez sur <strong>&laquo;&nbsp;Preview and Activate&nbsp;&raquo;<\/strong>.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"600\" height=\"1166\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/03\/childify-the-parent-theme.png\/public\" alt=\"Childifier le th&egrave;me parent\" class=\"wp-image-38841\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/03\/childify-the-parent-theme.png\/w=600,fit=scale-down 600w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/03\/childify-the-parent-theme.png\/w=154,fit=scale-down 154w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/03\/childify-the-parent-theme.png\/w=527,fit=scale-down 527w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/03\/childify-the-parent-theme.png\/w=77,fit=scale-down 77w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/figure><\/div><h4 class=\"wp-block-heading\"><strong>5. Commencer l&rsquo;importation de votre contenu<\/strong><\/h4><p>Maintenant que votre nouveau site WordPress ressemble visuellement &agrave; l&rsquo;ancienne version HTML, il ne reste plus qu&rsquo;&agrave; importer le contenu. Pour cela, vous pouvez utiliser la m&eacute;thode d&eacute;crite pr&eacute;c&eacute;demment.<\/p><p>Vous avez r&eacute;ussi &agrave; migrer votre site web HTML vers WordPress. F&eacute;licitations !<\/p><p>\n\n\n<div class=\"protip\">\n                    <h4 class=\"title\">D&eacute;couvrez d'autres m&eacute;thodes de migration vers WordPress<\/h4>\n                    <p><a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/migrer-wix-vers-wordpress\">Wix vers WordPress<\/a><br>\n<a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/transferer-blogger-wordpress\/\">Blogger vers WordPress<\/a><br>\n<\/p>\n                <\/div>\n\n\n\n<\/p><h4 class=\"wp-block-heading\" id=\"h-\"><\/h4><h2 class=\"wp-block-heading\" id=\"h-conclusion\"><strong>Conclusion<\/strong><\/h2><p>Nous avons explor&eacute; les &eacute;tapes essentielles pour convertir un site HTML en WordPress et les diff&eacute;rentes m&eacute;thodes disponibles.<\/p><p>Pour r&eacute;sumer &ndash; vous pouvez cr&eacute;er un th&egrave;me WordPress &agrave; partir de z&eacute;ro. C&rsquo;est une m&eacute;thode exigeante mais excellente si vous ma&icirc;trisez le code et disposez de temps &agrave; y consacrer.<\/p><p>Vous pouvez &eacute;galement utiliser des extensions pour faciliter la conversion et importer tout votre contenu dans son nouvel environnement.<\/p><p>Nous esp&eacute;rons que cet article vous aidera dans votre d&eacute;marche. &Agrave; bient&ocirc;t !<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Vous avez probablement consult&eacute; les statistiques r&eacute;centes indiquant que WordPress alimente actuellement 33 % des sites web sur internet. En tant que propri&eacute;taire d&rsquo;un site web, vous pourriez envisager de convertir votre site web HTML statique en WordPress. Il est toujours acceptable d&rsquo;avoir un site web en HTML, surtout avec HTML5 qui est performant pour [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/fr\/tutoriels\/comment-convertir-html-vers-wordpress\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":261,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"%title%","rank_math_description":"Vous souhaitez convertir votre site HTML vers WordPress\u00a0? Suivez notre tutoriel d\u00e9taill\u00e9 pour une transition facile et rapide.","rank_math_focus_keyword":"html vers wordpress","footnotes":""},"categories":[4777],"tags":[],"class_list":["post-38826","post","type-post","status-publish","format-standard","hentry","category-wordpress"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/how-to-convert-html-to-wordpress","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/converter-site-html-para-wordpress","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/comment-convertir-html-vers-wordpress","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/cara-convert-html-ke-wordpress","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/how-to-convert-html-to-wordpress","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/how-to-convert-html-to-wordpress","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/how-to-convert-html-to-wordpress","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/converter-site-html-para-wordpress","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/how-to-convert-html-to-wordpress","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/how-to-convert-html-to-wordpress","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/how-to-convert-html-to-wordpress","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/how-to-convert-html-to-wordpress","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts\/38826","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/users\/261"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/comments?post=38826"}],"version-history":[{"count":7,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts\/38826\/revisions"}],"predecessor-version":[{"id":38843,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts\/38826\/revisions\/38843"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/media?parent=38826"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/categories?post=38826"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/tags?post=38826"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}