Un site HTML terminé n’a pas besoin d’être jeté quand vous passez à WordPress. Vous pouvez prendre votre balisage, votre index.html et votre style.css, et le transformer en un thème pleinement fonctionnel en une heure environ. Il n’y a rien de magique: WordPress repose sur des templates PHP, eux-mêmes assemblés à partir de HTML ordinaire découpé en parties logiques.

Le problème, c’est que la plupart des tutoriels soit vous noient sous la terminologie dès les premiers paragraphes, soit partent du principe que vous connaissez déjà PHP. Nous allons adopter une approche différente: nous partirons d’une maquette HTML concrète (en-tête, contenu, barre latérale, pied de page) et nous construirons méthodiquement, fichier par fichier, un thème fonctionnel à partir de cette maquette. Pas de magie, juste du code et de la logique.

À la fin de ce guide, vous disposerez d’un thème prêt à l’emploi que vous pourrez téléverser dans l’administration WordPress, activer, et voir votre HTML au sein d’une plateforme dynamique. Ceci est la première partie, les fondations. Dans la deuxième partie, nous aborderons les templates de page individuels, les champs personnalisés et l’outil de personnalisation.

💡 Aperçu rapide:

• Donnez un nom unique au thème et remplissez l’en-tête du fichier style.css, WordPress reconnaît les thèmes grâce à ces métadonnées.
• Découpez le fichier index.html d’origine en quatre fichiers PHP: header.php, index.php, sidebar.php et footer.php.
• Implémentez les hooks WordPress standards (get_header, get_sidebar, get_footer, wp_head et wp_footer) pour que la plateforme «voie» et prenne en charge votre balisage.
• Ajoutez la Boucle WordPress dans index.php, l’extrait de code qui affiche les articles de blog à l’intérieur de votre structure HTML.
• Créez une archive ZIP, téléversez le thème dans l’administration et activez-le, votre site prend vie sur WordPress.

1. Nommer le thème et le fichier style.css

La première chose à faire est de donner un nom unique à votre thème. Même si vous créez le thème exclusivement pour votre propre site, WordPress a besoin de l’identifier d’une manière ou d’une autre dans le panneau «Apparence → Thèmes».

Conditions de départ:

• Vous disposez d’un fichier index.html et d’une feuille de styles style.css (ou tout autre fichier CSS).
• Vous disposez d’une installation WordPress fonctionnelle avec au moins un thème standard, par exemple Twenty Twenty-Five.
• Vous avez déjà créé un dossier pour votre futur thème dans /wp-content/themes/.

Ouvrez votre éditeur de code (nous recommandons Sublime Text ou VS Code), copiez le contenu de votre feuille de styles dans un nouveau fichier et enregistrez-le sous le nom style.css dans le dossier du thème. Tout en haut du fichier, avant tout code CSS, ajoutez le bloc de métadonnées:

1
/*
2
Theme Name: My HTML-to-WordPress Theme
3
Theme URI: https://example.com
4
Description: Theme assembled from a static HTML layout.
5
Version: 1.0
6
Author: Your Name
7
Author URI: https://example.com
8
Tags: custom-theme, html-to-wordpress, beginner
9
*/

Ne supprimez pas les symboles de commentaire /* et */, WordPress lit précisément ceux-ci. Le champ Theme Name est ici essentiel: c’est le nom sous lequel le thème apparaîtra dans l’administration. Les autres champs sont optionnels, mais nous vous recommandons de tous les remplir, c’est une bonne pratique.

Enregistrez le fichier. À ce stade, WordPress peut déjà reconnaître votre thème, même s’il est encore vide et ne fait rien d’utile.

2. Découper le HTML en templates PHP

Un thème WordPress classique est assemblé à partir de plusieurs fichiers PHP, chacun responsable de sa propre section de la page. La structure la plus courante est en-tête, contenu, barre latérale, pied de page. Si votre HTML est structuré différemment (par exemple, barre latérale à gauche ou deux barres latérales), le principe reste le même, adaptez simplement le découpage à votre structure.

Créez quatre fichiers vides dans le dossier du thème:

• header.php, en-tête du site
• index.php, template principal, point d’assemblage
• sidebar.php, panneau de la barre latérale
• footer.php, pied de page

Ils sont vides pour l’instant, n’attendez pas de miracles. Procédons dans l’ordre.

2.1 Header.php, en-tête du site

