Comment convertir un site Web HTML en thème d'entreprise WordPress

De nombreuses entreprises s'appuient encore sur de simples sites Web HTML pour leur présence en ligne. Ces sites Web HTML sont généralement statiques, ce qui signifie que vous devrez modifier le code pour modifier même un détail mineur sur le site Web. Pour éviter cela, vous pouvez convertir votre site Web HTML en WordPress.

Dans ce tutoriel, je vais vous apprendre à convertir du HTML en thème d'entreprise WordPress. Cela conserve tous les éléments HTML intacts et vous donne la flexibilité de WordPress pour personnaliser facilement n'importe quel élément.

Si vous connaissez à la fois HTML et WordPress, ce tutoriel est fait pour vous. Si vous êtes un débutant, essayez de le faire avec un site Web factice sur votre hôte local comme XAMPP.

• Conversion de site Web HTML en WordPress
• De quels fichiers WordPress vous avez besoin
• Configuration de CSS, JavaScript et images
• Ajout de fonctions WordPress pour ajouter des fonctionnalités

Conversion d'un site HTML en thème WordPress

Pour ce tutoriel, j'ai choisi un thème d'entreprise HTML gratuit à partir d'ici. Les techniques resteront les mêmes tout en convertissant n'importe quel thème d'entreprise. Si vous avez des questions concernant votre thème d'entreprise, laissez simplement un commentaire ou un e-mail, et je me ferai un plaisir de vous répondre.

Allons-nous en. Tout d'abord, examinez votre thème HTML et démarquez les éléments d'en-tête, de corps principal et de pied de page.

En - tête : L'en-tête comprendra la partie supérieure.

Corps principal : C'est une longue page, j'ai donc fait un zoom arrière pour faire une capture d'écran, mais toute la partie centrale est incluse dans le corps principal.

Pied de page : La section pied de page comprendra la partie inférieure.

Étape 1 : Prérequis

J'espère que WordPress est déjà installé sur votre hôte local comme XAMPP (c'est-à-dire votre ordinateur). Sinon, nous avons déjà couvert un guide détaillé pour vous aider à installer et configurer WordPress localement.

Étape 2 : créez votre dossier de thème

