Comment convertir un site Web HTML en WordPress gratuitement ? Guider

Publié: 2015-05-18

Au début, tous les sites Web étaient créés avec du texte et du HTML statique. Il n'y avait pas de WordPress et il fallait convertir le site Web HTML en WordPress ou tout autre système CMS.

De nombreuses entreprises comptent encore sur de simples sites Web HTML pour leur présence en ligne. Ces sites HTML sont généralement de nature statique. Cela signifie que même la modification d'un détail mineur sur le site Web se fait en modifiant le fichier de codage.

Aujourd'hui, plus de 20 ans plus tard, le Web est un endroit bien différent. Alimentant plus de 25% du Web , WordPress devient de plus en plus le système de gestion de contenu (CMS) de choix pour l'utilisateur moyen.

Les sites Web sont beaucoup plus complexes. Ils offrent des expériences plus riches et plus agréables aux créateurs de sites et aux visiteurs. Passer à WordPress signifie-t-il recommencer et perdre tout le temps, l'énergie et l'argent investis dans le site Web actuel ?

Table des matières

Site Web HTML

Quelle que soit la façon dont votre site est codé, une fois qu'un visiteur charge une page sur votre site, le navigateur prend tous les morceaux (inclus côté serveur, images d'un autre répertoire, etc.) et les rassemble dans un HTML statique final. page.

Même si certains éléments de la page sont toujours dynamiques, le code lui-même est réuni en un seul endroit qui peut être déplacé dans une page WordPress qui fonctionnerait toujours. Il peut y avoir quelques exceptions à cela, mais pour la plupart des sites, ce serait vrai.

Même si votre site se compose d'une page.php, qui appelle un fichier nommé header.inc, et d'un fichier nommé footer.php, lorsque l'utilisateur consulte une page.php dans un navigateur, le code source résultant se trouve au même endroit , comme si elles ont été codées à la main sous la forme d'une page HTML statique.

C'est le type de code qui est nécessaire pour convertir un site en WordPress. Toute personne disposant d'une installation WordPress et du bon thème/plugins peut avoir un site Web moderne avec une conception et des fonctionnalités avancées.

Migrer d'un site HTML statique vers WordPress

Si vous êtes prêt à passer à WordPress, voici quatre étapes à prendre en compte :

1. Analysez votre site HTML existant

Vérifiez votre site pour le contenu non pertinent ou obsolète et s'il le trouve, nettoyez-le. Examinez le système de navigation actuel et réfléchissez à la manière dont il peut être amélioré. Faire votre analyse de site HTML vous aiderait à décider quels contenus, fonctionnalités et fonctionnalités doivent être migrés vers WordPress.

Cela donnera une idée claire des plugins que vous devez installer pour obtenir les mêmes fonctionnalités sur la plate-forme WordPress.

2. Apprenez à connaître WordPress

L'installation de WordPress est un processus assez simple. La plupart des hébergeurs proposent une installation en un clic. Si vous n'êtes pas familier, il serait bon de lire et d'informer sur la nouvelle plate-forme sur laquelle votre site travaillera.

3. Faites une sauvegarde de votre site HTML

Il est fortement recommandé de faire une sauvegarde complète de votre site statique pour éviter tout risque de perte de données lors de la migration.

4. Convertir un site Web HTML en WordPress

En supposant que vous ayez suffisamment de connaissances en codage et que votre site soit petit, la meilleure option possible devant vous consiste à diviser votre code HTML existant en quatre sections (en-tête, pied de page, barre latérale et contenu), puis à copier le contenu de chaque section dans son fichier PHP respectif.

Si votre site est volumineux, vous pouvez profiter d'un plug-in HTML vers WordPress, comme HTML Import 2 ou engager quelqu'un pour convertir le HTML en WordPress.

Comment convertir un site Web HTML en tutoriel WordPress

La façon dont vous choisissez de convertir votre site HTML statique en site WordPress dépendra sans aucun doute de vos préférences personnelles, de l'investissement temps/argent souhaité et de votre niveau de compétence avec le code.

Méthode 1

Avec cette méthode pour convertir un site Web HTML en WordPress, vous conserverez le même design et le même aspect du site.

