Comment convertir un site HTML vers WordPress

Vous avez probablement consulté les statistiques récentes indiquant que WordPress alimente actuellement 33 % des sites web sur internet. En tant que propriétaire d’un site web, vous pourriez envisager de convertir votre site web HTML statique en WordPress.

Il est toujours acceptable d’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èmes, extensions et widgets pour améliorer votre site et enrichir ses fonctionnalités.

Il est également facile à gérer. Vous pouvez ajouter et supprimer du contenu sans connaître le code. Avec un site HTML, c’est une toute autre histoire. À moins de savoir coder, la mise à jour du contenu en HTML peut s’avérer complexe.

Dans cet article, vous découvrirez comment convertir du HTML statique en WordPress, et les différentes méthodes pour y parvenir. Commençons.

Points à considérer avant la migration

Avant de vous lancer, vous devez prendre en compte quelques éléments.

• Service d’hébergement. Vous devez disposer d’un plan d’hébergement avant de commencer, car les exigences peuvent différer de celles d’un site HTML. Vous aurez besoin d’un hébergement spécifique pour votre site WordPress. Alternativement, vous pouvez héberger votre site en local et le mettre en ligne ultérieurement.
• Éditeur de code. Vous aurez besoin d’un éditeur de code comme Notepad++, Atom, Sublime, etc., pour modifier le code HTML de votre site.
• Temps et argent. Vous devez évaluer le temps et l’argent que vous êtes prêt à investir. Si vous êtes motivé et déterminé à apprendre, ce tutoriel est parfait pour vous. Vous pouvez également faire appel à des développeurs ou utiliser des applications de migration WordPress pour faciliter la conversion. Embaucher quelqu’un est certes plus simple, mais vous perdrez l’opportunité d’apprendre, et le processus pourrait s’avérer coûteux.

Les différentes méthodes pour convertir HTML vers WordPress

Il existe plusieurs façons de convertir HTML vers WordPress, avec différents niveaux de difficulté. Les voici :

• Créer un thème WordPress à partir d’un site HTML statique. Si vous souhaitez conserver intact le design de votre ancien site HTML, cette option est faite pour vous. C’est également la méthode la plus complexe et elle nécessite des compétences en programmation. Mais ne vous laissez pas décourager. Il s’agit essentiellement de copier/coller l’ancien code HTML dans plusieurs fichiers PHP.
• Abandonner le design et ne conserver que le contenu. Si vous êtes prêt à laisser de côté l’ancien design de votre site et à adopter un thème WordPress pour un nouveau départ, cette option est idéale. Vous n’aurez qu’à transférer le contenu vers son nouvel environnement.
• Utiliser un thème enfant adapté d’un thème existant. C’est probablement la solution la plus simple si vous souhaitez conserver l’apparence de votre ancien site. Avec cette méthode, vous utiliserez un thème WordPress préexistant comme base. En bonus, vous pourrez immédiatement profiter des fonctionnalités avancées de WordPress.

Créer un thème WordPress à partir d’un site HTML statique

Si vous souhaitez recréer votre site HTML en WordPress en conservant son apparence, voici comment procéder. Dans ce tutoriel, nous utilisons un modèle HTML statique de Rachel McCollin.

1. Créer un dossier de thème et les fichiers de base

Créez un nouveau dossier de thème sur votre bureau et nommez-le. Nous appellerons notre dossier my-theme. Ensuite, ouvrez votre éditeur de code et créez les fichiers suivants :

• style.css
• index.php
• header.php
• sidebar.php
• footer.php

Notez que certains de ces fichiers peuvent être facultatifs, selon les fonctionnalités et le design de votre thème. Pour en savoir plus sur leurs rôles, consultez notre article sur la création d’un thème WordPress avec HTML5.

Après avoir créé les fichiers, gardez l’éditeur ouvert. Nous y reviendrons plus tard.

2. Transformer l’ancien CSS du site en feuille de style WordPress

Maintenant, nous allons créer une feuille de style WordPress en copiant votre ancien code CSS. Ouvrez le fichier style.css et collez ce code :