Allez dans l’administration WordPress, ouvrez «Apparence → Éditeur de thème» et sélectionnez le thème standard (par exemple, Twenty Twenty-Five). Trouvez son header.php et copiez l’intégralité du bloc <head>, c’est l’ensemble minimum de balises meta et de hooks sans lequel WordPress ne fonctionnera pas correctement. Voici ce que vous devez transférer dans votre header.php:

1
<head>
2
    <meta charset="<?php bloginfo( 'charset' ); ?>">
3
    <meta name="viewport" content="width=device-width">
4
    <title>&lt;?php wp_title( '|', true, 'right' ); ?&gt;</title>
5
    <link rel="profile" href="https://gmpg.org/xfn/11">
6
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
7
    <?php wp_head(); ?>
8
</head>

La fonction bloginfo() substitue dynamiquement les réglages du site (encodage, URL de pingback). Le hook wp_head() est critique: les plugins et le cœur de WordPress y insèrent leurs scripts, styles et balises meta. Sans lui, le thème sera à moitié mort.

Ouvrez maintenant votre index.html d’origine et copiez le code de l’en-tête, tout ce qui se trouve à l’intérieur de <header> ou d’un bloc similaire, et collez-le dans header.php **juste après la balise fermante </head> et la balise ouvrante **<body>. Dans notre balisage de démonstration, cela ressemble à ceci:

1
<body>
2
    <header class="header">
3
        <p>This is header section. Put your logo and other details here.</p>
4
    </header>
5

Ajoutez le lien vers votre feuille de styles entre les balises <head>:

1
<link rel="stylesheet" type="text/css" media="all" href="<?php echo get_template_directory_uri(); ?>/style.css" />

La fonction get_template_directory_uri() retourne l’URL de votre dossier de thème, le chemin vers le CSS fonctionnera sur n’importe quel serveur sans le coder en dur. Enregistrez header.php.

2.2 Index.php, point d’assemblage

index.php dans WordPress est un fichier obligatoire. Il ne stocke pas le balisage en tant que tel mais assemble la page à partir de différentes parties. Ouvrez votre index.php vide et ajoutez trois lignes:

1
<?php get_header(); ?>
2
 
3
<?php get_sidebar(); ?>
4
<?php get_footer(); ?>

La première ligne inclut header.php. Les deux dernières, sidebar.php et footer.php, se placent tout en bas. Le contenu principal (zone de contenu et Boucle, nous y reviendrons dans la section suivante) sera placé entre elles.

Copiez le bloc avec la classe .content (zone de contenu principal) depuis votre index.html d’origine et collez-le entre get_header() et get_sidebar():

1
<?php get_header(); ?>
2
 
3
    <div class="content">
4
        <p>This is the main content area.</p>
5
    </div><!-- .content -->
6
 
7
<?php get_sidebar(); ?>
8
<?php get_footer(); ?>
9

Le schéma est simple: WordPress assemble séquentiellement la page de haut en bas, en-tête, contenu, barre latérale, pied de page. Chaque get_*() appelle le fichier PHP correspondant.

2.3 Sidebar.php et footer.php

La barre latérale et le pied de page sont très simples. Copiez le contenu des blocs .sidebar et .footer de votre index.html vers les fichiers PHP correspondants.

sidebar.php:

1
<aside class="sidebar">
2
    <p>This is the side bar</p>
3
</aside>
4
 
5
<?php dynamic_sidebar( 'sidebar' ); ?>
6

La fonction dynamic_sidebar() affiche les widgets assignés dans l’administration («Apparence → Widgets»). Si la barre latérale n’est pas nécessaire, supprimez cette ligne.

footer.php:

1
<footer class="footer">
2
    <p>And this is the footer.</p>
3
</footer>
4
 
5
<?php wp_footer(); ?>
6
</body>
7
</html>
8

Remarque: </body> et </html> sont déplacés dans footer.php. Dans votre HTML d’origine, ils sont probablement aussi tout en bas, et c’est ainsi que cela doit être. Le hook wp_footer() est tout aussi obligatoire que wp_head(): sans lui, de nombreux plugins et WordPress lui-même ne fonctionneront pas (par exemple, la barre d’administration n’apparaîtra pas).

3. La Boucle WordPress: afficher les articles

