Conversion de modèles HTML en thèmes WordPress

Bien que la technologie Web ait parcouru un long chemin, il existe encore des sites Web créés uniquement avec HTML. Si vous en possédez un, vous vous demandez peut-être comment convertir un modèle HTML en thème WordPress.

Heureusement, vous avez plusieurs options à votre disposition si vous souhaitez convertir ces fichiers HTML vers WordPress. Les techniques disponibles vont des conversions manuelles pratiques au partenariat avec des experts capables de gérer tous les gros travaux.

Dans cet article, nous aborderons quatre approches différentes de la conversion de modèles HTML. Pour chacun, nous fournirons des instructions et des ressources qui peuvent vous aider à intégrer un site Web HTML dans le giron de WordPress. Il y a beaucoup à couvrir, alors allons-y !

Conversion manuelle de HTML

La première option en matière de conversion est l'approche manuelle. Comme il s'agit d'un processus assez pratique, vous devez vous assurer que vous avez accès aux fichiers de votre site Web d'origine et de votre nouveau.

En règle générale, vous utiliserez une application SFTP (Secure File Transfer Protocol) à cette fin. Une fois que vous avez accédé à votre site Web, vous pouvez procéder aux étapes suivantes.

Étape 1 : créer un dossier thématique

Tout d'abord, vous devrez créer un dossier pour contenir vos nouveaux fichiers de thème et l'étiqueter avec le nom de votre nouveau thème. A l'aide de votre éditeur de code, vous pouvez ensuite créer cinq fichiers spécifiques :

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

Pour l'instant, vous pouvez simplement laisser ces fichiers vides et les enregistrer dans le dossier que vous venez de créer.

Étape 2 : Copiez et collez votre CSS existant

Votre prochaine priorité est de personnaliser le fichier de feuille de style en cascade (CSS). C'est ici que vous décrivez tous les différents éléments de style de votre site.

En haut, il est recommandé d'ajouter des informations sur le fichier. En fait, en ce qui concerne WordPress, certains éléments sont nécessaires pour que le thème soit présenté dans le répertoire des thèmes.

En dessous de ces informations, vous voudrez ensuite coller tous les styles CSS existants de votre site Web d'origine que vous souhaitez reporter sur votre nouveau thème.

Étape 3 : Séparez le code HTML existant

Dans votre site Web d'origine, le code HTML qui désigne votre en-tête, votre pied de page, votre barre latérale et les zones de contenu principales se trouvera probablement dans votre fichier index.html . Maintenant, vous devrez répartir chacun de ces éléments dans les nouveaux fichiers que vous avez créés pour votre thème WordPress.

Par exemple, dans le fichier index.html de votre site Web d'origine, vous pouvez localiser la première balise <div> avec la classe "main". Tout ce qui précède cette balise peut ensuite être copié et collé dans votre nouveau fichier header.php .

Vous répéterez ensuite ce processus pour les balises 'sidebar' et 'footer'. Copiez le code contenu dans chacun de ces éléments et collez-le dans les fichiers PHP respectifs.

Maintenant, ce qu'il vous reste est la partie principale de votre fichier index.html . C'est ce qui constitue la mise en page principale du contenu de votre site Web basé sur HTML. Vous devrez copier ce code restant et le coller dans votre nouveau fichier index.php .

Étape 4 : Configurez votre fichier Index.php

Votre prochaine étape consiste à vous assurer que votre nouveau fichier d'index peut localiser les fichiers nécessaires pour permettre à votre thème d'afficher la structure et le style de votre site. Pour ce faire, vous utiliserez des balises de modèle WordPress. Ceux-ci sont utilisés pour indiquer au thème de récupérer les fichiers d'en-tête, de pied de page et de barre latérale.

Par exemple, vous pouvez faire en sorte que votre modèle affiche le fichier d'en-tête que vous avez créé en utilisant la balise suivante :

get_header();

Vous le placerez dans votre fichier de modèle index.php ou sur les pages suivantes où vous souhaitez que l'en-tête apparaisse. Il en va de même pour votre pied de page.

Il y a une autre partie importante de votre nouveau modèle que vous devrez également comprendre. C'est ce qu'on appelle la boucle WordPress - un extrait de code PHP qui indique au modèle d'insérer des publications. Il peut également être personnalisé pour contrôler le nombre de messages affichés.

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

Maintenant que votre nouveau thème est prêt à être utilisé, vous devez placer son dossier dans le répertoire wp-themes/content/ de votre site Web :

Une fois que vous avez téléchargé les fichiers, vous pouvez vous connecter à votre tableau de bord WordPress et accéder à Apparence > Thèmes. Ici, vous devriez voir votre nouveau thème répertorié et pouvoir cliquer sur Activer et commencer à l'utiliser.

Importer du contenu HTML avec un plugin

