Formation WordPress – Devenez un expert WordPress

Partager sur facebook
Partager sur twitter
Partager sur pinterest

Conversion de sites HTML en sites WordPress

Au début (du web) tous les sites web ont été réalisés avec du texte et du 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 pour les créateurs de sites et les visiteurs.

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

C’est pourquoi, pour les utilisateurs de WordPress comme moi, il est presque difficile de croire qu’en 2018, quelqu’un pourrait encore exploiter un site HTML statique au lieu d’un site WordPress avec un thème et des plugins. Mais le fait est qu’il y a encore une quantité importante de sites HTML uniquement actifs. (Ou HTML avec un peu de CSS.)

Certes, ces propriétaires de sites peuvent avoir de bonnes raisons de ne pas mettre à jour ou de ne pas convertir. Peut-être que le contenu de leur site ne change jamais et que le formatage et la conception simple déjà en place sont utilisables ? Ou peut-être que c’est moins un problème que de s’inquiéter de garder un site WordPress à jour ? Les deux sont des raisons valables (parmi d’autres). De bons 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 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 un site WordPress. Surtout sans perdre du 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 site WordPress dépendra sans aucun doute de vos préférences personnelles, du temps et de l’investissement financier que vous souhaitez y consacrer et de votre niveau de compétence en code. C’est à vous de décider ce qui vous convient le mieux, mais grâce aux résumés ci-dessous, vous devriez pouvoir vous décider rapidement et passer directement aux informations les plus pertinentes dans ce billet pour votre situation spécifique.

 

Il y a trois options principales :

1. Créez manuellement un thème WordPress basé sur votre site HTML statique actuel.

Pour cela, vous devrez entrer votre code. Vous devrez accéder à votre répertoire de site actuel par 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 bits de code du codex WordPress. C’est assez simple et direct si vous avez de l’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 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 l’importation de contenu est disponible gratuitement dans le référentiel officiel des 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 vous n’avez pas besoin de 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 parce que si c’est la route qui vous intéresse, vous pouvez simplement faire une recherche rapide pour les fournisseurs de services et ils s’occuperont du reste.

Préparation à la conversion HTML vers WordPress
Quel que soit l’itinéraire que vous décidez de prendre ci-dessous, il y a quelques choses que vous aurez envie de faire avant de plonger.

Le premier est le choix d’un plan d’hébergement. Vous voudrez examiner les options disponibles et choisir le forfait qui répond le mieux à vos besoins. Ou peut-être aimeriez-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 à ce moment que nos deux chemins possibles se séparent.

Conversion manuelle de votre site HTML statique en WordPress
Si votre but n’est pas seulement d’obtenir votre contenu de votre site HTML statique dans WordPress mais aussi 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 ça en a l’air au premier abord. Il s’agit 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 au répertoire de votre site HTML et à celui de votre nouvelle installation WordPress.

Étape 1 : Créer un nouveau dossier thématique et les fichiers nécessaires
Sur votre bureau, créez un nouveau dossier pour contenir vos fichiers de thème. Donnez-lui le nom de votre thème, quel qu’il soit.

Ensuite, créez quelques fichiers (qui vont tous dans votre nouveau dossier thème) dans votre éditeur de code. Ne leur faites rien pour l’instant. Laissez-les simplement ouvertes pour d’autres modifications.

  • Style.css
  • Index.php
  • header.php
  • sidebar.php
  • footer.php

Etape 2 : Copier les CSS existants dans une nouvelle feuille de style
Si vous cherchez à dupliquer un dessin, cela signifie probablement que vous avez au moins quelques CSS que vous voulez sauvegarder. 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 par le nom de votre Thème.
Thème URI : L’URI de votre thème
Description : Une brève description.
Version : 1.0
Auteur : Vous
Auteur URI : L’adresse de votre site Web.
*/
Après cette section, collez simplement votre CSS existant ci-dessous. Sauvegardez et fermez le fichier.

 

Étape 3 : Séparez votre HTML actuel
Avant d’entrer dans la troisième étape, permettez-moi de vous donner un bref aperçu du fonctionnement de WordPress. WordPress utilise PHP pour appeler et récupérer des 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 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.

