WordPress
time_read44mn de lecture

Comment convertir du HTML en WordPress ?

23 août 2022

Comment convertir du HTML en WordPress ?

Près de 33 % des sites Web sur Internet sont alimentés par WordPress. En tant que propriétaire de site Web, vous pourriez envisager de convertir votre site HTML statique en WordPress.

Il est toujours possible d’avoir un site Web en HTML, car le HTML5 est assez puissant, surtout pour un site vitrine. Mais pour tout le reste, WordPress offre des solutions plus confortables. WordPress propose de nombreux thèmes, plugins et widgets pour améliorer le site Web et ajouter des fonctionnalités utiles.

Il est également facile à gérer. Vous pouvez ajouter et supprimer du contenu sans avoir à coder. Avec un site HTML, c’est une autre histoire. À moins que vous ne sachiez coder, la mise à jour du contenu en HTML peut être difficile.

Dans cet article, vous apprendrez comment convertir du HTML en WordPress, et les différentes méthodes pour le faire.

Ce qu’il faut prendre en compte lors de la conversion

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

1- Le service d’hébergement

Vous devez avoir un plan d’hébergement avant de commencer, car les exigences peuvent être différentes de celles d’un site HTML. Vous aurez besoin d’un hébergement WordPress. Sinon, vous pouvez héberger votre site localement, et le mettre en ligne plus tard.

Besoin d’un hébergement WordPress rapide et de qualité ?

LWS vous conseille sa formule d’hébergement WordPress en promotion à -20% (offre à partir de 3,99€ par mois au lieu de 4,99 €). Non seulement les performances sont au rendez-vous mais vous profitez en plus d’un support exceptionnel.

Découvrir l’offre

2- Un éditeur de code

Vous aurez besoin d’un éditeur de code tel que Notepad++, Atom, Sublime, etc., pour modifier le code HTML de votre site.

Plus d'informations


Vous cherchez le meilleur éditeur HTML pour votre projet ? Consultez notre liste des meilleurs éditeurs HTML gratuits.

3- Du temps et de l’argent

Vous devez prendre en compte le temps et l’argent que vous êtes prêt à investir. Si vous êtes prêt et engagé à apprendre, ce tutoriel est fait pour vous. Sinon, vous pouvez également embaucher des développeurs ou utiliser des applications de migration WordPress pour vous aider à convertir. Embaucher quelqu’un est beaucoup plus facile, mais vous perdrez l’occasion d’apprendre, et le processus pourrait être coûteux.

Les différentes façons de convertir du HTML en WordPress

Il existe plusieurs méthodes pour convertir du HTML en WordPress, et elles présentent des niveaux de difficulté différents. Elles sont les suivantes :

1- Créer un thème WordPress à partir d’un site HTML statique. Si vous préférez que le design de votre ancien site HTML reste intact, cette option est pour vous. C’est aussi la voie la plus difficile et elle nécessite du codage. Mais, ne vous laissez pas intimider. Tout ce que vous avez à faire est de copier/coller l’ancien code HTML dans plusieurs fichiers PHP.

2- Oublier le design et ne garder que le contenu. Si vous êtes d’accord pour laisser derrière vous l’ancien design de votre site et trouver un thème WordPress pour un nouveau départ, cette option est pour vous. Vous n’avez qu’à transférer le contenu depuis l’administration.

3- Utiliser un thème enfant adapté d’un thème existant. C’est probablement la solution la plus simple si vous souhaitez conserver le design de l’ancien site. Avec cette méthode, vous allez utiliser un thème WordPress préexistant et le développer. En prime, vous pourrez utiliser immédiatement les puissantes fonctionnalités de WordPress.

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

Si votre objectif est de créer un site Web WordPress qui ressemble à votre ancien site HTML à partir de zéro, vous pouvez commencer ici.

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

Créez un nouveau dossier de thème sur votre bureau et nommez-le. Dans cet article, ce dossier sera nommé « mon-theme ». Ensuite, ouvrez votre éditeur de code et créez les fichiers suivants :

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

Laissez l’éditeur ouvert. Nous y reviendrons plus tard.

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

Maintenant, vous allez créer une feuille de style WordPress en copiant votre ancien code CSS dans celle-ci. Allez dans le fichier style.css, et collez ce code :

/* Theme Name: Mon Thème 
Author: John Doe Author 
URI: http://monsite.com 
Description: Développement de thème, du HTML statique à WordPress 
Version: 1.0 
License: GNU General Public License v2 or later 
License URI: http://www.gnu.org/licenses/gpl-2.0.html */

