Guide de début pour le développement de thèmes WordPress : Créez votre premier thème personnalisé à partir de zéro

Préparation et aménagement de l'environnement.

Avant de commencer à écrire du code, vous aurez besoin d’un environnement de développement local stable et professionnel. Il est fortement conseillé de ne pas modifier les fichiers thème directement sur un serveur en ligne, car cela pourrait affecter l’accès normal au site web. Un environnement de développement local vous permet de tester vos modifications en toute liberté sans perturber le fonctionnement du site. Vous pouvez choisir des logiciels d’environnement intégré tels que XAMPP, MAMP (pour Mac) ou Laragon (pour Windows), qui installent et configurent automatiquement Apache, MySQL et PHP en un seul clic.

WordPress doit également être installé dans votre environnement local. Accédez au site officiel de WordPress pour télécharger la dernière version de l’installation, puis dézippez le fichier dans le répertoire racine du site sur votre serveur local (par exemple, dans le répertoire de XAMPP). htdocs Vous créez d’abord un dossier. Ensuite, vous accédez à ce dossier via un navigateur web et suivez la procédure d’installation bien connue qui dure environ cinq minutes. Pendant l’installation, veillez à vous rappeler les informations que vous avez saisies.

Enfin, vous aurez besoin d’un éditeur de code pratique ou d’un environnement de développement intégré (IDE). Visual Studio Code, PhpStorm ou Sublime Text sont de très bonnes options ; ils offrent des fonctionnalités telles que l’highlighting du code, des suggestions automatiques et une gestion des fichiers, ce qui améliore considérablement l’efficacité de la développement.

Lectures recommandées Maîtriser pas à pas le développement de thèmes pour WordPress : construire votre propre thème personnalisé à partir de zéro。

Comprendre la structure de base des thèmes 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 dossier situé dans le répertoire contient une série de fichiers et de sous-dossiers qui respectent des règles spécifiques. Ces fichiers collaborent ensemble pour indiquer à WordPress comment présenter l’apparence et le contenu du site web.

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

Son mécanisme le plus essentiel est le “ niveau de hiérarchie des templates ” (les modèles). WordPress sélectionne automatiquement le fichier de template approprié en fonction du type de page visitée pour afficher le contenu. Par exemple, lorsqu’on consulte un article de blog, WordPress cherche en priorité le template correspondant à cet article. single.phpLorsqu’on visite la page d’accueil du blog, on cherche… home.php Ou index.phpCe mécanisme confère une grande flexibilité aux thèmes.

Chaque thème doit contenir deux fichiers de base :style.css et index.php。style.css La fonction de ce fichier n’est pas seulement de fournir des styles ; le bloc de commentaires situé en tête du fichier sert également de “ carte d’identité ” pour le thème, permettant à WordPress de connaître des informations métatelles telles que le nom du thème, son auteur et sa description.index.php Il s’agit du dernier recours en matière de sécurité : si les autres fichiers de modèle plus spécifiques ne sont pas disponibles, WordPress utilisera celui-ci.

Un commentaire typique de la partie en-tête d'un thème se présente comme suit :

/*
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
*/

Text Domain Utilisé pour l’internationalisation, il s’agit d’un identifiant qui est utilisé lors des appels ultérieurs aux fonctions de traduction.

Lectures recommandées Créer un site Web professionnel : guide complet pour créer un thème WordPress personnalisé à partir de zéro.。

En plus de ces deux fichiers, un thème complet et fonctionnel contient généralement également :header.php(Titre de la page)footer.php(Dans la partie inférieure de la page web)sidebar.php(Largeur de la barre latérale) et aussi functions.php(Fichier d'amélioration des fonctionnalités des thèmes.) En comprenant cette structure de base, vous maîtrisez le squelette du développement de thèmes.

Créer le fichier de modèle principal.

Maintenant, commençons à créer notre premier thème. Dans votre… /wp-content/themes/ Dans le répertoire, créez un nouveau dossier et nommez-le, par exemple… my-first-themeEnsuite, créez le fichier le plus basique à l’intérieur de ce dossier.

Tout d'abord, créez un style.cssEt ajoutez les commentaires de tête sur les thèmes mentionnés dans la partie précédente. Ensuite, créez… index.phpC’est votre premier fichier de modèle. Le plus simple possible. index.php Il est possible de ne contenir que des boucles qui affichent le titre et le contenu de l’article.

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

<main>
  
    
      <article>
        <h2></h2>
        <div></div>
      </article>
    
    <p>Aucun contenu disponible pour l’instant.</p>
  
</main>

Ce code utilise des balises de template. get_header(), get_sidebar(), get_footer(), the_title() et the_content()Pour que cela fonctionne, vous devez créer les fichiers correspondants pour la partie supérieure (en-tête), la barre latérale et la partie inférieure de la page.

Créer header.phpIl devrait contenir la partie initiale du document HTML, jusqu’au début de la zone principale du contenu.

<!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'
        ) );
      ?&gt;
    </nav>
  </header>

