Au début (du web), tous les sites web n’étaient constitués que de texte et de HTML statique. Aujourd’hui, plus de 20 ans plus tard, le web est un endroit bien différent. 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.
Cela est dû en grande partie à des projets open source comme WordPress. Ce dernier, depuis une dizaine d’années, a réussi sa mission principale, qui est de démocratiser la publication en ligne (et bien d’autres choses encore), de sorte que toute personne disposant d’une installation WordPress et des bons thèmes/plugins peut avoir un site Web moderne doté d’un design et de fonctionnalités avancées. Aucun codage, pas même du HTML, n’est nécessaire.
C’est pourquoi, pour les utilisateurs avides de WordPress comme moi, il est presque difficile de croire qu’en 2018 quelqu’un puisse encore exploiter un site Web HTML statique au lieu d’un site Web WordPress avec un thème et des plugins. Mais le fait est qu’il existe encore une quantité significative de sites actifs uniquement en HTML. (Ou HTML avec un peu de CSS.)
Certes, les propriétaires de ces sites peuvent avoir de bonnes raisons de ne pas les mettre à jour ou de ne pas les convertir. Peut-être que le contenu de leur site ne change jamais et que le formatage et la conception simples déjà en place sont utilisables ? Ou peut-être est-ce moins contraignant que de s’inquiéter de la mise à jour d’un site WordPress ? Ces deux raisons sont valables (parmi d’autres). Des exemples parfaits de « Ne réparez pas ce qui n’est pas cassé »
Cependant, j’ai le sentiment que ce n’est pas la raison principale pour laquelle certains (peut-être beaucoup) n’ont pas franchi le pas. La raison la plus évidente est qu’ils ne savent tout simplement pas comment convertir leur site HTML en site WordPress. Surtout sans perdre de contenu ou sans avoir à faire un formatage excessif page par page.
Heureusement, comme c’est souvent le cas avec WordPress, il existe un certain nombre de façons de résoudre ce problème. J’ai compilé quelques options ci-dessous.
S’abonner à notre chaîne Youtube
Vos options pour convertir un site HTML statique en site WordPress
La façon dont vous choisirez de convertir votre site HTML statique en site WordPress dépendra sans aucun doute de vos préférences personnelles, du temps et de l’argent que vous souhaitez investir, ainsi que de votre niveau de connaissance du code. C’est à vous de décider ce qui vous convient le mieux, mais grâce aux résumés ci-dessous, vous devriez être en mesure de vous décider rapidement et de passer directement aux informations les plus pertinentes de cet article pour votre situation spécifique.
Il existe trois options principales :
1. Créer manuellement un thème WordPress à partir de votre site HTML statique actuel.
Pour ce faire, vous devrez entrer dans votre code. Vous devrez accéder au répertoire de votre site actuel via FTP et utiliser votre code existant comme point de départ. A partir de là, vous devrez créer les fichiers nécessaires pour un thème WordPress et copier des morceaux de code à partir du codex de WordPress. C’est assez simple et direct si vous avez une certaine expérience du HTML, du CSS et un peu de PHP.
2. Installez un thème préfabriqué et migrez simplement votre contenu.
C’est probablement la meilleure option à l’intersection de la simplicité et de la valeur. En supposant que vous avez déjà un hébergement pour votre site Web actuel, vous n’aurez besoin de dépenser de l’argent que si vous choisissez d’acheter un thème premium. Le plugin que nous utiliserons pour importer du contenu est disponible gratuitement dans le dépôt officiel de plugins WordPress.
3. Payer pour qu’un service de conversion HTML vers WordPress recrée votre site.
C’est la solution la plus simple, car elle ne vous demande pas de faire grand-chose. Cependant, elle ne vous permettra pas de vous familiariser avec WordPress et son coût variera en fonction de la personne que vous choisirez d’engager. Je ne couvrirai pas cette option dans les sections ci-dessous, car si c’est la voie qui vous intéresse, vous pouvez simplement faire une recherche rapide de prestataires de services et ils s’occuperont du reste.
Préparation de la conversion de HTML en WordPress
Quel que soit le chemin que vous décidez de prendre, il y a quelques choses que vous voudrez faire avant de vous lancer.
La première est de choisir un plan d’hébergement. Vous voudrez examiner les options qui s’offrent à vous et choisir la formule qui correspond le mieux à vos besoins. Ou peut-être préférez-vous créer une installation WordPress locale ? Vous pourrez toujours la migrer vers un service d’hébergement plus tard.
Une fois que vous avez choisi, vous devrez installer WordPress et vous connecter à WP Admin. C’est à ce moment-là que nos deux chemins possibles se séparent.
Conversion manuelle de votre site HTML statique vers WordPress
Si votre objectif est non seulement de transférer le contenu de votre site HTML statique vers WordPress mais aussi de reproduire votre design actuel, cela signifie que vous devrez créer votre propre thème personnalisé. Heureusement, cela n’est pas aussi effrayant que cela peut paraître au premier abord. Cela implique seulement la création de quelques dossiers et fichiers, un peu de copier-coller, puis le téléchargement du résultat.
Vous aurez besoin d’un éditeur de code tel que Sublime ou Notepad++ et d’un accès au répertoire de votre site HTML et au répertoire de votre nouvelle installation WordPress.
Etape 1 : Créer 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. Donnez-lui le nom que vous souhaitez donner à votre thème.
Ensuite, créez quelques fichiers (qui seront tous placés dans votre nouveau dossier de thème) dans votre éditeur de code. Ne faites rien pour l’instant. Laissez-les simplement ouverts pour une édition ultérieure.
- Style.css
- Index.php
- header.php
- sidebar.php
- pied de page.php
Étape 2 : Copier le CSS existant dans la nouvelle feuille de style
Si vous cherchez à dupliquer un design, cela signifie probablement que vous avez au moins quelques CSS que vous voulez sauvegarder. Le premier fichier que vous allez vouloir modifier est votre fichier Style.css.
Pour commencer, ajoutez ce qui suit au début de votre fichier.
/* Nom du thème : Remplacez par le nom de votre thème. Theme URI : L'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 simplement votre CSS existant ci-dessous. Enregistrez et fermez le fichier.
Étape 3 : Séparer votre HTML actuel
Avant de passer à l’étape 3, laissez-moi vous expliquer rapidement comment fonctionne WordPress. WordPress utilise PHP pour appeler et récupérer des éléments de données de sa base de données. Chaque fichier que nous utilisons dans ce petit tutoriel est conçu pour indiquer à WordPress quelle partie du contenu de votre site doit être affichée et où.
Ainsi, lorsque je dis que nous allons « découper » votre code HTML existant, ce que nous faisons en fait, c’est simplement couper et coller des parties de votre code existant dans les différents fichiers que nous venons de créer, afin que WordPress sache où les afficher.
C’est parti.
Premièrement, ouvrez le fichier index.html de votre site actuel. Mettez en évidence tout ce qui se trouve en haut du fichier jusqu’à la balise d’ouverture div class= »main ». Copiez et collez cette section dans votre fichier header.php, enregistrez et fermez.
Ensuite, retournez dans votre fichier index.html. Mettez en surbrillance l’élément aside class= »sidebar » et tout ce qu’il contient. Copiez et collez cette section dans votre fichier sidebar.php, enregistrez et fermez.
Troisièmement, dans votre index.html, sélectionnez tout ce qui suit votre barre latérale et copiez-collez-le dans votre fichier footer.php, enregistrez et fermez.
Enfin, dans votre fichier index.html, sélectionnez tout ce qui reste (il doit s’agir de la section de contenu principal) 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. C’est presque terminé !
Étape 4 : Finaliser votre fichier index.php
Afin de finaliser le fichier index. php de votre nouveau thème, vous devez vous assurer qu’il peut appeler les autres sections (en plus du contenu principal) qui se trouvent dans les autres fichiers que vous avez créés. En d’autres termes, il s’agit de rassembler les éléments que nous venons de « découper ».
Tout en haut de votre fichier index.php, placez la ligne de php suivante.
Ensuite, tout en bas de votre fichier index.php, placez ces lignes de php.
Et enfin, nous devons ajouter ce que l’on appelle la boucle. C’est la partie principale du php que WordPress utilise pour afficher le contenu de votre article aux visiteurs. La dernière étape de la création du fichier index.php de votre nouveau thème consiste donc à ajouter le code ci-dessous dans la section contenu.
Sauvegardez votre index.php et fermez. Votre thème est maintenant terminé ! Il ne vous reste plus qu’à le télécharger sur votre site Web WordPress.
Étape 5 : Télécharger votre nouveau thème
Maintenant que vous avez créé les fichiers de votre thème et qu’ils sont tous stockés dans le dossier de votre nouveau thème, vous allez devoir accéder au répertoire de votre nouvelle installation WordPress.
Placez votre nouveau dossier de thème dans /wp-content/themes/. Ensuite, naviguez à nouveau dans WP Admin > Apparence > Thèmes et votre thème nouvellement créé devrait y apparaître. Allez-y et activez-le !
Tout ce qui reste à faire à ce stade est de remplir votre nouveau site WordPress avec le contenu de votre ancien site. Suivez la section ci-dessous (en sautant la partie concernant l’utilisation d’un thème préfabriqué) pour voir comment cela se passe.
Utilisation d’un thème WordPress préfabriqué et importation de contenu HTML
Si les étapes ci-dessus vous semblent trop intensives ou trop longues, rassurez-vous, il existe un autre moyen. Au lieu de convertir le design sur lequel vous travaillez en ce moment en un thème WordPress, vous pouvez profiter de l’un des milliers de thèmes disponibles sur le marché de WordPress.
Il existe des thèmes WordPress gratuits et des thèmes WordPress premium, tels que Divi. Avant de choisir celui qui vous convient le mieux, vous pouvez vous renseigner sur les thèmes qui sont conçus pour répondre à vos besoins et les parcourir par catégorie de thèmes ici sur Elegant Themes et ailleurs.
Une fois que vous avez choisi un thème que vous aimez (et que vous avez téléchargé son fichier zippé), vous pouvez retourner dans WP Admin > Apparence > Thèmes > Ajouter un nouveau thème et installer/activer votre nouveau thème WordPress.
Une fois que c’est fait, vous aurez un nouveau site Web et un nouveau thème WordPress, mais rien d’autre. Lorsque vous prévisualiserez votre site, il sera vide de contenu et aura probablement l’air un peu ennuyeux. Ce n’est pas grave, car nous allons maintenant importer le contenu de votre ancien site.
Dans WP Admin, allez dans Plugins > Add New et recherchez un plugin appelé HTML Import 2 par Stephanie Leary. Une fois que ce plugin est installé et activé, suivez son guide d’utilisation pratique pour importer votre répertoire entier de pages HTML. Avec des images !
Après cela, vous aurez tout votre ancien contenu vivant sur WordPress et formaté par votre nouveau thème. Ou, si vous avez créé votre propre thème ci-dessus, votre site devrait ressembler à ce qu’il était auparavant – fonctionnant simplement sur WordPress.
En conclusion
Si vous avez utilisé cet article comme guide pour migrer votre site web sur WordPress, alors vous venez de rejoindre l’une des plus grandes communautés open source au monde. Bienvenue ! C’est un endroit amusant avec beaucoup de développeurs, de designers, de blogueurs, de bricoleurs, et plus encore, tous construisant, jouant et créant avec WordPress et ses thèmes/plugins.
Si vous avez « attrapé le virus WordPress », le site officiel WordPress.org regorge de thèmes, plugins et autres ressources utiles. Si vous souhaitez peaufiner les fichiers de votre thème, explorez le Codex pour y trouver une infinité de conseils, d’astuces et de variantes.
Et bien sûr, nous espérons que vous resterez dans les parages pour discuter dans les commentaires ci-dessous et que vous vous inscrirez pour recevoir d’autres articles de blog à l’avenir.
