Téléverser et convertir du HTML vers WordPress sont des actions effectués pour des raisons très diverses. Vous pouvez vouloir convertir un ancien site HTML statique et le faire fonctionner sur le système de gestion de contenu WordPress. Il est également possible que vous ayez simplement besoin d’un endroit pour stocker ou partager un fichier HTML, et WordPress offre une solution viable pour ces deux cas de figure.

Passer du HTML à WordPress est souvent intimidant ou improductif. Nous sommes là pour vous guider tout au long du processus afin que vous appreniez les outils nécessaires pour convertir des fichiers HTML et effectuer une conversion par vous-même.

HTML est un langage de balisage simple, et WordPress, bien que puissant et rempli de fonctionnalités, est assez simple et intuitif. Par conséquent, la conversion entre HTML et WordPress ne devrait pas être une corvée.

Continuez cette lecture pour en savoir plus sur les bases de la conversion du HTML vers WordPress, ainsi que sur les situations réelles dans lesquelles vous pouvez envisager une telle conversion.

Raisons principales pour téléverser ou convertir du HTML vers WordPress

Si vous vous demandez pourquoi vous pouvez convertir ou téléverser du HTML vers WordPress, jetez un coup d’œil aux exemples suivants pour comprendre les raisons de réaliser une tâche comme celle-ci.

Comme vous pouvez le constater, les raisons d’ajouter un fichier HTML à WordPress varient en fonction de vos objectifs. Parfois, le processus est assez simple, comme le téléversement d’un fichier HTML vers un article ou une page de blog WordPress. D’autres fois, il s’agit d’un long processus de conversion d’un site web HTML entier avec des dizaines de fichiers et de tâches annexes qui doivent être effectuées, comme le transfert du contenu du site web en même temps que le HTML.

Pour ce guide sur la conversion et le téléversement de fichiers HTML vers WordPress, nous commencerons par les bases (comment téléverser un fichier HTML vers WordPress), puis nous aborderons les exigences plus approfondies comme la duplication ou la conversion de sites Web HTML complets pour qu’ils fonctionnent sur le système WordPress.

Enfin, nous parlerons des avantages et des inconvénients des convertisseurs HTML automatisés et des outils disponibles sur le marché.

Lisez ce qui suit pour commencer votre premier téléversement ou conversion de HTML vers WordPress !

Prêt à passer de HTML ➡️ WordPress ? Avec ce guide, le processus de conversion n'a pas besoin d'être ressenti comme une corvée 🧹Click to Tweet

Comment téléverser un fichier HTML vers WordPress

La première étape pour apprendre à transformer un fichier HTML en une page WordPress ou un site web complet est de voir comment fonctionne le processus de téléversement d’un fichier HTML.

Consultez ce guide pour savoir comment téléverser un fichier HTML dans WordPress

Nous vous donnons ci-dessous un bref résumé de ce processus afin de nous assurer que vous êtes sur la bonne voie alors que nous passons à d’autres étapes plus loin dans cet article.

Il existe trois méthodes pour téléverser un fichier HTML vers WordPress :

  1. Via le tableau de bord WordPress.
  2. Avec un client FTP.
  3. En utilisant cPanel.

Le téléversement d’un fichier HTML vers le tableau de bord WordPress se fait dans la médiathèque. Nous aborderons certains des chemins à suivre dans les tutoriels ci-dessous, mais gardez à l’esprit que le téléversement d’un fichier via le tableau de bord WordPress peut se faire sur une page, un article, ou directement via la médiathèque.

Un client FTP (comme FileZilla) renvoie aux fichiers de votre site WordPress, comme les fichiers de votre ordinateur. Cela vous permet de transférer des fichiers locaux vers les fichiers du site hébergé, à condition de vous connecter au client FTP avec vos informations SFTP d’hébergement.

Enfin, un cPanel d’hébergement offre l’accès à un gestionnaire de fichiers en ligne. Il fonctionne un peu comme un client FTP, vous donnant le contrôle de tous les mêmes fichiers. La principale différence est que cPanel est une application web en ligne, qui vous oblige à téléverser vos fichiers sur cPanel au lieu de les transférer instantanément d’un environnement local à un site réel dans un client FTP.

Chaque méthode a ses avantages et ses inconvénients. Kinsta n’offre pas d’expérience cPanel, il est donc préférable de téléverser de petits fichiers HTML que vous souhaitez stocker ou partager via le tableau de bord WordPress.

Un client FTP/SFTP est la méthode choisie pour créer un site web entièrement nouveau à partir d’un site web HTML statique. La raison en est qu’un client FTP/SFTP offre un contrôle incroyable sur les fichiers de votre site et peut transférer n’importe quoi, des fichiers multi-médias aux répertoires HTML, directement depuis votre ordinateur.

Comment ajouter du code HTML à une page ou un article WordPress

Il existe quelques méthodes pour téléverser un fichier HTML directement sur un article ou une page WordPress. La première consiste à téléverser un fichier HTML zip ou TXT en tant qu’élément multimédia. Cette méthode fonctionne de la même manière que le téléversement d’une image vers le gestionnaire de médias, sauf que vous le faites par le biais d’une page ou d’un article, et qu’il s’agit d’un fichier HTML au lieu d’une photo.

Vous pouvez utiliser cette méthode pour avoir un lien permettant aux gens de télécharger le fichier HTML ou d’accéder vous-même au fichier sur l’administration de votre site.

Une autre option consiste à coller un bloc HTML dans une page ou un article pour ajouter des éléments de conception. Par exemple, vous pouvez avoir un formulaire d’inscription personnalisé fait juste pour cette page que vous voudriez insérer avec un peu de HTML.

Les deux méthodes ont des objectifs et des processus différents pour atteindre les résultats finaux.

Pour téléverser un fichier HTML sur un article ou une page, suivez les étapes suivantes.

Allez dans Pages > Toutes les pages dans le tableau de bord WordPress. Si vous souhaitez commencer avec une page blanche, allez dans Pages > Ajouter.

Ajouter des nouvelles pages dans WordPress

Ajouter des nouvelles pages dans WordPress

Choisissez la page où vous souhaitez téléverser le fichier HTML. Vous pouvez également cliquer sur le bouton Ajouter si vous créez une toute nouvelle page.

Ces étapes sont pratiquement les mêmes pour l’ajout de fichiers HTML aux articles WordPress. Nous expliquons simplement comment le faire avec une page WordPress. Si vous souhaitez utiliser un article à la place, allez dans Articles > Tous les articles ou Articles > Ajouter.

Page À propos de nous dans WordPress

Page À propos de nous dans WordPress

Cette partie diffère si vous utilisez l’éditeur de blocs Gutenberg ou l’éditeur WordPress classique.

Dans Gutenberg, vous pouvez trouver le bouton du signe + et cliquer sur celui-ci pour rechercher un nouvel élément visuel. Recherchez le bloc Fichier, que vous pouvez soit saisir dans le champ de recherche, soit faire défiler la liste des blocs à localiser.

Sélectionnez le bloc Fichier pour le placer sur votre page ou votre article.

Note : si vous utilisez l’éditeur WordPress classique, il vous suffit de cliquer sur le bouton Ajouter un média et de téléverser votre fichier HTML. Cela crée un lien vers votre fichier que les gens peuvent télécharger sur l’interface publique de votre site.

Ajouter un module « Fichier » dans WordPress

Ajouter un module « Fichier » dans WordPress

Pour le bloc Gutenberg, le module Fichier doit afficher un bouton Téléverser. Cliquez sur le bouton Téléverser et localisez le fichier HTML souhaité sur votre ordinateur. Ceux-ci sont généralement stockés sous forme de fichiers TXT, de collections de fichiers TXT dans un répertoire, ou de fichiers ZIP.

Une fois qu’il est téléversé sur votre site web, le fichier est révélé sous la forme d’un lien. Tout utilisateur peut alors se rendre sur votre site web et cliquer sur le lien de cette page ou article pour visualiser le fichier HTML et même le télécharger sur son propre ordinateur.

En outre, ce fichier est stocké dans votre médiathèque, vous pouvez donc vous y rendre à tout moment pour obtenir l’URL du fichier et la placer où vous voulez. Vous pouvez également utiliser WordPress pour stocker le fichier.

Si vous souhaitez uniquement stocker le fichier dans WordPress et ne pas disposer d’un lien téléchargeable sur lequel tous vos utilisateurs peuvent cliquer, il vous suffit de supprimer le lien créé sur la page ou l’article.

Bouton « Téléverser » sous le bloc « Fichiers » de WordPress

Bouton « Téléverser » sous le bloc « Fichier » de WordPress