/*
Theme Name: My Theme
Author: LakiGarang
Author URL: https://hostinger.com/tutorials/author/luqman
Description: Un thème de développement, du HTML statique à WordPress
Version: 1,0
License: GNU General Public License v2 or later
License URL: http://www.gnu.org/licenses/gpl-2.0.html
*/

Ce code indique à WordPress qu’il s’agit d’un en-tête de feuille de style de thème. Vous pouvez personnaliser les détails comme le nom du thème, l’auteur et l’URL, la description, etc.

Juste après l’en-tête, copiez et collez votre ancien code CSS dans le fichier. Enregistrez et fermez-le.

3. Diviser l’ancien HTML de votre site web

WordPress utilise PHP pour extraire des informations de sa base de données. Vous devez donc diviser l’ancien HTML de votre site en différentes parties pour permettre à WordPress de les assembler correctement.

Si cela semble compliqué, rassurez-vous, le processus est assez simple. Commençons par examiner notre site web statique et son code. 

<!DOCTYPE html>
<!--[if lt IE 7]><html lang="en-US" class="ie6"><![endif]-->
<!--[if IE 7]><html lang="en-US" class="ie7"><![endif]-->
<!--[if IE 8]><html lang="en-US" class="ie8"><![endif]-->
<!--[if IE 9]><html lang="en-US" class="ie9"><![endif]-->
<!--[if gt IE 9]><html lang="en-US"><![endif]-->
<!--[if !IE]><html lang="en-US"><![endif]-->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>WordPress Writer and Instructor | RACHEL McCOLLIN</title>
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
<link href="https://fonts.googleapis.com/css?family=Assistant|Oswald" rel="stylesheet">
</head>
<body>
  
  <div class="header-bg">
  
    <header role="banner">
  
      <hgroup class="site-name three-quarters left">
        
        <!-- 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 -->
        <h1 id="site-title" class="one-half-left">
          <a href="https://rachelmccollin.com/" title="RACHEL McCOLLIN" rel="home">RACHEL McCOLLIN</a>
        </h1>
        
        <h2 id="site-description">Fiction and Technical Writer</h2>
      
      </hgroup>
  
      <div class="right quarter">
                
          <a class="toggle-nav" href="#">☰</a>
          
      </div> <!-- .right quarter -->
    
    </header><!-- header -->
    
  </div><!-- header-bg-->
  
      
  <!-- full width navigation menu -->
  <nav class="menu main">
      
    <div class="skip-link screen-reader-text"><a href="#content" title="Skip to content">Skip to content</a></div>
            
    <div class="main-nav">
      <ul class="menu">
        <li class="menu-item"><a href="https://rachelmccollin.com/">Home</a></li>
        <li class="menu-item"><a href="https://rachelmccollin.com/about-me/">About Me</a></li>
        <li class="menu-item"><a href="https://rachelmccollin.com/books/">Books</a></li>
        <li class="menu-item"><a href="https://rachelmccollin.com/bookclub/">Book Club</a></li>
        <li class="menu-item"><a href="https://rachelmccollin.com/blog/">Blog</a></li>
        <li class="menu-item"><a href="https://rachelmccollin.com/contact/">Contact</a></li>
      </ul>
    </div>    
    
  </nav><!-- .main -->
    
  <div class="main">
    
    <div id="content" class="two-thirds left">
      <article class="post">
      
        <h2 class="entry-title">Welcome to This Website</h2>
    
        <section class="entry-content">
      
          <p>This site is comprised of one static HTML file.</p>
          <p>You will be able to add more content later via the WordPress admin screens.
            
          <h3>Here's a heading so you can check how it's styled</h3>
          <p>And another paragraph underneath.</p>
          <p>And a list:</p>
          
          <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>And so on...</li>
          </ul>
            
        
        </section><!-- .entry-content -->
      </article><!-- #post-## -->
    </div><!-- #content -->
    
    <aside class="sidebar one-third right">
      <aside class="widget-area">
        
        <div class="widget-container">
          
          <h3 class="widget-title">Buy My Book</h3>
          
          <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;" />
          
          <p><em>WordPress: Pushing the Limits</em> will help you become a professional WordPress developer.</p>
  
        </div>
      
      </aside>
    </aside>
    
  </div><!-- .main -->
  <footer>
  
    <div class="fatfooter">
  
      <p>Add footer content here with <a href="#">widget areas</a> - the tutorials will show you how.</p>
  
    </div>
  </footer>