Ici,wp_head() Il s’agit d’un élément essentiel qui permet au noyau de WordPress, aux plugins et aux thèmes d’insérer le code nécessaire dans la partie supérieure de la page (comme les liens vers les feuilles de style).body_class() La fonction génère une série de noms de classes CSS bien structurés et significatifs, ce qui vous permet de contrôler les styles de manière plus précise et détaillée.

Lectures recommandées L’architecture de base et le fonctionnement de WordPress。

Créer footer.php Pour fermer les onglets ouverts :

  <footer>
    <p>©</p>
    
  </footer>
</body>
</html>

Attention,wp_footer() C’est « yǔ ». wp_head() L’ crochet situé à l’extrémité opposée est également indispensable.

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

Créer sidebar.phpPour l’instant, il suffit d’inclure une seule appelation à un contrôle simple.

<aside>
  <?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
    <?php dynamic_sidebar( 'sidebar-1' ); ?>
  <?php endif; ?>
</aside>

À ce stade, votre thème dispose déjà des fonctionnalités de base permettant l’utilisation de “ templates ” (modèles préétablis). Il est possible de les activer et de les prévisualiser en arrière-plan. Bien que ces fonctionnalités soient simples, elles respectent l’architecture de base de WordPress.

Améliorer les fonctionnalités d’un thème à l’aide de Functions.php

functions.php Le fichier est le “ centre de contrôle ” de votre thème. Il s’agit pas d’un fichier de modèle, mais d’un fichier PHP qui est chargé automatiquement lors de l’initialisation du thème. Il permet d’ajouter des fonctionnalités, de régister des composants, et de se connecter aux différentes API de WordPress. C’est un élément essentiel pour personnaliser et professionnaliser votre thème.

Vous devez créer ce fichier dans le répertoire racine du thème. Avant cela, ajoutons des fichiers de style et des scripts au thème. La bonne méthode consiste à utiliser les fonctions fournies par WordPress pour effectuer ces ajouts, plutôt que d’écrire directement le code dans le HTML. <link> Tags.

<?php
function my_first_theme_scripts() {
    // 添加主题的主样式表
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );

// 添加一个自定义样式表
    wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/assets/css/custom.css', array(), '1.0' );

// 添加一个 JavaScript 文件
    wp_enqueue_script( 'main-script', get_template_directory_uri() . '/assets/js/main.js', array('jquery'), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Ici,wp_enqueue_style() et wp_enqueue_script() Il s’agit d’une fonction conçue pour ajouter des ressources de manière sécurisée.get_stylesheet_uri() Relatif au sujet. style.css。add_action() Montez notre fonction sur… wp_enqueue_scripts Assurez-vous que cette fonctionnalité soit exécutée au bon moment sur ce crochet.

Ensuite, procédez à l’enregistrement du menu de navigation et de la barre latérale (zone des outils).

function my_first_theme_setup() {
    // 注册一个导航菜单位置
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
        'footer'  => __( '底部菜单', 'my-first-theme' ),
    ) );

// 启用文章特色图像功能
    add_theme_support( 'post-thumbnails' );

// 为“文章”类型启用文章格式支持
    add_theme_support( 'post-formats', array( 'aside', 'gallery', 'quote' ) );

// 添加对 HTML5 标记格式的支持
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );

// 启用标题标签功能
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

register_nav_menus() Afficher dans l'interface “ Apparence ” → “ Menu ” du backend des options de positionnement pour les éléments du menu.add_theme_support() Les fonctions sont utilisées pour activer diverses fonctionnalités de thème, ce qui constitue une pratique standard dans le développement de thèmes modernes. Par exemple, pour activer… title-tag Après cela, vous n’aurez plus besoin de… header.php Sortie manuelle en Chinois : <title> Marqué.

Enfin, créez une zone pour les outils de 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' =&gt; '<section id="%1$s" class="widget %2$s">',
        'after_widget'  =&gt; '</section>',
        'before_title'  =&gt; '<h2 class="widget-title">',
        'after_title'   =&gt; '</h2>',
    ) );
}
add_action( 'widgets_init', 'my_first_theme_widgets_init' );

À ce stade, votre thème dispose d’une chaîne complète allant de la présentation de base à l’amélioration des fonctionnalités. En utilisant le menu de configuration en arrière-plan et en ajoutant des gadgets, vous pouvez observer les changements dynamiques qui se produisent dans votre thème.

résumés

