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

Guide d’introduction au développement de thèmes WordPress : créez votre premier thème à partir de zéro.

Lecture en 4 minutes
2026-03-16
2026-06-04
2,811
Je reçois une commission lorsque vous achetez via les liens ci‑dessous, sans frais supplémentaires pour vous.

Préparation et aménagement de l'environnement.

Avant de commencer à écrire du code, vous avez besoin d’un environnement de développement adapté. Cela comprend un environnement de serveur local (comme XAMPP, MAMP ou Local by Flywheel), un éditeur de code (comme VS Code ou PhpStorm), ainsi qu’une toute nouvelle installation de WordPress. Assurez-vous que votre WordPress est à jour afin de pouvoir utiliser les dernières fonctionnalités et API.

Ensuite, vous devez dans WordPress dewp-content/themesCréez un nouveau dossier dans le répertoire, dont le nom est le “ slug ” de votre thème, par exemplemy-first-themeCe dossier deviendra l’emplacement de tous vos fichiers de thème. Les fichiers les plus élémentaires d’un thème WordPress ne sont que deux :index.phpetstyle.cssParmi ceux-ci,style.cssCe n’est pas seulement une feuille de style, mais aussi un “ fichier d’en-tête ” contenant les métadonnées du thème, et ses informations de commentaire sont essentielles pour que WordPress reconnaisse votre thème.

Créer un élément de basestyle.cssLe commentaire d’en-tête du fichier doit contenir les informations suivantes :

Lectures recommandées Créer le thème WordPress parfait : guide complet de développement, de zéro à la maîtrise。

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme/
Author: 你的名字
Author URI: https://example.com/
Description: 这是一个用于学习的入门级WordPress主题。
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-first-theme
*/

Text DomainUtilisé pour l’internationalisation, il doit correspondre au nom du dossier de votre thème. En même temps, créez le plus simple desindex.phpLe fichier doit seulement contenir une phrase<?php get_header(); ?>Et un…<h1>Bonjour le monde !</h1>À ce stade, dans “ Apparence ” → “ Thèmes ” de l’administration WordPress, vous devriez voir votre thème et pouvoir l’activer. Même s’il n’affiche encore rien pour l’instant (car nous n’avons pas encore crééheader.php），mais cela signifie que vous avez déjà réussi à faire le premier pas.

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

Comprendre les fichiers de modèle principaux et la hiérarchie des modèles

WordPress utilise un système intelligent appelé “ hiérarchie des modèles ” pour déterminer quel fichier de modèle doit être utilisé pour afficher le contenu d’une requête de page donnée. Comprendre cette hiérarchie est au cœur du développement de thèmes. Le système commence par rechercher le fichier de modèle le plus spécifique et, s’il n’existe pas, revient à des fichiers plus génériques.

Les fichiers modèles les plus élémentaires comprennent :
* index.php: Le modèle de secours final, utilisé pour toutes les requêtes si aucun modèle plus spécifique n’est trouvé.
* header.php: contenant des documents<head>Partie et zone d’en-tête du site web. Viaget_header()Introduction des fonctions.
* footer.php: comprend la zone de pied de page du site web. Viaget_footer()Introduction des fonctions.
* sidebar.phpComprend un composant de barre latérale.get_sidebar()Introduction des fonctions.
* functions.phpCe n’est pas un fichier de modèle, mais la “ bibliothèque de fonctions ” de votre thème, utilisée pour ajouter des fonctionnalités, enregistrer des menus, des widgets, etc.

Pour différents types de pages, il existe des modèles plus spécifiques :
* Article unique : l’ordre de recherche estsingle-{post-type}-{slug}.php -> single-{post-type}.php -> single.php -> singular.php -> index.php。
* Page statique : l’ordre de recherche estcustom-template.php(Modèle personnalisé) page-{slug}.php -> page-{id}.php -> page.php -> singular.php -> index.php。
* Liste des articles (page d’accueil du blog, pages de catégories, etc.) : l’ordre de recherche esthome.php(Pour la page de liste des articles de blog) -> front-page.phpAccueil index.php。

Créer des modèles d’en-tête et de pied de page

Tout d'abord, créez unheader.php. Il doit<!DOCTYPE html>Commencez et incluez des appels de fonctions WordPress clés, tels quewp_head()。

Lectures recommandées Thème WordPress haut de gamme personnalisé : guide pratique complet, de la conception au développement en passant par l'optimisation.。

<!DOCTYPE html>
<html no numeric noise key 1007>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
</head>
<body no numeric noise key 1004>
    <header>
        <h1><a href="/fr/</?php echo esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a></h1>
        <p><?php bloginfo('description'); ?></p>
        <nav>
            'primary')); ?&gt;
        </nav>
    </header>