Vous pourriez voir une erreur qui vous indique que le type de fichier n’est pas autorisé pour des raisons de sécurité. C’est assez courant, alors consultez ce guide pour supprimer cette erreur et autoriser la plupart des types de fichiers dans votre médiathèque WordPress. Dans l’ensemble, le processus consiste soit à modifier votre fichier wp-config.php, soit à utiliser une extension pour éliminer l’erreur.

Erreur de type de fichier non valide dans WordPress

Erreur de type de fichier non valide dans WordPress

Ajoutez du code HTML à la conception de votre page ou de votre article

Comme mentionné précédemment, l’une des raisons pour lesquelles vous pouvez envisager d’ajouter un fichier HTML à une page ou à un article est de rendre un simple design sur cette page ou cet article.

La méthode précédente consiste plutôt à stocker des fichiers HTML sur WordPress et à ajouter un lien pour que les gens puissent les télécharger.

Il s’agit d’une solution plus fonctionnelle, puisque vous avez la possibilité de copier-coller ou de créer votre propre code HTML pour des éléments tels que des formulaires, des boîtes d’auteur, des bannières, etc.

Allez à la page ou à l’article de votre choix et choisissez la section dans laquelle vous souhaitez placer le bout de code HTML.

Cliquez sur le signe + pour voir la sélection des blocs. Trouvez le bloc HTML personnalisé en le saisissant dans le champ de recherche ou en faisant défiler la liste des blocs.

Choisissez le bloc HTML personnalisé pour l’insérer dans la page ou l’article.

Ajouter un bloc « HTML personnalisé » dans Gutenberg

Ajouter un bloc « HTML personnalisé » dans Gutenberg

Ce bloc fournit un champ de code simple et vierge que vous pouvez coller ou saisir, quel que soit le code HTML dont vous disposez.

Pour ce tutoriel, je vais coller un formulaire de contact simple avec un champ pour l’adresse e-mail et un bouton Envoyer.

Une fois que vous avez le code HTML dans le bloc, cliquez sur le bouton Mettre à jour ou Publier pour qu’il soit affiché sur l’interface publique de votre page ou de votre article.

Module HTML vers WordPress

Module HTML vers WordPress

Si vous allez au début de la page ou de l’article, le HTML devrait faire son travail et révéler la conception ou la fonctionnalité que vous essayez d’ajouter à la mise en page.

Dans ce cas, vous pouvez voir le formulaire où je demande un e-mail et où je dispose également d’un bouton Envoyer.

La vue publique du formulaire

La vue publique du formulaire

Le processus et le résultat ne sont pas très différents dans l’éditeur WordPress classique, sauf que vous n’utiliserez pas un bloc Gutenberg en glisser-déposer. Au lieu de cela, rendez-vous sur l’onglet Texte de votre éditeur (au lieu de l’onglet Visuel) et collez le code HTML à l’endroit où vous voulez qu’il apparaisse sur la page.

Comment téléverser un fichier de vérification HTML vers WordPress

Une autre raison pour laquelle vous pourriez vouloir téléverser du HTML dans WordPress est pour des raisons d’optimisation de recherche. Google, et certains autres moteurs de recherche, proposent des consoles et des outils pour les webmasters afin de visualiser les performances de votre site et d’optimiser votre contenu à l’aide d’analyses et de rapports qui permettent de vérifier les problèmes et d’y remédier.

Cependant, Google ne peut pas supposer que vous êtes le propriétaire d’un site web simplement parce que vous prétendez l’être. C’est là qu’un fichier de vérification HTML entre en jeu.

Pour simplifier, Google fournit un fichier HTML que vous devez téléverser sur votre site web. Seul le propriétaire du site doit avoir accès aux fichiers du site web. Google utilise donc ce moyen pour s’assurer que vous n’essayez pas de contrôler les outils d’un autre webmaster.

Le fichier de vérification HTML téléversé envoie ensuite un message à Google indiquant que le fichier a été ajouté à ce domaine et que vous en êtes, en fait, le propriétaire.

Il est prudent de se renseigner sur le téléversement d’un fichier de vérification HTML, car Google et les moteurs de recherche ne sont pas les seuls services qui vous demandent de vérifier votre identité ou votre propriété avec des fichiers de ce type. Plusieurs extensions, annuaires et extensions tierces veulent également s’assurer que vous n’êtes pas un intrus.

Raisons de téléverser un fichier de vérification HTML

Comme vous pouvez le voir, ce fichier HTML peut provenir de différentes sources. Vous n’avez généralement pas besoin de connaître le contenu du fichier HTML, mais seulement de savoir qu’il est utilisé pour envoyer un ping au service afin d’indiquer que vous avez le contrôle sur les fichiers du site.

Cela dit, notre démonstration de téléversement d’un fichier de vérification HTML dans WordPress fera intervenir la console de recherche Google, car c’est l’une des raisons les plus courantes d’utiliser un fichier de vérification.

Pour commencer, enregistrez votre site web auprès de Google. Pour ce faire, rendez-vous sur l’outil Google Search Console. Cliquez sur le bouton Démarrer maintenant et connectez-vous à votre compte Google ou enregistrez un compte auprès de Google.

Cliquez sur « Démarrer maintenant » dans la console de recherche Google

Cliquez sur « Démarrer maintenant » dans la console de recherche Google

Une fois connecté à la console de recherche Google, vous pouvez voir une liste de propriétés que vous avez gérées ou testées dans le passé. En revanche, il se peut que vous voyiez une liste vide.

Quoi qu’il en soit, allez dans l’onglet Recherche de propriété dans le coin supérieur gauche du tableau de bord.

Dans le menu déroulant, sélectionnez le choix Ajouter une propriété. Cela vous permet d’ajouter votre site web en tant que propriété gérée dans la console de recherche Google.

Ajouter une propriété dans la console de recherche Google

Ajouter une propriété dans la console de recherche Google

La fenêtre contextuelle suivante vous demande de sélectionner un type de propriété. L’option Domaine vous permet de vérifier toutes les URL dans tous les sous-domaines. C’est souvent la façon la plus simple de vérifier une page, mais elle nécessite une vérification DNS – qui se trouve dans votre compte d’hébergement.

Cependant, nous parlons actuellement de téléversement de fichiers HTML, nous allons donc avancer vers l’option de préfixe d’URL, qui est une méthode plus ancienne mais toujours fiable pour vérifier que vous possédez un site web. De plus, cette méthode permet d’identifier des URL spécifiques sous l’adresse que vous saisissez.

Par conséquent, prenez l’URL de votre site web et collez-la dans le champ Préfixe d’URL.

Cliquez sur le bouton Continuer.

Saisie de l'URL du site dans la GSC

Saisie de l’URL du site dans la GSC

Maintenant, la console de recherche Google vous demande de vérifier la propriété du site web.

Il existe plusieurs autres méthodes de vérification, mais celle-ci utilise un téléversement de fichier HTML.

Cliquez sur le bouton qui vous demande de télécharger le fichier.

Enregistrez ce fichier HTML sur votre ordinateur dans un répertoire dont vous vous souviendrez.

L’étape suivante consiste à téléverser le fichier sur le site WordPress que vous avez collé dans la console de recherche Google auparavant.

Vérification de la propriété du site dans GSC

Vérification de la propriété du site dans GSC

Comme mentionné précédemment, il existe trois options pour téléverser un fichier HTML vers WordPress.

La première méthode, le téléversement par le tableau de bord, est certainement une option viable. De nombreuses personnes sont encore laissées pour compte lorsqu’une erreur courante se produit lors du téléversement d’un fichier HTML vers la médiathèque. Pour cette raison, il est souvent plus rapide de faire vos téléversements avec un client FTP. Si, toutefois, vous prévoyez de téléverser via le tableau de bord de WordPress et que vous voyez l’erreur « Désolé, ce type de fichier n’est pas autorisé », utilisez ce guide pour résoudre le problème.

Vous avez maintenant les deux autres solutions : utiliser un client FTP/SFTP ou téléverser avec cPanel depuis votre compte d’hébergement.

cPanel n’est pas un mauvais choix pour certains hébergeurs, mais encore une fois, Kinsta ne propose pas cPanel. Par conséquent, nous nous concentrerons principalement sur le téléversement du fichier HTML via un client FTP/SFTP. Les étapes détaillées sont décrites dans l’article lié ci-dessus, mais voici un bref récapitulatif pour vous guider dans votre démarche.

Pour commencer, téléchargez FileZilla sur votre ordinateur. Vous pouvez également essayer d’autres clients FTP/SFTP.

Note : Nous vous recommandons de faire une sauvegarde de votre site web avant cette procédure. Il est rare de causer des problèmes à un site lors du transfert de fichiers par FTP/SFTP, mais c’est tout à fait possible. Vous ne voulez pas faire planter votre site ou perdre des données, alors créez un fichier de sauvegarde du site.

Ouvrez le client FTP/SFTP et saisissez vos identifiants FTP/SFTP pour vous connecter à l’hôte web.