Ce code fournit l’information à WordPress qu’il s’agit d’un en-tête de feuille de style de thème. Vous pouvez modifier 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 fichier.

3. Diviser l’ancien code HTML de votre site Web

WordPress utilise PHP pour extraire des informations de sa base de données. Vous devez donc diviser le code HTML de votre ancien site en plusieurs parties pour vous assurer qu’il peut les assembler correctement.

Si cela vous semble compliqué, ne vous inquiétez pas, le processus est assez simple.

Divisez chaque partie (en-tête, contenu, pied de page) puis fermez les fichiers à l’exception de header.php et index.php.

4. Changer le style en format WordPress

Dans l’en-tête, tout ce que vous devez faire est de changer la feuille de style de HTML au format WordPress. Cherchez un lien existant dans la section <head>. Dans le cas de l’exemple, c’est quelque chose comme 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" />

Maintenant, vous pouvez enregistrer et fermer le fichier header.php.

Pour le fichier index.php, il devrait être vide pour le moment, alors copiez et collez ces lignes de code :

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

Ce code appellera le reste de vos fichiers WordPress. Vous devriez remarquer l’espace entre l’en-tête et la barre latérale. C’est là que vous allez ajouter la boucle.

La boucle traitera chaque article pour l’afficher, et le mettra en forme en fonction de la façon dont le contenu correspond aux critères des balises de la boucle. C’est un aspect important 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; ?>

Après avoir 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écharger votre thème sur WordPress

Après avoir terminé la création du thème de base, vous pouvez le télécharger sur WordPress. Tous les fichiers contenus dans le dossier de votre thème doivent se trouver au même endroit. Pour ce faire, vous pouvez les zipper.

Allez dans votre tableau de bord d’administration de WordPress. Allez dans « Apparence -> Thèmes ». Cliquez sur « Ajouter -> Mettre un thème en ligne »

convertir du HTML en WordPress

Dans le menu, localisez le fichier zip de votre thème, téléchargez-le et cliquez sur le bouton « Installer maintenant ». Après cela, n’oubliez pas d’activer le thème.

Votre interface devrait maintenant ressembler à l’ancien site. Vous devez savoir que si la conception de base est la même, il y a d’autres choses que vous devez faire pour améliorer l’intégration.

Par exemple, vous ne pouvez pas utiliser les fonctionnalités de WordPress comme la zone des widgets. Vous devez également ajuster le balisage CSS pour qu’il fasse partie du design original de WordPress.

Renoncer au design et ne conserver que le contenu

Si vous êtes d’accord pour laisser derrière vous l’ancien design HTML de votre site Web et que vous souhaitez utiliser un nouveau thème à la place, c’est une option. Cette méthode rendra également l’importation de contenu beaucoup plus facile.

Tout ce que vous avez à faire est d’installer le thème que vous préférez et de l’activer, puis de suivre les étapes ci-dessous.

1. Installez le plugin HTML Import 2

Vous devez installer le plugin HTML Import 2. Allez dans « Plugins -> Ajouter » et recherchez-le par son nom. Vous le trouverez un peu plus bas car c’est un vieux plugin mais il fait toujours un excellent travail. Cliquez sur installer et activez le.

Plus d'informations


Vous avez besoin de plus d’information pour installer et activer votre plugin WordPress ? Découvrez la procédure complète dans notre article Comment installer un plugin WordPress ?

2. Préparez l’importation

Maintenant, allez dans « Réglages -> HTML Import ». Vous pouvez importer plusieurs pages à la fois ou une seule à la fois.

Préparez l'importation

Vous remarquerez que le plugin pointe vers un chemin spécifique comme html-files-to-import. Cela signifie que vous devez télécharger le fichier HTML sur le même serveur que votre installation WordPress. Si vous avez besoin de plus de détails, vous pouvez vous référer au guide d’utilisation officiel.

Ce tutoriel traitera de l’import du contenu. Pour ce faire, choisissez la balise HTML en haut et sélectionnez sa configuration dans les trois champs suivants.

Une fois que vous avez terminé, cliquez sur le bouton « Save settings ».

3. Commencez à importer votre contenu

Le bouton « Importer les fichiers » sera disponible une fois que vous aurez enregistré les paramètres. Si vous l’avez manqué, vous pouvez également y accéder à partir de « Outils -> Importer » et cliquez sur Exécuter l’importateur sous les options HTML.

