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 :
En plus des points brièvement énumérés ci-dessous vous devez vous demander pourquoi convertir son site web. Ci-dessous quelques arguments,
Voici quelques avantages des sites web dynamiques.
Pour convertir un site web statique en site dynamique WordPress, il existe 3 options :
Nous allons dans ce qui suit, voir élaborer sur les trois approches.
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 :
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.
Pour convertir votre site web en thème WordPress, vous devez suivre les étapes suivantes :
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.
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.
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 global permet d’avoir un seul code pour plusieurs pages. Les fichiers header.php et footer.php sont, par exemples, des cas de fichiers globaux. 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
Le dossier ou vous comptez stocker les codes de votre site web est un répertoire conventionnel. Voici tout de même quelques recommandations.
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.
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.
Votre dossier additionnel template permettra de ne pas confondre les codes de base de WordPress et les fichiers de votre site web.
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.
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.
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 donnant un nom à vos fichiers. Dans cette partie, nous allons voir comment procéder.
La fonction get_header de WordPress permet de récupérer 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();
?>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();
?>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.
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();
?>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');
?>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.