Saisissez vos informations SFTP dans Filezilla

Saisissez vos informations SFTP dans Filezilla

Les informations nécessaires sont les suivantes :

Où trouver les informations de votre site WordPress ?

Ils se trouvent généralement dans votre tableau de bord d’hébergement, vous pouvez donc soit contacter votre hébergeur, soit les rechercher vous-même.

Kinsta vous permet de trouver facilement les identifiants FTP/SFTP en allant dans l’onglet Sites de votre panneau d’hébergement Kinsta et en sélectionnant le site web désiré.

Sous l’onglet Info, cherchez la zone SFTP/SSH. Copiez les informations d’identification correspondantes dans le client FTP/SFTP.

Par exemple, vous pouvez voir les éléments Hôte, Nom d’utilisateur, Mot de passe et Port, tous bien organisés chez Kinsta.

Informations SFTP dans le tableau de bord MyKinsta

Informations SFTP dans le tableau de bord MyKinsta

Collez ces éléments dans le client FTP/SFTP et cliquez sur le bouton Connexion rapide.

Si vous voyez une erreur, c’est très probablement parce que FileZilla utilise par défaut le protocole FTP et non le protocole SFTP. Pour corriger cela, allez dans Fichier > Gestionnaire de site. Ajoutez un nouveau site dans FileZilla et sélectionnez SFTP. Collez les identifiants d’hébergement dans cette zone et essayez de vous connecter à nouveau.

Le gestionnaire de site

Le gestionnaire de site

Après la connexion à votre hôte, tous les fichiers du site WordPress apparaissent.

Saisissez vos identifiants pour voir les fichiers du site

Saisissez vos identifiants pour voir les fichiers du site

Localisez le fichier racine de votre site, qui contient des répertoires comme wp-content et wp-admin.

Trouver le dossier racine de votre site.

Trouver le dossier racine de votre site.

Trouvez le fichier de vérification HTML (dans ce cas, je l’ai renommé pour le trouver plus facilement) sous la zone qui affiche les fichiers de votre ordinateur. Par exemple, vous pouvez le voir sous Téléchargements si c’est là que vont vos téléchargements sur Internet.

Faites glisser ce fichier vers le fichier racine de votre site web. Tout cela se fait dans le client FTP/SFTP.

Faites glisser le fichier pour le téléverser sur votre serveur

Faites glisser le fichier pour le téléverser sur votre serveur

Le téléversement ne devrait prendre que quelques secondes.

Le fichier est maintenant téléversé

Le fichier est maintenant téléversé

Une fois qu’il est dans les fichiers de votre site, vous pouvez retourner à la page de vérification de Google et vérifier s’il enregistre que vous êtes le propriétaire du site. Un message de réussite devrait apparaître sur la console de recherche Google, et plusieurs fonctionnalités s’ouvriront pour vous permettre d’optimiser et d’analyser la santé de votre site web.

Conversion manuelle d’un site HTML entier vers WordPress

Pour convertir un site HTML vers WordPress, vous pouvez soit utiliser une extension/application, soit convertir manuellement vos fichiers, soit utiliser un thème enfant et transférer les fichiers HTML dans ce thème enfant.

La première méthode consiste à convertir manuellement ce HTML pour en faire un thème WordPress.

Certains disent que c’est la méthode la plus redoutable, mais d’autres la préfèrent car elle permet de contrôler totalement le processus et de ne pas avoir à se fier à des applications ou des extensions qui peuvent parfois être peu fiables. Suivez les étapes ci-dessous pour effectuer manuellement une conversion complète d’un site HTML en site WordPress.

Créez un répertoire pour votre thème et ajoutez les fichiers du thème standard

Sur votre ordinateur, créez un répertoire pour enregistrer tous les fichiers basiques de votre thème. Appelez ce répertoire comme vous le souhaitez, de préférence en lui donnant un nom dont vous pouvez vous souvenir.

Créez les fichiers de thème suivants :

N’hésitez pas à les ouvrir dans votre votre éditeur de texte ou de code puisque vous les modifierez plus tard. Pour l’instant, il n’est pas nécessaire d’ajouter du code aux fichiers. Il suffit de les laisser dans le répertoire.

Note : Vous pouvez commencer par les créer en tant que fichiers TXT. Si vous changez ensuite l’extension du fichier – par exemple de .txt en .php ou de .txt en .css – votre ordinateur les ajuste automatiquement au bon format de fichier. Par exemple, l’ajout d’une extension .css transforme le fichier en feuille de style.

Les fichiers du site pour HTML vers WordPress

Les fichiers du site pour HTML vers WordPress

Transfert du CSS actuel de votre site WordPress vers le nouveau répertoire

Vous devriez déjà avoir un thème installé sur votre site WordPress actuel. Si ce n’est pas le cas, installez un thème pour vous aider dans cette partie.

Vous utiliserez le CSS du thème actuel comme base, en vous basant sur celui-ci dans le fichier style.css avec les fichiers HTML de votre site.

Par conséquent, copiez l’en-tête de la feuille de style de votre site WordPress dans le nouveau fichier style.css.

Cela devrait ressembler à quelque chose comme ça :