importer le contenu

Choisissez si vous voulez importer un répertoire de fichiers ou un seul fichier, puis cliquez sur le bouton « Soumettre ». Une fois cette opération effectuée, tout votre contenu existant sera disponible sur votre nouveau site WordPress.

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

Si vous souhaitez conserver une partie du design de votre ancien site Web, mais que la première méthode vous semble un peu lourde, l’utilisation d’un thème enfant peut être une alternative simple.

Les thèmes enfant vous permettent de profiter des milliers de thèmes existants (appelés thèmes parents) sur WordPress et de construire votre nouveau site par-dessus.

Vous pouvez également apporter des modifications à l’apparence de votre site sans perturber le noyau du thème parent. Vous ne perdrez aucune des modifications apportées lors de la mise à jour de votre thème.

Nous avons écrit un article plus avancé sur la façon de créer un thème enfant WordPress. Ce tutoriel utilise « Childify Me » pour simplifier le processus pour les débutants.

1. Choisissez un thème approprié

Vous devez trouver un thème approprié comme base sur laquelle vous pourrez travailler. Ce serait bien si vous pouviez trouver un thème proche du design de votre ancien site Web, afin de ne pas avoir à changer trop de choses par la suite.

Parcourez le répertoire des thèmes WordPress pour trouver un candidat approprié. Dans ce tutoriel, le thème Twenty Seventeen sera utilisé comme point de départ.

2. Installez Childify Me

Allez dans le menu « Plugins -> Ajouter » et recherchez-le par son nom. Installez-le et activez-le.

plugin Childify Me

Remarque : Le plugin Childify Me crée des fichiers style.css et function.php. Si vous voulez ajouter des fonctions personnalisées dans un fichier functions.php, de nouveaux dossiers/fichiers, vous pouvez les télécharger en utilisant un client FTP.

3. Personnalisez le thème parent

Allez maintenant dans « Apparence -> Thèmes ». Assurez-vous que le thème parent est activé. Cliquez sur Personnaliser, puis accédez au panneau de personnalisation de votre thème actif.

4. Configurez le thème parent

Cliquez sur le bouton « Childify Me », et donnez un nom à votre thème enfant. Nous vous suggérons de lui donner un nom similaire à celui du thème parent. Cliquez sur créer. Une fois que vous avez terminé, cliquez sur activer et prévisualiser.

5. Commencez à importer votre contenu

Maintenant que votre nouveau site WordPress ressemble à l’ancienne version HTML statique, tout ce qui reste à faire est d’importer le contenu. Ici, vous pouvez utiliser la méthode précédente.

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 en WordPress.

Les avantages

  • Cela vous évite de devoir créer vos propres fichiers de site web, en les générant pour vous.
  • De nombreux convertisseurs vous offrent la possibilité de décomposer les éléments HTML et de choisir ceux qui iront dans les bons fichiers pour WordPress.
  • Vous pouvez créer un thème à partir d’un ancien HTML et l’utiliser sur plusieurs sites web.
  • Certains outils ne nécessitent qu’une URL pour créer un nouveau site ou un nouveau thème.
  • D’autres outils offrent la possibilité de reproduire un site web que vous ne possédez pas, ce qui constitue un point de départ pour un design que vous appréciez.

Les inconvénients

  • Il reste souvent du travail manuel pour transférer des contenus tels que des articles de blog et des photos.
  • Vous devrez très probablement trouver le moyen de transférer manuellement les liens de l’ancien site.

Ces convertisseurs ne sont pas toujours tenus à jour. L’un des meilleurs convertisseurs était une extension WordPress, mais nous ne l’avons pas suggérée dans cet article car le développeur ne la maintient plus.

  • Vous constaterez peut-être que certaines applications web de conversion ne peuvent pas traiter les travaux comportant des fichiers volumineux.

Maintenant que vous avez compris les avantages et les inconvénients des convertisseurs HTML automatisés, voyez ci-dessous les applications et extensions de conversions automatisées sélectionnés par LWS.

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.

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

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

L’application en ligne HTMLtoWordPress.io est l’une des solutions les plus populaires pour convertir du HTML en 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

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é.

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 « Mettre à jour » 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 convertir du HTML en 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.

Conclusion

Vous savez à présent ce qu’il faut faire avant de convertir un site HTML statique en WordPress et les différentes méthodes pour mener à bien ce processus. 🤩

