Pour créer un thème WordPress complet et fonctionnel, vous devez préparer une série de fichiers essentiels. Ces fichiers constituent la structure de base du thème, et chacun d’eux a une fonction spécifique.
Les fichiers les plus basiques comprennent :
* `style.css`：主题的样式表，同时也是主题的“身份证”，包含主题名称、作者、描述等元信息。
* `index.php`：主题的主模板文件，是默认的首页和文章列表页模板。
* `header.php`：网站的头部模板，通常包含`<head>`部分和网站顶部的导航区域。
* `footer.php`：网站的底部模板，通常包含版权信息、脚本等。
* `functions.php`：主题的功能文件，用于添加自定义功能、注册菜单、侧边栏等。
Commençons par créer le fichier `style.css`. En haut du fichier, vous devez ajouter une annotation contenant des informations sur le thème du fichier de style.
/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个为学习WordPress主题开发而创建的简单自定义主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-first-theme
*/Ensuite, créez le fichier `index.php`. Dans sa version de base, ce fichier doit inclure les éléments de tête (header) et de pied (footer), ainsi que des instructions pour afficher les articles de manière cyclique (c’est-à-dire en boucle).
<main id="main-content">
<article id="post-<?php the_ID(); ?>">
<h2><a href="/fr/</?php the_permalink(); ?>"></a></h2>
<div class="entry-content">
</div>
</article>
<p><strong>Cette page n'existe pas !</strong></p>
<p>Aucun article disponible pour le moment.</p>
</main>Les fichiers `header.php` et `footer.php` contiennent respectivement la structure HTML de la partie supérieure et de la partie inférieure du site, qui est commune à tout le site. Le fichier `functions.php` est utilisé pour améliorer les fonctionnalités du thème utilisé.
Comprendre les niveaux de hiérarchie des templates et les mécanismes de boucle
WordPress utilise un système intelligent de hiérarchie de templates pour déterminer la manière dont les différents contenus des pages doivent être affichés. Par exemple, lorsqu’on accède à un article individuel, WordPress cherche en premier le fichier `single.php` ; lorsqu’on accède à une page de catégorie, il cherche le fichier `category.php` ; si ces fichiers n’existent pas, il recourt au fichier `archive.php`, et en dernier recours, au fichier `index.php`.
Qu’est-ce qu’une boucle principale (ou boucle principale) ?
`the loop`是WordPress主题开发的核心概念。它是一段PHP代码，用于从数据库中获取文章内容并将其显示在网页上。你在`index.php`中看到的`while ( have_posts() ) : the_post();`就是循环的开始。在循环内部，你可以使用一系列模板标签来输出文章信息，如`the_title()`, `the_content()`, `the_permalink()`等。
Lectures recommandées Guide complet pour le développement de thèmes WordPress : de l’initiation à la maîtrise。
Créer d’autres fichiers de modèle.
Afin de rendre le thème plus professionnel, vous devriez créer des fichiers de modèle couramment utilisés. Par exemple, créez le fichier `single.php` pour afficher les articles individuellement.
<main>
<article>
<h1></h1>
<div class="post-meta">
Publié en : <?php the_date() ; ? | Auteur :
</div>
<div class="post-content">
</div>
</article>
</main>De même, vous pouvez créer le fichier `page.php` pour définir le modèle de la page principale, ainsi que le fichier `archive.php` pour définir le modèle des pages d’archive contenant des catégories, des tags, etc.
Intégration du menu et de la barre latérale
Un thème moderne comporte généralement un menu de navigation personnalisable ainsi qu’une zone de gadgets dans la barre latérale. Ces fonctionnalités doivent être enregistrées et activées à l’aide du fichier `functions.php`.
S’inscrire au menu de navigation
Ajoutez le code suivant dans le fichier `functions.php` pour enregistrer une position de menu pour un thème, par exemple “ Menu principal ”.
function my_first_theme_setup() {
// 注册一个导航菜单位置
register_nav_menus( array(
'primary' => __( '主菜单', 'my-first-theme' ),
) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );Après s’être inscrit, l’utilisateur pourra attribuer le menu à la bonne position dans l’interface de gestion de WordPress, sous “ Étiquettes ” -> “ Menus ”. Ensuite, dans le fichier `header.php`, à l’endroit où vous souhaitez afficher le menu, ajoutez le code suivant pour l’inclure :
<nav id="site-navigation">
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_id' => 'primary-menu',
) );
?>
</nav>Ajouter une barre latérale pour les outils supplémentaires
Les widgets sont une fonctionnalité très flexible de WordPress. Pour ajouter une barre latérale, il est également nécessaire de réserver une “zone pour les widgets” dans le fichier `functions.php`.
function my_first_theme_widgets_init() {
register_sidebar( array(
'name' => __('Main Sidebar', 'my-first-theme' ),
'id' => 'sidebar-1',
'description' => __('Ajouter un widget ici.' , 'mon-premier-thème' ), 'description' => __( 'Ajouter un widget ici.
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'my_first_theme_widgets_init' );Ensuite, dans le fichier de template où vous souhaitez afficher la barre latérale (par exemple `sidebar.php`), utilisez la fonction `dynamic_sidebar()` pour l'afficher.
<aside id="secondary" class="widget-area">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside>Enfin, n’oubliez pas d’incorporer ce fichier de barre latérale dans `index.php` ou `single.php` en utilisant la fonction `get_sidebar()`.
Lectures recommandées Guide de développement de thèmes pour WordPress : Construire votre propre thème à partir de zéro。
Ajouter des styles et des scripts.
为了保持代码的整洁和可维护性，不应该直接在HTML中硬编码样式和脚本链接。正确的方式是通过`functions.php`文件，使用`wp_enqueue_style()`和`wp_enqueue_script()`函数将它们加入队列。
Introduire un fichier de style
Bien que le fichier `style.css` soit obligatoire, WordPress ne le charge pas automatiquement. Il vous faut donc l’ajouter explicitement à la liste des fichiers à charger. De manière générale, nous séparons également le fichier de style principal du fichier de style de réinitialisation.
function my_first_theme_scripts() {
// 引入主题的主样式表
wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );
// 引入一个自定义样式表 (假设位于 /assets/css/main.css)
wp_enqueue_style( 'my-first-theme-main', get_template_directory_uri() . '/assets/css/main.css' );
// 引入一个自定义JavaScript文件 (假设位于 /assets/js/navigation.js)
wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/assets/js/navigation.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );Utiliser les pratiques de développement CSS modernes
Dans le développement front-end de 2026, il est essentiel de se concentrer sur le design responsive et l’accessibilité des sites web. Dans votre fichier `style.css` ou dans un fichier `main.css` indépendant, vous devez utiliser des requêtes de médias pour garantir que le site s’affiche correctement sur différents appareils.
/* 基础样式 */
body {
font-family: sans-serif;
line-height: 1.6;
}
/* 响应式导航菜单 */
@media screen and (max-width: 768px) {
#primary-menu {
display: none;
}
/* 移动端菜单样式 */
}Test et débogage
Une fois le développement du thème terminé, les tests sont une étape indispensable. Vous devez effectuer des tests approfondis dans différents environnements, avec divers navigateurs et appareils.
Activer le mode de débogage
Pendant le processus de développement, il est essentiel d’activer le mode de débogage de WordPress. Cela vous permettra de détecter rapidement les erreurs, les avertissements et les notifications PHP. Ouvrez le fichier `wp-config.php` et trouvez ou ajoutez le code suivant :
Lectures recommandées Guide avancé sur le développement de thèmes WordPress pour 2026 : Créer votre propre site web d'entreprise responsive, de zéro à un。
define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true ); // 将错误记录到 /wp-content/debug.log 文件
define( 'WP_DEBUG_DISPLAY', false ); // 不在页面上显示错误，更安全Unité de test thématique
Il est recommandé d’utiliser les données officielles de test unitaire des thèmes WordPress pour tester votre thème de manière exhaustive. Ces données comprennent différents types d’articles, de pages, de médias, de commentaires, etc., ce qui permet de s’assurer que votre thème s’affiche correctement quel que soit le contenu, sans aucun problème de style ou de mise en page.
résumés
Depuis la création des fichiers de base `style.css` et `index.php`, jusqu'à la compréhension des structures de templates et des mécanismes de boucles, en passant par l'ajout de menus, de barres latérales ainsi que l'intégration sécurisée de scripts de style, vous avez suivi l'intégralité du processus de création d'un thème personnalisé pour WordPress, bien que basique mais complet. N'oubliez pas que le développement de thèmes est un processus itératif : il est de bonnes pratiques de commencer par une version minimale, puis d'ajouter progressivement de nouvelles fonctionnalités et de perfectionner les détails. En continuant à apprendre les balises de templates, les hooks d'action et les filtres, vous serez en mesure de créer des thèmes plus puissants et plus flexibles.
FAQ Foire aux questions
Quelles connaissances de base sont nécessaires pour développer un thème WordPress ?
Vous devez maîtriser les bases d’HTML, CSS et PHP. Une connaissance partielle de JavaScript sera également très utile pour ajouter des fonctionnalités interactives. De plus, il est essentiel de connaître les concepts de base de WordPress, tels que les articles, les pages, les catégories, les tags, les gadgets et les menus.
Pourquoi les modifications que j’ai apportées à mon thème ne prennent-elles pas effet en arrière-plan (c’est-à-dire dans le système de gestion du contenu) ?
Cela est généralement dû au cache du navigateur ou au cache de WordPress. Veuillez essayer de rafraîchir le navigateur de force (Ctrl + F5 ou Cmd + Shift + R). Si le problème persiste, vérifiez si les styles et les scripts ont bien été ajoutés à la file d’attente, et assurez-vous que le fichier `functions.php` ne contient aucune erreur de syntaxe. Dans de rares cas, il peut être nécessaire de vider le cache du serveur ou des plugins.
Comment faire en sorte que mon thème soit compatible avec plusieurs langues ?
你需要做好主题的“国际化”准备。这意味着在代码中所有需要翻译的文本，都应使用翻译函数（如`__()`， `_e()`）进行包装，并为`text-domain`设置一个唯一标识（在`style.css`的头部已定义）。然后，你可以使用如Poedit这样的工具创建`.po`和`.mo`翻译文件，使你的主题能够被轻松翻译成其他语言。
Quelle est la différence entre un thème personnalisé et un sous-thème ?
Un thème personnalisé est un thème entièrement nouveau, développé de zéro de manière indépendante. Un sous-thème, quant à lui, est basé sur un thème “parent” existant et hérite de toutes ses fonctionnalités, de ses styles ainsi que de ses fichiers de modèle. Un sous-thème vous permet de modifier ou d’ajouter uniquement les éléments nécessaires (généralement les styles et quelques fichiers de modèle), sans avoir à modifier le thème parent. Cela assure que vos modifications ne seront pas effacées lors de la personnalisation ou de la mise à jour d’un thème populaire, ce qui représente une approche plus sûre et plus efficace.
Quelle est la suite, quelle est la suite ?
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.
- Guide de développement de thèmes pour WordPress : Construire votre propre site web à partir de zéro
- Guide complet pour le développement de thèmes WordPress : Un tutoriel pratique pour passer du débutant à l'expert
- Guide complet pour le développement de thèmes WordPress : Construire des templates de sites web professionnels à partir de zéro
- Développement de thèmes WordPress en pratique : construire de zéro des sites web professionnels et réactifs
- Construire des thèmes WordPress sans code : Un guide complet pour passer de zéro à la maîtrise
Français