Vous souhaitez construire votre propre… (produit, service, etc.) à partir de zéro.WordPressPour un site web, il est essentiel de comprendre d’abord son noyau : son thème. Le thème d’un site détermine son apparence, sa structure, ses fonctionnalités ainsi que l’expérience utilisateur qu’il offre. Contrairement à l’utilisation de thèmes prêts à l’emploi, le développement personnalisé offre un contrôle total, de meilleures performances et une image de marque unique. Que vous soyez un développeur front-end souhaitant en savoir davantage…PHPRendu dynamique, ou bien…PHPLes développeurs back-end qui souhaitent améliorer leurs compétences front-end découvriront de nouvelles opportunités grâce à la maîtrise du développement de thèmes (theme development).
Préparatifs : Création d'un environnement de développement local
Avant d’écrire la première ligne de code, un environnement de développement local professionnel peut considérablement améliorer l’efficacité et l’expérience de travail. Cela permet d’éviter les risques liés aux modifications directes sur un serveur en ligne.
Configuration de l'environnement de développement local
Tout d’abord, nous devons simuler un environnement de serveur réseau sur notre ordinateur local. Il est recommandé d’utiliser des paquets logiciels tels que… Local(ParWP EngineProduit par…XAMPP Ou MAMPCes outils peuvent être installés en un seul clic.Apache、MySQLetPHP…LocalPar exemple, il intègre…WordPressInstallation en un clic.SSLLes fonctionnalités de capture de certificats et d’e-mails sont particulièrement avantageuses pour les développeurs.
Lectures recommandées Apprendre le développement de thèmes WordPress à partir de zéro : Guide complet pour créer des thèmes de site web personnalisés。
Après l’installation, créez un nouveau…WordPressSite web. Veuillez vous assurer que…PHPLa version doit être 7.4 ou supérieure. N’oubliez pas de noter le nom de la base de données, le nom d’utilisateur et le mot de passe, car ils seront nécessaires pour les étapes de configuration ultérieures.
Édition de code et contrôle de version
Un artisan qui veut bien faire son travail doit d’abord bien aiguiser ses outils. Nous recommandons l’utilisation d’un éditeur de code puissant, tel que… Visual Studio Code、PhpStorm Ou Sublime TextElles offrent une mise en évidence du syntaxe, des suggestions de code, une complétion automatique ainsi qu’une vaste écosystème de plugins.
En même temps, commencez immédiatement à utiliser un système de contrôle de version, de préférence…GitEn initialisant un fichier dans le répertoire racine du projet…GitRéservez l'espace nécessaire et utilisez-le..gitignorePour exclure les fichiers inutiles (tels que les médias téléversés et les fichiers de cache), vous pouvez gérer les modifications du code de manière sécurisée, ce qui facilite le rétrotracing des modifications et la collaboration. Hébergez le répertoire de code sur…GitHub、GitLabOuBitbucketC’est une pratique reconnue et standardisée dans l’industrie.
Comprendre la structure des fichiers et les modèles de base du sujet.
Un standardWordPressUn thème est un dossier qui contient des fichiers spécifiques. Comprendre la fonction de chaque fichier est la base essentielle pour construire un thème efficace.
Fichiers thématiques obligatoires à inclure
Selon…WordPressSelon les exigences officielles, un thème de base ne nécessite que deux fichiers.style.css et index.phpParmi ceux-ci,style.cssCe n’est pas seulement un fichier de style (stylesheet), mais aussi l“” identité » d’un thème (theme) en soi ; les commentaires situés en tête du fichier contiennent les métadonnées (metadata) relatives à ce thème.
Lectures recommandées Un guide complet pour la création d’un site web : du processus professionnel de zéro à la mise en ligne, avec une analyse des technologies clés.。
/*
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
*/index.phpIl s’agit alors d’un fichier de template de réserve qui est appelé lorsque les autres fichiers de template plus spécifiques ne sont pas disponibles. Bien sûr, un thème mature ne se limite pas à ces deux fichiers.
Les fichiers de modèle les plus couramment utilisés et leur structure hiérarchique
WordPressL'utilisation d'un système de hiérarchie de modèles permet de déterminer quel modèle sera appliqué à différents types de contenu.PHPFichiers de modèle. C’est le concept central du développement de thèmes.
Un processus typique d’appel de modèle se déroule comme suit :
1. Accéder à un article individuel : privilégier cette option.single-post.phpSi rien n’est disponible, alors utiliser…single.phpEt enfin,singular.php。
2. Accéder à la page : privilégier l’utilisation de cette méthode.page-{slug}.phpOupage-{id}.phpSi rien n’est disponible, alors utiliser…page.phpEt enfin,singular.php。
3. Accéder à la page d’archivage des articles : privilégiez cette option.archive-{post-type}.phpSi rien n’est disponible, alors utiliser…archive.phpEt enfin,index.php。
D’autres modèles clés incluent :header.php(Titre de la section)footer.php(Pied de page)sidebar.php(Barre latérale),functions.php(Fichier contenant les fonctions fonctionnelles) etfront-page.php(Page d'accueil statique). Comprendre comment ces fichiers fonctionnent…get_header()， get_footer()Des fonctions telles que celles-ci, lorsqu’elles sont assemblées ensemble, constituent la clé pour construire des pages web fonctionnelles et attrayantes.
Construire la structure d'un thème à partir de zéro
Maintenant, mettons-nous au travail pour créer quelque chose intitulé “MyFirstTheme”Le squelette thématique de “”, la vérité se découvre dans la pratique.
Créer un fichier de modèle de base
Dans le vôtreWordPressLe répertoire d’installation…wp-content/themes/En bas, créez un nouveau élément nommé…my-first-themeDans le dossier correspondant, créez ensuite les fichiers suivants :
Lectures recommandées L'ensemble du processus de création de sites web modernes : des techniques et pratiques clés de conception de l'architecture à la mise en œuvre et à l'exploitation.。
1. style.cssÉcrivez les informations de en-tête mentionnées ci-dessus.
2. index.phpC’est le modèle le plus basique.
Dansindex.phpDans ce document, nous allons d’abord construire la version la plus simple de…HTML5Structure, et introduire manuellement la partie en-tête (header) et la partie en pied (footer).
<!DOCTYPE html>
<html no numeric noise key 1005>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body no numeric noise key 1002>
<header>
<h1>Mon thème personnalisé</h1>
</header>
<main>
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
the_title( '<h2>', '</h2>' );
the_content();
endwhile;
else :
_e( '抱歉，没有找到您要的内容。', 'my-first-theme' );
endif;
?>
</main>
<footer>
<p>© Mon site web</p>
</footer>
</body>
</html>prendre notewp_head()etwp_footer()Ces deux crochets permettent aux plugins et aux thèmes d’insérer du code aux emplacements appropriés, et ils doivent donc être utilisés (c’est-à-dire appelés).
Diviser le template en composants modulaires.
Le code mentionné ci-dessus contient tout le contenu dans un seul fichier, ce qui le rend rapidement difficile à maintenir. À l’avenir, nous allons procéder à une segmentation du code en modules distincts.
Créerheader.php…OuvrirDéplacer tout le code se trouvant avant l’étiquette dans :
<!DOCTYPE html>
<html no numeric noise key 1004>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body no numeric noise key 1001>
<header>
<h1><a href="/fr/</?php echo esc_url( home_url( '/' ) ); ?>">Mon thème personnalisé</a></h1>
</header>
<main>Créerfooter.php…sera fermé.Déplacer tout le code qui se trouve après l’étiquette dans la zone indiquée.
</main>
<footer>
<p>© 我的网站</p>
</footer>
</body>
</html>Ensuite, simplifiez votre texte.index.phpFichier :
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
the_title( '<h2>', '</h2>' );
the_content();
endwhile;
else :
_e( '抱歉，没有找到您要的内容。', 'my-first-theme' );
endif;
?>Maintenant, la structure de votre thème est claire et facile à gérer. Vous pouvez…WordPressDans la section “ Apparence ” → “ Thèmes ” du backend, vous pouvez voir et activer ce thème.
Intégration des fonctionnalités de base et des options personnalisées
Une fois le squelette de base d'un thème achevé, il est nécessaire de lui insuffler de la vie, c’est-à-dire de l’animer en y intégrant des éléments dynamiques et interactifs.functions.phpFonctionnalités et caractéristiques relatives à l’ajout de fichiers.
L'utilisation du fichier `functions.php` permet de prendre en charge l’enregistrement des thèmes.
functions.phpCe fichier concerne votre thème “ Arrière-plan ” et sert à définir des fonctions, à enregistrer des fonctionnalités, à ajouter des filtres, etc. Il s’agit pas d’un fichier de modèle, mais il est automatiquement inclus à chaque chargement de la page.
À l’intérieur de cela, nous pouvons utiliser… add_theme_support() Les fonctions permettent de déclarer les fonctionnalités prises en charge par un thème. Par exemple, elles permettent d’activer l’affichage d’images de présentation pour les articles, de personnaliser le logo, ou de gérer le formatage des articles.
<?php
function my_first_theme_setup() {
// 让WordPress管理文档标题
add_theme_support( 'title-tag' );
// 启用文章和评论的RSS feed链接
add_theme_support( 'automatic-feed-links' );
// 启用文章特色图像
add_theme_support( 'post-thumbnails' );
// 启用自定义Logo
add_theme_support( 'custom-logo', array(
'height' => 100,
'width' => 400,
'flex-height' => true,
'flex-width' => true,
) );
// 启用HTML5标记支持
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );La bonne manière d'introduire des feuilles de style et des scripts.
N’utilisez jamais de valeurs codées en dur dans les fichiers de templates. Ou Les ressources statiques sont introduites à l’aide de balises. La manière correcte de le faire est… wp_enqueue_style() et wp_enqueue_script() Fonction. Cela assure la gestion des dépendances, le contrôle des versions et évite le chargement répété des ressources.
Dansfunctions.phpAjouter au milieu :
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 );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );Ajouter un menu de navigation
Le menu de navigation est l’ossature d’un site web. Tout d’abord, il faut… register_nav_menus() Emplacement de la section de registration des fonctions :
function my_first_theme_menus() {
register_nav_menus(
array(
'primary' => __( '主导航菜单', 'my-first-theme' ),
'footer' => __( '页脚菜单', 'my-first-theme' ),
)
);
}
add_action( 'init', 'my_first_theme_menus' );Ensuite, dansheader.phpdeDans la région concernée, pour accéder à ce menu :
<?php
wp_nav_menu(
array(
'theme_location' => 'primary',
'menu_id' => 'primary-menu',
'container' => 'nav',
'container_class'=> 'primary-navigation',
)
);
?>À travers les étapes précédentes, vous avez créé un thème qui dispose d’une structure de base, d’un soutien fonctionnel et d’un code modularisé. Bien qu’il puisse sembler simple, il contient déjà de nombreuses fonctionnalités essentielles.WordPressTous les concepts fondamentaux du développement de thèmes.
résumés
De la mise en place d'un environnement local à la rédaction du premier fichier de modèle, puis à la…functions.phpPour intégrer les fonctionnalités essentielles, nous avons déjà parcouru un certain chemin…WordPressL’ensemble du processus de création d’un sujet, de sa conception initiale à sa réalisation finale, repose essentiellement sur la compréhension du système de hiérarchie des templates. Ce système permet de mapper les différentes demandes de contenu vers les éléments correspondants.PHPFichiers de modèle. De plus, une approche modulaire (séparation en composants) est recommandée.header.php， footer.phpL'utilisation de bonnes pratiques de développement (telle que l’enregistrement correct des scripts et l’utilisation de fonctions de déclencheur) est la base pour construire des thèmes maintenables et fiables. En partant de là, vous pouvez continuer à explorer en profondeur des fonctionnalités telles que la personnalisation des requêtes d’articles, la création de zones pour les widgets, et l’intégration d’autres éléments.Customizer APIDe plus, il est possible de développer des modèles personnalisés et d'aborder des sujets avancés afin de créer des sites web plus puissants et professionnels.
FAQ Foire aux questions
Comment ajouter une barre latérale à un thème ?
DansWordPressDans ce document, la barre latérale est appelée “ zone des composants ” (« Widget Area »). Tout d’abord,functions.phpUtilisé dans register_sidebar() La fonction enregistre une ou plusieurs zones pour les composants (widgets).
function my_first_theme_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' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
}
add_action( 'widgets_init', 'my_first_theme_widgets_init' );Ensuite, dans le fichier de template où vous souhaitez afficher la barre latérale (par exemple…)single.phpOupage.phpDans ce code, une fonction est appelée. dynamic_sidebar() La fonction est utilisée pour l'afficher.
Qu’est-ce qu’un sous-sujet (subtopic) et pourquoi l’utiliser ?
Un sous-thème est un thème qui hérite de toutes les fonctionnalités et des styles d’un autre thème (appelé thème parent). Son fichier principal est…style.cssParmi ceux-ci, il est obligatoire de passer par…Template:Les champs de la section « En-tête » définissent le thème parent de cette section.
L’avantage majeur de l’utilisation des sous-thèmes est leur sécurité et leur durabilité. Lorsqu’un thème parent est mis à jour, toutes les modifications personnalisées que vous avez apportées au sous-thème (surveillance des styles, amélioration des fonctionnalités, modification des templates) ne seront pas effacées. C’est la méthode standard et recommandée pour personnaliser un thème existant.
Quelles conséquences peut entraîner une erreur dans le fichier functions.php ?
functions.phpLes erreurs de syntaxe ou les erreurs fatales présentes dans le fichier peuvent provoquer un “écran blanc” (c’est-à-dire qu’un écran vide est affiché) sur tout le site web. Cela est dû au fait que ce fichier…WordPressL’inclusion se produit pendant le processus de chargement du noyau ; tout erreur peut interrompre le processus d’initialisation.
Lorsque vous rencontrez cette situation, vous devez procéder comme suit :FTPOu le gestionnaire de fichiers du système d’hébergement… un problème est survenu.functions.phpRenommer un fichier (par exemple, le changer en…)functions.php.bakDe cette façon, le site web ignorera temporairement ce fichier et vous permettra de nouveau d’y accéder, vous permettant ainsi de corriger l’erreur.
Comment créer un modèle de page personnalisé ?
Les modèles de page personnalisés vous permettent de donner à des pages spécifiques un layout unique. Pour commencer, créez un nouveau fichier dans le répertoire de votre thème.PHPFichier : Ajoutez une note dans la partie supérieure du fichier, selon un format spécifique, pour indiquer que ce fichier sert de modèle de page.
Par exemple, pour créer un élément nommé…page-fullwidth.phpLe fichier :
<?php
/**
* Template Name: 全宽页面
* Description: 一个没有侧边栏的全宽度页面模板。
*/
get_header(); ?>
<!-- 你的全宽页面内容结构 -->
<?php get_footer(); ?>Après avoir enregistré les modifications, lorsque vous créerez ou modifierez une page, vous pourrez sélectionner le modèle “ Page à largeur complète ” dans le menu déroulant “ Propriétés de la page ” -> “ Modèles ”.
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 de Tailwind CSS : Une voie de apprentissage pratique pour passer de zéro à la maîtrise du framework
- Pourquoi choisir Tailwind CSS ? Une solution efficace et pratique pour le développement web moderne.
- Guide complet pour la création de sites web : Processus complet de la conception à la mise en ligne, avec une description détaillée de la technologie utilisée
- 10 conseils indispensables pour la conception et le développement de thèmes WordPress afin d’améliorer la professionnalité de votre site web.
- Guide complet du processus de création de sites web : l'ensemble de la chaîne de production, de la planification à la mise en ligne, avec la stack technologique complète et les meilleures pratiques
Français