Au début (du web), tous les sites web étaient faits avec rien d’autre que du texte et du HTML statique. Aujourd’hui cependant, 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 comme aux visiteurs.
C’est en grande partie grâce à des projets open source comme WordPress. Lequel, depuis une dizaine d’années, a réussi sa mission principale de démocratiser la publication en ligne (et bien d’autres choses encore dans le processus), de sorte que toute personne disposant d’une installation WordPress et des bons thèmes/plugins peut avoir un site web moderne avec un design et des 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 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é significative de sites actifs uniquement en HTML. (Ou HTML avec un peu de CSS.)
D’accord, ces propriétaires de sites peuvent avoir de bonnes raisons de ne pas faire de mise à jour 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 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 peut-être pas la raison principale pour laquelle certains (peut-être beaucoup) n’ont pas fait le saut. La plus évidente étant qu’ils ne savent tout simplement pas comment convertir leur site HTML en site WordPress. Surtout sans perdre le contenu ou avoir besoin de faire un formatage excessif sur une base page par page.
Heureusement, comme c’est souvent le cas avec WordPress, il y a un certain nombre de façons d’aller résoudre ce problème. J’ai compilé quelques options ci-dessous.
Souscrivez à 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/de l’investissement financier souhaité et de votre niveau de compétence avec le code. Vous devrez être celui qui décide ce qui est le mieux pour vous, mais avec les résumés ci-dessous, vous devriez être en mesure de décider rapidement et de passer directement à l’information la plus pertinente dans ce post pour votre situation spécifique.
Il existe trois options principales :
1. Créer manuellement un thème WordPress basé sur votre site HTML statique actuel.
Cela vous demandera d’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. À 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 WordPress. Ceci est assez simple et direct si vous avez une certaine expérience avec HTML, CSS, et un peu de PHP.
2. Installer un thème pré-fait et simplement migrer 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 contribuera pas beaucoup à vous familiariser avec WordPress et le coût variera en fonction de la personne que vous choisirez d’engager. Je ne couvrirai pas cette option dans les sections ci-dessous parce que si c’est la voie qui vous intéresse, vous pouvez simplement faire une recherche rapide de fournisseurs de services et ils s’occuperont du reste.
Préparation de la conversion HTML à WordPress
Quoi que vous décidiez de prendre ci-dessous, il y a quelques choses que vous voudrez faire avant de plonger dedans.
La première est de choisir un plan d’hébergement. Vous voudrez examiner les options qui sont là et décider d’un paquet qui correspond le mieux à vos besoins. Ou peut-être souhaitez-vous plutôt 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 le point où nos deux chemins possibles se divisent.
Conversion manuelle de votre site HTML statique vers WordPress
Si votre objectif est non seulement de faire passer le contenu de votre site HTML statique dans WordPress mais aussi de dupliquer votre design actuel, cela signifie que vous devrez créer votre propre thème personnalisé. Heureusement, ce n’est pas aussi effrayant que cela peut paraître au début. 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 allez avoir 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é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. Nommez-le comme vous voulez que votre thème soit nommé.
Puis, 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
- header.php
- sidebar.php
- footer.php
Étape 2 : Copier les CSS existants 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. Ainsi, le premier fichier que vous allez vouloir modifier 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 URIDescription: A brief description.Version: 1.0Author: YouAuthor URI: Your website address.*/
Après cette section, collez simplement votre CSS existant en dessous. Enregistrez et fermez le fichier.
Étape 3 : séparez votre HTML actuel
Avant de passer à l’étape trois, laissez-moi vous donner une note rapide sur le fonctionnement de WordPress. WordPress utilise PHP pour appeler et récupérer des éléments de données à partir 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 à quel endroit.
Donc, quand je dis que nous allons « hacher » votre 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. Surlignez tout ce qui se trouve en haut du fichier jusqu’à la balise ouvrante 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 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 se trouve après votre sidebar et copiez 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 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 étapes finales. Presque terminé!
Etape 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 l’autre section (en plus du contenu principal) qui sont logés dans les autres fichiers que vous avez créés. Ou en d’autres termes, remettez ensemble les éléments que nous venons de « découper ».
Tout en haut de votre fichier index.php, placez la ligne suivante de php.
<?php get_header(); ?>
Puis, 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. C’est la partie principale du php que WordPress utilise pour afficher le contenu de votre article aux visiteurs. Donc, 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 contenu.
<?php if ( have_posts() ) : ?><?php while ( have_posts() ) : the_post(); ?> <div <?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é ! Tout ce qui reste à faire est de le télécharger sur votre site Web WordPress.
Étape 5 : Télécharger 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 à l’intérieur de /wp-content/themes/. Ensuite, naviguez à nouveau dans WP Admin > Appearance > Themes et votre thème nouvellement créé devrait y apparaître. Allez-y et activez-le !
Tout ce qui reste à faire à ce stade est de peupler 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éfabriqué) pour voir comment cela se fait.
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, alors rassurez-vous, il existe un autre moyen. Au lieu de convertir n’importe quel 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é WordPress au sens large.
Il existe des thèmes gratuits et des thèmes premium. Avant de décider lequel est le meilleur pour vous, vous voudrez peut-être lire quels thèmes sont conçus pour répondre à vos besoins et parcourir par catégorie de thème ici à Elegant Themes et ailleurs.
Une fois que vous avez choisi un thème que vous aimez (et que vous avez téléchargé son paquet de fichiers zippés), vous voudrez retourner à WP Admin > Apparence > Thèmes > Ajouter un nouveau et installer/activer votre nouveau thème WordPress.
Une fois que cela est fait, vous aurez un nouveau site Web WordPress et un thème – mais peu d’autre. Lorsque vous prévisualisez votre site, il sera vide de contenu et aura probablement l’air un peu ennuyeux. Ce n’est pas grave, car ensuite nous allons 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 ce plugin installé et activé, suivez son guide d’utilisation pratique pour importer votre répertoire entier de pages HTML. Complet avec les 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 à peu près ressembler à ce qu’il était avant – 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 du 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 les thèmes/plugins WordPress.
Si vous avez » attrapé le virus WordPress « , le site officiel WordPress.org est rempli de thèmes utiles, de plugins et d’autres ressources. Si vous souhaitez peaufiner les fichiers de votre thème, explorez le Codex pour des conseils, des astuces et des variations apparemment infinies.