Lorsque le Web a commencé, les sites Web étaient assez stupides. Autrement dit, ils n’étaient rien de plus que du texte et du code HTML statique, sans effets fantaisistes et très peu d’interactivité.

Vingt ans plus tard, les sites Web reposent sur une programmation complexe et peuvent prendre des semaines et des semaines à construire. Ils sont riches en fonctionnalités, hautement interactifs, plus réactifs, plus beaux, etc.

Aujourd’hui, au lieu d’écrire du code par vous-même, vous pouvez utiliser des systèmes de gestion de contenu qui gèrent eux-mêmes le code derrière votre site Web. Tout ce que vous avez à faire est de choisir un thème et de commencer à publier.

WordPress est l’un de ces CMS, désormais utilisé par des millions de personnes dans le monde. La meilleure partie de WordPress est qu’il s’agit d’une plate-forme très flexible. Il ne nécessite aucune connaissance en codage pour l’utiliser et vous pouvez créer les sites Web les plus réactifs et les plus étonnants avec.

Si vous possédez un site Web qui n’a pas connu de mise à niveau depuis les années 1990, cet article créé par notre équipe de wpDataTables vous aidera à convertir HTML en WordPress afin que vous aussi puissiez profiter des avantages de la technologie Web moderne.

Continuez à lire pour en savoir plus.

Pourquoi devriez-vous convertir HTML en WordPress ?

Les raisons pour lesquelles une personne devrait convertir HTML en WordPress sont très diverses. Voici une sélection des plus importantes :

La conversion vers WordPress vous donne un contrôle total sur chaque détail de votre site Web. Chaque fois que vous n’aimez pas une partie de votre site, vous pouvez facilement la modifier à votre guise.
Les sites WordPress sont beaucoup plus faciles d’accès, de gestion et de maintenance que les sites HTML statiques. C’est une raison très importante pour faire une migration HTML vers WordPress.
En convertissant votre style de modèle HTML en WordPress, vous vous retrouverez avec un thème unique qu’aucune autre personne utilisant le CMS ne possédera.
WordPress aide à l’optimisation des moteurs de recherche et vous assurera que votre site Web sera découvert par plus de personnes.
En tant que développeur de site Web, votre travail sera réduit de moitié car WordPress gérera la plupart des activités qui prenaient inutilement du temps auparavant.

Passer du HTML statique à WordPress : les méthodes

Maintenant que vous avez toutes les raisons de convertir HTML en WordPress, vous pouvez commencer à apprendre comment le faire.

Vous avez le choix entre deux méthodes: la méthode manuelle, qui consiste à tout faire par vous-même, à partir de rien ; et la méthode du thème enfant, qui consiste à utiliser un thème WordPress de base et à le modifier en fonction de vos besoins.

Le choix d’une méthode dépend de votre expérience en matière de codage, du temps que vous souhaitez investir dans cette tâche, ainsi que de vos propres préférences. Chacune de ces méthodes sera présentée dans les sections ci-dessous, où vous apprendrez comment convertir HTML en WordPress.

La méthode manuelle

1 Créer un nouveau dossier de thème

Créez un nouveau dossier sur votre bureau où vos fichiers de thème seront stockés. Nommez ce dossier comme bon vous semble (il représentera le nom du thème). Créez ces fichiers dans votre éditeur de code préféré et laissez-les ouverts :

style.css
index.php
header.php
sidebar.php
footer.php

2 Copiez le code CSS existant dans votre nouvelle feuille de style

Une fois que vous avez créé les fichiers, vous pouvez passer à la copie de votre code CSS. Ceux qui souhaitent dupliquer leurs sites et les relocaliser sur WordPress devront exporter et importer le code CSS de leur site précédent. Le CSS est responsable de l’apparence du site. Modifiez donc le fichier style.css en y ajoutant les lignes de code suivantes :


/*
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.
*/

Remplacez les informations requises par les vôtres, ajoutez les lignes CSS restantes et vous êtes prêt. N’oubliez pas de sauvegarder le fichier. Vous êtes maintenant libre de fermer style.css.

3 Obtenez votre code HTML actuel

Accédez au fichier index.html de votre site et mettez en surbrillance tout le contenu depuis le début du document jusqu’à la balise div class="main". Cette section doit être collée dans le fichier header.php que vous avez créé à l’étape 1.

Revenez au fichier index.html et mettez en surbrillance tout ce qui se trouve à l’intérieur de l’élément class="sidebar". Copiez le contenu et collez-le dans le fichier sidebar.php que vous avez créé. Faites de même pour le pied de page, avec tout le contenu après l’élément de la barre latérale.

Pour le fichier index.php, sélectionnez tout le contenu qui reste après la mise en surbrillance et collez-le dans le nouveau fichier, enregistrez-le et laissez-le ouvert pour l’étape suivante.

4 Editez le fichier index.php

