Conversion de sites HTML en sites WordPress

Publié: 2018-10-05

Au début (du Web), tous les sites Web n'étaient faits que de texte et de HTML statique. Maintenant, 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.

C'est en grande partie grâce à des projets open source comme WordPress. Qui, au cours des dix dernières années environ, a réussi sa mission principale de démocratiser la publication en ligne (et bien plus dans le processus) afin que toute personne disposant d'une installation WordPress et du bon thème/plugins puisse avoir un site Web moderne avec un design avancé et fonctionnalité. Aucun codage, pas même HTML !

C'est pourquoi pour les utilisateurs passionnés de WordPress comme moi, il est presque difficile de croire qu'en 2018, quelqu'un pourrait 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é importante de sites HTML actifs uniquement. (Ou HTML avec un peu de CSS.)

Certes, ces propriétaires de sites peuvent avoir de bonnes raisons de ne pas effectuer de mise à niveau ou de conversion. 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 compliqué que de s'inquiéter de la mise à jour d'un site WordPress ? Les deux sont des raisons valables (parmi d'autres). Premiers exemples de « Ne réparez pas ce qui n'est pas cassé ».

Cependant, j'ai le sentiment que ce n'est peut-être pas la principale raison pour laquelle certains (peut-être beaucoup) n'ont pas fait le saut. Le plus évident étant qu'ils ne savent tout simplement pas comment convertir leur site HTML en un site WordPress. Surtout sans perdre de contenu ou avoir besoin de faire un formatage excessif page par page.

Heureusement, comme c'est souvent le cas avec WordPress, il existe plusieurs façons de résoudre ce problème. J'ai compilé quelques options ci-dessous.

Abonnez-vous à notre chaîne Youtube

Vos options pour convertir un site HTML statique en site WordPress

La façon dont vous choisissez de convertir votre site HTML statique en un 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. Vous devrez être celui qui décidera de ce qui vous convient le mieux, mais avec les résumés ci-dessous, vous devriez être en mesure de 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éez manuellement un thème WordPress basé sur votre site HTML statique actuel.

Cela vous obligera à entrer dans votre code. Vous devrez accéder à votre répertoire de site actuel via FTP et utiliser votre code existant comme point de départ. À partir de là, vous devrez créer les fichiers nécessaires pour un thème WordPress et copier des morceaux de code du codex WordPress. C'est assez simple et direct si vous avez une certaine expérience avec HTML, CSS et un peu de PHP.

2. Installez un thème prédéfini et migrez simplement votre contenu.

C'est probablement la meilleure option à l'intersection de la simplicité et de la valeur. En supposant que vous disposiez déjà d'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 référentiel officiel de plugins WordPress.

3. Payer pour avoir un service de conversion HTML vers WordPress pour recréer votre site.

C'est la solution la plus simple, car elle ne vous oblige pas à faire grand-chose. Cependant, cela ne fera pas grand-chose pour vous familiariser avec WordPress et le coût variera en fonction de la personne que vous choisissez d'embaucher. Je ne couvrirai pas cette option dans les sections ci-dessous car si c'est l'itinéraire 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 HTML vers WordPress

Peu importe l'itinéraire que vous décidez d'emprunter ci-dessous, il y a quelques choses que vous voudrez faire avant de plonger.

Le premier est de choisir un plan d'hébergement. Vous voudrez examiner les options disponibles et choisir le forfait qui correspond le mieux à vos besoins. Ou peut-être souhaitez-vous créer une installation WordPress locale à la place ? Vous pouvez toujours le migrer vers un service d'hébergement ultérieurement.

Une fois que vous avez choisi, vous devrez installer WordPress et vous connecter à WP Admin. C'est le point où nos deux chemins possibles se divisent.

Conversion manuelle de votre site HTML statique en WordPress

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 propre thème personnalisé. Heureusement, ce n'est pas aussi effrayant que cela puisse paraître au premier abord. 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.

Étape 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 voulez que votre thème soit nommé.

Ensuite, créez quelques fichiers (qui vont tous dans votre nouveau dossier de thème) dans votre éditeur de code. Ne leur faites rien pour l'instant. Laissez-les simplement ouverts pour une édition ultérieure.

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

Étape 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. 

/*
Theme Name: Replace with your Theme's name.
Theme URI: Your Theme's URI
Description: A brief description.
Version: 1.0
Author: You
Author URI: Your website address.
*/

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

Étape 3 : Séparez votre HTML actuel

Avant d'entrer dans la troisième étape, permettez-moi de vous donner une brève note sur le fonctionnement de WordPress. WordPress utilise PHP pour appeler et récupérer des éléments de données de sa base de données sous-jacente. 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ù.

Donc, quand 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ù afficher eux.

Nous y voilà.

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.

Deuxièmement, retournez à 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.

Troisièmement, 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.

Enfin, 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!

Étape 4 : Finalisez votre fichier Index.php

Afin de 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. Ou en d'autres termes, reconstituer les éléments que nous venons de « hacher ».

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

Et enfin, nous devons ajouter ce qu'on appelle The Loop. 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(); ?>
  <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <div class="post-header">
       <div class="date"><?php the_time( 'M j y' ); ?></div>
       <h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
       <div class="author"><?php the_author(); ?></div>
    </div><!--end post header-->
    <div class="entry clear">
       <?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?>
       <?php the_content(); ?>
       <?php edit_post_link(); ?>
       <?php wp_link_pages(); ?> </div>
    <!--end entry-->
    <div class="post-footer">
       <div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div>
    </div><!--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 class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></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.

Étape 5 : Téléchargez votre nouveau thème

Maintenant que vous avez créé vos fichiers de thème et que vous les avez tous stockés dans votre nouveau dossier de 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/ . Revenez ensuite à WP Admin > Apparence > Thèmes et votre thème nouvellement créé devrait y apparaître. Allez-y et activez-le!

Il ne vous reste plus qu'à remplir votre nouveau site WordPress avec le contenu de votre ancien site. Suivez la section ci-dessous (en sautant la partie sur l'utilisation d'un thème prédéfini) pour voir comment cela se fait.

Utilisation d'un thème WordPress prédéfini 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 avec lequel vous travaillez actuellement en un thème WordPress, vous pouvez profiter de l'un des milliers de thèmes disponibles sur le marché WordPress au sens large.

Il existe des thèmes gratuits et des thèmes premium. Avant de décider lequel vous convient le mieux, vous voudrez peut-être vous renseigner sur les thèmes conçus pour répondre à vos besoins et parcourir par catégorie de thème ici à Thèmes élégants et ailleurs.

Une fois que vous avez choisi un thème que vous aimez (et que son package de fichiers zippés est téléchargé), vous voudrez revenir à WP Admin > Apparence > Thèmes > Ajouter un nouveau et installer/activer votre nouveau thème WordPress.

Une fois cela fait, vous aurez un nouveau site Web et un nouveau thème WordPress, mais pas grand-chose d'autre. Lorsque vous prévisualisez votre site, il sera vide de contenu et aura probablement l'air ennuyeux. Ce n'est pas grave, car nous allons ensuite importer le contenu de votre ancien site.

Dans WP Admin, accédez à Plugins> Ajouter un nouveau et recherchez un plugin appelé HTML Import 2 par Stephanie Leary. Une fois ce plugin installé et activé, suivez son guide d'utilisation pratique pour importer l'intégralité de votre répertoire de pages HTML. Complétez 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 à peu près à ce qu'il était avant, fonctionnant simplement sur WordPress.

En conclusion

Si vous avez utilisé cet article comme guide pour migrer votre site Web vers WordPress, vous venez de rejoindre l'une des plus grandes communautés open source au monde. Bienvenue! C'est un endroit amusant avec de nombreux développeurs, concepteurs, blogueurs, bricoleurs et plus encore, tous construisant, jouant et créant avec WordPress et des thèmes/plugins WordPress.

Si vous avez «attrapé le bogue WordPress», le site Web officiel de WordPress.org regorge de thèmes, de plugins et d'autres ressources utiles. Si vous souhaitez peaufiner davantage vos fichiers de thème, explorez le Codex pour des conseils, des astuces et des variations apparemment sans fin.

Et bien sûr, nous espérons que vous resterez dans les commentaires ci-dessous et que vous vous abonnerez à d'autres articles de blog à l'avenir.

Vignette de l'article via Max Griboedov / shutterstock.com