Préparatifs de base
Avant de commencer à écrire du code, disposer d’un environnement approprié et de connaissances de base est la clé du succès. Tout d’abord, vous aurez besoin d’un environnement de développement local. Vous pouvez choisir des paquets intégrés tels que XAMPP, MAMP ou Local by Flywheel, qui vous permettront de configurer rapidement PHP, MySQL et un serveur web. Bien sûr, vous pouvez également opter pour une approche plus flexible et mettre en place l’environnement manuellement sur votre ordinateur. Assurez-vous que votre version de PHP est au moins 7.4 et que votre version de MySQL est au moins 5.6.
Ensuite, vous devez créer un répertoire distinct pour votre thème personnalisé. Ce répertoire doit se trouver dans le dossier d’installation de WordPress. wp-content/themes/ Dans le dossier. Par exemple, vous pouvez créer un fichier nommé… my-first-theme Un dossier contenant les fichiers nécessaires. Un thème WordPress peut être reconnu par le système avec seulement deux fichiers.index.php et style.cssParmi ceux-ci,style.css Ce n’est pas seulement un fichier de style, mais aussi un en-tête contenant les métadonnées qui définissent le thème ; on peut considérer cet en-tête comme l“” identité » du thème en question.
Créer le fichier central du thème
Rédiger la tête du fichier de style pour le thème
style.css Le début du fichier doit être un bloc de commentaires CSS formaté, contenant toutes les informations nécessaires pour que WordPress reconnaisse le thème. C’est la partie qui doit être correctement configurée pour chaque thème.
Lectures recommandées De zéro à un : Guide complet et tutoriel pratique pour le développement de thèmes WordPress。
/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme/
Author: 你的名字
Author URI: https://yourwebsite.com
Description: 这是一个入门级的自定义 WordPress 主题，用于学习开发。
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-first-theme
*/Parmi ces éléments, le “ Text Domain ” est utilisé pour l’internationalisation. Nous utiliserons une fonction pour cela plus tard. __() Ou _e() Afin que le texte des sujets puisse être traduit en plusieurs langues.
Créer des fichiers de modèles de base
index.php Il s’agit du modèle par défaut pour les thèmes, et également du modèle de recours le plus important. Lorsque WordPress ne trouve pas de fichier de modèle plus spécifique… single.phpLorsqu’il est nécessaire de l’utiliser, on le fait. C’est une fonctionnalité très basique. index.php Il faut inclure le « The Loop » de WordPress, qui constitue le mécanisme central permettant d'afficher le contenu des articles.
<!DOCTYPE html>
<html no numeric noise key 1022>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body no numeric noise key 1019>
<header id="site-header">
<h1><a href="/fr/</?php echo esc_url( home_url( '/' ) ); ?>"></a></h1>
<p></p>
</header>
<main id="main-content">
<article id="post-<?php the_ID(); ?>" no numeric noise key 1011>
<h2><a href="/fr/</?php the_permalink(); ?>"></a></h2>
<div class="entry-content">
</div>
</article>
<p><?php _e( '抱歉，没有找到任何文章。', 'my-first-theme' ); ?></p>
</main>
<?php get_sidebar(); ?>
<footer id="site-footer">
<p>©</p>
</footer>
</body>
</html>Ce modèle utilise plusieurs fonctions clés de WordPress, telles que… wp_head(), the_title(), the_content()Fonction get_sidebar() Une tentative sera faite pour charger un fichier nommé… sidebar.php Le fichier de modèle correspondant.
Implémenter les niveaux et les fonctionnalités des modèles
WordPress utilise un système de règles appelé “ hiérarchie des templates ” pour déterminer quel fichier de template utiliser pour une page spécifique. Comprendre cette hiérarchie est essentiel pour développer des thèmes flexibles. Par exemple, lorsqu’on accède à un article de blog, WordPress recherche dans l’ordre suivant :single-post.php -> single.php -> singular.php -> index.phpVous pouvez personnaliser l’apparence des différentes pages en créant ces fichiers spécifiques.
Ajout de la fonctionnalité de support pour les images caractéristiques des articles.
Les thèmes modernes prennent généralement en charge la fonctionnalité des “ images de prédiction pour les articles ” (Post Thumbnails). Pour activer cette fonction, vous devez modifier les paramètres du thème concerné. functions.php Le fichier utilise add_theme_support() Fonction. Tout d’abord, créez un fichier dans le répertoire thématique. functions.php Les documents.
Lectures recommandées Pratique et efficace : Un guide complet pour maîtriser le développement de thèmes WordPress, de zéro à expert.。
<?php
/**
* 我的第一个主题的功能函数文件
*/
if ( ! function_exists( 'my_first_theme_setup' ) ) :
function my_first_theme_setup() {
// 让 WordPress 管理标题标签
add_theme_support( 'title-tag' );
// 启用文章特色图像支持
add_theme_support( 'post-thumbnails' );
// 为文章和页面设置默认特色图像尺寸
set_post_thumbnail_size( 1200, 800, true );
// 注册一个导航菜单位置
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-first-theme' ),
) );
}
endif;
add_action( 'after_setup_theme', 'my_first_theme_setup' );Intégrer des fichiers de style et de scripts
Ajouter correctement les fichiers CSS et JavaScript à la file d’attente est une meilleure pratique pour le développement avec WordPress, car cela évite les conflits de ressources et les chargements répétés. Nous le faisons en… wp_enqueue_style() et wp_enqueue_script() Cette fonction est mise en œuvre pour… (The function is implemented to…) functions.php Ajoutez une nouvelle fonction à…
function my_first_theme_scripts() {
// 引入主样式表
wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
// 引入自定义 JavaScript 文件
wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()->get( 'Version' ), true );
// 如果评论功能开启且有评论，加载评论回复脚本
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );Avancement des connaissances sur les sujets et meilleures pratiques
Un thème complet ne se limite pas à la présentation du contenu ; il faut également prendre en compte l’accessibilité, les performances et la structure organisationnelle du site. Séparer les différentes parties d’une page (comme le en-tête, le pied de page et les barres latérales) dans des fichiers de template distincts permet de rendre le code plus facile à maintenir.
Separer les templates de en-tête et de pied de page
Créer header.php et footer.php Fichier. index.php \n中 <body> Déplacer tout le contenu qui se trouve avant l’étiquette. header.php… </body> Déplacer tout le contenu qui se trouve avant l’étiquette. footer.phpEnsuite, remplacez le contenu original par le nouveau contenu approprié. index.php Résumé :
<main id="main-content">
<article id="post-<?php the_ID(); ?>" no numeric noise key 1012>
<?php if ( has_post_thumbnail() ) : ?>
<div class="post-thumbnail">
<?php the_post_thumbnail(); ?>
</div>
<h2><a href="/fr/</?php the_permalink(); ?>"></a></h2>
<div class="entry-content">
</div>
</article>
<p><?php _e( '抱歉，没有找到任何文章。', 'my-first-theme' ); ?></p>
</main>Créer un modèle de barre latérale
De même, créez-en un. sidebar.php Fichier, et y utiliser la fonction de barre latérale dynamique. dynamic_sidebar()Tout d’abord, vous devez… functions.php Utilisé dans register_sidebar() La fonction permet de réserver une zone pour un widget dans la barre latérale.
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 sidebar.php Vous l’appelez à l’intérieur :
<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
<aside id="secondary" class="widget-area">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside>
<?php endif; ?>résumés
Grâce aux étapes décrites dans cet article, vous avez réussi à créer une thématique personnalisée pour WordPress, basique mais fonctionnelle, à partir de zéro. Vous avez appris à créer les fichiers essentiels, à comprendre la structure des templates, et à utiliser les différentes fonctionnalités disponibles pour personnaliser l’aspect de votre site web. functions.php Ajoutez la fonctionnalité de thèmes, ainsi que la mise en œuvre des meilleures pratiques pour organiser et charger les ressources. Ce thème dispose déjà des fonctionnalités de base telles que l'affichage des articles, le support d'images dédiées, un menu de registration et une barre latérale. En partant de là, vous pouvez explorer des fichiers de modèle plus complexes (comme les modèles de page, les modèles de catégories), des types d'articles personnalisés, ainsi que l'API de personnalisation des thèmes, afin de créer progressivement un thème WordPress puissant et professionnel. N'oubliez pas que la pratique est la clé de l'apprentissage : essayer de modifier le code et observer les changements est la meilleure façon de consolider vos connaissances.
Lectures recommandées Guide de début pour le développement de thèmes WordPress : Créer votre propre thème à partir de zéro。
FAQ Foire aux questions
Que faire si mon thème n’apparaît pas en arrière-plan (dans l’interface de gestion du site) ?
Veuillez vérifier d’abord si votre dossier de thèmes est placé dans le bon emplacement. wp-content/themes/ Dans le répertoire. Ensuite, confirmez. style.css Le format de l’en-tête des informations thématiques en haut du fichier (commentaires CSS) est-il correct ? En particulier, la ligne “Theme Name:” doit être présente et bien formattée. Tout erreur de saisie ou problème de formatation peut empêcher WordPress d’identifier votre thème.
Que faire si la modification du fichier functions.php a provoqué un écran blanc sur le site web ?
“Un ” écran blanc et un plantage » est généralement dû à… functions.php Il y a des erreurs de syntaxe dans le fichier (comme l'absence de points-virgules ou de parenthèses) ou des erreurs fatales. La solution la plus rapide est d'utiliser FTP ou un gestionnaire de fichiers pour accéder à votre serveur et de corriger les problèmes. functions.php Renommer un fichier (par exemple, le changer en…) functions.php.bakDe cette façon, WordPress ignorera ce fichier et le site pourra de nouveau être accessible. Vous pourrez ensuite vérifier et corriger les erreurs de code.
Comment ajouter un modèle de page à mon thème ?
Pour créer un modèle de page personnalisé, commencez par créer un nouveau fichier PHP dans le répertoire de votre thème. Par exemple… template-fullwidth.phpEn haut de ce fichier, ajoutez les commentaires de modèle spécifiques suivants :
<?php
/**
* Template Name: 全宽页面
*/Ensuite, vous pouvez écrire votre code HTML et PHP dans ce fichier. N’oubliez pas d’utiliser… get_header(), get_footer() Après avoir enregistré ces modifications, vous pourrez voir et sélectionner l’option “Page à largeur complète” dans le menu déroulant “Template” (Modèle) des “Propriétés de la page” lors de l’édition ou de la création d’une page dans l’administration de WordPress.
主题开发中 get_template_part() 函数有什么用？
get_template_part() Les fonctions sont des outils puissants dans le développement de thèmes WordPress pour la modularisation du code. Elles permettent de charger une partie spécifique d’un modèle au sein de votre thème. Par exemple, dans un boucle, vous pouvez utiliser une fonction pour afficher des contenus de manière dynamique. get_template_part( 'content', get_post_format() ); Pour charger… content.php Ou, pour être plus précis, comme… content-video.php Cela améliore considérablement la réutilisabilité et la maintenance du code, vous permettant de créer facilement des modèles d'affichage différents pour différents types de contenus d’articles.
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.
- Développement de thèmes WordPress à partir de zéro : Créer des interfaces de site web uniques et originales
- Comment choisir et personnaliser le thème WordPress parfait pour vous ?
- 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
Français