Guide d’introduction au développement de thèmes WordPress : construisez votre premier thème à partir de zéro

Préparatifs et configuration de l’environnement

Avant de commencer à écrire du code, vous aurez besoin d’un environnement de développement approprié. Un environnement de développement local vous permet de tester et de déboguer vos projets sans affecter le site web en ligne. Nous vous recommandons d’utiliser des paquets intégrés tels que XAMPP, MAMP ou Local by Flywheel, qui installent automatiquement Apache, MySQL/MariaDB et PHP en un seul clic.

Assurez-vous que votre version de PHP est supérieure ou égale à 7.4, ce qui est la version minimale recommandée par WordPress. De plus, vous aurez besoin d’un éditeur de code, tel que Visual Studio Code, Sublime Text ou PHPStorm, qui proposent des fonctionnalités de mise en évidence du syntaxe et de suggestions de code, améliorant ainsi considérablement l’efficacité de votre développement.

Créer la structure de base d'un thème WordPress

Un thème WordPress est essentiellement un ensemble de fichiers situés dans le répertoire wp-content/themes de votre site WordPress. wp-content/themes/ Le nom de ce dossier se trouve dans le répertoire. Il s’agit de l’identifiant de votre thème ; il est conseillé d’utiliser des lettres minuscules, des chiffres et des traits d’union, et de ne pas inclure de espaces. Par exemple, vous pouvez créer un dossier nommé… my-first-theme Le dossier…

Dans ce dossier, il faut au moins deux fichiers essentiels :style.css et index.php。style.css Ce n’est pas seulement un fichier de style (stylesheet) ; son rôle le plus important est de fournir des métadonnées sur le thème, qui apparaissent sur la page “ Apparence ” → “ Thèmes ” dans l’administration de WordPress.

Rédiger les en-têtes d'informations sur le sujet

Dans style.css En haut du fichier, vous devez ajouter un bloc de commentaires spécifique pour définir les informations sur le sujet. Voici un exemple :

Hébergement WordPress par UltraHost

Garantie de remboursement dans les 30 jours, bande passante illimitée et base de données, protection gratuite contre les attaques DDoS. Avantage de 501 TP4T pour les achats sur 3 ans.

page d'accès