</body>
</html>

Maintenant, ouvrez le fichier index.html de votre ancien site statique, nous allons le répartir dans les fichiers WordPress nouvellement créés. (Les exemples ci-dessous correspondent à notre balisage).

header.php

Tout ce qui se trouve entre le début de votre ancien code HTML jusqu’à la zone de contenu principal va dans ce fichier. La zone de contenu principal est généralement identifiée par <main> ou <div class=”main”>.

De plus, juste avant l’élément </head>, ajoutez ce code : <?php wp_head();?>. Cela garantit le bon fonctionnement des extensions WordPress. Une fois terminé, enregistrez le fichier.

<!DOCTYPE html>
<!--[if lt IE 7]><html lang="en-US" class="ie6"><![endif]-->
<!--[if IE 7]><html lang="en-US" class="ie7"><![endif]-->
<!--[if IE 8]><html lang="en-US" class="ie8"><![endif]-->
<!--[if IE 9]><html lang="en-US" class="ie9"><![endif]-->
<!--[if gt IE 9]><html lang="en-US"><![endif]-->
<!--[if !IE]><html lang="en-US"><![endif]-->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>WordPress Writer and Instructor | RACHEL McCOLLIN</title>
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
<link href="https://fonts.googleapis.com/css?family=Assistant|Oswald" rel="stylesheet">
<?php wp_head();?>
</head>
<body>
  
  <div class="header-bg">
  
    <header role="banner">
  
      <hgroup class="site-name three-quarters left">
        
        <!-- 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 -->
        <h1 id="site-title" class="one-half-left">
          <a href="https://rachelmccollin.com/" title="RACHEL McCOLLIN" rel="home">RACHEL McCOLLIN</a>
        </h1>
        
        <h2 id="site-description">Fiction and Technical Writer</h2>
      
      </hgroup>
  
      <div class="right quarter">
                
          <a class="toggle-nav" href="#">☰</a>
          
      </div> <!-- .right quarter -->
    
    </header><!-- header -->
    
  </div><!-- header-bg-->
  
      
  <!-- full width navigation menu -->
  <nav class="menu main">
      
    <div class="skip-link screen-reader-text"><a href="#content" title="Skip to content">Skip to content</a></div>
            
    <div class="main-nav">
      <ul class="menu">
        <li class="menu-item"><a href="https://rachelmccollin.com/">Home</a></li>
        <li class="menu-item"><a href="https://rachelmccollin.com/about-me/">About Me</a></li>
        <li class="menu-item"><a href="https://rachelmccollin.com/books/">Books</a></li>
        <li class="menu-item"><a href="https://rachelmccollin.com/bookclub/">Book Club</a></li>
        <li class="menu-item"><a href="https://rachelmccollin.com/blog/">Blog</a></li>
        <li class="menu-item"><a href="https://rachelmccollin.com/contact/">Contact</a></li>
      </ul>
    </div>    
    
  </nav><!-- .main -->

sidebar.php

Tout ce qui appartient à la section <aside … </aside> dans votre ancien code HTML va dans ce fichier. Une fois terminé, enregistrez le fichier.

<aside class="sidebar one-third right">
      <aside class="widget-area">
        
        <div class="widget-container">
          
          <h3 class="widget-title">Buy My Book</h3>
          
          <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;" />
          
          <p><em>WordPress: Pushing the Limits</em> will help you become a professional WordPress developer.</p>
  
        </div>
      
      </aside>
    </aside>

footer.php

Maintenant, tout ce qui reste jusqu’à la fin du fichier constitue généralement les informations de pied de page, à placer dans ce fichier.

