Développer un thème WordPress personnalisé est le meilleur moyen de comprendre en profondeur le framework WordPress et d’améliorer vos compétences en développement front-end. Contrairement à l’utilisation de thèmes préfabriqués, la construction à partir de zéro vous offre un contrôle total et vous permet de créer un site Web unique et entièrement adapté aux besoins de votre projet. Cet article vous guidera tout au long du processus de construction d’un thème WordPress de base mais complet.
Configuration de l'environnement de développement et de la structure des thèmes
Avant de commencer à coder, vous avez besoin d'un environnement de développement local. Cela comprend généralement un ensemble de serveurs locaux (tels que XAMPP, MAMP ou Local by Flywheel), un éditeur de code (comme VS Code) et la dernière version de WordPress.
Tout d'abord, dans WordPress, <code>wp-content/themes</code> Sous le répertoire, créez un dossier pour votre nouveau thème, par exemple. <code>my-custom-theme</code>Un thème WordPress de base nécessite au minimum deux fichiers principaux.
Lectures recommandées Tutoriel complet sur le développement de thèmes WordPress : créer un thème personnalisé à partir de zéro.。
Créer un fichier de feuille de style.
Le premier document nécessaire est : style.cssCe fichier définit non seulement le style du thème, mais son en-tête contient également des métadonnées décrivant le thème à WordPress. Veuillez ajouter les commentaires suivants en haut du fichier :
/*
Theme Name: My Custom Theme
Theme URI: https://yourwebsite.com/
Author: Your Name
Author URI: https://yourwebsite.com/
Description: 这是一个从零开始创建的自定义WordPress主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-custom-theme
*/“Le ” Domaine de texte » est utilisé pour l’internationalisation et doit être cohérent avec le nom de votre dossier de thème. Ensuite, vous pouvez écrire toutes les règles CSS dans ce fichier.
Créer le fichier de fonctions principales.
Le deuxième document nécessaire est : functions.phpC'est le “ cerveau ” du thème, qui sert à intégrer les feuilles de style, les fichiers JavaScript, à enregistrer des fonctionnalités telles que les menus et les barres latérales, et à ajouter diverses fonctionnalités de support.
Un élément de base functions.php Le début est généralement le suivant, utilisé pour ajouter une feuille de style à la file d'attente :
<?php
// 将主题样式表加入队列
function my_custom_theme_enqueue_styles() {
wp_enqueue_style( 'my-custom-theme-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_enqueue_styles' );À ce stade, bien qu'il n'y ait pas encore de fichiers de modèle, votre thème peut déjà apparaître dans la liste “ Apparence ” -> “ Thèmes ” de l'interface d'administration de WordPress et être activé. Une fois activé, la page d'accueil du site affichera une page vierge, car il manque des fichiers de modèle pour définir la structure de la page.
Lectures recommandées Guide pratique pour débuter le développement de thèmes WordPress : Créer votre propre architecture de thème et vos propres modèles à partir de zéro。
Créer le fichier de modèle principal
Les fichiers de modèle contrôlent la manière dont les différentes parties d'un site Web sont affichées. WordPress utilise une hiérarchie de modèles pour déterminer quel modèle utiliser pour la requête en cours.
Créer une en-tête et un pied de page pour tout le site.
La meilleure pratique consiste à séparer le code d'en-tête et de pied de page publics. Créer un header.php Un fichier, qui contient généralement une déclaration du type de document, Zone et ouverture Les tags et la navigation principale.
<!DOCTYPE html>
<html no numeric noise key 1007>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body no numeric noise key 1004>
<header>
<h1><a href="/fr/</?php echo esc_url( home_url( '/' ) ); ?>"></a></h1>
<p></p>
<nav>
'primary' ) ) ; ? >
</nav>
</header>
<main>En conséquence, la création de... footer.php Pour fermer header.php Ouvrez le conteneur principal et l'étiquette dans le menu contextuel.
</main>
<footer>
<p>©</p>
</footer>
</body>
</html>wp_head() et wp_footer() Il s’agit d’éléments clés qui permettent au noyau WordPress, aux plugins et aux thèmes eux-mêmes d’insérer le code nécessaire (comme les styles et les scripts) à ces emplacements.
Créer un index et un modèle d'article.
index.php C'est le fichier de repli final de la hiérarchie des modèles et le point de départ de notre thème. Il utilise : get_header() et get_footer() Pour introduire des modules séparés.
<article>
<h2><a href="/fr/</?php the_permalink(); ?>"></a></h2>
<div></div>
</article>
endwhile ; ?
<p>Aucun article disponible pour le moment.</p>Pour afficher un article individuel, créez un single.phpSa structure est similaire à celle de... index.php C'est similaire, mais en utilisant... the_content() Affichez le texte complet.
Lectures recommandées Introduction au développement de thèmes pour WordPress : Construisez votre premier thème personnalisé à partir de zéro。
<article>
<h1></h1>
<div></div>
</article>Améliorer les fonctionnalités du thème.
Après avoir mis en place l'infrastructure, nous avons procédé à... functions.php Afin d'ajouter davantage de fonctionnalités pratiques et de rendre le thème plus professionnel et facile à utiliser.
Enregistrer le menu de navigation et la barre latérale.
Dans functions.php Ajoutez le code suivant pour créer une zone de menu principal et une barre latérale (zone d'outils) :
// Enregistrer le menu de navigation
function my_custom_theme_register_menus() {
register_nav_menus( array(
'primary' => __('Primary Navigation Menu', 'my-custom-theme' ),
) ) ;
}
add_action( 'after_setup_theme', 'my_custom_theme_register_menus' ) ;
// Enregistrer la zone de widget de la barre latérale
function my_custom_theme_register_sidebar() {
register_sidebar( array(
'name' => __('Main Sidebar', 'my-custom-theme' ), 'name' => __('my-custom-theme' ), 'name' => __('Main Sidebar', 'my-custom-theme' ), 'id' => 'my-custom-theme' )
'id' => 'sidebar-1',
'description' => __( 'Ajouter un widget ici.' , 'my-custom-theme' ), 'description' => __( 'Before_widget.
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) ) ;
}
add_action( 'widgets_init', 'my_custom_theme_register_sidebar' ) ;Après l'inscription, vous devez les appeler dans le modèle. Par exemple, dans header.php Nous avons déjà utilisé cela dans le passé. wp_nav_menu Le menu “ primary ” a été appelé. Pour afficher des gadgets dans la barre latérale, il suffit de… sidebar.php Créez un modèle de barre latérale, et… index.php Ou single.php Utilisé dans get_sidebar() Introduire.
Ajout de la fonctionnalité de suivi des sujets (thèmes).
WordPress offre de nombreuses fonctionnalités intégrées, mais pour les utiliser dans un thème, il faut explicitement déclarer qu'elles sont prises en charge. Par exemple, pour ajouter une vignette d'article (image de présentation), un logo personnalisé ou du balisage HTML5 :
// 添加主题功能支持
function my_custom_theme_setup() {
// 支持文章缩略图
add_theme_support( 'post-thumbnails' );
// 支持自定义Logo
add_theme_support( 'custom-logo' );
// 对搜索表单、评论表单等使用HTML5标记
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
// 在管理后台提供<title>标签支持
add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );Après avoir ajouté la prise en charge des “ miniatures d’après-publication ”, vous pourrez les utiliser dans la boucle d’articles. the_post_thumbnail() La fonction est maintenant utilisée pour afficher des images représentatives (ou « images caractéristiques »).
La conception de style et la mise en page réactive.
Un thème esthétique et adapté à différents appareils est essentiel. Vous pouvez… style.css Écrivez tous les styles en CSS. Il est recommandé d’adopter une stratégie axée sur les appareils mobiles.
Les styles de base et la mise en page.
Tout d'abord, définissez quelques styles de réinitialisation et une mise en page de base pour garantir une apparence cohérente sur différents navigateurs.
/* style.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
line-height: 1.6;
color: #333;
background-color: #fff;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* 头部样式 */
header {
background: #f8f9fa;
padding: 2rem 0;
border-bottom: 1px solid #dee2e6;
}
/* 导航菜单样式 */
.main-navigation ul {
list-style: none;
display: flex;
gap: 1.5rem;
}
.main-navigation a {
text-decoration: none;
color: #007bff;
}Réaliser un design réactif
Utilisez les requêtes média pour ajuster la mise en page en fonction de la taille de l'écran. Par exemple, lorsque l'écran devient plus petit, changez le menu de navigation en une disposition verticale.
/* 移动端样式 */
@media (max-width: 768px) {
.main-navigation ul {
flex-direction: column;
gap: 0.5rem;
}
.container {
padding: 0 15px;
}
article {
margin-bottom: 2rem;
padding-bottom: 2rem;
border-bottom: 1px solid #eee;
}
}Veillez à ce que les images soient également réactives :
img {
max-width: 100%;
height: auto;
}résumés
En suivant les étapes ci-dessus, vous avez réussi à créer un thème WordPress personnalisé complet. Nous avons commencé par configurer l'environnement de développement et créer les éléments les plus basiques. style.css Avec functions.php Le document commence par une construction progressive des fichiers de modèle principaux.header.php, footer.php, index.php, single.phpNous avons également amélioré les fonctionnalités pratiques du thème, telles que le menu d'inscription, la barre latérale et la prise en charge des images de mise en évidence. Enfin, nous avons ajouté un style de base et une mise en page réactive au thème, afin qu'il s'affiche correctement sur tous les appareils. Ce n'est qu'un point de départ. Vous pouvez aller plus loin et créer des modèles de page à partir de là.page.php), des modèles d'archivage (archive.php), un modèle de recherche (search.phpVous pouvez même utiliser des sous-thèmes pour personnaliser votre site et créer un site Web plus puissant et professionnel.
FAQ Foire aux questions
Quelles sont les compétences nécessaires pour développer un thème WordPress ?
Pour développer un thème WordPress de base, vous devez maîtriser le HTML, le CSS et le PHP. Le HTML sert à structurer la page, le CSS à la styliser et à la mettre en forme, et le PHP est au cœur du fonctionnement du contenu dynamique de WordPress. De plus, une connaissance de base du JavaScript peut être utile pour ajouter des fonctionnalités interactives. Comprendre les concepts fondamentaux de WordPress, tels que la hiérarchie des modèles, la boucle (The Loop), les crochets (Hooks) et les fonctions, est essentiel pour réussir le développement d’un thème.
Quel est le rôle du fichier functions.php du thème ?
functions.php Le fichier est le centre de fonctionnalités du thème WordPress. Ses principales fonctions incluent : ajouter des fichiers CSS et JavaScript à la file d'attente, enregistrer des menus de navigation et des zones de widgets latérales, déclarer les fonctionnalités prises en charge par le thème (telles que les vignettes d'articles et les logos personnalisés), définir des fonctions personnalisées et modifier le comportement par défaut de WordPress via des crochets d'actions et de filtres. Cela vous permet d'étendre et de personnaliser considérablement les fonctionnalités du thème sans modifier les fichiers principaux de WordPress.
Comment faire en sorte que mon thème supporte plusieurs langues ?
Pour que le thème prenne en charge plusieurs langues (internationalisation), il faut principalement suivre deux étapes. Tout d’abord, dans style.css Pour le “ domaine de texte ” et tous les endroits où la fonction de traduction est utilisée, il est nécessaire d’utiliser un domaine de texte cohérent, généralement identique au nom du dossier du thème. Ensuite, lors de la préparation des chaînes de caractères à traduire, il est important d’utiliser la fonction de traduction de WordPress, comme par exemple : __()、_e() Ou _x()Ensuite, vous pouvez utiliser un outil comme Poedit pour créer .pot Créez un fichier modèle et générez le correspondant. .po et .mo Traduire le fichier. Placez le fichier traduit dans le dossier du thème. /languages Dans le répertoire, WordPress les charge automatiquement en fonction des paramètres linguistiques du site Web.
Quels sont les avantages de la création d'un sous-thème par rapport à la modification directe du thème parent ?
La création d’un sous-thème est la meilleure pratique pour modifier ou étendre les fonctionnalités d’un thème parent existant. Son avantage principal est la sécurité des mises à jour : lorsqu’une mise à jour du thème parent est publiée, vous pouvez la mettre à jour en toute sécurité sans perdre les modifications personnalisées que vous avez apportées au sous-thème (style, fonctionnalités, modèles). Un sous-thème n’a besoin que d’un seul style.css Et un élément facultatif. functions.php Le fichier est prêt à fonctionner. Dans le sous-thème, style.css Dans ce document, il est mentionné que… (The document states that…) @import Ou, pour une meilleure organisation de la file d'attente, vous pouvez introduire le style du thème parent, puis ajouter vos propres règles CSS pour les surécrire. Le thème enfant... functions.php Il sera chargé en même temps que le fichier du même nom du thème parent, sans le remplacer, ce qui vous permet d’ajouter de nouvelles fonctionnalités en toute sécurité.
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.
- Concepts fondamentaux et modes d’utilisation de Tailwind CSS : des classes atomiques au design responsive
- Le guide ultime pour la création de sites web : le processus complet de la conception à la mise en ligne, ainsi qu'une analyse des technologies clés
- Détail complet du processus de création de sites web : guide professionnel allant de l'analyse des besoins à la mise en ligne et à la déployement.
- Développement de thèmes WordPress à partir de zéro : Créer des interfaces de site web uniques et originales
- 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
Français