Accueil/liés à la connaissance/WordPress/Détails du contenu

Introduction au développement de thèmes WordPress : construire votre premier thème à partir de zéro.

Lecture en 3 minutes
2026-03-11
2026-06-04
1,987
Je reçois une commission lorsque vous achetez via les liens ci‑dessous, sans frais supplémentaires pour vous.

Préparatifs : Comprendre la structure du sujet et les fichiers de base

Avant de commencer à écrire du code, il est nécessaire de comprendre la structure de base d’un thème WordPress standard. Le thème le plus simple de WordPress ne nécessite que deux fichiers :style.css et index.phpCependant, un thème complet et bien structuré nécessite de nombreux fichiers de modèle spécifiques pour définir les différentes parties du site web.

Les fichiers de modèle essentiels comprennent :
* index.phpLe fichier de modèle principal du thème sert de modèle de retrait par défaut pour toutes les pages du site web.
* style.cssIl s’agit du fichier de style principal du thème, qui contient non seulement des règles CSS, mais aussi des commentaires dans la partie en tête du fichier définissant des métadonnées sur le thème (nom du thème, auteur, description, etc.). Ces informations sont essentielles pour que WordPress puisse reconnaître et utiliser correctement le thème.
* header.phpLe modèle de en-tête d'un site web contient généralement les éléments suivants :<head>Certaines parties du site, le logo du site ainsi que le menu de navigation principal.
* footer.phpLe modèle de pied de page d'un site web contient généralement des informations sur les droits d’auteur, une zone pour des widgets, etc.
* functions.phpCe fichier fonctionnel est destiné aux thèmes, et il sert à ajouter des fonctionnalités spécifiques aux thèmes, à enregistrer les menus, à gérer les zones des widgets, ainsi qu’à contenir d’autres fichiers PHP.

De plus, il existe des modèles conçus pour des pages spécifiques, tels que… single.php(Un article unique)page.php(Page indépendante)archive.php(Page d'archivage de l'article) etc. Comprendre la fonction de ces fichiers est la clé pour construire un sujet cohérent.

Lectures recommandées Introduction au développement de thèmes WordPress : créez votre premier thème personnalisé à partir de zéro.。

Hébergement WordPress par UltraHost
Garantie de remboursement dans les 30 jours, bande passante illimitée et base de données, protection gratuite contre les attaques DDoS. Avantage de 501 TP4T pour les achats sur 3 ans.
Le logo d'UltaHost. page d'accès

L’installation d’un environnement de développement est tout aussi importante. Vous aurez besoin d’un environnement de développement PHP local (comme XAMPP, Local by Flywheel ou DevKinsta), d’un éditeur de code (comme VS Code ou PhpStorm), et vous devez vous assurer que la version de WordPress installée localement est la plus récente.

Créer un fichier de thème et une structure de répertoire

Tout d'abord, dans le répertoire d'installation de WordPress, wp-content/themes/ Dans le dossier, créez un nouveau dossier et nommez-le d’après le nom de votre thème, par exemple… my-first-themeTous les fichiers thématiques seront placés dans ce dossier.

Ensuite, nous créons le premier et également indispensable fichier :style.cssEn haut de ce fichier, vous devez ajouter une note spécifique pour indiquer à WordPress que c’est votre thème.

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme
Author: 你的名字
Author URI: https://yourwebsite.com
Description: 这是一个用于学习WordPress主题开发的入门主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

Maintenant, créons le deuxième fichier obligatoire :index.phpAu stade initial, nous pouvons le rendre très simple et ne produire qu’une structure HTML de base.

<!DOCTYPE html>
<html no numeric noise key 1005>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
</head>
<body no numeric noise key 1002>
    <header>
        <h1>Bienvenue sur mon premier thème WordPress !</h1>
    </header>
    <main>
        the_post() ; the_content() ; endwhile ; endif ; ?
    </main>
    <footer>
        <p>© Copyright réservé</p>
    </footer>
    
</body>
</html>

À ce moment, si vous accédez à l’arrière-plan de WordPress via “ Étiquette ” → “ Thèmes ”, vous devriez voir votre thème “ Mon premier thème ” et pouvoir l’activer. Une fois activé, lorsque vous visitez la page d’accueil du site, vous remarquerez que le contenu des articles est affiché dans une page HTML très basique.

Lectures recommandées Guide complet pour le développement de thèmes WordPress : de l’initiation à la maîtrise。

hosting.com Hébergement partagé
Hautes performances avec les CPU AMD EPYC, stockage SSD NVMe et LiteSpeed, support interne expert 24h/24 et 7j/7, mesures de sécurité avancées, notamment SSL, protection contre la force brute, les logiciels malveillants et le DDoS, économies pouvant aller jusqu'à 73%.
LOGO hosting.com page d'accès

