Guide d’initiation au développement de thèmes pour WordPress : Construisez votre premier thème personnalisé à partir de zéro

Commencer par le développement de thèmes pour WordPress signifie que vous n’êtes plus limité à l’utilisation de thèmes prêts à l’emploi, mais que vous pouvez créer un design et des fonctionnalités de site web uniques en fonction de vos besoins spécifiques. Ce guide vous guidera à travers les étapes essentielles pour créer un thème personnalisé basique mais complet, couvrant tout le processus, de la préparation de l’environnement à l’organisation des fichiers de modèle.

La structure de base et les fichiers d'un thème WordPress

Un thème WordPress le plus simple nécessite seulement deux fichiers pour être reconnu par le système d’administration. Comprendre la fonction de ces fichiers essentiels est la première étape du développement.

Fichiers de définition des styles et des informations pour le thème

Le premier document nécessaire est :style.cssCe n’est pas seulement un fichier de style pour le thème, mais aussi un “ fichier d’en-tête d’information ” (header file). Le bloc de commentaires en haut de ce fichier définit les métadonnées du thème. Sans ces informations, WordPress ne sera pas en mesure de reconnaître votre thème.

Lectures recommandées De l’initiation à la maîtrise : Guide complet de développement de thèmes WordPress de niveau professionnel。

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

En dessous du bloc de commentaires, vous pouvez ajouter des règles de style, tout comme vous le feriez pour du CSS classique.

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

Template d'indexation centralisé pour le thème

Le deuxième document nécessaire est :index.phpC’est le fichier de modèle par défaut pour le thème. Lorsque WordPress ne trouve pas de modèle plus spécifique…single.phpOupage.phpLorsque cela est nécessaire, il est utilisé pour rendre la page. Le plus simple exemple…index.phpIl est possible de ne contenir que des boucles qui appellent les articles du blog.

En plus de ces deux fichiers, un thème complet et fonctionnel comprend généralement également :header.php(Titre de la page)footer.php(Pied de page)functions.php(Fonctionnalités et fonctions)single.php(Page de l’article) etpage.php(Page) etc.

Créer un environnement de développement local

Avant de commencer à coder, il est essentiel de mettre en place un environnement de développement local. Cela vous permet de tester et de déboguer vos programmes sans affecter le site web en ligne.

Utiliser un logiciel de serveur local

Il est recommandé d’utiliser des paquets logiciels de serveur locaux intégrés, tels que Local by Flywheel, XAMPP ou MAMP. Ces outils installent Apache/Nginx, PHP et MySQL en un seul clic et offrent des interfaces de gestion intuitives. Par exemple, Local by Flywheel est optimisé spécialement pour WordPress et permet de créer des sites rapidement ainsi que de configurer des certificats SSL.

Lectures recommandées Guichet unique pour le développement de plugins WordPress : créer des extensions professionnelles à partir de zéro.。

Installer WordPress et un éditeur de code

Dans l’environnement du serveur local, téléchargez le dernier paquet d’installation de WordPress et suivez les instructions pour l’installer. Vous aurez également besoin d’un éditeur de code performant. Visual Studio Code est une excellente option, car il dispose de nombreuses extensions utiles telles que PHP Intelephense (suggestions intelligentes de code), WordPress Snippet (fragments de code prêts à l’emploi) et Live Server (prévisualisation en temps réel), ce qui améliorera considérablement votre efficacité de développement.

Placez votre dossier thématique (par exemple, nommé “ my-first-theme ”) dans le répertoire d’installation de WordPress./wp-content/themes/Dans, et placez-y.style.cssetindex.phpVous pourrez alors le voir et l’activer dans l’onglet “ Apparence ” → “ Thèmes ” du panneau de contrôle de WordPress.

Créer le fichier de modèle principal pour le thème

Le thème organise la logique d'affichage des différentes pages à l’aide d’une série de fichiers de modèle. Comprendre la structure hiérarchique des modèles est essentiel pour construire un thème efficace.

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

Créer des modèles pour la partie en-tête et la partie en pied de la page.

Généralement, nous séparons le contenu de la partie supérieure et de la partie inférieure d’un site web dans des fichiers distincts afin de pouvoir les réutiliser.header.phpLe fichier doit contenir la tête du document HTML (HTML header).Région (appel)wp_head()Les fonctions, ainsi que les parties communes en haut du site web (comme le logo et le menu de navigation).

<!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 id="masthead">
        <h1><a href="/fr/</?php echo esc_url( home_url( '/' ) ); ?>"></a></h1>
    </header>

De même, pour créer…footer.phpContient le contenu du pied de page et effectue l’appel correspondant.wp_footer()Fonction. Ensuite…index.phpDans ce document, il est utilisé…get_header()etget_footer()Des fonctions sont utilisées pour les introduire.

Réaliser la boucle de lecture des articles et l'affichage de leur contenu.