1. Téléchargez les pages HTML depuis votre hébergeur actuel. Utilisez WinHTTrack pour ce faire. C'est un excellent outil gratuit qui est très facile à utiliser. Assurez-vous de récupérer également le dossier d'images (ou partout où vous avez vos images sur l'ancien site).

2. Installez WordPress sur votre nouvel hébergeur.

  • Définissez votre structure de lien permanent sur « Nom de la publication » (/%postname%/)
  • Cochez la case « Décourager les moteurs de recherche d'indexer ce site » (jusqu'à ce que tout soit fait)
  • Installez un plugin de mode de maintenance (si vous le souhaitez) afin que personne d'autre que vous ne puisse accéder à votre nouveau WordPress.
  • Installez le plugin WordPress gratuit HTML Import 2. Utilisez-le pour « télécharger » l'ancien site sur votre nouveau site. Guide utilisateur pour importer l'intégralité de votre répertoire de pages HTML.

3. Téléchargez le contenu que vous venez de télécharger à l'étape 1 dans votre nouvelle structure de fichiers d'hébergement Web. Placez-les dans un dossier appelé, par exemple, « fichiers html à importer ». Téléchargez toutes les anciennes images dans votre médiathèque dans WordPress sur votre nouveau site.

4. Exécutez l'importation

5. Préparez votre invite de commande DOS et Excel

  • À l'invite DOS, accédez à l'endroit où vous avez placé vos fichiers HTML (il est plus facile de les mettre dans un dossier nommé « votre site Web » et de placer ce dossier dans le lecteur C:\). Ensuite, lancez cette commande : i. dir > fichiers.txt
  • Ouvrez le fichier files.txt dans Excel.
  • Maintenant à Excel. Essentiellement, vous allez utiliser quelques fonctions Excel, y compris « concaténer » pour rendre le code « canonique » que vous mettrez dans les fichiers HTML.
  • Placez le code canonique correspondant dans chaque fichier HTML. Vous pouvez le faire, le louer à un sous-traitant ou embaucher quelqu'un pour écrire le code PHP qui le ferait automatiquement.

6. Téléchargez les fichiers HTML sur votre hébergeur . Placez-les dans le dossier ROOT (c'est-à-dire le plus haut) de votre nouveau site Web. N'oubliez pas de télécharger également le dossier des images sur le ROOT.

7. Assurez-vous que tout fonctionne toujours sur le nouveau site.

8. Décochez la case de l'étape 2 – « Décourager les moteurs de recherche d'indexer ce site » et désactivez le plug-in HTML Import 2.

9. Modifiez le DNS chez votre registraire.

10. Assurez-vous que l'URL de votre site correspond à la bonne IP (votre nouvelle IP pas l'ancienne IP) et que TOUTES les pages se chargent correctement. Vous devrez peut-être attendre quelques heures pour que les serveurs de noms soient mis à jour.

11. Vous pouvez supprimer les anciennes pages HTML après un certain temps, mais ce n'est pas nécessaire. Vous ne serez pas frappé de pénalités de « contenu en double » car les références canoniques s'en chargent.

Vous voudrez ajouter des redirections dans votre fichier .htaccess qui pointent vos anciennes « pages .html » vers vos nouvelles pages WordPress.

Méthode 2

Si votre objectif est non seulement d'obtenir votre contenu de votre site HTML statique dans WordPress, mais également de dupliquer votre conception actuelle, cela signifie que vous devrez créer votre thème personnalisé.

Cela implique seulement de créer quelques dossiers et fichiers, un peu de copier-coller, puis de télécharger le résultat. Vous aurez besoin d'un éditeur de code tel que Sublime ou Notepad++ et d'un accès à la fois au répertoire de votre site HTML et au répertoire de votre nouvelle installation WordPress.

1.Créez un nouveau dossier de thème et les fichiers nécessaires. Sur votre bureau, créez un nouveau dossier pour contenir vos fichiers de thème. Nommez-le comme vous souhaitez que votre thème soit identifié.

Ensuite, créez quelques fichiers (qui vont tous dans votre nouveau dossier de thème) dans votre éditeur de code :

  • Style.css
  • Index.php
  • en-tête.php
  • barre latérale.php
  • pied de page.php

2. Copiez le CSS existant dans une nouvelle feuille de style Si vous cherchez à dupliquer un design, cela signifie probablement que vous avez au moins quelques CSS que vous souhaitez enregistrer. Ainsi, le premier fichier que vous allez vouloir éditer est votre fichier Style.css.