Juste avant la balise de fermeture </body>, ajoutez ce code : <?php wp_footer();?> pour la même raison que dans header.php. Une fois terminé, enregistrez-le.

</div><!-- .main -->
  <footer>
  
    <div class="fatfooter">
  
      <p>Add footer content here with <a href="#">widget areas</a> - the tutorials will show you how.</p>
  
    </div>
  </footer>
  <?php wp_footer();?>
</body>
</html>

Vous avez maintenant terminé avec l’ancien fichier index.html. Vous pouvez le fermer ainsi que les autres fichiers dans votre dossier de thème, à l’exception de header.php et index.php. Ces derniers nécessitent encore quelques modifications.

4. Adapter le style au format WordPress

Dans l’en-tête, vous devez simplement modifier la référence à la feuille de style du format HTML vers WordPress. Recherchez le lien existant dans la section <head>. Dans mon cas, il ressemble à ceci :

<link rel="stylesheet" type="text/css" media="all" href="style.css" />

Remplacez-le par cette ligne :

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css" type="text/css" media="all" />

Vous pouvez maintenant enregistrer et fermer le fichier header.php.

Passons au fichier index.php. Il devrait être vide pour le moment. Copiez et collez ces lignes de code :

<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Ce code appellera les autres fichiers de votre thème WordPress. Vous remarquerez l’espace entre l’en-tête et la barre latérale. C’est là que vous ajouterez La Boucle.

La Boucle traitera chaque article pour l’affichage et le formatera selon les critères définis à l’intérieur des balises de La Boucle. C’est un élément essentiel pour ajouter du contenu dynamique à votre site WordPress.

Pour ce faire, collez le code suivant juste après <?php get_header(); ?> :

<?php while ( have_posts() ) : the_post(); ?>
  <article class="<?php post_class(); ?>" id="post-<?php the_ID(); ?>">
    <h2 class="entry-title"><?php the_title(); ?></h2>
    <?php if ( !is_page() ):?>
      <section class="entry-meta">
      <p>Posted on <?php the_date();?> by <?php the_author();?></p>
      </section>
    <?php endif; ?>
    <section class="entry-content">
      <?php the_content(); ?>
    </section>
    <section class="entry-meta"><?php if ( count( get_the_category() ) ) : ?>
      <span class="category-links">
        Posted under: <?php echo get_the_category_list( ', ' ); ?>
      </span>
    <?php endif; ?></section>
  </article>
<?php endwhile; ?>

Une fois terminé, enregistrez votre fichier index.php et fermez-le. Vous avez créé avec succès un thème WordPress. Maintenant, vous pouvez l’ajouter à votre site WordPress.

5. Téléverser votre thème sur WordPress

Après avoir terminé la création du thème de base, vous pouvez le téléverser sur WordPress. Tous les fichiers de votre dossier de thème doivent rester ensemble. Pour cela, compressez-les en format zip.

Accédez à votre Tableau de bord d’administration WordPress. Allez dans Apparence -> Thèmes. Cliquez sur Ajouter un thème -> Téléverser un thème.

Dans le menu, localisez le fichier zip de votre thème, téléversez-le et cliquez sur Installer. N’oubliez pas d’activer le thème ensuite.

Maintenant, l’apparence de votre site devrait ressembler à celle de l’ancien site. Gardez à l’esprit que même si le design de base semble identique, d’autres ajustements sont nécessaires pour parfaire l’intégration.

Par exemple, vous ne pouvez pas encore utiliser certaines fonctionnalités WordPress comme les zones de widgets. Vous devrez également adapter le balisage CSS pour l’intégrer harmonieusement au design WordPress.

Abandonner le design et ne conserver que le contenu

Si vous préférez laisser de côté l’ancien design de votre site HTML et utiliser un nouveau thème WordPress, cette option est pour vous. Cette méthode simplifie également l’importation du contenu.

Il vous suffit d’installer le thème de votre choix, de l’activer, puis de suivre les étapes ci-dessous.

1. Installer Import Plugin 2