Pour ce tutoriel, j'utilise XAMPP et mon site WordPress est installé dans le dossier htdocs. Pour créer un thème WordPress, vous devez accéder à votre dossier de thèmes et créer un nouveau dossier.
Maintenant, ouvrez le dossier XAMPP > htdocs > dossier WordPress (dans mon cas, il s'agit de tester ) > wp-content > thèmes .

Dans le dossier Thèmes, vous verrez tous vos thèmes WordPress installés. Créez un nouveau dossier et nommez votre thème.

Étape 3 : Créer des fichiers PHP

Le dossier de thème nouvellement créé est vide et vous devez créer des fichiers pour le rendre fonctionnel. Pour cela, vous devez lancer votre éditeur de code (VS Code) et ouvrir l'intégralité du dossier du thème WordPress (dans mon cas, farhan-wordpress-theme).

Créez maintenant les fichiers WordPress essentiels suivants pour mieux organiser votre thème.

1. style.css (contient les détails du thème et les fichiers CSS)
2. index.php (sert le contenu principal si d'autres fichiers optionnels ne sont pas déclarés)
3. header.php (contient les éléments d'en-tête du thème)
4. footer.php (contient les éléments de pied de page du thème)
5. fonctions.php (contient les fonctions qui sont dans le thème WordPress)

Étape 4 : Copiez les dossiers CSS, Images et JavaScript (JS)

À partir de votre thème HTML (téléchargé ci-dessus), copiez le dossier des ressources (dossiers CSS, JS et images) dans votre nouveau dossier de thème WordPress.

Après avoir déplacé vers votre nouveau dossier de thème WordPress, il ressemblera à ceci :

Étape 5 : Activer un nouveau thème WordPress

Maintenant, vous avez ajouté les dossiers importants requis pour tout thème wp. Ensuite, ouvrez votre site WordPress sur votre navigateur et connectez-vous à votre tableau de bord. Accédez à Apparence > Thèmes et vous verrez que votre nouveau thème a été ajouté à cette section.

Ce thème semble vide. Pour ajouter les informations et la bannière du thème nouvellement créé, ouvrez votre fichier style.css (créé précédemment) et collez le code suivant et enregistrez-le ( ctrl+s ).

 /*

Nom du thème : Thème WordPress Farhan

Auteur : Farhan

Description : Convertissez le HTML en thème WordPress.

Version : 1.0

*/

Pour la bannière, vous devez ajouter un fichier image à votre nouveau dossier de thème. La taille de l'image doit être de 800 par 600 et le nom de l'image doit être Capture d'écran (format png).

Une fois que vous avez ajouté le fichier screenshot.png, actualisez votre tableau de bord wp-admin et la bannière d'image apparaîtra.

Maintenant, vous pouvez afficher les informations sur le thème lorsque vous cliquez sur la bannière.

Ensuite, cliquez simplement sur Activer .

Étape 6 : convertir le code HTML en en-tête, index et pied de page

L'en-tête, le pied de page et le corps principal sont marqués de commentaires HTML pour l'ajouter facilement à vos fichiers PHP WordPress et convertir le code.

Copiez maintenant le code d'en-tête du fichier index.html du thème téléchargé dans le fichier header.php que vous avez créé dans le dossier des thèmes WordPress. Vous devez copier de <!DOCTYPE html> jusqu'à </header> et l'enregistrer.

De même, copiez les éléments de pied de page et de corps principal de index.html dans footer.php et index.php, respectivement.

Pour le pied de page, copiez depuis <footer> (dans mon cas, il y a un nom de classe défini dans la balise footer, alors ne vous y trompez pas) jusqu'à </html> dans le fichier footer.php et enregistrez-le.

Ensuite, copiez tout le code après la balise </header> et juste avant le <footer> dans index.php et enregistrez-le.

Ajoutez la fonction WordPress get_header() en haut et get_footer() à la fin du fichier index.php.

Le get_header() est une fonction intégrée qui appelle header.php et de même, get_footer() est une fonction qui appelle footer.php .

Ajoutez le code suivant en haut du fichier index.php et enregistrez-le.

 <?php get_header(); ?> 

Pour appeler un pied de page, insérez le code suivant à la fin du code index.php et enregistrez-le.

 <?php get_footer(); ?> 

Maintenant, visitez votre site et vous verrez quelque chose comme ça.

Étape 7 : configuration du CSS

Le fait que votre thème semble étrange est dû au fait que les fichiers CSS ne sont pas appliqués au thème.

Vous avez déjà copié le dossier CSS du thème HTML vers votre dossier de thème WordPress. Maintenant, vous devez appeler ces fichiers CSS pour compléter l'apparence du thème.

Gardez à l'esprit que les noms de vos fichiers CSS peuvent différer, alors vérifiez bien avant d'effectuer ce processus.

Vous trouverez vos feuilles de style CSS dans le fichier header.php, vous devez donc rechercher « rel="stylesheet" » par CTRL+f .

Après cela, supprimez les feuilles de style de police Google car nous n'en avons pas besoin. Maintenant, j'ai juste besoin d'enregistrer la feuille de style CSS actuelle, c'est-à-dire <link rel="stylesheet" href="assets/css/style-starter.css"> .

WordPress ne comprend pas la structure régulière des feuilles de style CSS ; c'est pourquoi je dois mettre en file d'attente et enregistrer la feuille de style CSS. Allez dans le fichier functions.php et ajoutez le code suivant.

 <?php

fonction add_css()

{

   wp_register_style('first', get_template_directory_uri() . '/assets/css/style-starter.css', false,'1.1','all');

   wp_enqueue_style( 'premier');

}

add_action('wp_enqueue_scripts', 'add_css'); 

Le wp_register_style vous aidera à enregistrer votre feuille de style CSS.

Le get_template_directory_uri() . '/href' est utilisé pour obtenir le chemin du répertoire du modèle actuel. Il concaténera le chemin actuel avec le fichier respectif. Ici, vous devez donc définir l'emplacement de votre fichier CSS (href). Vous pouvez voir comment j'ai défini le chemin de ce fichier CSS : get_template_directory_uri() . '/ assets/css/style-starter.css '.

Maintenant, nous pouvons supprimer le lien de la feuille de style CSS du fichier header.php et le remplacer par le code suivant et enregistrer le fichier.

 <?php wp_head(); ?>

Le wp_head() est un hook WordPress essentiel qui est défini dans la section <head> </head> de header.php.

Lorsque vous visitez votre site WordPress, vous remarquerez que les fichiers CSS sont en fait mis en file d'attente pour votre nouveau thème WordPress, mais le design n'est toujours pas en ordre. C'est parce que vous n'avez pas encore configuré les scripts JS.

Dans le header.php, j'ai une feuille de style CSS, et je l'ai enregistrée uniquement dans functions.php. Mais que faire si vous avez plusieurs feuilles de style ? Dans ce cas, vous devez définir wp_register_style() pour chaque feuille de style. Ne t'inquiète pas! Vous pouvez prendre un exemple de l'étape suivante, où j'ai plusieurs scripts JS. Le processus est le même, il effacera donc vos requêtes et vous aidera à comprendre comment vous allez faire ce travail.

Étape 8 : Configurer JavaScript

Le thème HTML avec lequel vous travaillez utilise JavaScript, et dans le fichier footer.php, les fichiers JavaScript sont déjà appelés au format HTML. Pour exécuter ces fichiers JS, il vous suffit de suivre les mêmes actions que celles que vous avez effectuées à l'étape précédente.

Ouvrez votre fichier footer.php et recherchez " <script src= " par " CTRL+f ". Cela vous aidera à trouver tous les fichiers JS que vous avez. Dans mon cas, j'en ai cinq, et ici je dois tous les enregistrer et les mettre en file d'attente.

Ensuite, vous devez ouvrir votre fichier functions.php et coller le code suivant :

 fonction add_script()

{

   wp_register_script('js-script', get_template_directory_uri() . '/assets/js/jquery-3.3.1.min.js', array ( 'jquery' ), 1.1, true);

   wp_enqueue_script( 'js-script');

   wp_register_script('change', get_template_directory_uri() . '/assets/js/theme-change.js', array ( 'jquery' ), 1.1, true);

   wp_enqueue_script( 'change');

   wp_register_script('popup', get_template_directory_uri() . '/assets/js/jquery.magnific-popup.min.js', array ( 'jquery' ), 1.1, true);

   wp_enqueue_script( 'popup');

   wp_register_script('carousel', get_template_directory_uri() . '/assets/js/owl.carousel.js', array ( 'jquery' ), 1.1, true);

   wp_enqueue_script( 'carrousel');

   wp_register_script('bootstrap', get_template_directory_uri() . '/assets/js/bootstrap.min.js', array ( 'jquery' ), 1.1, true);

   wp_enqueue_script( 'bootstrap');

}

add_action('wp_enqueue_scripts', 'add_script');

Vous pouvez voir que la structure du code est la même que précédemment dans la partie configuration CSS. Mais ici, vous utiliserez wp_register_script au lieu de style. Vous enregistrez et mettez en file d'attente chaque fichier JS dans la même fonction.

Maintenant, vous pouvez supprimer tous les liens de script JS (j'en ai cinq) du fichier footer.php , puis coller la ligne de code suivante à la fin du code (au-dessus de la balise </body>) et enregistrer le fichier.

 <?php wp_footer(); ?> 

Maintenant, ouvrez votre site sur votre navigateur et vous remarquerez que le nouveau thème WordPress fonctionne bien, mais qu'il manque quand même quelques images.

Étape 9 : Configurer les images

Ce processus est simple, et ici, vous devez définir le chemin des images.

Tout d'abord, ouvrez votre fichier index.php et recherchez « < img src= » par « CTRL+f ». Cela vous aidera à trouver tous les fichiers image que vous avez. Dans mon cas, j'en ai huit, et ici j'ai besoin du chemin pour chacun d'eux.

Donner un chemin aux images ; ajoutez le code PHP suivant dans les balises src et enregistrez le fichier.

 <img src="<?php echo get_template_directory_uri().'/assets/images/p1.jpg'; ?>" alt="" class="img-fluid radius-image" />

<img src="<?php echo get_template_directory_uri().'/assets/images/p2.jpg'; ?>" alt="" class="img-fluid radius-image" />

<img src="<?php echo get_template_directory_uri().'/assets/images/p3.jpg'; ?>" alt="" class="img-fluid radius-image" />

<img src="<?php echo get_template_directory_uri().'/assets/images/p4.jpg'; ?>" alt="" class="img-fluid radius-image" />

<img src="<?php echo get_template_directory_uri().'/assets/images/p5.jpg'; ?>" alt="" class="img-fluid radius-image" />

<img src="<?php echo get_template_directory_uri().'/assets/images/p6.jpg'; ?>" alt="" class="img-fluid radius-image" /> 

Maintenant, votre thème ressemblera au thème HTML et récupérera toutes les images.

Mais, il manquera de fonctionnalités WordPress, telles que la modification du titre du site et du menu de navigation WordPress.

Étape 10 : Activer le titre personnalisé dans WordPress

Si vous allez dans le panneau d'administration de WordPress et modifiez le titre du site Web, cela n'affectera pas le titre du site. Pour activer cette fonctionnalité, vous pouvez utiliser la fonction intégrée de WordPress bloginfo() avec le paramètre « nom » entre les balises de titre dans le fichier header.php et enregistrer le fichier.

 <?php bloginfo( 'nom' ); ?> 

Et de même, vous devez utiliser la fonction intégrée de WordPress bloginfo() avec le paramètre « name » entre les balises h1 dans le fichier header.php et enregistrer le fichier.

 <?php bloginfo( 'nom' ); ?> 

Maintenant, votre thème reprendra le titre que vous avez défini dans Paramètres -> Général -> Titre du site dans le panneau WP-admin.

Étape 11 : Ajouter le menu de navigation WordPress dans WordPress

Lorsque vous visitez l'administrateur WordPress de votre site et accédez à Apparence, vous ne verrez pas d'option pour le menu.

Vous devez d'abord activer Menu en ajoutant la ligne de code suivante dans le fichier functions.php.

 add_theme_support( 'menus' ); 

Cela activera la fonctionnalité Menu dans votre thème, mais il faut une certaine configuration pour gérer les menus à partir de votre tableau de bord WP.

Tout d'abord, trouvez où se trouve votre menu de navigation de thème HTML, puis remplacez-le à l'aide de la fonction intégrée WordPress wp_nav_menu(); Vous pouvez en savoir plus sur cette fonction ici.

Dans ce thème, le header.php contient le menu de navigation.

Trouvez les lignes de code suivantes :

 <ul class="navbar-nav mx-lg-auto">

<li class="nav-item actif">

<a class="nav-link" href="index.html">Accueil <span class="sr-only">(current)</span></a>

</li>

<li class="nav-item @@about__active">

<a class="nav-link" href="about.html">À propos</a>

</li>

<li class="nav-item @@contact__active">

<a class="nav-link" href="contact.html">Contact</a>

</li>

</ul> 

Remplacez les lignes ci-dessus par :

 <?php wp_nav_menu( array( 'menu_class' => 'navbar-nav mx-lg-auto', 'container' => 'ul', )); ?>

Votre menu WordPress s'affichera désormais sur votre thème et ajoutera de la flexibilité à votre thème d'entreprise WordPress.

Emballer!

J'espère que cet article vous a aidé à comprendre comment convertir un modèle ou un site HTML en thème WordPress. Il s'agit d'un tutoriel détaillé où j'ai couvert onze étapes pour démontrer le processus.

Si vous avez des questions et des questions, n'hésitez pas à demander à tout moment dans la section commentaires ci-dessous.