Depuis la création d’un élément contenant… style.css et index.php Commencez par le dossier correspondant, puis passez à la création des composants de modèle séparés (templates).header.php, footer.phpEn passant par des moyens puissants… functions.php Vous avez déjà parcouru l’ensemble du processus essentiel pour créer un thème personnalisé pour WordPress, y compris la création du menu de registration des fichiers, de la barre latérale, ainsi que le chargement sécurisé des ressources. L’essentiel de cette procédure réside dans la compréhension et la mise en œuvre des structures de templates et du système de hooks de WordPress.

Vous n’êtes plus simplement un utilisateur de ces thèmes, mais leur créateur. Une fois que vous maîtrisez ces connaissances de base, vous pourrez continuer à vous spécialiser dans l’étude de fichiers de modèles plus complexes. single.php、page.php、archive.phpDécouvrez davantage de possibilités avec les boucles dans WordPress et faites usage des balises conditionnelles (comme…) is_page(), is_single()Permettre un contrôle plus précis des pages. Le monde du développement de thèmes est vaste et intéressant ; ce n’est qu’un point de départ solide.

FAQ Foire aux questions

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

需要具备 PHP 的基础知识，但无需达到精通的水平。你至少需要理解变量、数组、条件语句（if/else）、循环（while/foreach）以及函数的基本概念。因为 WordPress 主题开发大量使用了其内置的 PHP 函数（模板标签）和钩子系统，所以学习重点在于理解 WordPress 特有的 PHP 函数如何使用，而非从头编写复杂的 PHP 算法。

Pourquoi faut-il absolument utiliser les fonctions `wp_head()` et `wp_footer()` ?

Ces deux fonctions font partie des hooks centraux de WordPress.wp_head() 位于 </head> Avant les balises, cela permet au noyau de WordPress, aux plugins ainsi qu’à votre thème personnel d’insérer le code nécessaire dans la partie supérieure de la page, tel que des liens vers des feuilles de style CSS, des métatags, des variables JavaScript, etc.wp_footer() 位于 </body> Avant les balises, on utilise souvent du code d’analyse ou des fichiers JavaScript chargés de manière différée. Leur absence peut empêcher de nombreux plugins de fonctionner correctement, et certaines fonctionnalités de WordPress elles-mêmes peuvent également présenter des problèmes.

Comment ajouter un modèle de page à mon thème ?

Créez un nouveau fichier PHP, par exemple… page-fullwidth.phpEn haut de ce fichier, vous devez ajouter un bloc de commentaires contenant le nom d'un modèle spécifique. Par exemple :

<?php
/**
 * Template Name: 全宽页面
 * Description: 一个没有侧边栏的页面模板
 */

Ensuite, vous pouvez écrire des éléments différents dans ce fichier. page.php La structure HTML correspondante, par exemple avec des omissions… get_sidebar() Après avoir effectué l’appel et enregistré les modifications, lorsque vous modifierez la page depuis l’administration de WordPress, l’option “Page à largeur complète” apparaîtra dans la liste déroulante “Modèle” sous “Propriétés de la page”. Vous pourrez alors la sélectionner.

Quelles sont les meilleures pratiques pour gérer le CSS et le JavaScript dans le cadre du développement de thèmes ?

La meilleure pratique consiste à utiliser les outils proposés par WordPress. wp_enqueue_style() et wp_enqueue_script() Fonction, dans… functions.php Monté sur… wp_enqueue_scripts Des « hooks » sont utilisés pour ajouter des ressources. Cette approche permet : 1) de gérer correctement les dépendances (par exemple, si votre script nécessite jQuery) ; 2) d’éviter le chargement répété des mêmes ressources ; 3) de faciliter la gestion des plugins et d’autres codes thèmes ; 4) de respecter les normes de codage de WordPress. Il est absolument conseillé d’éviter d’utiliser directement des ressources dans les fichiers de template. <link> Ou <script> Ressources avec des étiquettes codées de manière fixe (hard-coded).

Comment puis-je mettre en place le support multilingue (internationalisation) pour mon thème ?

Vous devez faire deux choses. Tout d’abord, style.css Lors de la traduction des commentaires en tête et des appels de texte, veillez à utiliser le bon “ domaine de texte ” (Text Domain). Comme indiqué dans les guides, assurez-vous de bien définir ce domaine de texte. Text Domain: my-first-themeDeuxièmement, functions.php Dans tous les fichiers de modèle, encadrez tous les textes de l’interface utilisateur qui doivent être traduits à l’aide des fonctions de traduction de WordPress. La méthode la plus couramment utilisée est… __()(Retourner la chaîne traduite) et _e()(Réaffiche directement la chaîne de caractères traduite.) Par exemple :<?php _e( ‘Hello World’, ‘my-first-theme’ ); ?>Ensuite, vous pouvez utiliser des outils tels que Poedit pour générer le contenu souhaité. .pot Fichiers de modèle, destinés aux traducteurs pour créer des versions dans différentes langues. .po et .mo Les documents.