/*
Theme Name: Twenty Seventeen
Theme URI: https://wordpress.org/themes/twentyseventeen/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Seventeen brings your site to life with header video and immersive featured images. With a focus on business sites, it features multiple sections on the front page as well as widgets, navigation and social menus, a logo, and more. Personalize its asymmetrical grid with a custom color scheme and showcase your multimedia content with post formats. Our default theme for 2017 works great in many languages, for any abilities, and on any device.
Version: 2.4
Requires at least: 4.7
Requires PHP: 5.2.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentyseventeen
Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

Dans ce cas, le site utilisé a pour thème Twenty Seventeen. Si vous utilisez un thème différent, vous verrez quelques variations dans l’en-tête de la feuille de style.

Il est maintenant temps de remplacer les éléments de l’ancien thème par des informations sur votre nouveau thème.

Pour ce faire, changez les éléments suivants :

Laissez tout le reste tel quel. La plupart des autres éléments comme la licence et les balises ne sont valables que si vous prévoyez de publier le nouveau thème dans le répertoire des thèmes de WordPress.

N’oubliez pas que ce que vous venez de coller et de modifier est l’en-tête de votre thème.

Trouvez le CSS existant à partir de votre site web HTML. Copiez et collez ce CSS après l’en-tête dans le nouveau fichier style.css.

Enregistrez et fermez le fichier style.css.

Prenez votre HTML actuel et divisez-le en plusieurs morceaux

WordPress utilise généralement PHP pour extraire de sa base de données des éléments tels que des fichiers et du code, ainsi que des médias. Par conséquent, un site web HTML doit être découpé en fichiers PHP séparés pour se fondre dans l’infrastructure de WordPress.

Cela peut paraître intimidant, mais il suffit de diviser votre document HTML en plusieurs parties, en transformant chacune de ces parties en fichiers PHP.

Chaque fichier HTML aura un aspect différent, mais il est utile d’avoir un exemple visuel. Nous allons donc afficher quelques modèles de sites web HTML pour en faire la démonstration.

Le code suivant est une excellente option pour établir des références croisées avec votre propre fichier HTML. Il s’agit d’une simple page web HTML avec un en-tête, des éléments de menu, des sous-titres, une colonne latérale et un pied de page. Vous pouvez trouver un code similaire dans votre propre fichier index.html.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test Site</title>
<meta name="description" content="Website description">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="style.css">
</head>

<body>
<div class="header-container">
<header class="wrapper clearfix">
<h1 class="title">Website Title</h1>
<nav>
<ul>
<li><a href="#">menu item #1</a></li>
<li><a href="#">menu item #2</a></li>
<li><a href="#">menu item #3</a></li>
</ul>
</nav>
</header>
</div>

<div class="main-container">
<main class="main wrapper clearfix">
<article>
<header class="entry-header">
<h2 class="entry-title">Article</h2>
</header>
<p>Test text right here..</p>
<h2>Subheading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<h2>A Sub</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</article>
<aside>
<h3>Sidebar here</h3>
<p>Etiam ullamcorper lorem dapibus velit suscipit ultrices. </p>
</aside>
</main> <!-- #main -->
</div> <!-- #main-container -->

<div class="footer-container">
<footer class="wrapper">
<p class="footer-credits">© 2019 My Test Site</p>
</footer>
</div>
</body>
</html>

Le modèle suivant est un autre exemple pour vos propres stratégies.

 

Un exemple de site HTML

Un exemple de site HTML

Comme vous pouvez le voir, le fichier index.html de celui-ci est un peu plus compliqué, mais sa structure reste familière.

Exemple d'un fichier d'index HTML

Exemple d’un fichier d’index HTML

Les deux exemples comprennent des en-têtes, des zones de contenu, des colonnes latérales et des pieds de page.

Vous aurez très probablement un design différent. Pour cette raison, vous devrez modifier les étapes décrites ci-dessous.

Chaque étape consiste à modifier et à ajouter chacun des nouveaux fichiers WordPress que vous avez créés auparavant. Cela dit, gardez le fichier index.html de votre site HTML ouvert. Vous l’utiliserez plus tard.

Le fichier header.php

Dans votre fichier HTML ouvert, recherchez tout ce qui se trouve au début du fichier et qui se termine par la zone de contenu principale. La zone de contenu principale est généralement représentée par une balise <div class="main"> ou <main>.

Copiez et collez cette section du fichier HTML dans votre nouveau fichier header.php.

Après cela, trouvez où il est écrit </head>.

Juste avant cela, collez ce qui suit :

<?php wp_head();?>

Ce bout de code est important pour le fonctionnement de la plupart des extensions WordPress.

Le fichier sidebar.php

Cherchez la section <aside> dans votre fichier index.html.

Tout ce qui se trouve dans les balises  <aside> et </aside>, y compris les balises aside elles-mêmes, doit être copié dans le nouveau fichier sidebar.php.

D’après notre exemple de fichier, cela ressemble à ceci :

<aside>
<h3>Sidebar here</h3>
<p>Etiam ullam corper lorem dapibus velit suscipit ultrices. </p>
</aside>

Le fichier footer.php

Si vous avez un site web HTML simple, il se peut qu’il ne vous reste que les informations de pied de page à transférer. D’autres sites sont un peu plus compliqués. Quoi qu’il en soit, ce n’est pas une mauvaise idée de terminer par la modification du pied de page, étant donné qu’il s’agit d’un des éléments de base qui composent les fichiers du site WordPress.

Dans le fichier index.html, trouvez et copiez tout le code après la balise </aside> (la colonne latérale).

Encore une fois, vous pouvez avoir plus de contenu après la section de la colonne latérale, mais il est possible pour les sites HTML plus simples, de n’avoir que le pied de page à traiter.

Dans notre exemple, le pied de page ressemble à ceci :

</main> <!-- #main -->
</div> <!-- #main-container -->

<div class="footer-container">
<footer class="wrapper">
<p class="footer-credits">© 2020 My Test Site</p>
</footer>
</div>
</body>
</html>

Mais pas si vite. Après avoir collé ce code de pied de page dans le nouveau fichier footer.php, ajoutez <?php wp_footer();?> juste avant </body>. Cela aide le pied de page à fonctionner correctement avec WordPress.

Vous pouvez voir ci-dessous un exemple du code <?php wp_footer();?> collé dans le fichier de pied de page.

</main> <!-- #main -->
</div> <!-- #main-container -->
<div class="footer-container">
<footer class="wrapper">
<p class="footer-credits">© 2020 My Test Site</p>
</footer>
</div>
<?php wp_footer();?>
</body>
</html>

Veillez à enregistrer tous ces nouveaux fichiers dans le répertoire de votre thème. Par exemple, après avoir collé ce code de bas de page dans le fichier footer.php, vous devez cliquer sur le bouton Enregistrer dans votre éditeur et le fermer.

Maintenant que les fichiers de base sont faits, fermez le fichier index.html original de votre site web HTML.

Liez vos fichiers header.php et index.php à WordPress

Vous l’avez déjà ajouté au fichier header.php, mais vous devez encore prendre des mesures supplémentaires. Pour l’essentiel, vous voulez modifier l’appel dans la feuille de style, en passant du HTML qui s’y trouve actuellement au format standard PHP de WordPress.

De retour dans le fichier header.php, trouvez la section <head>.

Nous recherchons l’appel pour la feuille de style. Ça ressemble à quelque chose comme ça :

<link rel="stylesheet" href="style.css">

Supprimez cet appel et remplacez-le par le suivant :

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

C’est tout ce que vous avez à faire pour le fichier header.php. L’appel à la feuille de style fonctionne désormais avec le format WordPress, et non plus du HTML.

Allez-y, enregistrez et fermez le fichier header.php.

Ensuite, ouvrez le fichier index.php (pas le fichier index.html que vous utilisiez auparavant, mais le nouveau fichier index.php).

Pour l’instant, le fichier index.php est vide.

Prenez le code suivant et copiez-le et collez-le dans le nouveau fichier index.php. Laissez l’espace entre les deux premières lignes. Il ‘est là pour une raison, que vous verrez bientôt.

Ces lignes servent d’appels aux autres fichiers de votre site, notamment header.php, sidebar.php et footer.php.

<?php get_header(); ?>

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

L’espace ouvert sur la deuxième ligne est réservé à ce que nous appelons la boucle (The Loop), ou un processus dynamique dans WordPress qui s’exécute en arrière-plan pour ajouter de nouveaux articles à votre site. Il s’agit essentiellement de faire savoir à WordPress que du contenu supplémentaire est encore à venir et qu’il doit utiliser la boucle pour ajouter ce contenu. Pour en savoir plus sur la boucle, cliquez ici.

Pour ajouter la boucle, collez le code suivant dans l’espace que vous avez laissé dans le fichier index.php avant (juste sous <?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; ?>

Le résultat devrait ressembler à ceci :

<?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; ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Allez-y et enregistrez le fichier index.php. Vous pouvez également fermer le fichier maintenant.

Une fois cela fait, un thème WordPress basé sur votre site web original en HTML est prêt à être téléversé dans WordPress.

Téléversez le nouveau thème sur WordPress

La dernière étape consiste à téléverser le thème sur votre site WordPress. Une option consiste à simplement compresser en .zip le répertoire du site et à le téléverser dans la section des thèmes de WordPress sans ajouter une capture d’écran de votre site pour référence.

Bien que votre thème fonctionne toujours de la même manière sans capture d’écran de référence, nous vous recommandons de créer une capture d’écran afin qu’il vous soit plus facile d’organiser vos thèmes et de comprendre lequel est réellement actif sur votre site web.

Par capture d’écran, nous entendons le petit aperçu qui apparaît pour tous les thèmes installés sur votre tableau de bord WordPress. Même ceux qui ne sont pas actifs ont des captures d’écran. Il est obligatoire de faire une capture d’écran si vous prévoyez de téléverser votre thème dans la bibliothèque de thèmes de WordPress.

Le panneau de thèmes dans WordPress

Le panneau de thèmes dans WordPress

Vous ne téléversez peut-être pas publiquement votre thème, mais une capture d’écran vous aide à gérer votre propre thème. Comme vous pouvez le voir, il est assez difficile de savoir à quoi ressemble le thème si aucune capture d’écran n’est disponible. Le thème Twenty Seventeen Child n’a pas de capture d’écran, donc c’est juste une image vide. Cela pourrait en embrouiller plus d’un.

Pour ajouter une capture d’écran, ouvrez l’ancien site HTML dans un navigateur et faites une capture d’écran de la page d’accueil avec l’outil de découpage ou le logiciel de capture d’écran dont vous disposez.

Ouvrez votre logiciel de retouche d’images préféré et recadrez la capture d’écran à 880×660 pixels. Cela permettra de s’assurer que la capture d’écran n’est pas étirée ou disproportionnée lorsqu’elle est ajoutée à WordPress.

Enregistrez la version modifiée de la capture d’écran dans le répertoire de votre nouveau thème. Il n’est pas nécessaire de la placer dans un répertoire spécial – il suffit de la placer dans le répertoire du thème à côté des autres fichiers comme header.php et footer.php.

Capture d'écran dans le répertoire du thème

Capture d’écran dans le répertoire du thème

Maintenant, vous avez deux options pour téléverser le nouveau thème dans WordPress.

La première consiste à faire glisser ces fichiers dans le répertoire wp-content/themes via FTP. Si vous suivez ce chemin, il n’est pas nécessaire de compresser le fichier. Il suffit d’utiliser un client FTP comme FileZilla et de faire glisser le répertoire dans le répertoire wp-content/themes.

L’autre option consiste à téléverser une version compressée dans le tableau de bord de WordPress.

Pour commencer, compressez tout le répertoire du thème dans un fichier zip.

Ensuite, dans le tableau de bord WordPress, allez sur Apparence > Thèmes.

Aller au panneau des thèmes dans WordPress

Aller au panneau des thèmes dans WordPress

Cliquez sur le bouton Ajouter.

Ajouter un nouveau thème dans WordPress

Ajouter un nouveau thème dans WordPress

Sélectionnez le bouton Téléverser un thème.

Téléverser un thème dans WordPress

Téléverser un thème dans WordPress

Cliquez sur Choisir un fichier et recherchez le fichier compressé sur votre ordinateur. Sélectionnez le fichier pour qu’il apparaisse sur le tableau de bord de WordPress.

Choisissez le fichier de thème à téléverser

Choisissez le fichier de thème à téléverser

Cliquez sur Installer maintenant pour traiter le fichier dans WordPress.

Installer le thème après son téléversement

Installer le thème après son téléversement

WordPress doit vous indiquer que le paquet est en cours d’installation et qu’il est bien installé.

Cliquez sur le bouton Activer pour terminer le travail.

Activer le thème après son installation

Activer le thème après son installation

Maintenant, le thème, avec sa capture d’écran, apparaît dans la liste des thèmes comme le thème actif. Vous pouvez aller sur l’interface publique de votre site WordPress pour voir maintenant une version WordPress de votre site HTML original.

Le nouveau thème apparaît dans le tableau de bord

Le nouveau thème apparaît dans le tableau de bord

Gardez à l’esprit qu’aucune conversion de HTML vers WordPress n’est identique. Vous trouverez peut-être que la vôtre est un peu plus complexe que celle que nous venons de parcourir. En général, plusieurs autres mesures doivent être prises pour obtenir une copie exacte de votre site web HTML.

Par exemple, vous devrez ajouter des zones de widgets et de commentaires et même ajuster le titre et la description de votre blog pour qu’ils soient modifiables dans WordPress.

Le passage d’un site HTML à un site WordPress nécessite beaucoup de travail manuel, et vous constaterez peut-être que certaines modifications ne sont possibles qu’avec un petit balisage CSS.

De plus, ce tutoriel n’a rien à voir avec l’ajout de contenu comme des articles et des images. Cela peut être fait manuellement en téléverseant des images dans la médiathèque et en ajustant des éléments comme les structures d’URL.

Il existe des extensions pour automatiser l’importation de contenu, mais la plupart d’entre elles ne sont pas à jour avec les nouvelles versions de WordPress. Nous vous suggérons donc de les essayer pour voir si elles fonctionnent pour vous, mais vous ne devez pas vous attendre à grand-chose.

Convertir du HTML vers WordPress via un thème enfant

C’est sans doute l’une des méthodes les plus simples pour convertir un site HTML entier en un site WordPress. Elle fonctionne en utilisant n’importe lequel des thèmes WordPress gratuits déjà existants, de sorte que vous pouvez choisir votre préféré et le combiner avec le design de votre site HTML.

Dans l’ensemble, vous utilisez le thème WordPress déjà créé comme thème parent. Ensuite, le site web HTML est converti pour fonctionner avec WordPress et est lié au thème parent en tant que thème enfant. Si vous avez des questions sur les thèmes parents et enfants, veuillez lire ici notre guide sur le sujet.

En guise d’explication rapide, le thème parent gère les fonctionnalités de votre site tandis que le thème enfant est construit sur le thème parent. Le thème parent peut techniquement se suffire à lui-même, mais pas le thème enfant. Par conséquent, nous utilisons le thème enfant pour modifier la conception du thème parent tout en conservant les puissantes fonctionnalités déjà fournies dans le thème parent.

Voici comment procéder à la conversion du HTML vers WordPress via un thème enfant.

Choisisr un thème parent

La première chose à faire est de choisir un thème qui vous plaît. Le thème que vous choisirez sera votre thème parent et vous l’utiliserez comme base de la conception de votre site web.

Idéalement, vous trouverez un thème dont la conception est déjà proche de l’aspect et de la convivialité de votre ancien site HTML. Une autre option consiste à utiliser un framework WordPress ou un thème de démarrage (starter), en voyant comment les deux types de thèmes sont déjà utilisés pour les bases de la conception.

Par exemple, un thème de démarrage de qualité est le thème Twenty Twenty ou n’importe lequel des thèmes de démarrage par défaut de WordPress portant le nom de l’année où il a été créé. Nous vous recommandons de remonter dans le temps (Twenty Nineteen, Twenty Seventenn, etc) pour voir si l’un d’entre eux correspond mieux au design de votre site HTML.

Nous choisirons le thème Twenty Seventeen pour ce tutoriel en raison de sa propreté et de sa capacité à s’adapter à de nombreux designs web HTML simples.

Quoi qu’il en soit, tous ces thèmes constituent de merveilleux points de départ.

Pour commencer, installez le thème sur votre site WordPress.

Activer un thème WordPress

Activer un thème WordPress

Vous pouvez activer le thème si vous le souhaitez, mais vous activerez un nouveau thème enfant plus tard et n’utiliserez le thème de démarrage que comme base pour le design.

Créer un nouveau répertoire

Tous les thèmes WordPress nécessitent des répertoires pour stocker les fichiers de votre site. Par conséquent, vous devez créer un nouveau répertoire pour le thème enfant créé à partir du site HTML.

Nous vous recommandons de nommer le répertoire d’après votre thème parent et d’ajouter « -child » à la fin du nom répertoire.

Par exemple, nous appellerons le répertoire « twentyseventeen-child » dans ce cas.

Répertoire du thème enfant pour HTML vers WordPress

Répertoire du thème enfant pour HTML vers WordPress

Globalement, n’importe quel nom fera l’affaire, à condition de se souvenir du nom du répertoire et de ne pas y ajouter d’espace.

Configurez votre feuille de style

Tous les thèmes enfants nécessitent des feuilles de style qui vont dans le répertoire du thème.

Par conséquent, créez un document texte et nommez-le style.css. Enregistrez-le dans le répertoire du thème et incluez le code suivant dans ce fichier texte :

/*
 Theme Name:   Twenty Seventeen Child
 Theme URI:    http://examplesite.com/twenty-seventeen-child/
 Description:  Twenty Seventeen Child Theme
 Author:       Jane Doe
 Author URI:   http://examplesite.com
 Template:     twentyseventeen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-seventeen-child
*/