Construire des modèles et des fonctionnalités de base

Afin de rendre la structure du sujet plus claire, nous devons…index.phpDivisez le tout en parties plus petites et réutilisables. Pour commencer, créez… header.php Le document, s'il vous plaît.<head>Certaines parties du contenu, ainsi que le contenu du titre de la page, ont été déplacées ailleurs.

<!DOCTYPE html>
<html no numeric noise key 1012>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="https://gmpg.org/xfn/11">
    
</head>
<body no numeric noise key 1009>

<header id="masthead" class="site-header">
    <div class="site-branding">
        <?php
        if ( is_front_page() && is_home() ) :
            ?>
            <h1 class="site-title"><a href="/fr/</?php echo esc_url( home_url( '/' ) ); ?>" rel="home"></a></h1>
            <?php
        else :
            ?>
            <p class="site-title"><a href="/fr/</?php echo esc_url( home_url( '/' ) ); ?>" rel="home"></a></p>
            <?php
        endif;
        ?>
    </div>
    <nav id="site-navigation" class="main-navigation">
        'menu-1',
                'menu_id'        =&gt; 'primary-menu',
            )
        );
        ?&gt;
    </nav>
</header>

Ensuite, créez. footer.php Les documents.

<footer id="colophon" class="site-footer">
    <div class="site-info">
        <p><?php echo esc_html__( '由WordPress驱动', 'my-first-theme' ); ?></p>
    </div>
</footer>

</body>
</html>

Maintenant, nous devons créer le “ cerveau ” de ce thème… functions.php Fichiers. Ici, nous allons configurer les fonctionnalités de support des thèmes, définir l'emplacement des unités de mesure, ainsi que l'ajout de feuilles de style et de scripts.

<?php
// 添加主题功能支持
function my_first_theme_setup() {
    // 让WordPress管理文档标题
    add_theme_support( 'title-tag' );
    // 启用文章和评论的RSS feed链接
    add_theme_support( 'automatic-feed-links' );
    // 启用文章缩略图（特色图像）
    add_theme_support( 'post-thumbnails' );
    // 注册一个主菜单
    register_nav_menus(
        array(
            'menu-1' => esc_html__( '主导航', 'my-first-theme' ),
        )
    );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );
// 注册前端样式表
function my_first_theme_scripts() {
    // 主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), '1.0' );
    // 主JavaScript文件（如果存在）
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Enfin, restructurez votre… index.phpUtilisez les balises de template de WordPress pour intégrer le en-tête et le pied de page.

<?php get_header(); ?>
<main id="primary" class="site-main">
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) :
            the_post();
            get_template_part( 'template-parts/content', get_post_type() );
        endwhile;
        the_posts_navigation();
    else :
        get_template_part( 'template-parts/content', 'none' );
    endif;
    ?>
</main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Ajouter des styles et des fonctionnalités interactives.

Le squelette du thème est maintenant complet ; il est temps d’y ajouter des styles et des fonctionnalités interactives. Tout d’abord,style.cssAprès les commentaires dans la tête du fichier, ajoutez quelques règles CSS de base pour embellir votre thème.

