Comment Convertir un site statique en site dynamique géré par WordPress? (Audio)
Comment convertir un site web statique en un site web dynamique géré par WordPress ?
Un site web statique est certainement une bonne option si vous souhaitez avoir quelques pages en ligne. Cependant, si vous voulez avoir plus de flexibilité dans la gestion de votre contenu, ne pas avoir à toujours compter sur un développeur ou vous adapter aux changements de l’heure, un site web dynamique est ce qu’il vous faut. Dans cet article, nous allons voir comment convertir un site web statique en un site dynamique. Avant de vous plonger dans les étapes de cet article, il est important de souligner quelques points :
- Vous devez avoir des notions de bases en développement PHP (Si vous souhaitez le faire vous-même)
- Vous devez être familier avec la structure de WordPress
- Il est important de comprendre comment un serveur Web fonctionne afin de facilement naviguer dans les dossiers de votre site web.
En plus des points brièvement énumérés ci-dessous vous devez vous demander pourquoi convertir son site web. Ci-dessous quelques arguments,
Pourquoi Convertir un site statique en site dynamique ?
Voici quelques avantages des sites web dynamiques.
- Peu de lignes de codes peuvent générer plusieurs pages : Sur un site web dynamique, vous pouvez facilement générer plusieurs pages avec quelques de ligne de code. Ceci est rendu possible par l’utilisation des bases de données ou la possibilité de générer des données concernant les requêtes des utilisateurs.
- Pas forcément besoin d’un développeur pour des modifications : Avec un site web statique, le contenu est généralement dans le code. Comme conséquence directe, vous devez avoir obligatoirement des compétences en informatique ou avoir un développeur à tout moment près de soi.
- Risque d’erreur de page très élevée : Avec un site statique, parce que vous devez créer un document HTML pour chaque page, vous courrez un grand risque d’avoir plusieurs pages d’erreur. Effectivement, une modification de lien peut occasionner le dysfonctionnement d’une autre page que vous avez oublié.
- Quasiment impossible de générer plusieurs pages via un site web statique : Le nombre de pages que vous pouvez créer avec un site web statique est limité. Si vous souhaitez, créer entre autres un site web de 100 pages, générer 100 documents HTML s’avère être laborieux.
Options de conversion de site web statiques en dynamique
Pour convertir un site web statique en site dynamique WordPress, il existe 3 options :
- Convertir le site web manuellement – faire un découpage de votre code HTML en PHP en respectant la structure du thème de WordPress
- Installer un thème WordPress et utiliser votre design HTML pour créer un thème enfant.
- Utiliser une extension pour importer votre Contenu HTML en WordPress
Nous allons dans ce qui suit, voir élaborer sur les trois approches.
1 – Convertir le site web manuellement en thème WordPress.
Pour convertir votre design HTML en thème WordPress, vous devez procéder à un découpage du design en respectant une certaine structure.
De façon fondamentale, WordPress utilise les fichiers suivants pour constituer un thème :
- styles.css – Qui peut contenir le nom du thème et d’informations telles que la version, la description du thème et la clé de traduction
- index.php – le fichier principal du thème qui peut tenir le rôle de listage des articles du site.
- page.php – qui permet de faire afficher le contenu des pages du site
- functions.php – qui est un fichier très important si vous souhaitez créer des fonctions pour votre thème.
Il existe également plusieurs autres fichiers que vous pouvez utiliser pour la conception de votre thème WordPress.
Nous vous invitons à vous référer à la documentation de WordPress.org pour connaitre la liste complète des pages PHP que vous pouvez utiliser.
Procédure générale de conversion de HTML en thème WordPress (Option manuelle)
Pour convertir votre site web en thème WordPress, vous devez suivre les étapes suivantes :
- Convertissez l’extension HTML de votre site web en extension PHP
- Sectionnez vos fichiers en trois parties — header.php, footer.php et body.php
- Créez un dossier pour votre thème. Vous pouvez nommer ce dossier selon votre convenance. Entre autres prositeweb, Mecaniquestar…
- Dans votre dossier de thème, créez les fichiers index.php, page.php, styles.css et functions.php (Nous allons voir plus loin le contenu de ces fichiers)
- Migrez votre design HTML dans le dossier de votre thème
- Créez un dossier additionnel que vous pouvez appeler Template
- Prenez tous les fichiers PHP de votre thème et transférez-les dans le dossier Template (Il s’agit des fichiers HTML que vous avez convertis en PHP à l’étape 1)
- Faire une capture d’écran de votre site web et renommé la capture screenshot.png
- Ajouter le nom à chaque fichier PHP se trouvant dans le dossier Template pour être en mesure de l’utiliser comme thème des pages
- Migrez les données CSS et JS dans le fichier functions.php
- Créer les pages WordPress correspondantes aux pages actuelles de votre site web
- Activez votre thème
- Assignez les pages aux différents designs
- Rendre dynamique le site web
- Cherchez les extensions que vous souhaitez utiliser sur votre site web
Le processus de création de thème WordPress est relativement long. Nous allons essayer de simplifier au maximum pour vous permettre de comprendre l’essentiel.
Détails sur la conversion du design HTML en thème WordPress
Étape 1 – Convertissez l’extension HTML de votre site web en extension PHP
Convertir vos fichiers HTML en php va consister tout simplement à ouvrier le fichier et sauvegarder avec l’extension PHP.
Voir la démonstration ci-dessous.
Étape 2 – Sectionnez vos fichiers en trois parties — header.php, footer.php et body.php
L’une des particularités d’un site web dynamique est d’être en mesure de créer plusieurs pages ou partie grâce à peu de codes. WordPress utilise des fichiers globaux et locaux. En effet, un fichier général permet d’avoir un seul code pour plusieurs pages. Les fichiers header.php et footer.php sont, par exemple, des cas de fichiers généraux. Cela est dû au fait que les informations dans l’entête et le pied d’un site sont généralement les mêmes partout sur le site.
Dans cette partie, il sera question d’ouvrir chaque code HTML et identifier les différentes parties (Entête, le corps et le pied du site). Pour la majeure partie des sites, vous remarquerez, par exemple, un bloc appelé header ou footer. Ci-dessous des exemples de syntaxes de ce qui pourrait aller dans le fichier header.php
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Prositeweb - Le titre de la page</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<header>
le contenu de l'entête de votre site web ici (exemple le menu du site et la bannière)
</header>Vous remarquerez que cette partie inclue la balise <head></head> et le début du code.
En ce que concerne le fichier footer.php, vous pourriez avoir un code similaire à ceci:
<footer>
Contenu du pied de page avec entre autre le formulaire pour souscrire aux infolettres
</footer>
<!-- Les code Javascript -->
<script src="./script.js"></script>
</body>
</html>Tout ce qui reste de votre code est considéré comme le corps de votre site web (partiel pour chaque page). Vous pouvez le laisser pour une utilisation future.
Ci-dessous une démonstration pour résumer cette étape
Étape 3 – Créez un dossier pour votre thème
Le dossier ou vous comptez stocker les codes de votre site web est un répertoire conventionnel. Voici tout de même quelques recommandations.
- Donnez un nom sans espace et charactères spéciaux (tous les caractères tels que é, è ê … sont par exemple, à éviter)
- Choisissez un nom simple
Étape 4 – Dans votre dossier de thème, créez les fichiers index.php, page.php, styles.css et functions.php
Les fichiers index.php, page.php, styles.css et functions.php sont des éléments de base pour un thème WordPress. En effet, WordPress les utilise pour par la configuration initiale de votre thème. Vous pourriez au besoin ajouter d’autres fichiers en vous référant à la documentation de WordPress.
Étape 5 – Migrez votre design HTML dans le dossier de votre thème
En supposant que le nom de votre dossier est montheme, il sera tout simplement question de copier tout votre design et le déplacer dans le dossier montheme. Assurément, vous pourriez être en mesure d’utiliser les fonctions et fonctionnalités de WordPress depuis votre dossier.
Il n’y a pas de recommandations spécifiques concernant la disposition des éléments de votre site dans le dossier. Cependant, pour rendre la structure des fichiers et dossier plus propres, vous pouvez créer un dossier appelé « assets » pour les codes CSS et JavaScript.
Étape 6 – Créez un dossier additionnel que vous pouvez appeler template
Votre dossier additionnel template permettra de ne pas confondre les codes de base de WordPress et les fichiers de votre site web.
Étape 7 – Prenez tous les fichiers PHP de votre thème et transférez-les dans le dossier Template
Il s’agit des fichiers HTML que vous avez convertis en PHP à l’étape 1.
Dans ce dossier, vous pouvez transférer tous les fichiers avec l’extension .php (fichiers qui étaient précédemment .html).
Juste pour rappel : Si vous avez bien suivi le processus à l’étape 2 (Sectionnez vos fichiers en trois parties), les fichiers à transférer comporteront uniquement le corps de votre site web.
Étape 8 – Faire une capture d’écran de votre site web et renommé la capture screenshot.png
La capture de votre site web est tout simplement une illustration de ce à quoi ressemble votre site web. WordPress utilise cette capture comme photo de présentation dans le panneau administrateur. Bien que vous ayez la possibilité de mettre la photo que vous voulez, nous vous recommandons de prendre la capture pour mieux vous repérez dans votre site.
Ci-dessous un exemple de ce à quoi ressemble la capture dans le panneau de gestion du site web.
Étape 9 – Ajouter un nom à chaque fichier PHP se trouvant dans le dossier template pour être en mesure de l’utiliser comme thème des pages
WordPress a une structure définie qui donne la possibilité de sélectionner le design des pages. Si vous souhaitez utiliser les designs semblables à ceux que vous avez sur votre site actuel, vous pouvez créer des thèmes pour page en nommant à vos fichiers. Dans cette partie, nous allons voir comment procéder.
1 – Utilisez la fonction get_header pour appeler l’entête globale sur chaque page
La fonction get_header de WordPress permet de rattraper l’information du fichier header.php pour l’afficher sur la page courante. Effectivement, comme mentionné plus haut, WordPress utilise certaines informations de façon globale via des fonctions. Ci-dessous la syntaxe de cette fonction.
<?php
get_header();
?>2 – Utilisez la fonction get_footer pour appeler le pied de page global sur chacune des pages
Tout comme la fonction get_header, la fonction get_footer permet de récupérer le contenu du fichier footer.php pour l’afficher sur la page courante. Ci-dessous la syntaxe.
<?php
get_footer();
?>3 – Ajouter un nom en haut de votre fichier
Le nom que vous allez donner à chaque fichier pourra être sélectionné à partir de votre éditeur de page pour assigner un design. Il est cependant important de noter que la syntaxe du nom est très importante pour permettre à WordPress de le reconnaître. Ci-dessous la syntaxe que vous devez utiliser.
<?php
/**
* Template Name: À propos
*
* @package WordPress
* @subpackage Prositeweb_Prositeweb
* @since Prositeweb Inc 1.0
*/
get_header();
?>Tout ce qui est capital dans cette notation est le Template Name: *Nom de votre design*. Vous pouvez remplacer À propos par le nom que vous souhaiter attribuer à vos thèmes. Par exemple, Page d’accueil – si le design est pour la page d’accueil.
Étape 9 en résumé (exemple de la page À propos)
Pour recapituler l’étape 9 nous vous laissons ci-dessous un exemple typique de ce que vous devez avoir comme thème.
<?php
/**
* Template Name: À propos
*
* @package WordPress
* @subpackage Prositeweb_Prositeweb
* @since Prositeweb Inc 1.0
*/
get_header();
?>
<section>
les informations qui sont dans la page exclues l'entête et le pied de page
</section>
<?php
get_footer();
?>10 – Migrez les données CSS et JS dans le fichier functions.php
Pour faciliter la gestion des ressources, il est important de l’appeler selon les recommandations de la communauté WordPress. Pour ce fait, vous devez migrer complètement les code CSS et JavaScript dans le fichier functions.php. Vous allez être en mesure de réaliser cela en utilisant les fonctions wp_enqueue_style et wp_enqueue_script de WordPress. Nous allons voir comment l’utiliser.
De façon générale, les codes CSS et JavaScript se trouvent dans l’entête et le pieds du site. Si on se refaire à l’étape de section du site web, vous devez ouvrir les fichier header.php et footer.php pour récupérer les codes css et js. Ensuite, vous devez utiliser le code similaire au code ci-dessous pour l’inclure sur votre site web.
<?php
function prositeweb_enqueue_script(){
wp_enqueue_style('nom-fichier-css-1',get_stylesheet_directory_uri().'/css/bootstrap.min.css',false,false);
wp_enqueue_style('nom-fichier-css-2',get_stylesheet_directory_uri().'/css/style.css',false,false);
wp_enqueue_script( 'nom-fichier-js-1', get_stylesheet_directory_uri().'/js/jquery-3.6.0.min.js',false, false,true);
wp_enqueue_script( 'nom-fichier-js-2', get_stylesheet_directory_uri().'/js/script.js',false, false,true);
}
add_action('wp_enqueue_scripts','prositeweb_enqueue_script');
?>Explications relatives au code (ci-dessus)
- prositeweb_enqueue_script est une fonction conventionnelle PHP. Vous pouvez la nommer selon votre convenance.
- wp_enqueue_style est la fonction WordPress qui permet d’inclure le style CSS dans les pages d’un site web. Vous trouverez une documentation assez détaillée concernant cette fonction via ce lien de WordPress.org.
- get_stylesheet_directory_uri() – à pour but de récupérer la direction vers le répertoire principal du thème courant. Si votre thème est, entre autres montheme, la fonction get_stylesheet_directory_uri() va faire afficher https://exemple.com/wp-content/themes/montheme.
- La fonction wp_enqueue_script, tout comme wp_enqueue_style permet d’inclure les codes JavaScript sur le site web
11 – Créer les pages WordPress correspondantes aux pages actuelles de votre site web
Il sera question tout simplement de créer ce qu’on pourrait appeler le modèle des pages. L’une des particularités de WordPress est que vous pouvez utiliser un modèle pour un nombre indéfini de pages. Ainsi, si plusieurs pages de votre site web ont le même visuel, vous pouvez créer un seul modèle.
Vous pourriez également être intéressé par ces articles,
Ci-dessous quelques publications qui pourraient également vous intéresser
Laisser un commentaire