Veillez à remplacer les éléments qui sont personnalisés pour votre site. Vous devrez éventuellement modifier des éléments comme le nom du thème, l’URI du thème, l’auteur, le modèle et d’autres éléments pour vous assurer qu’ils correspondent à vos propres noms de fichiers. Cette procédure est similaire à certaines des étapes de la section ci-dessus intitulée « Conversion manuelle d’un site HTML entier en WordPress », qui explique la signification de chaque ligne.

Le plus important est la balise Template. Elle doit être nommée d’après le thème parent pour que le thème enfant fonctionne correctement.

Créer un fichier functions.php

Si vous utilisiez simplement la feuille de style du site et activiez le thème enfant, un site HTML sans aucun style serait disponible. Toutefois, nous souhaitons également ajouter un style au thème enfant pour lui donner l’aspect que nous souhaitons.

Tous les styles seront tirés du thème principal.

Par conséquent, un fichier functions.php est nécessaire pour hériter des styles du thème parent dans le thème enfant.

Créez un fichier appelé functions.php dans le répertoire de votre thème.

Le fichier functions.php pour HTML vers WordPress

Le fichier functions.php pour HTML vers WordPress

Pour activer le fichier, ajoutez une balise PHP d’ouverture, ainsi qu’un code qui demande à WordPress d’utiliser le style du thème parent :