Le noyau de WordPress est ce qu’on appelle “ The Loop ” (La Boucle). Celle-ci sert à vérifier s’il existe des articles, et si oui, à traiter chacun d’entre eux successivement.index.phpDans ce contexte, une structure de boucle de base est la suivante :

Lectures recommandées Comment développer un thème WordPress personnalisé : Guide de l'initiation à la maîtrise。

<?php
if ( have_posts() ) :
    while ( have_posts() ) : the_post(); ?>
        <article id="post-<?php the_ID(); ?>">
            <h2><a href="/fr/</?php the_permalink(); ?>"></a></h2>
            <div class="entry-content">
                
            </div>
        </article>
    &lt;?php endwhile;
else :
    echo &#039;<p>暂无文章。</p>';
endif;
?&gt;

Il est utilisé ici.the_title()、the_permalink()etthe_excerpt()Des balises de modèle sont utilisées pour afficher les informations de l’article.

Améliorer un thème à l’aide de fichiers de fonctionnalités

functions.phpLe fichier constitue le “ centre de contrôle ” de votre thème, permettant d’ajouter des fonctionnalités, de régister des menus, des barres latérales, ainsi que des feuilles de style et des scripts.

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

Menus de navigation et barres latérales enregistrés.

Afin que le thème prenne en charge la gestion des menus visuels depuis l’arrière-plan, vous devez…functions.phpEnregistrez l'emplacement de l'unité de cuisine. Utilisez-le.register_nav_menus()La fonction est utilisée pour effectuer cette tâche.

function my_first_theme_setup() {
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

Par la suite, vous pourrez utiliser le fichier de modèle (par exemple…)header.phpUtilisé dans…)wp_nav_menu( array( 'theme_location' => 'primary' ) )Pour afficher ce menu.

Introduire correctement les styles et les scripts

Ne passez jamais directement par…<link>Ou<script>Les ressources sont codées de manière fixe (hard-coded) dans les étiquettes. Il conviendrait d’utiliser une approche plus flexible et évitable.wp_enqueue_style()etwp_enqueue_script()Fonction, et l'installerwp_enqueue_scriptsC’est sur ce crochet que cela se passe. Cela assure que les dépendances soient correctement gérées et évite le chargement répété des ressources.

function my_first_theme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );
    // 引入自定义的JavaScript文件
    wp_enqueue_script( 'custom-js', get_template_directory_uri() . '/js/script.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

résumés

Depuis la création du document contenant les en-têtes d'informations de base…style.csset les boucles de baseindex.phpVous avez déjà fait le premier pas dans le développement de thèmes pour WordPress. En décomposant les parties supérieure et inférieure de la page (le « header » et le « footer »), en créant les fichiers de templates de base, et en…functions.phpEn ajoutant des fonctionnalités et des ressources de manière systématique, vous pouvez progressivement construire un thème personnalisé dont la structure est claire et facile à maintenir. N’oubliez pas que le développement de thèmes est un processus itératif : commencez par répondre aux besoins de base, puis continuez à l’élargir et à le perfectionner selon vos besoins.

FAQ Foire aux questions

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

Oui, PHP est la langue de programmation de base de WordPress. Pour développer des thèmes de manière approfondie, il est essentiel de maîtriser la syntaxe de base de PHP, les fonctions de base de WordPress (les balises de template), ainsi que ses mécanismes de hooks et de boucles (loops). Bien que vous puissiez commencer en modifiant le CSS et les templates existants, les fonctionnalités personnalisées ne sont possibles qu’avec PHP.

Puis-je tester le thème sans modifier le code ?

Il est fortement conseillé de développer et de tester les thèmes dans un environnement de développement local ou dans un environnement temporaire/de test pour le site web en ligne. Il est absolument interdit de développer de nouveaux thèmes ou de procéder à des modifications majeures directement sur un site web qui est déjà en service, car cela pourrait provoquer des dysfonctionnements temporaires ou des problèmes d’affichage.

Pourquoi les modifications apportées à mon thème ne sont-elles pas visibles en arrière-plan (c’est-à-dire dans l’interface de gestion du site) ?

Veuillez vérifier d’abord si le dossier thématique a été placé correctement./wp-content/themes/Dans le répertoire. Ensuite, confirmez.style.cssLe format de la section d’annotations contenant les informations thématiques en haut du fichier est-il correct ? Tout erreur de saisie ou l’absence de points-virgules peut entraîner un échec de la reconnaissance. Enfin, veillez à…index.phpLe fichier existe.

Comment créer des layouts différents pour différents types de pages ?

WordPress suit un ensemble de règles relatives à la hiérarchie des templates. Par exemple, pour créer un layout unique pour une page d’article de blog, vous pouvez…single.phpFichier : Pour créer un layout pour des pages statiques, il suffit de…page.phpLorsque l'on accède à la page correspondante, WordPress utilise automatiquement ces fichiers de template plus spécifiques en priorité, plutôt que le template par défaut.index.php。