Pour créer un thème WordPress personnalisé, il faut d’abord comprendre sa structure de base. Un thème WordPress le plus simplifié est essentiellement situé dans un/wp-content/themes/Le dossier dans le répertoire, qui contient deux fichiers requis :style.cssetindex.phpLe premier définit non seulement le style du thème, mais plus important encore, la partie de commentaire en en-tête du fichier contient les métadonnées du thème, telles que le nom du thème, l’auteur, la description, etc. Le second est le fichier de modèle par défaut, utilisé par WordPress lorsqu’il ne trouve pas de modèle plus spécifique.
En plus de ces deux fichiers, un thème pleinement fonctionnel comprend généralement aussi d'autres fichiers de modèle, par exemple pour afficher un article individuel.single.phppour afficher la liste des articlesarchive.phpet pour afficher la pagepage.phpComprendre et créer ces fichiers de modèle est au cœur du développement de thèmes.
Avant de commencer à coder, il est conseillé de mettre en place un environnement de développement local, par exemple en utilisant XAMPP, MAMP ou Local by Flywheel. Cela vous permet d’effectuer librement des tests et du débogage sans affecter le site web en ligne. En même temps, assurez-vous que votre éditeur de texte ou votre IDE (comme VS Code, PhpStorm) est prêt, et familiarisez-vous avec les connaissances de base en PHP, HTML, CSS et JavaScript.
Lectures recommandées Guide de début pour le développement de thèmes WordPress : Créez votre premier thème à partir de zéro。
Créer les fichiers et la structure de base du thème
Créer le dossier du thème et la feuille de style
Tout d’abord,/wp-content/themes/Créez un nouveau dossier dans le répertoire, par exemple en le nommant « nouveau_dossier ».my-first-theme. Ensuite, à l'intérieur de ce dossier, créezstyle.cssfichier, et saisissez les informations d’en-tête de fichier suivantes :
/*
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
Text Domain: my-first-theme
*/Ce commentaire est essentiel pour que WordPress reconnaisse le thème. Ensuite, vous pouvez ajouter quelques styles de base dans ce fichier CSS.
Créer le fichier de modèle principal.
Ensuite, créez.index.phpFichier. Il s’agit du modèle de secours pour toutes les pages. Le plus simpleindex.phpIl peut ne contenir que la structure de base comprenant l’en-tête du site, le contenu en boucle et le pied de page du site.
<!DOCTYPE html>
<html no numeric noise key 1011>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body no numeric noise key 1008>
<header>
<h1><a href="/fr/</?php echo esc_url( home_url( '/' ) ); ?>"></a></h1>
<p></p>
</header>
<main>
the_post() ; the_content() ; endwhile ; endif ; ?
</main>
<footer>
<p>©</p>
</footer>
</body>
</html>Ce fichier utilise plusieurs fonctions du noyau de WordPress.wp_head()、body_class()、the_content()etc., ils sont essentiels au bon fonctionnement du thème.
Comprendre et mettre en œuvre la hiérarchie des modèles
WordPress utilise un ensemble de règles appelé “ hiérarchie des modèles ” pour déterminer quel fichier de modèle doit être utilisé pour une requête de page spécifique. Maîtriser cette hiérarchie est essentiel pour développer efficacement des thèmes.
Lectures recommandées Essentiel pour créer un site web professionnel : Guide complet sur le développement et la personnalisation de thèmes WordPress。
Fichiers de modèles couramment utilisés et leur fonction
Lorsque l'on accède à la page d'accueil d'un site web, WordPress recherche les éléments nécessaires dans un ordre précis.front-page.php、home.phpEt enfin…index.phpPour la page de liste des articles de blog, il recherche…home.phpPour un article unique, il privilégiera l’utilisation de…single-post.phpou généralsingle.phpPour les pages statiques, il est utilisé…page.phpLa page du catalogue de classification correspond à…category.phppage de recherche correspondantesearch.phpPage d’erreur 404 correspondante404.php。
En créant ces fichiers de modèle spécifiques, vous pouvez concevoir des mises en page et des styles complètement différents pour les différentes parties du site web.
Diviser le code avec des parties de modèle
Pour maintenir la propreté et la réutilisabilité du code, il convient de séparer les parties répétitives en fichiers de “ composants de modèle ” indépendants. La séparation la plus courante consiste à isoler l’en-tête (Header), le pied de page (Footer) et la barre latérale (Sidebar).
Créerheader.phpLe document, s'il vous plaît.index.php\n中Début de l’étiquette àDéplacez tout le code situé avant la balise à l’intérieur. Puis utilisez à l’emplacement d’origineget_header()Appel de fonction.
// 在 index.php 中替换原来的代码
<?php get_header(); ?>De même, créerfooter.phpLe fichier stocke le code du pied de page et utiliseget_footer()Appeler. Vous pouvez également créersidebar.phpet utiliserget_sidebar()Invocation. Cette méthode améliore considérablement la modularité du code.
Intégrer les fonctionnalités de base de WordPress
Importer la boucle d’articles et l’image mise en avant
“La boucle est le mécanisme central utilisé par WordPress pour récupérer et afficher des articles à partir de la base de données. Dansindex.phpOusingle.phpDans ce cas, nous utilisonsif ( have_posts() ) : while ( have_posts() ) : the_post();Démarrez la boucle. À l’intérieur de la boucle, vous pouvez utiliser une série de balises de modèle pour afficher les informations de l’article.
Lectures recommandées Guide pratique complet de développement de plugins WordPress, de zéro à la création de votre premier plugin。
Par exemple, en utilisant…the_title()Titre de l’article :the_permalink()Exporter le lien de l’articlethe_content()Afficher le contenu de l'article.the_excerpt()Pour mettre en valeur les images caractéristiques d’un article, il est nécessaire de…functions.phpAjoutez une déclaration de prise en charge du thème dans le fichier :
add_theme_support( 'post-thumbnails' );Ensuite, dans la boucle du fichier de modèle, il est possible d’utiliser…the_post_thumbnail()Affichez les images représentatives de cette caractéristique.
Créer functions.php pour améliorer le thème
functions.phpLe fichier est le “ centre de contrôle ” de votre thème. Il n’est pas obligatoire, mais presque tous les thèmes l’utilisent. Ici, vous pouvez ajouter des fonctionnalités, enregistrer des menus, définir des zones de widgets, et inclure des scripts et des feuilles de style.
Un élément de basefunctions.phpPeut contenir les éléments suivants :
__( '顶部菜单', 'my-first-theme' ),
'footer-menu' => __( '底部菜单', 'my-first-theme' ),
)
);
}
add_action( 'init', 'mytheme_register_menus' );
// 添加小工具区域支持
function mytheme_widgets_init() {
register_sidebar(
array(
'name' => __( '主侧边栏', 'my-first-theme' ),
'id' => 'sidebar-1',
'description' => __( '在此添加小工具。', 'my-first-theme' ),
'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', 'mytheme_widgets_init' );
// 引入主题样式表和脚本
function mytheme_enqueue_scripts() {
// 引入主题的主样式表
wp_enqueue_style( 'mytheme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
// 引入主JavaScript文件
wp_enqueue_script( 'mytheme-script', get_template_directory_uri() . '/js/main.js', array(), wp_get_theme()->get( 'Version' ), true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_scripts' );
?>Ajouter un style et une conception réactive.
Construire un cadre CSS de base
A partir destyle.cssCommencez par établir les styles visuels de base pour votre thème. Vous pouvez d’abord définir le modèle de boîte (box model), les polices de caractères et les couleurs de manière globale.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
line-height: 1.6;
color: #333;
background-color: #f9f9f9;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}Mise en page responsive mobile d’abord
Les thèmes modernes doivent être adaptatifs. Adoptez une approche mobile d’abord, concevez d’abord les styles pour les petits écrans, puis utilisez des requêtes média (Media Queries) pour ajouter ou remplacer des styles pour les grands écrans.
/* 移动端基础样式 */
.main-navigation ul {
display: flex;
flex-direction: column;
list-style: none;
}
.main-navigation li {
border-bottom: 1px solid #ddd;
}
/* 平板及以上设备 */
@media (min-width: 768px) {
.main-navigation ul {
flex-direction: row;
}
.main-navigation li {
border-bottom: none;
margin-right: 2rem;
}
.content-area {
width: 70%;
float: left;
}
.widget-area {
width: 28%;
float: right;
}
}
/* 桌面设备 */
@media (min-width: 1024px) {
.container {
padding: 0 40px;
}
}Assurez-vous que les images soient également responsives, en les configurant via CSSmax-width: 100%; height: auto;…ou en utilisant les fonctionnalités intégrées à WordPress.srcsetLes attributs (the_post_thumbnail()Sera affiché par défaut).
résumés
Développer un thème WordPress à partir de zéro est un processus d’apprentissage systématique, qui couvre la création de la structure de fichiers de base, la compréhension de la hiérarchie des modèles, le découpage des parties du modèle, jusqu’à l’utilisation defunctions.phpIntégrez les fonctionnalités essentielles, puis procédez à la conception du style et à l’adaptation responsive. Ce processus vous permettra non seulement de maîtriser en profondeur le fonctionnement de WordPress, mais aussi d’obtenir un contrôle total sur l’apparence et les fonctionnalités du site. N’oubliez pas qu’en partant d’un design extrêmement minimalistestyle.cssetindex.phpCommencer, ajouter progressivement des fonctionnalités et effectuer des tests constitue un parcours d’apprentissage sûr et efficace. Votre premier thème est peut-être très simple, mais il posera des bases solides pour vous permettre de construire à l’avenir des projets plus complexes et plus professionnels.
FAQ Foire aux questions
Pour développer un thème pour WordPress, il est nécessaire de maîtriser les langages de programmation suivants :
Pour développer un thème WordPress complet, il faut principalement maîtriser PHP, HTML, CSS et JavaScript. PHP est au cœur du système, utilisé pour gérer la logique et appeler les fonctions de WordPress ; HTML sert à construire la structure des pages ; CSS est responsable des styles et de la mise en page ; JavaScript, quant à lui, permet de réaliser des effets interactifs et des fonctionnalités dynamiques. Une connaissance de base de SQL aide également à comprendre les requêtes de données de WordPress.
Pourquoi mon thème personnalisé n'est pas affiché en arrière-plan ?
Cela est généralement dû àstyle.cssCela est dû à des informations de commentaire d’en-tête de fichier incorrectes ou manquantes. Veuillez vous assurer que ce fichier se trouve à la racine du dossier du thème et que le format du bloc de commentaires au début du fichier est correct, en incluant les informations obligatoires telles que “ Theme Name ”. Vérifiez également que les autorisations du dossier du thème sont correctes, ainsi questyle.cssLe fichier lui-même ne contient pas d’erreurs grammaticales.
Comment ajouter un modèle de page personnalisé à mon thème ?
Tout d’abord, créez un nouveau fichier PHP dans le répertoire de votre thème, par exemple…template-fullwidth.php. Tout en haut de ce fichier, ajoutez un commentaire spécial pour définir le nom du modèle. Ensuite, vous pouvez écrire dans ce fichier tout le code PHP et HTML que vous souhaitez, en vous rappelant de partir d’autres fichiers de modèle (tels quepage.php）copiez des structures de base telles que la boucle. Une fois la création terminée, lorsque vous modifierez la page dans l’administration de WordPress, vous pourrez voir et sélectionner le modèle personnalisé que vous avez créé dans la liste déroulante “ Modèle ” des “ Attributs de la page ”.
Comment déboguer les erreurs PHP en toute sécurité pendant le développement ?
Il est conseillé d’utiliser l’environnement de développement local.wp-config.phpActiver le mode de débogage de WordPress dans le fichier.WP_DEBUGLa constante est définie àtrueCela affichera toutes les erreurs, avertissements et notifications PHP à l’écran. Pour un débogage plus approfondi, vous pouvez utiliserWP_DEBUG_LOGEnregistrer l'erreur dans le journal des erreurs./wp-content/debug.logLe fichier se trouve à l’intérieur du site. Veuillez noter qu’avant le lancement officiel du site, il est essentiel de désactiver le mode de débogage.
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.
- Maîtriser les fondamentaux de la création de sites web : Guide technique complet pour construire des sites web à haute performance à partir de zéro
- Guide complet pour créer un site avec WooCommerce : Construisez votre propre site e-commerce professionnel à partir de zéro
- Le guide ultime pour améliorer les performances de WordPress : 16 étapes pour passer du débutant à l’expert
- Le guide ultime pour la création de sites web : une solution pratique et complète pour passer de zéro à une mise en ligne professionnelle
- Pourquoi choisir WooCommerce pour construire votre site e-commerce ?
Français