Avant de commencer à écrire du code, vous aurez besoin d’un environnement de développement local. Cela comprend généralement un serveur local (comme XAMPP, MAMP ou Local), ainsi qu’un éditeur de code (comme VS Code ou PhpStorm). Vérifiez que PHP (version 7.4 ou ultérieure est recommandée) et MySQL sont installés dans votre environnement.
Un thème WordPress standard est un dossier qui contient un ensemble de fichiers spécifiques. Commencez par localiser ces fichiers dans votre installation WordPress.wp-content/themesCréez un nouveau dossier dans le répertoire, par exemple en le nommant « nouveau_dossier ».my-first-theme。
Ensuite, créez deux fichiers les plus basiques et les plus essentiels :style.cssetindex.phpParmi ceux-ci,style.cssCe n’est pas seulement un fichier de style (stylesheet), mais aussi l“” identité » d’un thème WordPress. Le bloc de commentaires situé en tête du fichier sert à informer WordPress de la nature de ce thème.
Lectures recommandées Guide de début pour le développement de thèmes WordPress : Créer votre propre site web personnalisé à partir de zéro。
Dansstyle.cssDans le fichier, vous devez ajouter des informations de tête dans le format suivant :
/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme/
Author: 你的名字
Author URI: https://example.com/
Description: 这是一个用于学习的自定义WordPress入门主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/Ces informations seront affichées sur la page “ Apparence ” → “ Thèmes ” dans l’administration de WordPress.index.phpLe fichier constitue le modèle par défaut d’un thème. Il doit exister, même s’il est temporairement vide, afin que WordPress puisse reconnaître que il s’agit d’un thème valide.
Créer des fichiers de modèles de base
Une fois que vous disposez des fichiers de base, votre thème ne peut toujours pas afficher de contenu. WordPress utilise un système de hiérarchie de templates pour déterminer quel fichier de template charger pour différents types de pages. À l’issue de cette étape, nous créerons plusieurs fichiers de templates essentiels.
Créer des templates pour la partie en tête (header) et la partie en bas de la page (footer).
Afin de réutiliser le code et d'assurer une cohérence, nous séparons généralement la partie supérieure (Header) et la partie inférieure (Footer) d'une page web en fichiers distincts. Commencez donc par créer ces fichiers.header.phpLe fichier contient la partie en tête du document HTML, ainsi que les informations nécessaires pour l’ouverture du document.<body>Les balises, ainsi que la zone publique en haut du site (comme le logo et le menu de navigation).
Le plus simple…header.phpLes exemples peuvent contenir les éléments suivants :
Lectures recommandées Créer un site web professionnel : La guida complète à l'élaboration et à la personnalisation de thèmes WordPress。
<!DOCTYPE html>
<html no numeric noise key 1006>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body no numeric noise key 1003>
<header>
<h1><a href="/fr/</?php echo esc_url( home_url( '/' ) ); ?>"></a></h1>
<p></p>
</header>Faites attention à ce qui est mentionné à l’intérieur.wp_head()Une fonction est une étape obligatoire à effectuer, permettant au noyau de WordPress, aux plugins et aux thèmes eux-mêmes d’insérer le code nécessaire (tel que le CSS et le JS) en haut de la page.
Ensuite, créez.footer.phpCe fichier sert à effectuer la fermeture d'un processus ou d'un système.<body>et<html>Les balises sont incluses, ainsi que le contenu du pied de page.
<footer>
<p>© . Tous droits réservés.</p>
</footer>
</body>
</html>De même,wp_footer()Les fonctions sont également indispensables.
Maintenant, nous pouvons mettre à jour les informations.index.phpUtilisationget_header()etget_footer()Une fonction est utilisée pour introduire ces deux parties :
<?php get_header(); ?>
<main>
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
// 文章内容将在这里显示
endwhile;
else :
// 没有找到文章时的内容
endif;
?>
</main>
<?php get_footer(); ?>Créer un cycle d’articles et un modèle de contenu
Au-dessus de…index.phpDans ce texte, nous découvrons le noyau de WordPress : le « The Loop ». Il sert à parcourir tous les articles de la page actuelle (ou un seul article). Afin de donner une meilleure structure au contenu des articles, nous extrayons généralement la logique de affichage d’un article particulier dans un fichier distinct.
Créercontent.phpOutemplate-parts/content.phpFichier, puis dans le boucle, on procède comme suit…get_template_part()La fonction l’appelle.
Lectures recommandées Guide complet pour le développement de thèmes WordPress : De l'apprentissage de base à la maîtrise pratique。
// 在 index.php 的循环中
while ( have_posts() ) : the_post();
get_template_part( 'template-parts/content', get_post_format() );
endwhile;Ensuite, créez-le.template-parts/content.php：
<article id="post-<?php the_ID(); ?>" no numeric noise key 1005>
<h2><a href="/fr/</?php the_permalink(); ?>"></a></h2>
<div class="entry-meta">
by
</div>
<div class="entry-content">
</div>
</article>Ainsi, le titre de l’article, le résumé, les métadonnées, etc., sont affichés dans un format standardisé.
Intégrer des styles et des scripts
Un thème moderne ne peut pas se passer de CSS et de JavaScript. WordPress propose des fonctions standard pour enregistrer de manière sécurisée les fichiers de styles et de scripts dans une file d’attente (« enqueue »), au lieu de les utiliser directement dans les templates.<link>Ou<script>Tags.
Fichiers de style principaux pour l’enregistrement et la file d’attente
Bien que nous en ayons déjà une…style.cssMais en général, nous le faisons de la manière suivante :functions.phpPour charger ce fichier, commencez par le créer dans le répertoire racine du thème.functions.phpLes documents.
Ensuite, utilisez…wp_enqueue_style()Il s’agit d’une fonction permettant de charger des feuilles de style. Nous avons besoin de…functions.phpCréez une fonction dans le code, puis reliez-la (« hook ») à d’autres éléments ou processus du programme.wp_enqueue_scriptsSur cette action.
function my_first_theme_scripts() {
// 加载主样式表
wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), '1.0' );
// 加载Google Fonts示例
wp_enqueue_style( 'my-first-theme-google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto&display=swap', array(), null );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );get_stylesheet_uri()La fonction récupérera automatiquement le sujet.style.cssChemin du fichier.
Ajouter le script pour un menu de navigation réactif.
Afin d'ajouter des fonctionnalités interactives, comme un menu réactif pour les appareils mobiles, nous devons intégrer du JavaScript. Supposons que nous ayons un script simple permettant de masquer ou d'afficher le menu.
Tout d’abord, créez un…js/navigation.jsFichier. Ensuite,functions.phpDans la même fonction, utiliser…wp_enqueue_script()Allez, chargez-le.
function my_first_theme_scripts() {
// ... 之前的样式代码 ...
// 加载导航脚本
wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
}Le dernier paramètretrueCela signifie que le script sera placé en bas de la page.</body>(Avant les balises), cela contribue généralement à améliorer les performances de chargement de la page.
Réaliser les fonctionnalités essentielles du thème.
functions.phpC’est le “ cerveau ” du thème, utilisé pour ajouter différentes fonctionnalités et fournir le soutien nécessaire. En plus de charger les ressources, nous devons également déclarer ici les fonctionnalités que le thème prend en charge.
Ajout de la fonctionnalité de suivi des sujets (thèmes).
WordPress propose une série de fonctionnalités liées aux thèmes (“ themes ”), et vous devez les déclarer explicitement pour pouvoir les utiliser. Les fonctionnalités de base comprennent les miniatures des articles (images représentatives), les menus personnalisés, ainsi que le support des balises HTML5.
Dansfunctions.phpAjoutez le code suivant à l'intérieur :
function my_first_theme_setup() {
// 让主题支持文章和评论的RSS feed链接自动添加到head中
add_theme_support( 'automatic-feed-links' );
// 让文章和页面支持“特色图像”
add_theme_support( 'post-thumbnails' );
// 启用对HTML5标记的支持
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
// 启用标题标签支持，WordPress会自动管理文档标题
add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );after_setup_themeIl s’agit d’un crochet d’action qui s’exécute lors de l’initialisation du thème, et c’est l’endroit standard pour configurer les fonctionnalités du thème.
S’inscrire au menu de navigation
La plupart des sites web nécessitent un menu de navigation. Le système de menus de WordPress permet aux utilisateurs de personnaliser les éléments du menu depuis l’administration, sous l’onglet “ Apparence ” → “ Menus ”. Avant de pouvoir utiliser ces menus, vous devez d’abord réserver des emplacements pour eux dans votre thème.
Dans ce qui vient de se passer…my_first_theme_setupDans la fonction, continuez d'ajouter :
function my_first_theme_setup() {
// ... 之前的 add_theme_support 代码 ...
// 注册一个主菜单位置
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-first-theme' ),
) );
}Après votre inscription, vous pourrez utiliser les fichiers de modèle (comme…)header.phpUtilisé dans…)wp_nav_menu()Voici la fonction qui affiche ce menu :
<nav>
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'primary-menu',
) );
?>
</nav>Créer une barre latérale et une zone de gadgets.
Les widgets sont une autre fonctionnalité puissante de WordPress. Pour les utiliser, vous devez d’abord créer une barre latérale (l’espace réservé aux widgets).
Dansfunctions.phpCréez une nouvelle fonction dans le code, et assurez-vous qu’elle soit reliée (« hookée ») aux autres éléments du système ou aux fonctions existantes.widgets_initSur le plan des actions :
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' );Après votre inscription, vous pourrez trouver la zone “ Barre latérale principale ” dans les options “ Apparence ” -> “ Boutons ” en back-office, et y déplacer des boutons ou des widgets. Pour l'afficher dans le thème de votre site, il vous faudra modifier le modèle correspondant (par exemple, le fichier de template).sidebar.phpIl est appelé dans le fichier index.js.dynamic_sidebar( 'sidebar-1' )Une fonction.
résumés
À travers ce guide, nous avons suivi un processus de développement de thème WordPress minimaliste mais complet en termes de fonctionnalités. Nous avons commencé par mettre en place l’environnement de développement et créer les fichiers de base, puis avons progressivement construit la structure des templates, en séparant les parties supérieure et inférieure du thème, et en implémentant le mécanisme de affichage des articles. Ensuite, nous avons appris comment ajouter des styles et des scripts au thème de manière standardisée, afin d’en assurer la compatibilité et les performances. Enfin,functions.phpDans ce processus, nous avons activé les fonctionnalités essentielles du thème, telles que l’image de présentation, le menu de navigation et la zone des gadgets, ce qui confère au thème une grande personnalisabilité.
C’est juste un point de départ. Sur cette base, vous pouvez continuer à créer des fichiers de modèles plus professionnels.single.php、page.php、archive.phpVous pourrez explorer des API plus avancées de WordPress, telles que celles permettant de créer des types d’articles personnalisés, des systèmes de classification, ou d’utiliser le Customizer, afin de créer des thèmes de site web uniques et fonctionnels.
FAQ Foire aux questions
Quelles compétences techniques sont nécessaires pour développer un thème WordPress ?
Pour développer des thèmes pour WordPress, il est nécessaire de maîtriser plusieurs technologies clés. La première est PHP, car WordPress est lui-même écrit en PHP ; tous les fichiers de template et la logique des fonctionnalités en dépendent. Il vous faut comprendre la syntaxe de base de PHP, ainsi que les fonctions, les boucles et les instructions conditionnelles.
Ensuite, il y a HTML et CSS, qui sont utilisés pour construire la structure et le style des pages web. Il est très important de comprendre les principes du design de pages web réactives ainsi que les technologies de mise en page CSS modernes (comme Flexbox et Grid). Enfin, une connaissance de base de JavaScript est nécessaire pour mettre en œuvre les fonctionnalités interactives du côté client. La maîtrise des fonctions PHP spécifiques à WordPress et du système de hooks est essentielle pour développer des thèmes efficaces.
Lequel des fichiers style.css et functions.php est plus important ?
Ces deux fichiers jouent des rôles complètement différents dans le développement de thèmes WordPress, mais tous deux sont d’une importance capitale. Il est donc impossible de comparer simplement leur importance.style.cssLe fichier représente l“” identité “ d’un thème, et le bloc de commentaires situé en tête de ce fichier est essentiel pour que WordPress puisse reconnaître ce thème. Sans ce bloc de commentaires, le thème ne pourra pas être affiché dans la liste des thèmes disponible en arrière-plan.
Etfunctions.phpLe fichier constitue le “ cœur des fonctionnalités ” d’un thème ; la quasi-totalité du code permettant d’améliorer les fonctionnalités d’un thème y est écrite, que ce soit pour le menu d’enregistrement, l’ajout de la prise en charge des thèmes, le chargement de styles via des scripts, ou la définition de fonctions personnalisées. Sans ce fichier, le thème perdrait la majeure partie de ses fonctionnalités dynamiques et de son étendibilité. Les deux éléments sont complémentaires et indispensables l’un à l’autre.
Pourquoi faut-il absolument utiliser les fonctions `wp_head()` et `wp_footer()` ?
wp_head()etwp_footer()Il s’agit d’un crochet clé permettant la communication entre le noyau de WordPress et les thèmes ainsi que les plugins.header.phpde</head>Appel avant l'étiquettewp_head()Il s’agit d’une méthode standard qui permet à WordPress lui-même, aux plugins que vous avez installés, ainsi qu’à d’autres éléments de votre thème, d’insérer le code nécessaire dans la partie supérieure de la page (comme les meta tags, les liens vers les feuilles de style, les références à des scripts, les données structurées JSON-LD, etc.).
De même,footer.phpde</body>Appel avant l'étiquettewp_footer()Ces fonctions sont utilisées pour insérer des scripts qui doivent être chargés en bas de la page (comme du code d’analyse, des fichiers JS chargés de manière différée) ou d’autres éléments HTML. Leur omission peut entraîner des problèmes de fonctionnement des plugins, l’absence de l’outil de gestion de la barre d’outils, ainsi que divers problèmes de compatibilité.
Comment faire en sorte que mon thème soit conforme aux normes officielles de WordPress ?
Pour que votre thème respecte les normes officielles de WordPress et soit de haute qualité, vous devez vous conformer au « Guide de développement de thèmes WordPress » ainsi qu’aux « Exigences de révision des thèmes ». Cela implique notamment l’utilisation de bonnes pratiques de codage et l’application de fonctions d’échappement pour tous les données affichées dynamiquement.esc_html(), esc_url()Utilisez des fonctions d’internationalisation pour toutes les chaînes de texte à traduire (comme…)__(), _e()) et charge le champ de texte.
Le thème doit disposer d’un design responsive pour s’afficher correctement sur tous les appareils. Le code doit être clair et annoté, et respecter les normes de codage de WordPress. De plus, le thème doit offrir de nombreuses options de personnalisation via les personnalisateurs de WordPress, et mettre en œuvre correctement toutes les fonctionnalités et les hooks de base de WordPress. Il est une bonne habitude de tester le thème avant sa publication en utilisant le plugin Theme Check.
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 base pour WordPress : Construire votre premier site web professionnel à partir de zéro
- Solution complète pour la création de sites web : guide d'implémentation complet de la conception à la mise en ligne.
- Avant-propos : pourquoi choisir le développement WordPress
- Guide ultime pour la création de sites web : Processus complet pour mettre en place un site professionnel à partir de zéro
- Comment choisir le meilleur thème WordPress : guide complet pour l’achat, de la conception à la performance
Français