<?php
function child_theme_enqueue_styles() {

    $parent_style = 'parent-style';

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_styles' );

Un autre avantage de ce bout de code est qu’il vous permet d’adapter le design du site web au thème enfant.

Activer le nouveau thème enfant

Il est maintenant temps d’activer le thème enfant.

Une façon d’activer le thème enfant est d’ajouter le répertoire dans wp/content/themes. Cela se fait à l’aide d’un client FTP/SFTP.

Vous pouvez également compresser le répertoire et téléverser le thème sous Apparence > Thèmes > Ajouter.

Ajouter un thème enfant dans WordPress

Ajouter un thème enfant dans WordPress

Sélectionnez le bouton Téléverser le thème.

Téléverser un thème enfant dans WordPress

Téléverser un thème enfant dans WordPress

Cliquez sur Choisir un fichier et localisez le fichier zip correspondant au thème enfant sur votre ordinateur.

Choisir le thème enfant à téléverser

Choisir le thème enfant à téléverser

Une fois téléversé, cliquez sur le bouton Installer maintenant.

Installer le thème enfant

Installer le thème enfant

Cliquez sur le bouton Activer.

Activer le thème enfant

Activer le thème enfant

Vous devriez maintenant voir le thème Twenty Seventeen Child (ou tout autre thème que vous avez utilisé) activé comme votre thème principal.

Détails du thème dans le tableau de bord WordPress

Détails du thème dans le tableau de bord WordPress

Quelle que soit la méthode utilisée pour activer le thème enfant, votre site WordPress doit être le miroir de votre thème parent. En d’autres termes, il s’agit d’une copie exacte du thème parent.

Note : Il est possible d’ajouter une capture d’écran à votre nouveau thème au lieu de ne pas en avoir du tout dans la prévisualisation. Nous expliquons comment ajouter une capture d’écran au thème dans l’une des sections précédentes intitulée « Conversion manuelle d’un site HTML complet en WordPress ».

Ajouter des fichiers HTML

Le but est de faire un site qui ressemble à votre site HTML original, et non au thème parent.

La dernière étape consiste donc à copier le contenu de votre site web HTML sur votre nouveau site WordPress. La plupart du temps, vous devrez franchir ces étapes manuellement. Nous l’avons déjà mentionné, mais il existe quelques extensions qui automatisent le processus de transfert du contenu. Cependant, ces extensions ne sont pas à jour avec les nouvelles versions de WordPress, donc utilisez-les à vos propres risques.

Qu’est-ce qu’un convertisseur de HTML vers WordPress ? (Et quelles sont les options ?)

Un convertisseur de HTML vers WordPress suit les étapes décrites ci-dessus et soit les simplifie, soit complète entièrement la tâche pour vous. Vous pouvez envisager un outil de conversion de HTML vers WordPress si vous n’avez pas le temps ou l’expérience nécessaire pour effectuer la conversion manuellement.

Il existe de nombreux styles différents de convertisseurs, mais il est important de se rappeler que tous ne sont pas des alternatives raisonnables à la conversion manuelle de HTML vers WordPress.

Les convertisseurs sont proposés sous les formes suivantes :

Si l’on examine les options de conversion, les logiciels et applications tiers semblent raisonnables pour des travaux simples. Vous pouvez prendre un fichier zip des fichiers HTML de votre site web et les téléverser vers le convertisseur. La plupart des outils tiers disponibles fonctionnent comme des applications en ligne, il vous suffit donc de les ouvrir dans votre navigateur et de cliquer sur le bouton Téléverser.

Nous aimons ces applications pour des conversions moins compliquées. Si vous avez un site web HTML de base et que vous souhaitez le faire fonctionner sous WordPress, cela peut faire l’affaire, mais une transition en douceur n’est pas garantie.

Quant aux extensions WordPress qui convertissent le HTML en WordPress, vous aurez du mal à trouver des extensions qui prennent tout un site web HTML et convertissent les fichiers vers WordPress. Quelques extensions étaient disponibles, mais aucune n’est mise à jour pour fonctionner avec les nouvelles versions de WordPress, et vous ne voulez pas utiliser une extension obsolète.

Cependant, quelques extensions offrent les fonctionnalités nécessaires pour le téléversement de fichiers basiques, ce qui peut être plus facile qu’un transfert FTP ou que de jouer avec l’administration de votre compte d’hébergement. Dans l’ensemble, la plupart des extensions ne permettent que le téléversement de fichiers individuels, ce qui ne constitue pas la meilleure solution pour la conversion massive de sites web.

Nous considérons que la dernière méthode (les développeurs humains réels) est une forme de convertisseur HTML vers WordPress car elle automatise définitivement le processus pour vous en demandant l’aide d’un expert et en faisant appel à une personne pour effectuer le travail. Dans l’ensemble, l’embauche d’un développeur humain pour convertir votre site web HTML offre le moins de risques de rencontrer des problèmes, et vous avez quelqu’un à qui parler en cas de problème.

Les meilleures options d’extensions de conversion HTML vers WordPress et autres outils

Comme mentionné, les convertisseurs HTML vers WordPress se présentent sous de nombreuses configurations différentes. Vous ne trouverez pas beaucoup d’extensions WordPress qui ne sont pas dépassées ou qui ne fonctionnent plus. Cependant, nous avons quelques extensions de conversion préférées qui effectuent des tâches de conversion plus petites, ainsi que des applications web et des options de développement humain qui s’avèrent pratiques pour des tâches de conversion HTML vers WordPress plus avancées.

Avantages et inconvénients de l’utilisation d’une extension ou d’une application de conversion automatique de HTML vers WordPress

Un convertisseur automatique de HTML vers WordPress semble être une bénédiction pour certains, mais ce n’est pas toujours la meilleure solution. Examinez les avantages et les inconvénients ci-dessous avant de vous engager dans une application ou une extension conçue pour dupliquer ou convertir du HTML.

Pour

Contre

Maintenant que vous avez compris les avantages et les inconvénients des convertisseurs HTML automatisés, jetons un coup d’œil ci-dessous à nos applications et extensions de conversions automatisées préférées.

WP Site Importer

Bien que l’outil WP Site Importer extracte et importe toutes sortes de contenus et de fichiers de sites web plus anciens ou tiers, vous pouvez parier qu’un de ces éléments implique du HTML. En bref, l’outil WP Site Importer vous permet de transformer n’importe quel site en un site WordPress, en extrayant du contenu comme des images, des menus et des pages du site HTML et des fichiers du site. WP Site Importer répare les liens brisés afin que vous n’ayez pas à les ajuster ou à en ajouter de nouveaux manuellement. Il conserve même les informations SEO du site précédent, y compris les méta-descriptions et les mots-clés.

WP Site Importer

WP Site Importer

L’importateur vous fait gagner du temps et de l’argent en supprimant les frais de développement et en rendant la conversion du HTML et du contenu plus facile. De plus, il nettoie votre HTML, en nettoyant et en reformatant le HTML source. Cela rend vos fichiers HTML plus compatibles avec WordPress et montre à Google que vous travaillez avec un code propre, ce qui améliore votre référencement.

L’outil WP Site Importer fonctionne comme une extension WordPress, vous pouvez donc télécharger l’extension et activer ses fonctionnalités directement depuis le tableau de bord.

WP All Import

WP All Import

WP All Import

L’extension WP All Import est l’un des outils les plus rapides et les plus faciles à utiliser pour téléverser des fichiers XML contenant des données HTML. Dans l’ensemble, l’extension vous permet de migrer le contenu d’un site web précédent ou d’un éventuel site web de démonstration construit avec du simple HTML ou quelques fichiers HTML que vous souhaitez dupliquer et apporter sur le nouveau site WordPress.

La conversion se fait en quatre étapes, et vous avez accès à une belle interface de type glisser-déposer pour gérer vos conversions et importations. L’extension WP All Import est également intéressante car elle gère les importations d’URL depuis des sites web externes. Par conséquent, vous n’avez même pas besoin de mot de passe ou de contrôle sur un site pour transférer ces quelques fichiers et potentiellement rendre des éléments dans WordPress depuis ce site.

Une conversion complète du site web peut s’avérer décourageante avec cette extension, mais cela vaut la peine de l’essayer, surtout s’il s’agit d’un simple fichier HTML. De plus, l’extension prend en charge les conversions HTML pour des éléments tels que les produits WooCommerce et les pages WordPress. Une version premium est disponible pour les fonctionnalités plus avancées, notamment le support client premium qui vous permet de demander de l’aide pour effectuer ces conversions.

HTMLtoWordPress.io

HTMLtoWordPress.io

HTMLtoWordPress.io

L’application en ligne HTMLtoWordPress.io est l’une des solutions les plus populaires pour convertir un fichier HTML vers WordPress. Ce qui est intéressant avec l’outil HTMLtoWordPress.io, c’est qu’il propose principalement des conversions pour des sites web complets, des sites web construits avec du HTML.

Il vous suffit d’ouvrir la page d’accueil et de téléverser votre fichier zip HTML pour une conversion rapide. L’application web automatise entièrement la conversion du HTML vers WordPress, de sorte qu’il n’est pas nécessaire d’avoir des compétences en codage ni de s’embêter avec un client FTP.

Vous avez également la possibilité de visualiser un aperçu complet de votre nouveau site WordPress avant de terminer le processus et de le publier sur Internet. Le contenu et les images de votre site sont également conservés pour le nouveau site WordPress. Ils sont modifiables via l’application Simple Live Editor, et celle-ci est censée référencer ces images, ainsi que le JavaScript et le CSS. Dans l’ensemble, cela semble être une solution solide si vous avez un ou plusieurs sites web HTML à convertir. En bonus, vous pouvez ajouter des classes à votre HTML pour utiliser les fonctionnalités avancées de WordPress.

Pinegrow Theme Converter for WordPress

Pinegrow Theme Converter est un outil de conception web unique qui permet de prendre un répertoire de site web HTML et de le convertir instantanément en un thème WordPress complet. Le convertisseur de thème téléverse vos fichiers et présente un aperçu du site WordPress dans une interface visuelle. Après le téléversement, vous pouvez cliquer sur différents éléments des pages et attribuer des actions intelligentes à chaque élément. Celles-ci s’intègrent à WordPress, de sorte que pendant que vous attribuez des actions, il ajoute les bonnes caractéristiques de WordPress à votre structure et à votre style HTML personnalisé.

Pinegrow Theme Converter

Pinegrow Theme Converter

Une fois que vous avez décidé des actions souhaitées et enregistré les fichiers, Pinegrow a une option pour exporter le projet dans des fichiers PHP standard de WordPress, qui peuvent être téléversés dans une installation WordPress normale pour le tester dans la vie réelle. En outre, le système d’importation de contenu garantit que vous transférez avec succès les éléments médias comme les images et les vidéos.

Nous apprécions particulièrement les fonctionnalités qui vous permettent de retourner dans Pinegrow et de faire des modifications. Il vous suffit de cliquer sur le bouton « Update » et d’envoyer la nouvelle version à votre thème WordPress sans avoir à modifier le codage avancé ou à ajuster le site web dans WordPress.

Ce n’est pas une extension. En fait, aucune extension WordPress n’est utilisée pour transformer le fichier HTML en un thème WordPress. Pinegrow est disponible sous forme de logiciel téléchargeable dans les versions Mac, Windows et Linux. De l’éditeur visuel magnifique à la fonction de mise à jour immédiate, le logiciel Pinegro semble être l’une des meilleures options pour convertir un site web HTML complet en un thème WordPress.

Jekyll

Jekyll

Jekyll

Jekyll est un convertisseur gratuit de HTML vers WordPress qui fonctionne en transformant des fichiers de texte brut en véritables sites web. Le projet est hébergé sur Github et peut être téléchargé gratuitement. Il offre la possibilité d’éliminer le besoin de bases de données et de modération des commentaires au lieu de se concentrer sur le transfert de votre contenu et le transfert/la conversion de fichiers avec HTML, CSS.

Un aspect intéressant de Jekyll est qu’il s’occupe de la conception HTML des blogs, en compilant les réglages de contenu des pages, des articles et des permaliens pour migrer votre blog et conserver, ou créer, des mises en page et des catégories personnalisées et bien d’autres choses encore.

Vous pouvez installer le convertisseur Jekyll sur macOS, Ubuntu, Windows, et même sur d’autres systèmes d’exploitation Linux. Dans l’ensemble, Jekyll est un projet bénévole qui propose diverses ressources comme des thèmes, des extensions et des guides pour tester vos connaissances et vous aider à transformer un design HTML en quelque chose de spécial.

Nous apprécions particulièrement les intégrations avec les outils eCommerce comme MemberSpace et les applications de formulaires comme Getform. La liste des intégrations est longue, mais elle témoigne du potentiel de votre site web après la conversion du HTML vers WordPress.

Theme Matcher

Convertisseur Theme Matcher pour HTML vers WordPress

Convertisseur Theme Matcher pour HTML vers WordPress

Theme Matcher n’est pas tant un convertisseur de fichiers HTML qu’un extracteur de fichiers HTML provenant de sites web tiers. Il génère des thèmes WordPress à part entière après que vous ayez collé une URL depuis votre site personnel ou depuis un site HTML qui ne vous appartient pas.

L’idée derrière ce type de convertisseur et générateur de thèmes est soit de prendre un de vos propres sites HTML et de le transformer en un site WordPress complet, soit de faire un thème basé sur un design que vous avez remarqué ailleurs en ligne.

Aperçu de Theme Matcher

Aperçu de Theme Matcher

Par exemple, vous pourriez vous rendre sur votre boutique en ligne préférée et décider de commencer votre création avec ce formatage et cette structure. Theme Matcher génère un thème entièrement nouveau pour votre site, qui doit évidemment être modifié pour des raisons de droits d’auteur, mais il constitue un excellent point de départ.

Le processus fonctionne en copiant et en collant l’URL d’un site dans le champ Theme Matcher. Demandez-lui de créer un thème pour vous et sélectionnez la mise en page du site à convertir en contenu WordPress. Une grande partie de la conversion de HTML vers WordPress se déroule en arrière-plan ici, et il est important d’identifier ces zones de contenu WordPress pour qu’elles soient aussi proches que possible d’un vrai thème WordPress. Enfin, vous pouvez télécharger le thème et le charger sur votre CMS WordPress.

Si votre site HTML n’est pas encore en ligne et que vous ne pouvez pas coller d’URL, Theme Matcher vous permet de téléverser un fichier zip de votre page HTML et de suivre le même processus.

Import Into Blog

ImportIntoBlog.com Convertisseur HTML vers WordPress

ImportIntoBlog.com Convertisseur HTML vers WordPress

Le site web Import Into Blog est une application en ligne qui récupère les fichiers HTML et autres de votre site web en direct pour les convertir en un site WordPress. Plusieurs options sont disponibles, telles que la création d’un fichier XML téléchargeable à charger sur votre site WordPress. Vous pouvez également envisager de téléverser le résultat final sous la forme d’un thème WordPress pour le charger sur WordPress et voir le site web terminé.

La récupération automatique des sites est disponible avec l’outil ImportIntoBlog. Sans oublier que tous les liens internes sont réécrits pour qu’ils renvoient aux bonnes pages de votre nouveau site. La grande majorité du contenu du site est découverte automatiquement, et vous pouvez personnaliser l’apparence et le style du thème avant de l’exporter. En général, l’outil fonctionne mieux avec des fichiers HTML statiques ou une URL. Il gère les fichiers CSS et Javascript, vous permet de comprendre l’histoire complète de votre site web et de le faire fonctionner correctement.

HTML to WordPress Converter

Application HTML to WordPress Converter

Application HTML to WordPress Converter

HTML to WordPress Converter est une autre solution qui permet de transformer un site web HTML en thème WordPress.

Il y a un champ d’URL du site web à coller et il ne reste qu’à cliquer sur le bouton Générer un thème. Vous choisissez le contenu et les zones latérales de WordPress pour que vos pages et vos articles se retrouvent au bon endroit, et vous récupérez les données exactes du site web HTML précédent. Il semble que tout votre contenu devrait effectuer le transfert. Cependant, vous devrez peut-être vérifier vos photos et autres éléments médias et effectuer le transfert occasionnel par WordPress.

Il en résulte un thème et non un site web complet. Vous devez activer votre propre site WordPress et l’héberger ailleurs. Vous téléchargez le thème à partir de cet outil, un thème qui ressemble exactement au site web HTML d’avant. Gardez à l’esprit que certains éléments ne fonctionneront pas comme vous les aviez à l’origine, mais cet outil fait un excellent travail de maintien de la structure et du formatage de votre site d’après nos tests.

Apparemment, les développeurs de l’outil de conversion du HTML vers WordPress fournissent également des modifications CSS gratuites si quelque chose ne se passe pas comme vous le souhaitez.

PHP Simple HTML DOM Parser

Outil PHP Simple HTML DOM Parser

Outil PHP Simple HTML DOM Parser

PHP Simple HTML DOM Parser complète un processus nécessaire lors du téléversement d’un fichier HTML vers WordPress. Le parser permet de localiser, d’extraire et de modifier tout élément HTML sur votre site web ou dans un fichier HTML. De cette façon, vous pouvez identifier les erreurs, les corriger avant de les convertir en un site WordPress, ou même utiliser l’outil pour modifier les éléments HTML qui existent sur votre site WordPress actuel.

Il s’agit d’un téléchargement gratuit sur le site de SourceForge, ce qui vous permet de consulter les critiques et de demander de l’aide si nécessaire.

Embaucher une personne réelle

Service de conversion de HTML vers WordPress

Service de conversion de HTML vers WordPress

WP Geeks, WP Online Support, et Acclaim fournissent des services de conversion HTML vers WordPress à un prix raisonnable pour ceux qui ne veulent pas s’embêter à effectuer eux-mêmes une conversion ou pour ceux dont l’un des outils automatisés cités plus haut ne produit pas de résultats solides. La raison pour laquelle un convertisseur humain a parfois tant de sens est que vous pourriez finir par économiser du temps et de l’argent sur le processus, surtout si c’est un travail facile que vous n’avez tout simplement pas les connaissances nécessaires pour mener à bien.

Le partenariat avec un véritable développeur signifie que vous n’avez pas à utiliser vos propres compétences techniques – ou votre manque de compétences techniques – pour créer un nouveau site web à partir des fichiers HTML. Le travail est délégué à des personnes qui savent ce qu’elles font, et il est beaucoup plus probable que vous puissiez trouver la bonne aide, poser des questions et faire des demandes, par rapport à une application web qui pourrait n’avoir que quelques développeurs qui pourraient vous aider.

En outre, cela vous permet de demander quelle fonctionnalité vous souhaitez maintenir sur le nouveau site web, et c’est presque une garantie que les actions du site web seront effectivement transférées et fonctionneront comme elles le devraient.

L’embauche d’un convertisseur humain HTML vers WordPress n’est pas toujours prévue dans le budget, mais cela vaut la peine d’y réfléchir si vous avez des problèmes et que vous avez un peu d’argent à dépenser.

Comment convertir du HTML en WordPress avec une application ou une extension automatisée

Si vous avez des questions sur l’utilisation d’un des convertisseurs automatisés HTML vers WordPress précédemment listés, voici un exemple avec WP Site Importer. C’est l’une des solutions les plus réputées, et il s’agit d’une extension WordPress tierce qui regroupe de nombreuses fonctionnalités d’autres convertisseurs automatisés du HTML vers WordPress.

Pour commencer, téléchargez, installez et activez l’extension WP Site Importer sur votre tableau de bord WordPress. Vous devez télécharger le fichier zip sur le site web du développeur et vous inscrire pour l’essai gratuit. Il existe également des plans premiums à envisager. Cliquez ici si vous avez des questions sur l’installation d’une extension WordPress.

L’extension WP Site Importer offre une série d’outils d’importation pour les pages et les articles individuels, ainsi que pour les sites web complets et les éléments supplémentaires nécessaires à la réalisation du travail, comme la localisation d’images et la modification de liens internes.

Pour cet exemple, nous allons passer en revue la plupart des fonctionnalités, en commençant par une seule page HTML. Dans le tableau de bord WordPress, allez sur Site Importer > Importer une page.

Importer du HTML dans une page WordPress

Importer du HTML dans une page WordPress

La grande majorité des réglages par défaut de l’extension sont prêts à l’emploi, ce qui signifie que vous n’avez généralement rien à changer. À moins, bien sûr, que vous ne souhaitiez modifier certaines choses, comme l’importation d’une page en tant qu’article ou la suppression d’images. N’hésitez pas à faire défiler tous les réglages de l’extension pour vous assurer qu’ils correspondent à vos besoins.

Il suffit de coller l’URL à scanner pour importer une seule page.

Note : le téléversement de fichiers n’est disponible que pour les conversions de plusieurs pages.

L'assistant d'importation de page

L’assistant d’importation de page

Cliquez sur le bouton Importer une page pour continuer.

Cliquer sur le bouton « Importer une page ».

Cliquer sur le bouton « Importer une page ».

L’extension vous indique ce qui a réussi et fournit plusieurs liens pour prévisualiser les nouvelles pages WordPress et les modifier si nécessaire.

Cliquez sur le lien « Aperçu »

Cliquez sur le lien « Aperçu »

Vous voudrez également transférer tous les menus du site HTML statique.

Pour cela, allez sur Site Importer > Importer des menus.

Importer des menus dans WordPress

Importer des menus dans WordPress

L’importation de menu est similaire à la conversion de fichier puisqu’elle demande l’URL. Vous pouvez également définir des éléments comme la densité du menu et la taille minimale du menu.

Cliquez sur Identifier le menu pour continuer.

Le panneau Assistant d'importation de menu

Le panneau Assistant d’importation de menu

Chaque élément du menu apparaît désormais sur une liste. Vous devriez également voir plusieurs menus si vous en aviez plusieurs sur votre site HTML.

Cochez les menus que vous souhaitez importer et donnez un nom à chacun d’entre eux. Cliquez sur le bouton Importer le menu.

Importer un menu

Importer un menu

Avec les importations de menu WordPress, il faut encore configurer l’emplacement du menu.

Dans le tableau de bord, rendez-vous sur Apparence > Menus.

Nommez et créez un menu puis enregistrez-le dans WordPress. Vous devriez déjà voir le menu importé si tout a fonctionné comme prévu.

Enregistrer le menu importé

Enregistrer le menu importé

Cliquez sur l’onglet Gérer les emplacements et trouvez le menu importé dans la liste déroulante. Vous devez placer ce nouveau menu à l’emplacement de votre choix.

Veillez à Enregistrer les modifications lorsque vous avez terminé.

Changer l'emplacement du menu si nécessaire

Changer l’emplacement du menu si nécessaire

Une autre partie de l’importation d’un site HTML vers WordPress consiste à localiser les images. Pour compléter ce processus, allez dans Site Importer > Localiser les images.

Localisation des images pour la conversion de HTML vers WordPress

Localisation des images pour la conversion de HTML vers WordPress

Tous les réglages par défaut pour la localisation de l’image sont généralement bons à utiliser.

Cliquez sur le bouton Suivant.

Cliquez sur le bouton « Suivant » pour commencer

Cliquez sur le bouton « Suivant » pour commencer

Vous y trouverez une liste des images transférées depuis le site web précédent.

Sélectionnez celles que vous souhaitez localiser et cliquez sur le bouton Suivant.

Voir toutes les images importées

Voir toutes les images importées

En quelques secondes, l’extension ajoute chaque image à votre médiathèque WordPress, leur donnant ainsi toutes les URL du nouveau site web. Vous pouvez vous rendre dans la médiathèque pour vous assurer que cette transition a bien eu lieu.

Le produit final des images localisées

Le produit final des images localisées

Une autre partie de la conversion HTML consiste à mettre à jour vos liens internes. Tous les transferts de sites web entraînent généralement des liens rompus et des problèmes avec les structures d’URL.

Nous devons les corriger, alors rendez-vous sur Site Importer > Mettre à jour les liens internes pour commencer.

Mettre à jour les liens internes de manière approfondie

Mettre à jour les liens internes de manière approfondie

La page suivante explique comment les anciens liens seront remplacés par des versions du nouveau domaine du site web, en ajoutant des sous-répertoires pour une expérience utilisateur fluide qui réside sur l’URL du site WordPress.

Il vous suffit de cliquer sur le bouton Mettre à jour les liens. L’extension effectue toutes les conversions pour vous.

Cliquez sur le bouton « Mettre à jour les liens ».

Cliquez sur le bouton « Mettre à jour les liens ».

Si vous prévoyez de convertir un site web HTML entier (plutôt qu’une seule page), rendez-vous dans l’onglet Importer plusieurs pages dans le menu de Site Importer.

C’est également une excellente option pour ceux qui souhaitent téléverser des fichiers de sites locaux au lieu de copier une URL.

Importer plusieurs pages à la fois

Importer plusieurs pages à la fois

L’assistant de pages multiples comporte des champs pour coller une URL et téléverser des fichiers HTML du site.

Choisissez ce qui convient le mieux pour votre travail.

Saisissez l'URL à scanner pour l'importation

Saisissez l’URL à scanner pour l’importation

Au fur et à mesure de la conversion et de l’importation du site HTML, vous verrez une liste d’URLs s’afficher sur votre site WordPress. Vous pouvez supprimer certaines des pages de l’importation si vous n’en avez pas besoin. Vous avez également la possibilité d’importer des articles, de les définir comme non publiés et d’inclure l’image mise en avant.

L'assistant d'importation de pages multiples

L’assistant d’importation de multiples pages

La dernière étape révèle la liste complète des pages web converties du site HTML vers votre système WordPress. Vous pouvez maintenant cliquer sur le bouton Modifier ou Prévisualiser de chaque page pour continuer à personnaliser votre site web.

Toutes les pages importées et prêtes

Toutes les pages importées et prêtes

N’oubliez pas qu’une conversion comme celle-ci ne signifie pas que vous verrez immédiatement le design exact de votre site web HTML. Vous devrez peut-être importer une feuille de style ou même coder vous-même le site ou les pages.

Que vous ayez un vieux site HTML et que vous le fassiez fonctionner sur un CMS WordPress ✅ ou que vous ayez besoin d'un endroit pour stocker ou partager un fichier HTML & WordPress est la solution parfaite ✅, ce guide vous apprendra à faire facilement la conversation de HTML 👉 WordPressClick to Tweet

Résumé

Passer du HTML à WordPress demande un peu de travail. Mais le défi en vaut la peine. Le passage du HTML à WordPress peut également faciliter des tâches moins lourdes, comme la vérification de la propriété de votre site ou la mise en place d’un simple module HTML.

Les possibilités sont nombreuses en ce qui concerne le téléversement et la conversion de fichiers HTML. N’oubliez pas que vous pouvez généralement effectuer une grande partie du travail avec un convertisseur HTML automatisé. Après cela, il y aura très probablement du travail manuel, mais avec la combinaison des bons outils et des bonnes connaissances, vous pouvez dupliquer presque tous les sites web HTML que vous voulez !

Si vous avez des questions concernant le téléversement de fichiers HTML vers WordPress ou la conversion de fichiers HTML vers des sites WordPress, faites-le nous savoir dans la section des commentaires ci-dessous.


Si vous avez aimé cet article, alors vous allez adorer la plateforme d’hébergement WordPress de Kinsta. Accélérez votre site Web et obtenez le support 24/7 de notre équipe de vétérans de WordPress. Notre infrastructure propulsée par Google Cloud met l’accent sur la mise à l’échelle automatique, la performance et la sécurité. Laissez-nous vous montrer la différence de Kinsta ! Découvrez nos plans