Et voilà, c’est parti.

Tout d’abord, ouvrez le fichier index.html de votre site actuel. Mettez tout en évidence, du haut du fichier à l’ouverture de la balise div class=”main”. Copiez et collez cette section dans votre fichier header.php, enregistrez et fermez.

Ensuite, retournez à votre fichier index.html. Mettez en évidence l’élément latéral 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 fichier index.html, sélectionnez tout après votre barre latérale 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 (ce devrait être la section principale du contenu) et collez-le dans votre fichier index.php. Sauvegardez, mais ne fermez pas encore.

Vous pouvez cependant fermer votre fichier index.html maintenant et passer aux étapes finales. Presque fini !

 

É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 l’autre section (en plus du contenu principal) qui se trouve dans les autres fichiers que vous avez créés. En d’autres termes, reconstituer les éléments que nous venons d’ “hacher”.

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 le bit principal de php que WordPress utilise pour afficher le contenu de vos messages 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.

<?php if ( have_posts())) : ?>
<?php while ( have_posts())) : the_post() ; ?>
<div id=”post-<?php the_ID() ; ?>” <?php post_class() ; ?>>
<div class=”post-en-tête”> > <div
<div class=”date”><?php the_time(‘M j y’) ; ?></div>
<h2><a href=”<?php the_permalink() ; ?>” rel=”bookmark” title=”Lien permanent vers <?php the_title_attribute() ; ?>”>”>?php the_title() ; ?></a></h2>
<div class=”author”><?php the_author() ; ?></div>
</div><!–finit l’en-tête du message –>
<div class=”entry clear”> <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> </div>
<!–finir entrée–>
<div class=”post-footer”> <div
<div class=”comments”><?php comments_popup_link(‘Leave a Comment’,’1 Comment’,’% Comments’ ) ; ?></div>
</div><!–end post footer–>
</div><!–fin post–>>
<?php endwhile ; /* rembobiner ou continuer si tous les messages ont été récupérés */ ?> >
<div class=”index de navigation”> <div
<div class=”alignleft”><?php next_posts_link(‘Older Entries’) ; ?></div>
<div class=”alignright”><?php previous_posts_link(‘Newer Entries’) ; ?></div>
</div><!–finir la navigation–>
<?php else : ?>
<?php endif ; ?>

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 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 d’installation de WordPress.

Placez votre nouveau dossier thématique dans /wp-content/themes/. Ensuite, retournez dans WP Admin > Apparence > Thèmes et votre thème nouvellement créé devrait y apparaître. Allez-y, activez-le !

Tout ce qu’il vous reste à faire à ce stade est de remplir votre nouveau site Web 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 prennent trop de temps, alors soyez assuré qu’il y a un autre moyen. Au lieu de convertir n’importe quel design avec lequel vous travaillez en ce moment en thème WordPress, vous pouvez profiter de n’importe lequel des milliers de thèmes disponibles sur le marché WordPress en général.

Il y a des thèmes gratuits et des thèmes premium. Avant de décider quel est le meilleur pour vous, vous pouvez lire sur quels thèmes sont conçus pour répondre à vos besoins et naviguer par catégorie de thèmes 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 > Appearance > Themes > Add New 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 rien d’autre. Lorsque vous prévisualiserez votre site, il sera vide de contenu et aura probablement l’air ennuyeux. C’est bon, parce que 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 ce plugin installé et activé, suivez son guide d’utilisation pratique pour importer tout votre répertoire de pages HTML. Complet 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 à peu près ressembler à ce qu’il était avant – juste en fonctionnant sur WordPress.

 

En conclusion
Si vous avez utilisé ce billet comme guide pour migrer votre site Web sur WordPress, 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, designers, blogueurs, bricoleurs, et bien plus encore – tous construisant, jouant et créant avec des thèmes/plugins WordPress et WordPress.

webinaire agence webmarketing

Profitez maintenant du meilleur Webinaire composé des secrets et stratégies que personne ne vous dévoilera, rejoignez maintenant plus de 24.500 entreprises qui ont profité des secrets.

Partagez cet article avec vos amis

Partager sur facebook
Partager sur google
Partager sur twitter
Partager sur linkedin