Pour commencer, ajoutez ce qui suit en haut de votre fichier.

 /*
 Nom du thème : remplacez-le par le nom de votre thème.
 URI du thème : URI de votre thème
 Description : une brève description.
 Version : 1.0
 Auteur : Vous
 URI de l'auteur : l'adresse de votre site Web.
 */

Après cette section, collez uniquement votre CSS existant ci-dessous. Enregistrez et fermez le fichier.

3. Séparez votre HTML actuel

Voici le processus de couper et coller des parties de votre code existant dans les différents fichiers que vous avez créés.

  • Tout d'abord, ouvrez le fichier index.html de votre site actuel. Mettez tout en surbrillance, du haut du fichier à la balise d'ouverture div class="main" . Copiez et collez cette section dans votre fichier header.php , enregistrez et fermez.
  • Revenez à votre fichier index.html . Mettez en surbrillance l'élément side class="sidebar" et tout ce qu'il contient. Copiez et collez cette section dans votre fichier sidebar.php , enregistrez et fermez.
  • Dans votre index.html, sélectionnez tout après votre barre latérale et copiez-le et collez-le dans votre fichier footer.php , enregistrez et fermez.
  • Dans votre fichier index.html , sélectionnez tout ce qui reste (cela devrait être la section de contenu principale) et collez-le dans votre fichier index.php . Enregistrez, mais ne fermez pas encore. Vous pouvez cependant fermer votre fichier index.html maintenant et passer aux dernières étapes. Presque fini!

4. Finaliser le fichier Index.php

Pour finaliser le fichier index.php de votre nouveau thème, vous devez vous assurer qu'il peut appeler l'autre section (en plus du contenu principal) qui se trouve dans les autres fichiers que vous avez créés.

Tout en haut de votre fichier index.php, placez la ligne suivante de php.

<?php get_header(); ?>

Ensuite, tout en bas de votre fichier index.php, placez ces lignes de php.

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

Vous avez maintenant « La boucle ». Il s'agit du principal élément de php que WordPress utilise pour afficher le contenu de votre article aux visiteurs. Ainsi, la dernière étape de la création du fichier index.php de votre nouveau thème consiste à ajouter le code ci-dessous dans la section de contenu.

<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?> ( have_posts() ) : the_post(); ?>
<div id= "post-<?php the_ID(); ?>" <?php post_class(); ?>> <?php post_class(); ?>>
<div class = "post-header" >
<div class = "date" ><?php the_time( 'M j y' ); ?></div> ); ?></div>
<h2><a href= "<?php the_permalink(); ?>" rel= "bookmark" title= "Permanent Link to <?php the_title_attribute(); ?>" ><?php the_title(); ?></a></h2> ><?php the_title(); ?></a></h2>
<div class = "author" ><?php the_author(); ?></div> ><?php the_author(); ?></div>
</div><!-- end post header-->
<div class = "entry clear" >
<?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?> ) ) the_post_thumbnail(); ?>
<?php the_content(); ?>
<?php edit_post_link(); ?>
<?php wp_link_pages(); ?> </div>
<!-- entry--> end entry-->
<div class = "post-footer" >
<div class = "comments" ><?php comments_popup_link( 'Leave a Comment' , '1 Comment' , '% Comments' ); ?></div> ); ?></div>
</div><!-- post footer--> end post footer-->
</div><!-- end post-->
<?php endwhile ; /* rewind or continue if all posts have been fetched */ ?>
<div class = "navigation index" >
<div class = "alignleft" ><?php next_posts_link( 'Older Entries' ); ?></div> ); ?></div>
<div class = "alignright" ><?php previous_posts_link( 'Newer Entries' ); ?></div> ); ?></div>
</div><!-- end navigation-->
<?php else : ?>
<?php endif ; ?> ; ?>

Enregistrez votre index.php et fermez. Votre thème est maintenant terminé ! Il ne vous reste plus qu'à le télécharger sur votre site WordPress.

5. Téléchargez votre nouveau thème

Vous allez maintenant stocker les fichiers de thème créés dans votre nouveau dossier de thème. Installez WordPress.

Placez votre nouveau dossier de thème dans /wp-content/themes/ . Accédez à WP Admin > Apparence > Thèmes et vous devriez y voir le thème nouvellement créé. Activez-le ! Il ne vous reste plus qu'à remplir votre nouveau site WordPress avec le contenu de votre ancien site.