Un bref récapitulatif : vous pouvez créer un thème WordPress à partir de zéro. C’est une méthode difficile mais une excellente option si vous savez coder et avez du temps libre à investir. Vous pouvez également utiliser des plugins pour faciliter la conversion et importer l’ensemble de votre contenu vers son nouvel emplacement.

Vous avez des questions ou des remarques ? N’hésitez pas à nous en faire part en commentaires !

Avatar de l'auteur

Auteur de l'article

Pascal

Pascal est un spécialiste du référencement et de rédaction chez LWS. Il est passionné par les nouvelles technologies et le blogging et possède des années d'expérience dans le web marketing. Ses passe-temps incluent les jeux de stratégie et la natation.

Avis client de l'hébergeur LWS

Nos avis Trustpilot Nos avis Hostadvice Nos avis sur avis.lws.fr
Avis trustpilot 30/04/2022

LWS l'hébergeur par excellence !

LWS est pour moi l'hébergeur par excellence, que cela soit au niveau de l'hébergement qui est très performant, les mails qui sont d'une qualité professionnelle et de la gestion du domaine facile à comprendre.

PauseGreen

Avis hostadvice 27/04/2022

Super, au top !

Au top, prix attractif. Service très rapide et réactif. Je l'ai même personnellement recommandé à des proches. La vie est bien plus facile avec LWS

Masset Eliot

Avis avislws 26/04/2022

Support

Clair, efficace, rapide et à tarif abordable. J'ai maintenant un site superbe à mon image, puisque je le fais moi-même. L'équipe technique est au top, j'ai une réponse en 20 minutes, cela change d'autres hébergeurs pourtant plus connu.

Lady Whip

Avis hostadvice 24/04/2022

Bravo et merci

Bravo et merci aux équipes techniques pour leur réactivité et leur professionnalisme depuis plus de 10 ans chez eux et de nombreux sites !!! Merci

Olivier Delmas

Avis trustpilot 23/04/2022

Je suis très satisfait.

J'ai commandé un hébergement pour le site d'une association. Tout s'est passé très rapidement et sans la moindre embuche. La tarification est attractive et me parait très claire. Le panneau d'administration de l'hébergement est facile à utiliser et à comprendre. Je n'ai pas encore installé Wordpress car le contenu n'est pas prêt mais ce sera la prochaine étape et je suis très confiant. Merci !

Pierre-André Liné

Avis avislws 20/04/2022

Un service technique excellent

Je suis client chez LWS depuis 2011 avec une boutique OSCommerce qui tourne comme une horloge depuis cette date sur un hébergement mutualisé. La disponibilité de la boutique est très proche de 100%. Concernant les rares problèmes rencontrés en huit ans, j’ai eu à chaque fois un technicien compétent qui a résolu le problème très rapidement et efficacement. Je suis en train de migrer sur une plateforme Pretashop sur un VPS, avec l’offre LWS Debian 9 et Prestashop. Un technicien m’a grandement aidé pour finaliser l’installation de la boutique lors de la mise à jour vers la dernière version de Prestashop 1.7 qui posait problème. Je suis très satisfait de LWS, et ce sur la durée : réponses et réactions rapides et efficaces. Je recommande cet hébergeur et encore merci.

Alain

Avis trustpilot 16/04/2022

Une expérience jamais égalée !

Étant Développeur Web & Mobile Full-Stack depuis plus de 5 ans déjà, j'ai rarement eu un service client aussi rapide et efficace. Sans compter la qualité du service en ligne. Je recommande VIVEMENT LWS !

Chris KOUAKAM

Avis hostadvice 12/04/2022

Très bon hébergeur

J'ai un serveur VPS chez eux et je n'ai aucun problème, dès qu'il y a un problème le service technique est la pour vous aider et répond assez rapidement à votre demande. Je recommande vivement cet hébergeur.

Vanden Cruyce

Avis avislws 09/04/2022

Je suis ravie

Je suis ravie d'être avec LWS sur tous les plans, je remercie les Techniciens (Fabrice, Omar, Sandy-Mahitsison) depuis plus de 8 ans j'ai évolué avec LWS et toujours soutenue. Une véritable relation humaine même si les questions ou nos inquiétudes ne correspondent pas à leurs missions, ils sont là pour nous répondent et nous rassurent. Mon site c'est mon travail ma source de revenue donc il sont mes partenaires ! les travailleurs de l'ombre merci à eux ! Merci LWS

L'atelier-and-Co

Commentaires (2)

bestofcomputer
22/07/2023 - 15:49
Karen
2023-07-24 14:14:11

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.