Le thème est assemblé, la structure fonctionne. Mais la zone de contenu est encore statique, avec du texte codé en dur provenant du HTML d’origine. Pour que WordPress commence à afficher de vrais articles de blog, vous avez besoin de La Boucle (The Loop), une construction PHP spéciale qui parcourt les articles publiés et les affiche un par un à l’intérieur de votre balisage.

C’est le morceau de code le plus important du thème. Il se place dans index.php, à l’intérieur du bloc <div class="content">, en remplacement du texte statique de remplissage:

1
<?php if ( have_posts() ) : ?>
2
    <?php while ( have_posts() ) : the_post(); ?>
3
        <article <?php post_class(); ?>>
4
            <header class="post-header">
5
                <time datetime="<?php echo get_the_date( 'c' ); ?>">
6
                    <?php echo get_the_date(); ?>
7
                </time>
8
                <h2>
9
                    <a href="<?php the_permalink(); ?>" rel="bookmark">
10
                        <?php the_title(); ?>
11
                    </a>
12
                </h2>
13
                <span class="post-author"><?php the_author(); ?></span>
14
            </header>
15
 
16
            <div class="entry">
17
                <?php if ( has_post_thumbnail() ) : ?>
18
                    <?php the_post_thumbnail( 'medium' ); ?>
19
                <?php endif; ?>
20
                <?php the_content(); ?>
21
                <?php edit_post_link( 'Edit', '<span class="edit-link">', '</span>' ); ?>
22
                <?php wp_link_pages(); ?>
23
            </div>
24
 
25
            <footer class="post-footer">
26
                <?php comments_popup_link(
27
                    'Leave a comment',
28
                    '1 comment',
29
                    '% comments'
30
                ); ?>
31
            </footer>
32
        </article>
33
    <?php endwhile; ?>
34
 
35
    <nav class="navigation">
36
        <div class="prev-posts"><?php next_posts_link( '← Previous posts' ); ?></div>
37
        <div class="next-posts"><?php previous_posts_link( 'Newer posts →' ); ?></div>
38
    </nav>
39
<?php else : ?>
40
    <p>No posts found.</p>
41
<?php endif; ?>
42

Comment cela fonctionne:

• have_posts() vérifie s’il y a des articles à afficher. Si c’est le cas, on entre dans la Boucle.
• the_post() prépare les données pour l’article suivant.
• post_class() ajoute des classes CSS standards à <article>, utile pour styliser différents types de publication.
• the_permalink() et the_title() affichent l’URL et le titre de l’article.
• the_content() est le corps même de l’article.
• the_post_thumbnail() est l’image mise en avant, si elle est définie.
• comments_popup_link() est le lien vers les commentaires.
• next_posts_link() et previous_posts_link() gèrent la pagination.

Le bloc else se déclenche quand il n’y a aucun article, affichant un message de remplissage.

Après avoir inséré la Boucle, votre index.php complet ressemble à ceci:

1
<?php get_header(); ?>
2
 
3
    <div class="content">
4
        <?php if ( have_posts() ) : ?>
5
            <?php while ( have_posts() ) : the_post(); ?>
6
                <article <?php post_class(); ?>>
7
                    <header class="post-header">
8
                        <time datetime="<?php echo get_the_date( 'c' ); ?>">
9
                            <?php echo get_the_date(); ?>
10
                        </time>
11
                        <h2>
12
                            <a href="<?php the_permalink(); ?>" rel="bookmark">
13
                                <?php the_title(); ?>
14
                            </a>
15
                        </h2>
16
                        <span class="post-author"><?php the_author(); ?></span>
17
                    </header>
18
                    <div class="entry">
19
                        <?php if ( has_post_thumbnail() ) : ?>
20
                            <?php the_post_thumbnail( 'medium' ); ?>
21
                        <?php endif; ?>
22
                        <?php the_content(); ?>
23
                        <?php edit_post_link( 'Edit', '<span class="edit-link">', '</span>' ); ?>
24
                        <?php wp_link_pages(); ?>
25
                    </div>
26
                    <footer class="post-footer">
27
                        <?php comments_popup_link(
28
                            'Leave a comment',
29
                            '1 comment',
30
                            '% comments'
31
                        ); ?>
32
                    </footer>
33
                </article>
34
            <?php endwhile; ?>
35
            <nav class="navigation">
36
                <div class="prev-posts"><?php next_posts_link( '← Previous posts' ); ?></div>