6. Copiez le contenu du site HTML vers WordPress

Dans WP Admin, allez dans Plugins > Ajouter un nouveau. Recherchez un plugin appelé HTML Import 2 par Stephanie Leary. Une fois ce plugin installé et activé, suivez son guide d'utilisation pour importer l'intégralité de votre répertoire de pages HTML. Après cela, votre site devrait ressembler à ce qu'il était avant, fonctionnant simplement sur WordPress.

Utilisation d'un thème WordPress existant pour convertir un site HTML (méthode la plus simple)

Si les étapes ci-dessus semblent trop intensives ou chronophages, il existe un autre moyen. C'est le moyen le plus simple.

Au lieu de convertir la conception HTML existante pour qu'elle ait la même apparence sur WordPress, vous pouvez profiter de l'un des milliers de thèmes disponibles sur le marché WordPress.

Il existe des thèmes gratuits et des thèmes premium. Une fois que vous avez choisi un thème que vous aimez (et que son package de fichiers zippés est téléchargé), installez/activez votre nouveau thème WordPress.

Une fois cela fait, vous aurez un nouveau site Web et un nouveau thème WordPress. Lorsque vous prévisualisez votre site, il sera vide. Il est temps d'importer le contenu et de terminer le processus de conversion du site Web HTML en site WordPress.

Dans WP Admin, accédez à Plugins> Ajouter un nouveau et recherchez un plugin appelé HTML Import 2. Suivez le guide de l'utilisateur pour importer l'intégralité de votre répertoire de pages HTML. Après cela, vous aurez tout votre ancien contenu mais un nouveau look.

4 Convertir HTML en WordPress avec Theme Matcher

Vous pouvez également utiliser Theme Matcher. Il offre une conversion automatique de HTML en WordPress. Entrez simplement votre site et sélectionnez la zone appropriée. Theme Matcher prend les images, les styles et la mise en page de votre site Web existant.

Convertir-HTML-site-Web-en-WordPress-site-with-theme-matcher

5 Service de conversion HTML vers WordPress

HTML vers WordPress convertit vos conceptions HTML en thèmes WordPress sans que vous ayez besoin d'écrire une seule ligne de PHP.

Vous pouvez choisir le plan de service où ils convertiront votre site Web HTML statique en WordPress. Cette option peut augmenter le prix. Vous pouvez également choisir l'option Convertisseur qui est nettement moins chère.

Service de conversion HTML vers WordPress

La conversion est entièrement automatisée et les fonctionnalités du thème peuvent être étendues simplement en ajoutant des classes de convertisseur préfixées "wp-" dans votre code HTML.

Le convertisseur crée des modèles pour chaque fichier HTML, référence vos ressources et remplit toutes les fonctions php nécessaires. Utilisez Bootstrap, Webflow, Dreamweaver ou tout autre outil/framework avec lequel vous êtes déjà à l'aise pour créer des sites Web. Tant que le site Web est créé en HTML, vous pouvez le convertir en thème.

Que faut-il faire après la migration ?

Une fois la conversion terminée, vous devez faire quelques petites choses pour donner à votre site WordPress la touche finale.

  • Installez les plug-ins nécessaires – Pour surcharger votre tout nouveau site WordPress avec les mêmes fonctionnalités que le site HTML, installez les plug-ins que vous avez trouvés utiles.
  • Vérifiez et corrigez les liens brisés - Vérifiez votre site Web pour les liens brisés (erreurs 404) et s'il y en a, corrigez-les.
  • Configurer une page d'erreur 404 personnalisée – Ajoutez une page d'erreur 404 personnalisée pour amener vos visiteurs vers les sections pertinentes de votre site WordPress, au cas où ils essaieraient d'accéder à une URL qui n'existe pas.
  • Liens de redirection – Pour informer les moteurs de recherche que le contenu de votre site Web a été déplacé vers une nouvelle adresse Web, configurez des redirections 301. À cette fin, vous pouvez utiliser la redirection simple 301.
  • Activer l'indexation des moteurs de recherche : Allez dans « Paramètres -> Lecture » dans votre tableau de bord WordPress et cochez « Autoriser les moteurs de recherche à indexer ce site » pour que votre site soit indexé par les moteurs de recherche.
  • Générer et soumettre un plan de site XML : pour vous assurer que votre site sera inclus dans les résultats des moteurs de recherche le plus rapidement possible, créez un plan de site XML et soumettez-le à Google.

