Ce que j’ai fait
Transformer un site « statique » en une structure dynamique. Au lieu d’écrire du HTML à la main dans l’éditeur, j’ai développé un outil (un plugin) capable de générer l’affichage à partir de données structurées.
1. Pourquoi créer un plugin plutôt que d’écrire dans les pages ?
Au début, j’écrivais mon code HTML directement dans l’interface de WordPress.
- Le problème : Si je voulais changer la couleur d’un bouton sur mes 10 fiches projets, je devais ouvrir 10 pages et faire 10 modifications manuelles. C’est long et très peu pratique.
- La solution : Le plugin. Il sépare les Données (la liste des projets) du Rendu (le code HTML/CSS).
2. Architecture du plugin portfolio-projets
J’ai organisé mon code de manière modulaire sur le serveur:
# Mon arborescence dans /wp-content/plugins/
portfolio-projets/
├── portfolio-projets.php # Le "Cerveau"
├── assets/
│ └── css/
│ └── projets.css # L'apparence des cartes
└── includes/
├── data-projets.php # La "Base de données"
└── shortcodes.php # La "Logique" A. data-projets.php
C’est ici que je stocke mes informations. C’est un simple tableau PHP (array). Si je veux ajouter un projet, je rajoute juste un bloc dans ce fichier sans toucher au reste du site.
<?php
# On empêche l'accès direct pour la sécurité
if (!defined('ABSPATH')) exit;
function portfolio_get_projets() {
return array(
array(
'emoji' => '🖥️',
'titre' => 'Infrastructure Web Full-Stack',
'description' => 'Déploiement Docker sécurisé sur Debian.',
'badges' => array('Docker', 'Nginx', 'UFW'),
'competences' => 'SysAdmin, DevOps'
),
# Pour ajouter un projet, il suffit de copier-coller ce bloc
);
}
B. shortcodes.php
J’ai créé un Shortcode : [ mes_projets ]. Quand je tape ce mot-clé dans WordPress, il déclenche une boucle qui parcourt mon tableau de données et génère le HTML correspondant.
Point crucial sur la sécurité (Faille XSS) : J’ai appris qu’on ne doit jamais afficher une donnée sans la « nettoyer ». J’utilise la fonction esc_html(). Si un pirate injectait du code malveillant dans mes données, WordPress le transformerait en simple texte inoffensif au lieu de l’exécuter dans le navigateur du visiteur.
function portfolio_shortcode_projets() {
$projets = portfolio_get_projets();
ob_start(); # Capture le HTML
foreach ($projets as $projet) { ?>
<div class="carte-projet">
<h3><?php echo esc_html($projet['emoji'] . ' ' . $projet['titre']); ?></h3>
<p><?php echo esc_html($projet['description']); ?></p>
<div class="badges">
<?php foreach ($projet['badges'] as $badge): ?>
<span class="badge"><?php echo esc_html($badge); ?></span>
<?php endforeach; ?>
</div>
</div>
<?php }
return ob_get_clean(); # Renvoie le HTML propre à WordPress
}
add_shortcode('mes_projets', 'portfolio_shortcode_projets');
3. La Roadmap de mon projet
Enfin, pour un portfolio, montrer du code ne suffit pas : il faut prouver qu’on sait s’organiser.
J’ai donc créé une page « Roadmap » publique. En utilisant du CSS, j’ai mis en place un affichage visuel qui montre exactement quelles phases du projet sont terminées (✅), lesquelles sont en cours (🔧) et lesquelles restent à faire (⬚).
Cependant, un nouveau problème s’est posé : mettre à jour cette roadmap manuellement (en modifiant le code HTML) est fastidieux. C’est exactement le même souci qui m’avait poussé à créer un plugin pour mes projets. En faisant des recherches, j’ai découvert qu’il était possible de créer sur WordPress un système de gestion sur mesure appelé CPT (Custom Post Type). Cela me permettrait de modifier ma roadmap directement depuis l’interface d’administration, aussi facilement que de publier un article. C’est une excellente piste d’amélioration que je garde de côté pour peaufiner mon portfolio une fois ce projet fil rouge terminé.
Ce que j’ai compris
L’écosystème WordPress est infini. Quand je suis bloqué ou que je trouve une tâche répétitive, il y a toujours une fonctionnalité avancée (comme les CPT) pensée pour résoudre ce problème de manière professionnelle.
Le code « en dur » est un piège. Si je dois ouvrir le code source à chaque fois que je veux modifier un texte ou ajouter un projet, c’est que mon architecture est mauvaise.
Séparer les données de l’affichage . Créer un plugin maison avec un système de shortcode permet de garder un site propre et facile à maintenir.
Il ne faut jamais faire confiance aux données affichées. La fonction esc_html() est un réflexe obligatoire pour bloquer les failles XSS et empêcher l’exécution de scripts malveillants.
La gestion de projet est aussi importante que le code. Maintenir une roadmap montre que je sais planifier mes tâches et que je suis conscient de ma « dette technique » (comme le fait de devoir passer aux Custom Post Types plus tard).