Les thèmes WordPress constituent l’épine dorsale de la création de l’apparence et des fonctionnalités d’un site web. Maîtriser leur développement signifie que vous pouvez personnaliser complètement tout sur votre site, échapper aux contraintes des thèmes préfabriqués et réaliser des conceptions uniques et des fonctionnalités sur mesure. Comprendre leurs concepts de base et la structure de leurs fichiers est la première étape pour se lancer dans cette aventure.
Chaque thème WordPress est un fichier situé dans le dossier wp-content/themes./wp-content/themes/Les dossiers sous le répertoire. Un thème fonctionnel le plus basique n’a besoin que de deux fichiers :style.cssetindex.phpParmi ceux-ci,style.cssIl sert non seulement à stocker les styles, mais les commentaires dans l'en-tête du fichier contiennent également des métadonnées sur le thème, ce qui est essentiel pour que WordPress puisse reconnaître un thème.
Dansstyle.cssPour la partie « En-tête », vous devez utiliser des annotations spécifiques pour définir le thème. Voici un exemple typique :
Lectures recommandées Guide complet du développement de thèmes WordPress : un tutoriel pratique pour passer du niveau débutant au niveau expert.。
/*
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
*/Cette information apparaîtra dans la liste “ Apparence > Thèmes ” de l’interface d’administration de WordPress. Et …index.phpC'est le fichier modèle principal du thème, qui sert de repli par défaut lorsqu'aucun autre modèle plus spécifique n'est disponible. Au fur et à mesure que le développement avance, vous remplacerez ou compléterez progressivement ce modèle par des fichiers modèles plus spécifiques.
Comprendre la structure hiérarchique des modèles du thème.
WordPress utilise un système hiérarchique de modèles sophistiqué pour déterminer quel fichier de modèle utiliser pour rendre une page spécifique. Comprendre cette hiérarchie est la base d’un développement de thème efficace, car elle vous permet de savoir comment nommer les fichiers lorsque vous créez des pages spécifiques (telles que les détails d’un article de blog ou une page de catégorie).
La règle de nommage des principaux fichiers de modèle.
Le niveau des modèles suit le principe “ du spécifique au général ”. Par exemple, lorsqu’on accède à un article de blog dont l’ID est 123, WordPress recherche dans l’ordre suivant :single-post-123.php、single-post.php、single.phpEt enfin,singular.phpCe n’est qu’en l’absence de tout cela que cette option sera utilisée.index.php。
Les fichiers de modèle de base couramment utilisés incluent :
- front-page.php: Utilisé pour configurer la page d'accueil du site Web.
- home.php: Page d'index des articles de blog.
- single.php: Un article de blog individuel ou un article unique d'un type d'article personnalisé.
- page.php: Une page unique.
- archive.php: Un modèle universel pour toutes les pages d'archives (par catégorie, étiquette, auteur, etc.).
- category.php: Une page de catalogue spécifique.
- 404.php: Page d'erreur 404.
- header.php、footer.php、sidebar.phpCe sont généralement des fragments de modèle locaux.
Une fonction courante pour appeler un modèle local.
Afin de maintenir la modularité et la maintenabilité du code, WordPress fournit plusieurs fonctions clés pour charger les fichiers de modèles locaux. La plus importante d'entre elles est :get_header()、get_footer()etget_sidebar()Ils sont utilisés respectivement pour introduire...header.php、footer.phpetsidebar.php。
Lectures recommandées Les concepts clés du développement de thèmes pour WordPress。
Une autre fonction cruciale est :get_template_part()Cela vous permet d’inclure n’importe quel fragment de modèle de manière plus flexible. Par exemple, dans une boucle d’articles de blog, vous pouvez souhaiter inclure un modèle de contenu d’article spécifique :
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'template-parts/content', get_post_type() ); ?>
<?php endwhile; ?>Ce code recherchera en priorité.template-parts/content-post.php(En supposant que le type d'article est...)postSi ce n'est pas trouvé, alors il est chargé.template-parts/content.php。
Utiliser les fonctions principales et les hooks pour piloter les fonctionnalités.
La puissance de WordPress réside dans sa vaste bibliothèque de fonctions et son système de “ hooks ” piloté par des événements. Dans le développement de thèmes, une utilisation experte des fonctions et des hooks principaux est essentielle pour mettre en œuvre des fonctionnalités complexes et optimiser les performances et la sécurité.
Les fonctions de base pour obtenir et afficher du contenu.
Dans les fichiers de modèle, vous utiliserez fréquemment une série de fonctions pour récupérer et afficher du contenu dynamique. Par exemple,the_title()Il est utilisé pour afficher le titre de l'article ou de la page actuelle, et ...the_content()Ensuite, il affiche le contenu principal après avoir été formaté. La fonction correspondante à l'affichage direct est représentée par <.get_Les fonctions du début, telles queget_the_title()Ils renvoient des données que vous pouvez ensuite traiter dans votre code.
La boucle d'articles de blog est au cœur des modèles WordPress, et sa structure de code standard est la suivante :
<!-- 在这里输出文章内容 -->
<h2></h2>
<div></div>
<!-- 这里可以放置分页导航 -->
<?php else : ?>
<!-- 如果没有找到文章，显示的内容 -->
<p>Aucun contenu disponible pour l’instant.</p>Étendre les fonctionnalités à l'aide de hooks.
Les hooks sont divisés en deux types : les “ actions ” et les “ filtres ”. Les hooks d’action vous permettent d’insérer votre propre code lorsqu’un événement spécifique se produit, par exemple lorsque :wp_headDes meta-tag supplémentaires sont affichés dans le hook. Vous pouvez les utiliser.add_action()Il utilise une fonction pour monter sa propre fonction.
Lectures recommandées Guide de début pour le développement de thèmes WordPress : Construire votre premier thème personnalisé à partir de zéro。
Par exemple, dans le cas du thème...functions.phpAjout du support pour les liens Feed dans le fichier :
add_action( 'after_setup_theme', 'mytheme_setup' );
function mytheme_setup() {
// 为文章和评论添加Feed链接到head中
add_theme_support( 'automatic-feed-links' );
}Les filtres hooks vous permettent de modifier les données. Par exemple, en utilisantexcerpt_lengthLes filtres peuvent modifier la longueur des résumés d'articles :
add_filter( 'excerpt_length', 'mytheme_custom_excerpt_length', 999 );
function mytheme_custom_excerpt_length( $length ) {
return 30; // 将摘要长度设置为30个单词
}functions.phpLe fichier est le “ centre de fonctionnalités ” du thème. Toutes les fonctions personnalisées, les appels aux crochets et les déclarations de fonctionnalités du thème doivent y être placés.
L’annonce de la fonctionnalité de suivi des sujets est prise en charge.
utiliseradd_theme_support()Il est de bonne pratique de déclarer dans une fonction quelles fonctionnalités de base de WordPress sont prises en charge par votre thème. Cela permet non seulement d’activer ces fonctionnalités, mais aussi d’assurer la compatibilité avec les versions futures.
Les déclarations de fonctionnalités courantes incluent :
add_action( 'after_setup_theme', 'mytheme_theme_support' );
function mytheme_theme_support() {
// 支持文章特色图像
add_theme_support( 'post-thumbnails' );
// 支持HTML5语义化标记
add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );
// 支持自定义Logo
add_theme_support( 'custom-logo', array(
'height' => 100,
'width' => 400,
'flex-height' => true,
'flex-width' => true,
) );
}Intégrer des styles personnalisés et des fichiers de scripts.
Un thème moderne doit gérer correctement ses feuilles de style CSS et ses scripts JavaScript afin de s'assurer qu'ils sont chargés selon les besoins, d'éviter les conflits et de respecter les meilleures pratiques d'optimisation des performances frontales.
Enregistrer et charger les ressources en toute sécurité.
Ne jamais utiliser directement les fichiers de modèle.<link>Ou<script>Il s'agit d'utiliser des balises pour coder les ressources de manière rigide. La méthode correcte consiste à utiliserwp_enqueue_scriptsLes déclencheurs d'action, en coordination avec...wp_enqueue_style()etwp_enqueue_script()Une fonction.
Dansfunctions.phpDans ce cas, vous devez définir une fonction pour gérer la file d'attente des ressources :
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_assets' );
function mytheme_enqueue_assets() {
// 加载主样式表
wp_enqueue_style( 'mytheme-style', get_stylesheet_uri(), array(), '1.0' );
// 加载Google字体
wp_enqueue_style( 'mytheme-google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap', array(), null );
// 加载主JavaScript文件，并依赖jQuery，在页脚加载
wp_enqueue_script( 'mytheme-script', get_template_directory_uri() . '/assets/js/main.js', array( 'jquery' ), '1.0', true );
// 如果需要传递PHP变量到JS，可以使用wp_localize_script
wp_localize_script( 'mytheme-script', 'myThemeData', array(
'ajax_url' => admin_url( 'admin-ajax.php' ),
'home_url' => home_url(),
));
}Cette méthode garantit que les dépendances sont correctes, évite le chargement répété et permet aux plugins et autres thèmes d'être gérés via leurs déclarations de dépendances.
Ajouter la prise en charge des styles à l'éditeur Gutenberg.
Avec la popularité des éditeurs de blocs, il est devenu essentiel d’ajouter un support de style front-end aux éditeurs back-end, afin d’offrir une expérience d’édition “ ce que vous voyez est ce que vous obtenez ”. Vous pouvez utiliser :add_theme_support( ‘editor-styles’ )Et ajoutez une feuille de style pour l'éditeur.
add_action( 'after_setup_theme', 'mytheme_editor_styles' );
function mytheme_editor_styles() {
add_theme_support( 'editor-styles' );
add_editor_style( 'assets/css/editor-style.css' );
}résumés
Le développement de thèmes WordPress consiste à commencer par comprendre la structure de base des fichiers, puis à approfondir progressivement les niveaux de modèles, les fonctions principales, le système de crochets et la gestion des ressources. La clé réside dans la pratique : partir du plus simple.style.cssetindex.phpTout d'abord, commencez par créer.header.phpetfooter.phpNous allons procéder à une division modulaire. Ensuite, nous allons utiliser la hiérarchie des modèles pour créer des modèles spécifiques pour différents types de pages, tels que :single.phpOupage.php. Enfunctions.phpEn Chine, grâce aux crochets et auxadd_theme_supportAjoutez des fonctionnalités en toute sécurité et faites-le toujours de manière transparente pour les utilisateurs.wp_enqueue_scriptsPour gérer les styles et les scripts. En suivant ces principes et étapes fondamentaux, vous serez en mesure de créer des thèmes WordPress professionnels, efficaces et faciles à entretenir.
FAQ Foire aux questions
Pour créer un thème WordPress, quels sont les fichiers minimums requis ?
D'un point de vue technique, un thème reconnu et activé par WordPress ne nécessite que deux fichiers minimum :style.cssetindex.php。style.cssLes commentaires en tête de fichier doivent contenir des métadonnées thématiques correctes, telles que :Theme NameEtindex.phpEn tant que fichier de modèle le plus basique, il est utilisé pour rendre toutes les pages.
Comment créer un modèle de page personnalisé pour mon thème ?
La création d'un modèle de page personnalisé est très simple. Il vous suffit d'utiliser n'importe quel fichier de modèle (généralement <).page.phpAjoutez un bloc de commentaires PHP spécifique en haut du fichier. Par exemple, pour créer un modèle de “ page pleine largeur ”, vous pouvez créer un nouveau fichier nommé .template-full-width.phpOuvrez le fichier et écrivez ce qui suit au début du document :/* Template Name: 全宽页面 */Après avoir enregistré, lorsque vous éditez une page dans l’interface d’administration de WordPress, vous pouvez voir et sélectionner “ Page pleine largeur ” dans le menu déroulant “ Modèle ” des “ Propriétés de la page ”.
Pourquoi utiliser add_action dans functions.php pour ajouter des fonctionnalités ?
Directement sur…functions.phpÉcrire le code de la fonction en chinois peut entraîner son exécution au mauvais moment, ce qui peut provoquer des erreurs ou faire que la fonction ne fonctionne pas correctement. Utilisez plutôt l'anglais.add_action()Ouadd_filter()En attachant votre fonction à un hook WordPress spécifique, vous pouvez vous assurer que le code est exécuté au moment approprié et en toute sécurité. Par exemple,after_setup_themeLes crochets sont utilisés pour initialiser le thème.wp_enqueue_scriptsLes hooks sont utilisés pour charger les ressources. C'est une des meilleures pratiques de l'architecture modulaire de WordPress, qui améliore la modularité et la compatibilité du code.
Comment puis-je rendre mon thème compatible avec la traduction en plusieurs langues ?
Pour que le thème prenne en charge plusieurs langues, il faut suivre plusieurs étapes. Tout d'abord, dansstyle.cssIl est utilisé dans l'en-tête et dans tous les fichiers de modèle.__()、_e()Ensuite, utilisez la fonction de traduction pour encapsuler tous les chaînes de texte nécessitant une traduction. Deuxièmement, dansfunctions.phpUtilisé dansload_theme_textdomain()Nous utilisons une fonction pour charger le fichier de traduction. Enfin, nous utilisons un outil tel que Poedit pour extraire les chaînes de caractères du code source et les générer..potNous vous fournirons les documents et demanderons au traducteur de créer la version dans la langue correspondante en conséquence (par exemple, en anglais, en français, etc.).zh_CN.poet.moIl s'agit du fichier de traduction. Placez le fichier de traduction dans le répertoire du thème./languages/Il suffit de le mettre dans le dossier.
Pour développer un thème commercial, quelles autorisations et réglementations doivent être prises en compte ?
Pour développer un thème commercial destiné à la distribution ou à la vente, vous devez strictement respecter les exigences de licence de WordPress. Le point le plus important est que votre thème doit être soumis à la même licence GPL v2 ou supérieure que le noyau de WordPress. Cela signifie que d’autres personnes ont le droit d’utiliser, de modifier et de redistribuer le code de votre thème. Deuxièmement, vous devez suivre les normes de codage et les directives de révision des thèmes officielles de WordPress pour garantir la qualité, la sécurité et la compatibilité du code. En outre, il est essentiel de déclarer correctement les licences de toutes les ressources tierces utilisées (telles que les polices et les bibliothèques d’icônes) et de s’assurer qu’elles sont également compatibles avec la GPL ou qu’elles ont obtenu une licence commerciale.
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 ultime pour choisir le thème WordPress idéal : une analyse complète, de la structure de base aux options personnalisables
- Développement de thèmes WordPress : De l’initiation à la maîtrise : Guide complet pour créer des sites web personnalisés
- Développement de thèmes WordPress à partir de zéro : Créer des interfaces de site web uniques et originales
- 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
Français