37
                <div class="next-posts"><?php previous_posts_link( 'Newer posts →' ); ?></div>
38
            </nav>
39
        <?php else : ?>
40
            <p>No posts found.</p>
41
        <?php endif; ?>
42
    </div><!-- .content -->
43
 
44
<?php get_sidebar(); ?>
45
<?php get_footer(); ?>
46

4. Assembler et installer le thème

Les cinq fichiers (style.css, header.php, index.php, sidebar.php et footer.php) doivent se trouver dans votre dossier de thème (nommez-le, par exemple, my-html-theme). Compressez le dossier en une archive ZIP.

Ensuite, le scénario standard: administration WordPress → «Apparence» → «Thèmes» → «Ajouter un thème» → «Téléverser un thème». Sélectionnez le fichier ZIP, cliquez sur «Installer», puis sur «Activer». Visitez le site, votre maquette HTML a pris vie dans WordPress, et les articles de blog s’affichent dans la zone de contenu.

Ceci conclut la première partie. Vous disposez maintenant d’une structure de thème fonctionnelle: WordPress la reconnaît, prend en compte les hooks et affiche du contenu dynamique via la Boucle. Dans la prochaine partie, nous aborderons les templates de page individuels (single.php, page.php), la hiérarchie des templates et l’inclusion de scripts via functions.php.

⁉️🤔 Foire aux questions

Dois-je connaître PHP pour construire un thème à partir de HTML?

Non. Le minimum que vous écrirez se résume à quelques appels de fonctions comme get_header() et une Boucle de 15 lignes. Tout le reste consiste à copier du code HTML que vous possédez déjà. PHP joue ici le rôle de «colle», pas de langage principal. Si vous comprenez où <?php ?> s’ouvre et se ferme, c’est suffisant pour commencer.

Que faire si ma maquette HTML ne ressemble pas à «en-tête-contenu-barre latérale-pied de page»?

Le principe ne change pas. WordPress assemble la page en appelant séquentiellement des fichiers PHP, leur ordre dans index.php détermine la mise en page. Si votre barre latérale est à gauche, appelez simplement get_sidebar() avant le bloc de contenu. Deux barres latérales? Créez sidebar-left.php et sidebar-right.php avec des appels distincts. Le schéma est flexible.

Puis-je créer un thème sans barre latérale?

Oui, et cela simplifie même la tâche. Supprimez simplement l’appel <?php get_sidebar(); ?> de index.php et ne créez pas le fichier sidebar.php. De nombreux thèmes modernes, y compris les thèmes bloc de WordPress, fonctionnent sans aucune barre latérale.

Est-il obligatoire d’utiliser exactement header.php, index.php, sidebar.php et footer.php?

index.php et style.css sont obligatoires, sans eux WordPress ne verra pas le thème. Les autres fichiers sont optionnels. Mais header.php, sidebar.php et footer.php sont le standard de fait pour les thèmes classiques: tous les développeurs les comprennent, et les fonctions get_header(), get_sidebar() et get_footer() sont conçues pour eux. Pour votre premier thème, tenez-vous en à cet ensemble de quatre fichiers.

Cette approche fonctionne-t-elle avec les thèmes bloc (FSE)?

Non, ce guide concerne les thèmes PHP classiques, qui sont toujours d’actualité et pris en charge (WordPress ne les a pas abandonnés et n’en a pas l’intention). Les thèmes bloc (Full Site Editing) utilisent des templates HTML et un fichier theme.json. Si votre objectif est de transformer rapidement du HTML existant en un thème fonctionnel, l’approche classique est nettement plus simple: moins d’abstractions, un modèle familier «en-tête-contenu-barre latérale-pied de page».

Et ensuite: votre premier pas dans le développement de thème

Vous avez assemblé une structure de thème de base à partir de balisage HTML, avec une Boucle fonctionnelle, des hooks inclus et du contenu dynamique. Le thème s’installe déjà dans l’administration et affiche des articles. Il y a maintenant deux directions pour progresser:

• Si afficher des articles dans votre balisage vous suffit, remplissez le site de contenu et peaufinez le CSS pour qu’il corresponde à votre marque.

Commencez modestement: construisez le thème en suivant ce guide, activez-le et ajoutez quelques articles de test. Une fois que vous verrez votre HTML avec des articles vivants à l’intérieur, tout le reste deviendra plus facile.