Une autre façon de gérer ce processus consiste à utiliser un plugin pour transférer le contenu de votre ancien site HTML. Malheureusement, il existe très peu d'outils compatibles avec les versions récentes de WordPress. Vous pouvez cependant consulter un essai gratuit de WP Site Importer :

Ce plugin peut analyser l'intégralité de votre site Web et cataloguer le contenu mobile. Cela fonctionne mieux si votre code HTML est bien organisé et "propre" pour commencer. Vous pourrez également importer du contenu tel que des menus et des liens.

Utiliser un thème enfant

Une autre façon de déplacer votre site HTML dans WordPress consiste à utiliser un thème enfant. Celui-ci a les mêmes fonctionnalités et le même style de base que son thème parent, mais vous pourrez conserver tous les ajustements et personnalisations que vous apportez, même si vous mettez à jour le parent.

Étape 1 : Choisissez un thème

Il existe de nombreux thèmes gratuits bien construits parmi lesquels choisir dans le répertoire de thèmes WordPress. Une fois que vous avez sélectionné celui que vous aimez, vous devrez l'installer afin que ses fichiers soient disponibles dans le répertoire de fichiers de votre site Web :

Cependant, vous n'avez pas besoin d'activer ce thème parent.

Étape 2 : Créer un dossier pour votre thème enfant

Ensuite, vous devrez accéder à vos fichiers avec une application FTP et créer un nouveau dossier dans votre répertoire wp-content/themes . Ce fichier doit avoir le même nom que votre thème parent, avec "-child" ajouté à la fin.

Par exemple, si vous allez créer un thème enfant pour Twenty Nineteen, vous pouvez créer un dossier nommé Twentynineteen-child :

Cette configuration signifie que votre thème enfant pourra extraire automatiquement les fonctions et les styles du thème parent, une fois que vous aurez configuré le reste des fichiers de thème nécessaires.

Étape 3 : Configurer une feuille de style

Votre prochaine étape consistera à configurer votre fichier style.css . WordPress nécessite des informations spécifiques dans la feuille de style pour que la relation de thème parent-enfant fonctionne. Vous pouvez également coller des informations de style supplémentaires à partir de vos fichiers HTML d'origine si nécessaire.

Étape 4 : Configurer un fichier Function.php

Maintenant que vous travaillez essentiellement avec deux thèmes, vous devez indiquer à WordPress que votre thème enfant dépend du CSS du parent. Pour cela, vous pouvez utiliser l'appel PHP wp_enqueue_style() .

Vous allez d'abord créer un fichier function.php et le placer dans le dossier de votre thème enfant. Il s'agit du fichier dans lequel vous exécuterez la fonction de mise en file d'attente qui énonce les dépendances et la hiérarchie du thème.

Étape 5 : Activez votre thème enfant

Une fois que vous avez téléchargé ces nouveaux fichiers sur le serveur de votre site Web, vous pouvez revenir à votre tableau de bord WordPress et accéder à Apparence > Thèmes . Là, vous devriez maintenant voir votre thème enfant prêt à l'emploi.

Cliquez sur Activer sur votre thème enfant pour le définir comme thème de votre site Web. Ensuite, vous êtes prêt à commencer à copier le contenu de votre site Web HTML dans votre nouveau site WordPress.

Acheter un service de conversion de site

Si vous n'avez pas le temps ou les ressources pour effectuer vous-même une conversion, vous pouvez également consulter un service de conversion. De plus, si vous avez besoin de plus de ressources ou d'assistance pour migrer d'autres contenus WordPress, chez WP Engine, nous proposons de nombreuses solutions et ressources pour la migration et la conversion.

1. Engagez des WP Geeks

HireWPGeeks est une option de conversion à service complet. Il s'occupera de tout le travail lourd et vous vous retrouverez avec un site Web WordPress flexible, réactif et thématique, complet avec tout votre contenu. Vous devrez contacter l'entreprise pour obtenir un devis, mais vous pouvez prévoir ses services à partir de 89 $.

2. Solutions FantasTech

FantasTech Solutions est un autre service de conversion HTML vers WordPress. Il annonce des conversions hautement professionnelles de HTML vers des modèles de thèmes WordPress haut de gamme et bien codés. Vous voudrez garder à l'esprit que les coûts commencent à 297 $ pour une page. Les pages supplémentaires commencent à 147 $ chacune, avec un prix exact en fonction de la complexité.

Personnalisez l'expérience de votre site avec WP Engine

Cela peut sembler être une grosse entreprise, mais la conversion de votre site Web HTML vers WordPress peut ouvrir de nombreuses autres opportunités. Avec cette plate-forme hautement flexible et extensible, vous deviendrez plus agile et capable de déployer rapidement de nouveaux contenus.

Chez WP Engine, nous pensons que les bonnes ressources de développement peuvent avoir un impact énorme sur vos projets. En plus des solutions innovantes, nous proposons des plans et des niveaux de tarification pour tous les budgets !