Hébergement partagé InterServer
Hébergement mutualisé $2.50 USD par mois, premier mois $0.1 USD code promo tryinterserver, 461 scripts cloud apps, installation en un clic.
Le logo d'InterServer. page d'accès 
/* 基础样式 */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f9f9f9;
    margin: 0;
    padding: 20px;
}
.site-header {
    background: #fff;
    padding: 1rem 2rem;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.main-navigation ul {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}
.main-navigation li {
    margin-left: 1.5rem;
}
.site-main {
    max-width: 800px;
    margin: 2rem auto;
    padding: 2rem;
    background: white;
    box-shadow: 0 0 10px rgba(0,0,0,0.05);
}
.site-footer {
    text-align: center;
    padding: 2rem;
    color: #666;
    border-top: 1px solid #eee;
}

Pour gérer la navigation sur les appareils mobiles, nous pouvons créer un fichier JavaScript simple. Créez-le dans le répertoire racine du thème. /js/navigation.js。

Lectures recommandées Guide complet pour le développement de plugins WordPress : Un tutoriel pratique de A à Z pour les débutants jusqu'à la publication en ligne。

// 简单的移动端菜单切换示例
document.addEventListener('DOMContentLoaded', function() {
    const menuToggle = document.createElement('button');
    menuToggle.textContent = '菜单';
    menuToggle.classList.add('menu-toggle');
    const primaryMenu = document.querySelector('#primary-menu');
    if (primaryMenu) {
        primaryMenu.parentNode.insertBefore(menuToggle, primaryMenu);
        menuToggle.addEventListener('click', function() {
            primaryMenu.classList.toggle('show');
        });
    }
});

Et ajoutez les styles correspondants dans le CSS :

.menu-toggle {
    display: none;
    background: #007cba;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    cursor: pointer;
}
@media (max-width: 768px) {
    .menu-toggle {
        display: block;
    }
    .main-navigation ul {
        display: none;
        flex-direction: column;
        width: 100%;
    }
    .main-navigation ul.show {
        display: flex;
    }
}

résumés

À travers les étapes mentionnées ci-dessus, nous avons créé un thème WordPress de base mais bien structuré. Nous avons commencé par comprendre les fichiers clés du thème, puis nous avons progressivement construit son contenu.style.cssetindex.phpEnsuite, en les séparant…header.php、footer.phpet puissantfunctions.phpLes fichiers ont été utilisés pour rendre la structure du thème modulaire et facile à maintenir. Enfin, nous avons ajouté des styles de base ainsi que des interactions simples en JavaScript afin d’améliorer l’expérience utilisateur.

Ce thème possède les caractéristiques de base des thèmes WordPress modernes : il prend en charge les balises de titre, les images de présentation, les menus de navigation, et il dispose déjà d’une base de conception responsive (adaptée à différents appareils). À partir de là, vous pouvez continuer à explorer et à personnaliser la création de votre propre thème.single.php、page.phpAttendez-vous à découvrir davantage de fichiers de templates, à intégrer des frameworks CSS plus complexes (comme Bootstrap), ou à utiliser l’API REST de WordPress pour créer des interfaces utilisateur plus dynamiques. Le monde du développement de thèmes est vaste et passionnant ; l’essentiel est de passer à l’action et de continuer à itérer.

FAQ Foire aux questions

Pourquoi mon thème n’apparaît-il pas dans la liste des thèmes en arrière-plan ?

Veuillez vérifier d’abord si votre dossier de thèmes est placé dans le chemin correct.wp-content/themes/Deuxièmement, assurez-vous que…style.cssLe bloc d’informations sur le thème, situé en haut du fichier, est parfaitement formaté. La ligne “ Theme Name: ” est particulièrement indispensable. Tout erreur de saisie ou problème de formatage peut empêcher WordPress d’identifier correctement le thème.

Comment ajouter une zone pour les widgets (petits outils) à mon thème ?

Vous avez besoin de…functions.phpLe fichier utiliseregister_sidebar()Une fonction est disponible pour enregistrer des gadgets dans la zone dédiée à leur affichage. Une fois enregistrés, vous pourrez les utiliser dans les fichiers de modèle correspondants (par exemple…).sidebar.phpOufooter.phpUtilisé dans…)dynamic_sidebar()Il s’agit d’une fonction permettant d’appeler cette autre fonction. C’est la méthode standard pour étendre les fonctionnalités de la barre latérale ou du pied de page d’un thème.

函数 get_template_part() 有什么用？

get_template_part()C’est une étiquette de template très puissante, utilisée pour charger des fragments de code réutilisables dans un thème. Par exemple, elle peut être utilisée pour appeler des fonctions au sein d’un cycle.get_template_part( 'template-parts/content', get_post_type() );Il tentera d'abord de charger.template-parts/content-post.php(En supposant que le type d'article est...)postSi l’opération échoue, alors le contenu sera chargé.template-parts/content.phpCela améliore considérablement la modularité et la maintenance du code.

Lors du développement d'un thème pour WordPress, comment s'assurer qu'il respecte les normes de codage de WordPress ?

WordPress définit des normes de codage détaillées pour PHP, HTML, CSS et JavaScript. Il est conseillé d’installer des outils de vérification du code (tels que PHP_CodeSniffer avec les règles de codage de WordPress, ou ESLint) dans votre éditeur de code. Consultez également régulièrement les documents officiels de WordPress concernant ces normes, et veillez à les appliquer strictement au sein de votre équipe de développement afin de garantir la qualité et la cohérence du code.

Quelle est la suite, quelle est la suite ?

Si vous êtes en train de créer ou d’optimiser un site WordPress, nous vous conseillons de poursuivre votre lecture en vous concentrant sur l’optimisation des performances, la configuration des plugins et la personnalisation des thèmes.

Lecture approfondie et connaissances pratiques

Les articles suivants sont liés au sujet de cet article et peuvent faire l'objet d'une lecture plus approfondie. Il est souvent préférable de commencer par l'article qui se rapproche le plus de votre problème actuel, puis d'étendre progressivement la lecture aux sujets environnants.

Tags.