🎨 Thème Enfant et Reprise de Contrôle avec PHP

Ce que j’ai fait

Mon infrastructure serveur sécurisée étant opérationnelle, il était temps de m’attaquer à l’apparence du site. Mon but : avoir un portfolio avec ma propre identité visuelle (couleurs, polices, mise en page).

1. Pourquoi créer un « Thème Enfant » ?

J’utilise le thème WordPress par défaut « TwentyTwentyFive ». L’erreur classique du débutant serait de modifier directement les fichiers de ce thème pour y mettre ses propres couleurs.

Le problème : À la prochaine mise à jour de WordPress, le thème sera écrasé et tout mon travail sera perdu. La solution : Créer un « Thème Enfant » (Child Theme). C’est un dossier vide qui « hérite » de tout le design du thème parent, mais qui protège mes propres modifications.

Je me suis connecté à mon serveur et j’ai tapé ces commandes pour créer la structure :

cd /srv/portfolio/wp-content/themes
mkdir twentytwentyfive-child
cd twentytwentyfive-child

J’ai ensuite créé le fichier de base, style.css, pour y définir mes variables de couleurs. Utiliser :root me permet de ne déclarer ma palette qu’une seule fois. Si je veux changer le thème entier plus tard, je n’aurai que 3 lignes à modifier !

CSS

/*
Theme Name:   TwentyTwentyFive Child - Portfolio
Template:     twentytwentyfive
Version:      1.0.0
*/

:root {
    --couleur-principale: #2C3E50; /* Bleu marine très professionnel */
    --couleur-secondaire: #E74C3C; /* Rouge pour les appels à l'action */
    --couleur-fond: #ECF0F1;
    --couleur-texte: #34495E;
    --border-radius: 8px;
}

body {
    background-color: var(--couleur-fond);
    color: var(--couleur-texte);
    font-family: -apple-system, sans-serif;
}

2. Le mur du « Full Site Editing » (FSE)

C’est ici que j’ai rencontré mon premier vrai blocage en développement frontend. Je voulais structurer ma page d’accueil. En inspectant le code (touche F12), j’ai vu des classes HTML absurdes générées par WordPress, comme <div class="wp-block-post-template-is-layout-flow">.

J’ai découvert que TwentyTwentyFive est un thème « FSE » (à blocs). Cela signifie qu’il n’y a pas de fichiers de code lisibles pour le design : tout est généré par l’éditeur web et caché dans la base de données. Pour un débutant c’est totalement incompréhensible et inutilisable.

3. Reprendre le contrôle avec mon propre code PHP

J’ai alors forcé WordPress à ignorer son système de blocs automatiques pour qu’il lise mes propres fichiers PHP.

Pour cela, j’ai créé le fichier functions.php dans mon thème enfant. C’est le « cerveau » du thème. J’y ai écrit un filtre (template_include) qui dit à WordPress : « Si un visiteur est sur la page d’accueil, utilise mon fichier front-page.php« .

<?php
# Sécurité : empêche un hacker d'accéder directement à ce fichier
if ( ! defined( 'ABSPATH' ) ) exit;

// Je charge mon fichier style.css
add_action( 'wp_enqueue_scripts', function() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_uri(), array('parent-style') );
});

# Je force WordPress à utiliser MES templates PHP plutôt que ses blocs automatiques
add_filter('template_include', function($template) {
    if (is_front_page()) {
        return get_stylesheet_directory() . '/front-page.php';
    }
    return $template;
}, 99);

4. Coder ma propre page d’accueil

Libéré du système de blocs, j’ai pu créer mon fichier front-page.php et mon header.php.

Dans mon menu de navigation, je n’ai pas écrit les liens « en dur » (comme href="http://venatictundra22.com/"). C’est une mauvaise pratique, car si je change de nom de domaine un jour, tous les liens seront morts. J’ai utilisé la fonction home_url() de WordPress, couplée à esc_url() pour la sécurité :

<header class="site-header" style="background: var(--couleur-principale); padding: 1rem;">
    <nav style="max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between;">
        
        <a href="<?php echo esc_url( home_url( '/' ) ); ?>" style="color: white; font-weight: bold;">
            Portfolio
        </a>
        
        <ul style="display: flex; list-style: none; gap: 2rem;">
            <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>" style="color: white;">Accueil</a></li>
            <li><a href="<?php echo esc_url( home_url( '/projets' ) ); ?>" style="color: white;">Projets</a></li>
        </ul>
        
    </nav>
</header>

Bilan de cette étape : J’ai compris la hiérarchie des templates WordPress. Je ne subis plus le code généré par l’outil, c’est moi qui décide exactement de ce qui s’affiche à l’écran.