De même, créer…footer.phpet assurez-vous d’appelerwp_footer()Une fonction.

    <footer>
        <p>©  . Tous droits réservés.</p>
    </footer>
    
</body>
</html>

Vous pouvez maintenant mettre à jour votreindex.php, utilisez ces parties du modèle.

<main>
    <h1>Bonjour le monde depuis Main !</h1>
    &lt;?php
    if (have_posts()) :
        while (have_posts()) : the_post();
            the_title(&#039;<h2>', '</h2>');
            the_content();
        endwhile;
    else :
        echo '<p>No content found.</p>';
    endif;
    ?&gt;
</main>

Améliorer les fonctionnalités du thème via functions.php.

functions.phpLe fichier est le “ cerveau ” de votre thème. C’est ici que vous ajoutez des fonctionnalités, enregistrez les composants principaux de WordPress tels que les menus et les zones de widgets, et mettez en file d’attente les feuilles de style et les fichiers de script.

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

Ajouter le support des thèmes et le menu de navigation pour l'inscription.

Tout d’abord, activons quelques fonctionnalités de base du thème.add_theme_support()Fonction permettant de déclarer les fonctionnalités prises en charge par le thème.

<?php
// functions.php
function my_first_theme_setup() {
    // 让WordPress管理文档标题
    add_theme_support('title-tag');
    // 启用文章和页面的特色图像功能
    add_theme_support('post-thumbnails');
    // 为文章中的图像添加响应式图片支持
    add_theme_support('responsive-embeds');
    // 添加对HTML5标记的支持
    add_theme_support('html5', array('comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script'));
}
add_action('after_setup_theme', 'my_first_theme_setup');

Ensuite, enregistrez un emplacement de menu de navigation. Cela permet aux utilisateurs de configurer le menu dans l’administration sous “ Apparence ” -> “ Menus ” et de l’utiliser dans les modèleswp_nav_menu()La fonction l’appelle.

function my_first_theme_menus() {
    register_nav_menus(array(
        'primary' => __('Primary Menu', 'my-first-theme'),
        'footer'  => __('Footer Menu', 'my-first-theme'),
    ));
}
add_action('init', 'my_first_theme_menus');

Intégrer dans le fichier de style et les scripts

La bonne façon de charger les styles et les scripts est viawp_enqueue_style()etwp_enqueue_script()des fonctions et les attacher àwp_enqueue_scriptsSur le crochet.

Lectures recommandées Analyse complète du développement de thèmes pour WordPress : Guide pratique de l'initiation à la maîtrise。

function my_first_theme_scripts() {
    // 排入主样式表
    wp_enqueue_style('my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get('Version'));
    // 排入自定义JavaScript文件
    wp_enqueue_script('my-first-theme-script', get_template_directory_uri() . '/js/main.js', array(), wp_get_theme()->get('Version'), true);
}
add_action('wp_enqueue_scripts', 'my_first_theme_scripts');

Créer une boucle et un modèle de contenu

“La ” boucle » est une structure de code PHP utilisée dans WordPress pour récupérer et afficher des articles depuis la base de données. Elle est au cœur de presque tous les fichiers de modèle.

Comprendre la structure de la boucle principale

Au-dessus de…index.phpDans l’exemple, nous avons déjà vu une boucle de base. Décomposons-la :

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 
<!-- 对于循环中的每一篇文章，我们在这里输出内容 -->
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1012>
            <h2><a href="/fr/</?php the_permalink(); ?>"></a></h2>
            <?php the_post_thumbnail(); ?>
            <div class="entry-content">
                
            </div>
        </article>
    
    <!-- 分页链接 -->
    
    <!-- 如果没有文章 -->
    <p><?php _e('Sorry, no posts matched your criteria.', 'my-first-theme'); ?></p>

Créer un modèle d’article unique

Créons maintenant un modèle dédié à l’affichage d’un seul articlesingle.phpIl est plus détaillé que la boucle de la page de liste.

<main id="primary">
    <?php
    while (have_posts()) : the_post();
    ?>
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1011>
            <header>
                <h1></h1>
                <div class="entry-meta">
                    <?php
                    printf(
                        __('Posted on %s by %s', 'my-first-theme'),
                        get_the_date(),
                        get_the_author_posts_link()
                    );
                    ?>
                </div>
                <?php the_post_thumbnail('large'); ?>
            </header>
            <div class="entry-content">
                &lt;?php
                // 分页，适用于使用 <!--nextpage--> 标签的长文章
                wp_link_pages(array(
                    'before' =&gt; '<div class="page-links">' . __('Pages:', 'my-first-theme'),
                    'after'  =&gt; '</div>',
                ));
                ?&gt;
            </div>
            <footer>
                &lt;?php the_tags(&#039;<span class="tags-links">' . __('Tagged: ', 'my-first-theme'), ', ', '</span>'); ?&gt;
            </footer>
        </article>
        
</main>

résumés

Grâce à ce guide, vous avez déjà achevé le parcours essentiel pour construire un thème WordPress de base à partir de zéro. Nous avons commencé par mettre en place l’environnement de développement et créer les fichiers de base, puis nous avons progressivement approfondi la compréhension du système de hiérarchie des modèles de WordPress, qui constitue la pierre angulaire de la création de thèmes flexibles. Vous avez appris à construire des éléments réutilisablesheader.phpetfooter.phpBlocs de modèle, et grâce à de puissantsfunctions.phpLe fichier a ajouté une prise en charge essentielle des fonctionnalités à votre thème, telles que les menus de navigation et le chargement des styles. Enfin, nous avons exploré le mécanisme de la “ boucle ” de WordPress et créé des modèles pour afficher une liste d’articles et un article individuel.

Ce n’est qu’un point de départ. Ensuite, vous pouvez explorer la création de modèles plus spécifiques (commepage.php, archive.php), enregistrer des zones de widgets, ajouter des types de publication personnalisés et des taxonomies, ainsi que mettre en œuvre un design responsive plus avancé et des interactions JavaScript. N’oubliez pas que consulter la documentation officielle des développeurs et pratiquer continuellement sont les meilleurs moyens d’améliorer vos compétences.

FAQ Foire aux questions

Que faire si, après l’activation de mon thème, le site affiche une page blanche ?

Ceci est généralement causé par une erreur fatale de PHP. Veuillez d'abord vérifier votrefunctions.phpY a-t-il des erreurs de syntaxe dans le fichier, comme des points-virgules ou des parenthèses manquants. Ouvrez celui de WordPressWP_DEBUGLe mode peut vous aider à voir les messages d’erreur spécifiques. Àwp-config.phpDans le document, il sera indiqué que...define('WP_DEBUG', false);se transformer endefine('WP_DEBUG', true);。

Comment ajouter une fonctionnalité de logo personnalisé à mon thème ?

Dans le vôtrefunctions.phpLes documents deadd_theme_supportPartie, ajoutez une ligne :add_theme_support('custom-logo');Vous pouvez également transmettre un tableau de paramètres pour définir la taille du logo, la hauteur flexible, etc. Ensuite, les utilisateurs peuvent téléverser le logo dans “ Apparence ” -> “ Personnaliser ” -> “ Identité du site ” et l’utiliser dans le modèlethe_custom_logo();La fonction l’appelle.

Pourquoi le menu de navigation que j’ai enregistré ne s’affiche-t-il pas dans l’administration ?

Veuillez vérifier les points suivants : premièrement, assurez-vous que votre code d’enregistrement est dansfunctions.phpet correctement monté surinitCrochet ouafter_setup_themesur le crochet. Deuxièmement, assurez-vous que vous avez définitheme_location(par exemple'primary') lors de l’appelwp_nav_menu()correspondre exactement. Troisièmement, après avoir créé le menu, vous devez attribuer un menu à l’emplacement que vous avez enregistré dans l’onglet “ Apparence ” -> “ Menus ” -> “ Gérer les emplacements ” de l’administration.

Comment créer une zone de widgets (barre latérale) ?

Tout d’abord,functions.phpUtilisé dansregister_sidebar()La fonction enregistre une zone de widget. Vous devez fournir un tableau de paramètres pour définir son ID, son nom, sa description, etc. Ensuite, dans le fichier de modèle où vous souhaitez afficher la barre latérale (par exemplesidebar.phpDans ce cas, utilisezdynamic_sidebar()la fonction et en lui passant l’identifiant du widget pour l’appeler. Enfin, dansindex.phpOusingle.phpUtiliser dans les modèles, etc.<?php get_sidebar(); ?>Introduire le modèle de barre latérale.

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.