Comment convertir un site Web HTML en Thème d’entreprise WordPress

Comment convertir un site Web HTML en Thème d’entreprise WordPress

De nombreuses entreprises comptent toujours sur des sites Web HTML simples 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, cependant, vous pouvez convertir votre site Web HTML en WordPress.

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

Si vous connaissez à la fois HTML et WordPress, alors ce tutoriel est bon 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 d’un site Web HTML en WordPress
• 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 commercial HTML gratuit d’ici. Les techniques resteront les mêmes lors de la conversion de n’importe quel thème commercial. Si vous avez des questions concernant votre thème d’entreprise, il suffit de laisser un commentaire ou un e-mail, et je serai heureux de répondre.

Passons à autre chose. Tout d’abord, jetez un œil à votre thème HTML et démarquez les éléments d’en-tête, du corps principal et du pied de page.

En-tête : L’en-tête inclura la partie supérieure de la section.

Corps principal: C’est une longue page, j’ai donc zoomé pour prendre une capture d’écran, mais toute la partie centrale est incluse dans le corps principal.

Pied de page: La section pied de page inclura 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é sous le dossier htdocs. Pour créer un thème WordPress, vous devez accéder à votre dossier thèmes et créer un nouveau dossier.
Maintenant, ouvrez le dossier XAMPP > htdocs > Dossier WordPress (dans mon cas, c’est un test) > thèmes wp-content >.

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’ensemble 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) index
2. .php (sert le contenu principal si d’autres fichiers optionnels ne sont pas déclarés)
3. en-tête.php (contient les éléments d’en-tête du thème)
4. pied de page.php (contient les éléments de pied de page du thème)
5. fonctions.php (contient des fonctions sur le thème WordPress)

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

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

Après être passé à votre nouveau dossier de thème WordPress, il ressemblera à ceci:

Étape 5: Activez 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 aux thèmes Apparence > 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 style.fichier css (créé précédemment) et collez le code suivant et enregistrez-le (ctrl + s).

/*Theme Name: Farhan WordPress ThemeAuthor: FarhanDescription: Convert HTML to WordPress theme.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 une capture d’écran (format png).

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

Maintenant, vous pouvez afficher les informations du 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 avec des commentaires HTML pour l’ajouter facilement à vos fichiers PHP WordPress et convertir le code.

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

De même, Copiez les éléments du pied de page et du corps principal de l’index.html en pied de page.php et index.php, respectivement.

Pour le pied de page, copiez à partir de < pied de page > (dans mon cas, il y a un nom de classe défini dans la balise de pied de page, donc ne soyez pas confus) jusqu’à </html > dans le pied de page.fichier php et enregistrez-le.

Ensuite, copiez tout le code après la balise </header > et juste avant le pied de page < > pour indexer.php et enregistrez-le.

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

get_header() est une fonction intégrée qui appelle en-tête.php et de même, get_footer() est une fonction qui appelle le pied de page.php.

Ajoutez le code suivant en haut de l’index.fichier php et enregistrez-le.

<?php get_header(); ?>

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

<?php get_footer(); ?>

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

Étape 7: Configuration de CSS

Le fait que votre thème soit bizarre est 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 — vérifiez donc deux fois avant de procéder à ce processus.

Vous trouverez vos feuilles de style CSS dans l’en-tête.fichier php, vous devez donc rechercher « rel= »feuille de style » » par CTRL + f.

Après cela, supprimez les feuilles de style des polices Google car nous n’en avons pas besoin. Maintenant, j’ai juste besoin d’enregistrer la feuille de style CSS réelle, c’est-à-dire < link rel= »feuille de style » href= »assets/css/style-starter.css »>.

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

<?phpfunction add_css(){ wp_register_style('first', get_template_directory_uri() . '/assets/css/style-starter.css', false,'1.1','all'); wp_enqueue_style( 'first');}add_action('wp_enqueue_scripts', 'add_css');

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

La fonction get_template_directory_uri(). ‘/href’ est utilisé pour obtenir le chemin du répertoire de modèle actuel. Il concaténera le chemin d’accès actuel avec le fichier respectif. Donc, ici, vous devez 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 de l’en-tête.fichier php et remplacez-le par le code suivant et enregistrez le fichier.

<?php wp_head(); ?>

Le wp_head() est un hook WordPress essentiel qui est défini sous la section < head > </head > de l’en-tête.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 néanmoins, le design n’est pas en ordre. C’est parce que vous n’avez pas encore configuré les scripts JS.

Dans l’en-tête.php, j’ai une feuille de style CSS, et je l’ai enregistrée uniquement dans les fonctions.php. Mais que se passe-t-il si vous avez plusieurs feuilles de style? Dans ce cas, vous devez définir wp_register_style() pour chaque feuille de style. Ne vous inquiétez 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 ferez ce travail.

Étape 8: Configurer JavaScript

Le thème HTML avec lequel vous travaillez utilise JavaScript, et dans le pied de page.fichier 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 vous avez effectuées à l’étape précédente.

Ouvrez votre pied de page.fichier php et recherche « < 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 vos fonctions.fichier php et collez le code suivant:

function 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( 'carousel'); 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 chaque fichier JS en file d’attente dans la même fonction.

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

<?php wp_footer(); ?>

Maintenant, ouvrez votre site sur votre navigateur, et vous remarquerez que le nouveau thème WordPress fonctionne bien, mais 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 index.fichier php et recherche « < 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 tous.

Pour 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 accédez au panneau d’administration 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 à WordPress bloginfo() avec le paramètre « nom » entre les balises de titre dans l’en-tête.fichier php et enregistrez le fichier.

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

Et de même, vous devez utiliser la fonction intégrée WordPress bloginfo() avec le paramètre « nom » entre les balises h1 dans l’en-tête.fichier php et enregistrez le fichier.

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

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 aucune option pour le Menu.

Vous devez d’abord activer le menu en ajoutant la ligne de code suivante dans les fonctions.fichier php.

add_theme_support( 'menus' );

Cela activera la fonctionnalité de menu dans votre thème, mais il a besoin d’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, l’en-tête.php contient le menu de navigation.

Trouvez les lignes de code suivantes:

<ul class="navbar-nav mx-lg-auto"><li class="nav-item active"><a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a></li><li class="nav-item @@about__active"><a class="nav-link" href="about.html">About</a></li><li class="nav-item @@contact__active"><a class="nav-link" href="contact.html">Contact</a></li></ul>

Remplacer les lignes ci-dessus par:

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

Votre menu WordPress apparaîtra désormais sur votre thème et ajoutera de la flexibilité à votre thème WordPress business.

Conclusion!

J’espère que cet article vous a aidé à comprendre comment convertir un modèle HTML ou un site en thème WordPress. Ceci est 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 à les poser à tout moment dans la section des commentaires ci-dessous.