Vous devez installer Import Plugin 2. Allez dans Extensions -> Ajouter une extension et recherchez-le par son nom. Vous le trouverez un peu plus bas dans la liste, car c’est une extension assez ancienne mais toujours efficace. Cliquez sur Installer puis Activer.

2. Préparer l’importation

Maintenant, accédez à Réglages -> HTML Import. Vous pouvez importer plusieurs pages à la fois ou une seule.

Vous remarquerez que l’extension indique un chemin spécifique comme html-files-to-import. Cela signifie que vous devez téléverser le fichier HTML sur le même serveur que votre installation WordPress. Pour plus de détails, consultez le guide officiel de l’utilisateur.

Dans ce tutoriel, nous allons importer le contenu. Pour ce faire, choisissez la balise HTML en haut et configurez les trois champs suivants.

Une fois terminé, cliquez sur Enregistrer les paramètres.

3. Commencer l’importation de votre contenu

Le bouton Importer les fichiers sera disponible après l’enregistrement des paramètres. Si vous l’avez manqué, vous pouvez également y accéder via Outils -> Importer et cliquer sur Lancer l’importateur dans la section HTML.

Choisissez si vous souhaitez importer un répertoire de fichiers ou un seul fichier, puis cliquez sur Soumettre. Une fois l’opération terminée, tout votre contenu sera disponible sur votre nouveau site WordPress.

Utiliser un thème enfant adapté d’un thème existant

Si vous souhaitez conserver certains aspects du design de votre ancien site mais trouvez la première méthode trop complexe, l’utilisation d’un thème enfant peut être une excellente alternative.

Les thèmes enfants vous permettent de profiter des milliers de thèmes existants (appelés thèmes parents) sur WordPress et de construire votre nouveau site sur cette base.

Vous pouvez ainsi modifier l’apparence de votre site sans altérer le code source du thème parent. Vous conserverez toutes vos modifications même lors des mises à jour du thème.

Nous avons rédigé un article plus détaillé sur comment créer un thème enfant WordPress. Dans ce tutoriel, nous utiliserons Childify Me pour simplifier le processus pour les débutants.

1. Choisir un thème approprié

Vous devez trouver un thème qui servira de base à votre projet. L’idéal serait de choisir un thème dont le design se rapproche de celui de votre ancien site, afin de limiter les modifications ultérieures.

Parcourez le répertoire de thèmes WordPress pour trouver un candidat adapté. Dans ce tutoriel, nous utiliserons le thème Twenty Seventeen comme point de départ.

2. Installer Childify Me

Allez dans Extensions -> Ajouter une extension et recherchez-le par son nom. Installez-le et activez-le.

3. Personnaliser le thème parent

Maintenant, allez dans Apparence -> Thèmes. Assurez-vous que le thème parent est bien activé. Cliquez sur Personnaliser pour accéder au panneau de personnalisation de votre thème actif.

4. « Childifier » le thème parent

Cliquez sur le bouton Childify Me, et attribuez un nom à votre thème enfant. Nous vous conseillons de choisir un nom similaire à celui du thème parent. Cliquez sur Créer. Une fois terminé, cliquez sur « Preview and Activate ».

5. Commencer l’importation de votre contenu

Maintenant que votre nouveau site WordPress ressemble visuellement à l’ancienne version HTML, il ne reste plus qu’à importer le contenu. Pour cela, vous pouvez utiliser la méthode décrite précédemment.

Vous avez réussi à migrer votre site web HTML vers WordPress. Félicitations !

Conclusion

Nous avons exploré les étapes essentielles pour convertir un site HTML en WordPress et les différentes méthodes disponibles.

Pour résumer – vous pouvez créer un thème WordPress à partir de zéro. C’est une méthode exigeante mais excellente si vous maîtrisez le code et disposez de temps à y consacrer.

Vous pouvez également utiliser des extensions pour faciliter la conversion et importer tout votre contenu dans son nouvel environnement.

Nous espérons que cet article vous aidera dans votre démarche. À bientôt !

Tout le contenu des tutoriels de ce site est soumis aux normes éditoriales et aux valeurs rigoureuses de Hostinger.