WordPress vs HTML – AVANTAGES ET INCONVÉNIENTS

Lancer un site Web d'entreprise n'est pas un processus facile. L'un des plus gros dilemmes est de choisir un site HTML statique ou d'opter pour WordPress.

WordPress – WordPress est perçu comme un CMS (Content Management System). Version HTML simplifiée pour les utilisateurs non-techniciens pour ajouter et modifier des éléments sur leurs sites Web.

Les sites CMS sont généralement dynamiques, ce qui signifie qu'il n'y a aucune restriction quant à la fréquence à laquelle vous modifiez votre contenu. Vous pouvez tout changer, des images aux textes entiers.

L'interface est très simple et conviviale, et personne n'a besoin de formation particulière pour l'apprendre. Le marché des CMS est très concurrentiel, mais WordPress bat la concurrence à chaque fois.

Une autre chose à retenir avant de commencer est qu'il existe une différence significative entre WordPress.com et WordPress.org car ce dernier est un CMS open source. WordPress.com, d'autre part, fonctionne comme un service d'hébergement de blogs.

Avantages de l'utilisation de WordPress :

  • Il vous fournit des milliers de plugins pour ajouter au site les fonctionnalités qui lui manquent.
  • Une modification est possible à tout moment, et personne ne vous limite.
  • Par rapport à la configuration HTML, WordPress prend beaucoup moins de temps à être configuré.

Inconvénients de l'utilisation de WordPress :

  • Vous ne pouvez pas simplement le configurer et l'oublier. Cela nécessite une attention à temps plein et une mise à jour constante des logiciels, des plugins et des thèmes.
  • Les pirates attaqueront les sites Web mal protégés et non mis à jour. Vous risquez que votre site Web ne fonctionne pas du tout si vous ne suivez pas les mises à jour.
  • WordPress est facile, mais pas tant que ça pour les débutants. Il existe de nombreux didacticiels en ligne et du matériel complet pour vous aider à parcourir la courbe d'apprentissage.

Sites Web statiques HTML – Avant, les modèles n'existaient pas, et la seule façon de créer un site Web était d'embaucher un professionnel de la programmation pour le faire pour vous.

Par conséquent, tous les sites Web ont été construits en HTML statique (langages de balisage hypertexte). Le but était d'avoir un site web. Ne pas modifier le contenu ou sa mise en page, car il faudrait à nouveau engager le développeur HTML.

Sur les sites Web HTML, le contenu est stocké dans des fichiers statiques, ce qui le rend incroyablement difficile à modifier.

Avantages du site Web HTML :

  • Une fois le site Web mis en ligne, vous n'êtes pas obligé de le mettre à jour ou de le sauvegarder. La plupart du temps, rien ne doit jamais être modifié sur ce site Web.
  • Les sites Web HTML sont basiques et faciles à configurer.
  • Leur taille et le fait qu'ils utilisent moins de ressources que les sites dynamiques leur donnent un avantage de vitesse significatif par rapport aux sites dynamiques, les rendant beaucoup plus rapides à charger.

Inconvénients du site Web HTML :

Vous devez être professionnel dans les langages de balisage. Sinon, vous ne pourrez pas effectuer de mise à jour significative sur votre site Web. Faire appel à un développeur Web encore et encore coûtera cher, même si votre site Web est très petit ou n'affiche que des informations triviales.

Un autre inconvénient important est que vous ne pouvez pas ajouter de plug-ins , ce qui signifie que vous êtes confronté à un grave manque de fonctionnalités.

Comment convertir du HTML en résumé WordPress

Que vous ayez besoin de plus de votre site ou que vous en construisiez un nouveau avec un modèle en tête, le processus de conversion peut sembler assez compliqué pour un novice. La patience et les connaissances vous permettront de faire ce que vous devez faire avec un certain succès.

Une fois que votre site est en ligne, vous pouvez être fier de savoir que vous avez appris à faire quelque chose de nouveau et que vous avez pu appliquer ces connaissances à votre site Web.

J'espère qu'au moins une méthode ci-dessus vous a aidé à convertir un site Web HTML en WordPress. Si vous avez une autre méthode ou tutoriel, faites le moi savoir. Avez-vous déjà converti du HTML en WordPress et quelles sont vos expériences avec celui-ci ?