Pour finaliser votre fichier index.php, copiez ces lignes de code et collez-les en haut du document :

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

Le fichier n’est pas encore terminé car vous devez créer une boucle de publication, qui représente du code PHP dont WordPress a besoin pour afficher correctement les articles de blog ou les articles de votre site Web. Ajoutez les lignes de code suivantes dans la section de contenu du fichier :

Une fois cela fait, enregistrez le fichier, fermez-le et passez à l’étape suivante.

5 Téléchargez votre nouveau thème

Une fois que votre dossier de thème est prêt, vous devez le télécharger sur votre site et terminer la conversion HTML vers WordPress. Pour ce faire, accédez au dossier dans lequel vous avez installé WordPress et placez le dossier que vous venez de créer dans /wp-content/themes/.

Accédez à votre page d’administration WP, Apparence, puis Thèmes pour voir si le nom du thème apparaît dans la liste ou non. Si c’est le cas, vous avez tout fait correctement et vous pouvez l’activer. Si ce n’est pas le cas, lisez attentivement toutes les étapes pour convertir à nouveau HTML en WordPress.

Il y a aussi ce guide vidéo utile de Traversy Media que vous devriez consulter :

Utiliser un thème enfant WordPress

Si les étapes évoquées à l’étape précédente vous semblent trop compliquées pour votre niveau, il s’agit d’une méthode qui demande moins de connaissances dans le domaine du codage. Il est plus facile à gérer et prendra également moins de temps.

Pour convertir HTML en WordPress plus rapidement, vous pouvez utiliser un thème enfant à partir d’un thème existant. Les thèmes enfants sont nommés ainsi car ils sont construits sur un deuxième thème, qui est le parent.

1 Choisissez le thème

Tout d’abord, choisissez un thème adapté à votre conception HTML. Recherchez un thème enfant similaire à votre site Web existant. Recherchez la structure dont il dispose, de sorte que vous n’aurez pas à creuser trop dans le codage.

Vous devriez opter pour un thème de démarrage car ils reposent sur des lignes de code très basiques.

2 Créer un nouveau dossier de thème

Tout comme dans le cas précédent, vous devrez créer un nouveau dossier de thème. La seule différence est que vous nommerez le dossier de la même manière que le thème parent sur lequel votre thème enfant est basé et que vous lui ajouterez le suffixe "-child".

Par exemple, si votre thème s’appelle Twenty Nine, vous appellerez le dossier "twentynine-child". Assurez-vous de ne pas ajouter d’espaces dans le nom.

3 Configurer une nouvelle feuille de style

Ensuite, créez le fichier style.css dans le dossier et ajoutez ces lignes de code :


/*
Theme Name: Twenty Nineteen Child
Theme URI: http://example.com/twenty-nineteen-child/
Description: Twenty Nineteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentynineteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-nineteen-child
*/

Gardez à l’esprit qu’il s’agit d’un exemple. Vous devrez remplacer les informations par les vôtres. Enregistrez le fichier après avoir terminé.

4 Créez le fichier functions.php

Une fois que vous avez le fichier style.css, vous pouvez activer le thème tel quel. Cependant, pour améliorer l’apparence et le fonctionnement du site Web, vous devrez utiliser les fonctions et les styles du thème parent. Pour cela, vous devez créer le fichier functions.php.

Utilisez ces lignes de code et enregistrez le fichier :


/*
Theme Name: Twenty Nineteen Child
Theme URI: http://example.com/twenty-nineteen-child/
Description: Twenty Nineteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentynineteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-nineteen-child
*/

5 Activer le thème enfant

Enfin, vous devez activer le thème. Compressez le dossier et ajoutez-le à WordPress en naviguant dans le menu Apparence, Thèmes, puis cliquez sur "Ajouter un nouveau". Téléchargez le fichier compressé ici. Une autre option serait de faire glisser le dossier dans wp-content/themes.

En conclusion

Vous aurez besoin de patience pour convertir HTML en WordPress, mais cela en vaut certainement la peine. Même si le processus nécessite une certaine attention, vous vous retrouverez avec un site vraiment unique et beaucoup plus pratique à gérer à tous points de vue.

Si vous suivez attentivement les étapes présentées dans cet article, rien ne peut mal tourner, alors ne vous inquiétez pas! Si, toutefois, vous rencontrez des problèmes, n’hésitez pas à consulter les forums de support de la communauté WordPress. Il y a beaucoup d’utilisateurs là-bas qui seraient heureux de vous aider.

Si vous avez apprécié la lecture de cet article sur la conversion de HTML en WordPress, vous devriez consulter celui-ci sur le salaire des développeurs WordPress.

Nous avons également écrit sur quelques sujets connexes tels que le meilleur éditeur de code, la formation WordPress, les bibliothèques JavaScript et les extensions Brackets.

Source d’enregistrement: wpdatatables.com