/*
Theme Name: My First Theme
Theme URI: https://example.com/my-first-theme/
Author: Your Name
Author URI: https://example.com/
Description: 一个简洁、轻量级的入门级 WordPress 主题，用于学习主题开发。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

Parmi ceux-ci,Text Domain Il est utilisé pour l’internationalisation (soutien à plusieurs langues) et doit correspondre au nom de votre dossier thème.index.php Le fichier en question sert de modèle par défaut pour les thèmes et constitue le modèle de réserve pour toutes les pages. Au début, vous pouvez y écrire une structure HTML simple pour effectuer des tests.

Fichiers de modèle principaux et structure hiérarchique des modèles

WordPress utilise un ensemble de règles appelé “ hiérarchie des templates ” pour déterminer quel fichier de template utiliser pour rendre une page spécifique. Comprendre cette structure est essentiel pour le développement de thèmes. L’idée principale est la suivante : WordPress commence par chercher dans le fichier de template le plus spécifique. S’il n’est pas trouvé, il recourt à un fichier plus général, et ainsi de suite, jusqu’à atteindre le fichier de template le plus général possible. index.php。

Lectures recommandées Introduction au développement de thèmes WordPress : créez votre premier thème personnalisé à partir de zéro.。

Fichiers de modèles couramment utilisés et leurs utilisations

• header.phpLa partie en-tête d'un site web comprend généralement une zone de contenu, l'identité du site ainsi que le menu principal.
• footer.phpLa partie pied de page d’un site web contient généralement des informations sur les droits d’auteur, des liens utiles, etc.
• sidebar.phpZone de la barre latérale.
• index.php: Le modèle principal, qui sert de dernier recours pour toutes les pages.
• single.phpUtilisé pour afficher un seul article de blog.
• page.phpUtilisé pour afficher une seule page (comme “ À propos de nous ” ou “ Contact ”).
• archive.phpUtilisé pour afficher la liste des archives d’articles (par catégorie, tag, auteur, date d’archivage).
• front-page.phpUtilisé pour définir la page d'accueil du site web (si une page statique a été définie comme telle).
• home.phpCe modèle est utilisé pour afficher la page d'index des articles du blog (si une page d'accueil statique a été définie, ce modèle affiche alors la liste des articles les plus récents).
• 404.phpUtilisé pour afficher la page d'erreur “404 Introuvable”.
• search.phpUtilisé pour afficher les résultats de la recherche.
• functions.phpCe n’est pas un fichier de template, mais un fichier de fonctionnalités pour un thème, utilisé pour ajouter des fonctionnalités, enregistrer des menus, des barres latérales, etc.

Tags de modèle et boucles

Dans les fichiers de template, vous utiliserez fréquemment des “ balises de template ”. Il s’agit de fonctions PHP fournies par WordPress, permettant d’afficher du contenu dynamique. bloginfo('name') Titre du site web :the_title() Titre de l’article :

Le concept le plus essentiel est la “ boucle WordPress ”. Il s’agit d’une structure de code PHP utilisée pour vérifier si la page actuelle contient des articles (ou une liste d’articles) à afficher, et pour les afficher de manière répétée (c’est-à-dire en boucle). Une boucle de base se présente comme suit :

<h2></h2>
    <div class="entry-content">
        
    </div>

    <p></p>

这段代码的意思是：如果有文章，就循环（while）每一篇，在循环中显示文章标题和内容；如果没有文章，则显示一条错误信息。`_e()` 是一个用于国际化的翻译函数。

Intégration des fonctionnalités thématiques et des styles

functions.php Il s’agit du “ cerveau ” de votre thème ; toutes les fonctionnalités qui ne font pas partie des fonctionnalités essentielles à la rendu du template doivent y être ajoutées. Ce fichier est chargé automatiquement lors de l’initialisation du thème.

Fonction de création de sujets (thèmes)

Dans functions.php Dans WordPress, vous pouvez étendre les fonctionnalités en utilisant divers “crochets” (Hooks) proposés par le système, tels que les hooks d’actions et les hooks de filtres. Avant toute chose, il est généralement nécessaire de déclarer que votre thème prend en charge certaines fonctionnalités. Par exemple, pour ajouter des miniatures d’articles (images de présentation) et de soutenir les menus :

hosting.com Hébergement partagé

Hautes performances avec les CPU AMD EPYC, stockage SSD NVMe et LiteSpeed, support interne expert 24h/24 et 7j/7, mesures de sécurité avancées, notamment SSL, protection contre la force brute, les logiciels malveillants et le DDoS, économies pouvant aller jusqu'à 73%.

page d'accès

<?php
function my_first_theme_setup() {
    // 让主题支持文章和页面使用“特色图像”
    add_theme_support( 'post-thumbnails' );

// 注册导航菜单位置
    register_nav_menus( array(
        'primary' => __( 'Primary Menu', 'my-first-theme' ),
        'footer'  => __( 'Footer Menu', 'my-first-theme' ),
    ) );

// 让 WordPress 管理文档标题标签
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );
?>

`add_action()` 将你的函数 my_first_theme_setup Monté sur WordPress after_setup_theme Assurez-vous que cette action soit exécutée au bon moment, en utilisant le crochet approprié.

Intégrer des styles et des scripts

Les thèmes modernes doivent intégrer correctement les fichiers de style (CSS) et les fichiers JavaScript. wp_enqueue_style() et wp_enqueue_script() Les fonctions doivent être ajoutées à une file d’attente, plutôt que d’être directement écrites dans les fichiers de template avec des balises comme `` ou ``. Les avantages de cette approche sont la gestion des dépendances, la prévention des chargements répétés, et le respect des meilleures pratiques de WordPress.

function my_first_theme_scripts() {
    // 引入主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );

// 引入自定义 JavaScript 文件
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

La fonction `getstylesheet_uri()` renvoie l’URL du fichier de style externe que votre site utilise. style.css La fonction `get_template_directory_uri()` retourne l’URL du répertoire du thème actuel.

Lectures recommandées Guide de début pour le développement de thèmes WordPress : Construire votre thème personnalisé à partir de zéro。

Construire le layout de la page et les composants des modèles

Une page web standard se compose généralement d’un en-tête, d’un contenu principal et d’un pied de page. WordPress vous encourage à diviser les éléments réutilisables en fichiers distincts, puis à les intégrer dans le modèle principal à l’aide de fonctions spécifiques.

Splitting template components

Créer header.php、footer.php et sidebar.php. En header.php Dans ce cas, vous devez inclure la section « » complète et la terminer par un conteneur de titre clair, tel que la balise « ». footer.php Dans ce texte, les éléments sont généralement encadrés par des balises ``` et ```.

Hébergement partagé InterServer

Hébergement mutualisé $2.50 USD par mois, premier mois $0.1 USD code promo tryinterserver, 461 scripts cloud apps, installation en un clic.

page d'accès

Assembler la page complète

Dans le modèle de page (par exemple…) index.php、single.phpDans ce document, vous pouvez utiliser les fonctions suivantes pour intégrer ces composants :

<?php get_header(); ?>

<main id="primary" class="site-main">
    <?php
    // 这里放置 WordPress 循环
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            // 内容输出
        endwhile;
    endif;
    ?>
</main>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

`get_header()`、`get_sidebar()` 和 `get_footer()` 会分别加载对应的模板文件。你还可以使用 `get_template_part()` 函数来加载更细粒度的模板部件，例如 `get_template_part( 'template-parts/content', 'page' );` 会尝试加载 template-parts/content-page.php Le fichier sera chargé si celui-ci n’existe pas. template-parts/content.phpCela améliore considérablement la réutilisabilité et la maintenance du code.

résumés

Construire un thème WordPress à partir de zéro est un processus d’apprentissage systématique. Vous devez d’abord mettre en place un environnement de développement local approprié et comprendre la structure des fichiers de base d’un thème. L’essentiel est de maîtriser la hiérarchie des templates de WordPress, qui détermine la manière dont les différents contenus sont rendus. functions.php Pour vos fichiers, vous pouvez ajouter des fonctionnalités et des caractéristiques puissantes à votre thème, tout en suivant les meilleures pratiques pour gérer les styles et les scripts. Enfin, en divisant la page en éléments tels que le haut de la page, le pied de page et les barres latérales, et en utilisant les fonctions fournies par WordPress pour les assembler, vous pouvez créer un code de thème bien structuré et facile à maintenir. En suivant ces étapes, vous ne créerez pas seulement votre premier thème, mais vous poserez également les bases solides pour le développement de projets plus complexes et plus professionnels à l’avenir.

Lectures recommandées Introduction au développement de thèmes pour WordPress : Construire votre premier thème personnalisé à partir de zéro。

FAQ Foire aux questions

Est-il obligatoire de maîtriser PHP pour développer des thèmes pour WordPress ?

Oui, PHP est le langage de programmation principal de WordPress. Les fichiers de template des thèmes (comme…) index.php、page.php) et les fichiers fonctionnels (functions.phpTous ces fichiers sont des fichiers PHP. Pour pouvoir afficher et manipuler dynamiquement les données dans WordPress, vous devez maîtriser la syntaxe de base de PHP, les conditions, les boucles ainsi que l’utilisation des fonctions.

Lors du développement d’un thème, qu’est-ce qui distingue `page.php` de `front-page.php` ?

page.php Utilisé pour rendre les différentes “ pages ” créées dans WordPress, telles que “ À propos de nous ” ou “ Contact ”. front-page.php Il s’agit d’un modèle conçu spécialement pour rendre la “ page d’accueil ” d’un site web. Dans l’administration de WordPress, sous “ Paramètres ” -> “ Lecture ”, si vous choisissez “ Une page statique ” et que vous définissez la “ page d’accueil ” comme telle, WordPress utilisera alors cette page en priorité. front-page.php Pour afficher cette page… front-page.php S’il n’existe pas, alors il sera utilisé. page.php。

为什么推荐使用 `wp_enqueue_style()` 来加载 CSS，而不是直接在 HTML 中写 `` 标签？

utiliser wp_enqueue_style() Il s’agit d’une méthode officiellement recommandée par WordPress. Elle permet de s’assurer que le fichier de style n’est chargé qu’une seule fois, même si plusieurs plugins ou thèmes font référence au même fichier. Cette méthode facilite la gestion des dépendances entre les fichiers de style (par exemple, si vos styles dépendent d’un cadre de travail de base). De plus, elle est mieux compatible avec les mécanismes de cache et les plugins, et permet aux thèmes enfants de modifier facilement les styles du thème parent.

Comment faire en sorte que mon thème prenne en charge plusieurs langues (internationalisation) ?

Pour permettre à un thème de prendre en charge plusieurs langues, il faut principalement suivre deux étapes. Tout d’abord, il faut utiliser les fonctions de traduction de WordPress dans toutes les chaînes de texte du thème. ()、_e() Ou esc_html()Et spécifiez leur emplacement. style.css Défini dans le contexte chinois. Text DomainPar exemple :_e( 'Hello World', 'my-first-theme' )Deuxièmement, utilisez des outils tels que Poedit pour analyser le code de votre thème et générer des… .pot Des fichiers modèles, à partir desquels les traducteurs peuvent créer des versions dans différentes langues. .po Et après compilation. .mo Fichiers : Placez les fichiers de langue dans le dossier correspondant au thème. /languages/ Dans le répertoire, WordPress chargera automatiquement les traductions correspondantes en fonction des paramètres de langue du site web.