Guichet unique pour les débutants en développement de thèmes WordPress : construire votre premier thème de A à Z.

Préparation de l’environnement et concepts de base

Avant de commencer à écrire du code, vous aurez besoin d’un environnement de développement local adapté. Il est recommandé d’utiliser des paquets logiciels de serveur local intégrés, tels que Local by Flywheel, XAMPP ou MAMP. Les fichiers fondamentaux de WordPress doivent déjà avoir été installés sur votre site local.

Toute thématique WordPress doit contenir deux fichiers de base :style.css et index.php。style.css Ce n’est pas seulement un fichier de style, mais aussi l“” identité » d’un thème, qui communique les informations relatives à ce thème à WordPress grâce à une en-tête de fichier spéciale (Theme Header).index.php Il s’agit du fichier de modèle par défaut pour le thème, et il est chargé de gérer toutes les demandes de page pour lesquelles aucun modèle spécial n’a été spécifié.

Un thème typique suit une structure hiérarchique claire dans son arborescence. Le fichier de modèle principal se trouve généralement directement dans le répertoire racine du thème, tandis que les ressources CSS, JavaScript et images sont stockées dans des dossiers distincts. /css、/js et /images Dans de tels sous-dossiers, pour des sujets plus complexes, vous pourriez également trouver d’autres éléments. /template-parts Le répertoire est utilisé pour stocker des fragments de modèles réutilisables./inc Le répertoire est utilisé pour stocker les fichiers contenant des améliorations fonctionnelles.

Lectures recommandées Le guide ultime du développement de thèmes WordPress : créer un modèle personnalisé de A à Z.。

Comprendre les niveaux de hiérarchie des templates WordPress

WordPress utilise un système intelligent appelé “ hiérarchie des templates ” (Template Hierarchy) pour déterminer quel fichier de template utiliser sur une page donnée. Ce système constitue la logique fondamentale du développement de thèmes (templates).

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

Par exemple, lorsque l'utilisateur visite la page d’accueil du blog, WordPress vérifie d’abord s’il existe un fichier nommé… front-page.php Le fichier en question. S’il n’existe pas, il continuera à le rechercher. home.phpSi cela ne fonctionne toujours pas, il finira par revenir à l’utilisation des paramètres par défaut. index.phpPour un article individuel, l’ordre de recherche dans WordPress est le suivant :single-{post-type}-{slug}.php -> single-{post-type}.php -> single.php -> singular.php -> index.php。

Comprendre et utiliser correctement les niveaux de templates vous permet de créer des layouts et des designs très personnalisés pour différents types de pages (comme des articles de blog, des pages statiques, des archives de catégories, des pages de résultats de recherche, etc.), sans avoir à écrire de logiques de conditionnement complexes.

Déclaration d'information thématique

style.css Le début du fichier doit contenir une section d’informations de tête au format commentaire CSS, utilisée pour définir les métadonnées du thème. Voici un exemple minimalisé :

/*
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 ces éléments, le “ Text Domain ” est utilisé pour l’internationalisation et constitue un identifiant obligatoire lors des appels aux fonctions de traduction ultérieurs. La partie en tête de ce fichier est la seule information nécessaire pour que WordPress reconnaisse et active votre thème.

Lectures recommandées Du niveau débutant au niveau expert, le développement de thèmes WordPress : un guide essentiel pour créer un site web personnalisé.。

Créer le fichier de modèle principal

Commençons par construire à partir du fichier de modèle le plus important. Tout d’abord, index.php La structure de base est définie dans le code source. Un fichier de modèle standard doit contenir des références à la partie en-tête, à la zone principale du contenu, à la barre latérale et au pied de page.

Les fichiers de templates de base contiennent généralement les appels aux fonctions centrales de WordPress suivants :get_header()、get_footer()、get_sidebar() aussi get_template_part()Ces fonctions chargent les fichiers de modèle correspondants, permettant ainsi de modulariser la structure de la page.

Créer un modèle de tête (header template)

header.php Le fichier contient le contenu qui apparaît en haut de chaque page. Il doit au moins contenir la déclaration du type de document HTML5. <!DOCTYPE html>、<head> Débutant de la zone et du corps de la page. <body> et <header> Tags.

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

Dans <head> Dans cette région, il est de la plus haute importance d’utiliser… wp_head() Un « crochet » (hook) est un mécanisme permettant au noyau de WordPress, aux plugins, ainsi qu’à votre thème, d’insérer du code nécessaire dans la partie supérieure de la page (le « header »), comme des liens vers les feuilles de style, des métatags et des scripts. Voici un exemple de modèle de fichier de tête (header template) simple :

<!DOCTYPE html>
<html no numeric noise key 1006>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
</head>
<body no numeric noise key 1003>

<header id="masthead" class="site-header">
    <h1 class="site-title"><a href="/fr/</?php echo esc_url( home_url( '/' ) ); ?>"></a></h1>
</header>

body_class() La fonction génère une série de noms de classes CSS dépendant du type de la page actuelle, ce qui facilite considérablement le contrôle des styles.

Créer le boucle principale et l'affichage du contenu.

WordPress utilise ce qu’on appelle le “ The Loop ” pour parcourir et afficher la liste d’articles correspondant à la requête actuelle. Ce bouclage constitue la partie la plus essentielle des fichiers de template et apparaît généralement… index.php、single.php Ou archive.php Au milieu.

Lectures recommandées Maîtriser le développement de thèmes WordPress : guide complet de conception et d’application en partant de zéro。

Une structure de boucle principale typique est la suivante :

<article id="post-<?php the_ID(); ?>" no numeric noise key 1007>
            <h2><a href="/fr/</?php the_permalink(); ?>"></a></h2>
            <div class="entry-content">
                
            </div>
        </article>
    endwhile ; ?
    <p></p>

À l’intérieur d’un boucle, il est possible d’utiliser une série de balises de modèle commençant par “ the_ ”. the_title()、the_content()、the_excerpt() et the_post_thumbnail()Pour afficher les différentes parties de l'article.

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

Ajouter des styles et des fonctionnalités

L’aspect visuel des thèmes est contrôlé par le CSS. En plus de… style.css En plus d’écrire les styles directement dans le code, une approche plus professionnelle consiste à utiliser des outils ou des frameworks dédiés à la gestion des styles. functions.php Les fichiers sont utilisés pour mettre en file d’attente le chargement des feuilles de style et des scripts, afin de garantir des dépendances et un ordre de chargement corrects.

functions.php Ce fichier est ce que l’on appelle un “ fonctionnalisateur ” (function enhancer) pour votre thème. Il s’agit pas d’un fichier de modèle, mais plutôt d’un fichier PHP qui est chargé automatiquement lors de l’initialisation du thème. Il est utilisé pour définir des fonctions, des classes, des hooks et des filtres.

Introduire correctement les styles et les scripts

Vous devriez utiliser… wp_enqueue_style() et wp_enqueue_script() Des fonctions sont disponibles pour ajouter des ressources. Ces fonctions doivent être mises en œuvre (« montées ») sur le système ou l’environnement approprié. wp_enqueue_scripts Cette action est liée à un crochet spécifique. L’avantage de cette approche est que WordPress peut gérer les ressources de manière centralisée, évitant ainsi des chargements redondants et des conflits de dépendances.

function my_first_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), '1.0' );
    // 加载一个自定义的 JavaScript 文件
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Le menu d'inscription et la barre latérale.

Les menus et les barres latérales (zones d’outils) de WordPress doivent d’abord être configurés avant de pouvoir être utilisés. functions.php Il faut d’abord effectuer une “ inscription ” avant de pouvoir afficher le contenu dans le fichier de modèle correspondant.

utiliser register_nav_menus() Fonction pour enregistrer l'emplacement des plats :

function my_first_theme_setup() {
    register_nav_menus( array(
        'primary' => __( 'Primary Menu', 'my-first-theme' ),
        'footer'  => __( 'Footer Menu', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

Ensuite, dans header.php Dans ce cas, vous pouvez utiliser wp_nav_menu() Une fonction est utilisée pour afficher le menu principal.

utiliser register_sidebar() Fonction pour enregistrer une zone d'outils :

function my_first_theme_widgets_init() {
    register_sidebar( array(
        'name'          => __( 'Main Sidebar', 'my-first-theme' ),
        'id'            => 'sidebar-1',
        'description'   => __( 'Add widgets here.', 'my-first-theme' ),
        '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' );

Ensuite, dans sidebar.php Dans ce document, il est utilisé… dynamic_sidebar() Une fonction est utilisée pour appeler cette zone.

Test de thème et publication

Une fois le développement terminé, il est indispensable de procéder à des tests approfondis. Cela inclut la vérification de l’affichage du thème dans différents navigateurs (Chrome, Firefox, Safari, Edge) ainsi que sur des appareils de tailles variées (ordinateurs de bureau, tablettes, smartphones). Il faut s’assurer que tous les liens fonctionnent correctement, que les formulaires sont opérationnels, et que les menus répondent correctement sur les écrans de petite taille.

Activer le mode de débogage

Pendant le processus de développement, il est fortement conseillé d’activer le mode de débogage de WordPress. Cela vous permettra de détecter rapidement les erreurs, les avertissements et les notifications PHP. wp-config.php Dans le fichier, trouvez et modifiez la ligne suivante :

define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true ); // 将错误记录到 /wp-content/debug.log 文件
define( 'WP_DEBUG_DISPLAY', false ); // 不要在页面上显示错误

ouvre WP_DEBUG_LOG Il est possible d’enregistrer les informations d’erreur dans un fichier de journal, afin d’éviter d’exposer directement des informations sensibles aux visiteurs du site web.

Vérifier les normes relatives aux sujets.

Avant de le publier ou de l’utiliser, votre thème doit respecter autant que possible les « Normes de développement de thèmes WordPress ». Cela inclut, mais ne se limite pas à : veiller à ce que toutes les données affichées sur la page soient correctement échappées (en utilisant les mécanismes appropriés de traitement des données). esc_html()、esc_url() Fonctions telles que…), tout le texte pouvant être traduit est utilisé. __() Ou _e() Les fonctions sont encapsulées, et le code thème ne contient aucune adresse URL codée en dur.

Vous pouvez utiliser l’extension officielle “ Theme Check ” pour effectuer des vérifications automatiques de conformité sur votre thème. Celle-ci analysera votre code et vous indiquera les problèmes potentiels, les vulnérabilités de sécurité ou les non-conformités par rapport aux normes en vigueur.

Prêt à publier.

Lorsque le développement, les tests et l’examen du thème sont terminés, vous pouvez choisir de le publier dans le répertoire des thèmes de WordPress.org, ou de le mettre en pack pour son utilisation par des particuliers ou des clients. Le paquet de publication ne doit contenir que les dossiers et les fichiers indispensables au thème, et tous les fichiers liés au système de contrôle de version doivent être supprimés. .gitLes fichiers de configuration des outils de développement et les fichiers de sauvegarde doivent également être pris en compte. Assurez-vous également que… style.css Les informations thématiques contenues sont complètes et précises, et une image claire a été préparée. screenshot.png(1200 × 900 pixels) En tant que miniature de thème.

résumés

Depuis la création de celui qui contient… style.css et index.php Commencer par le dossier de base, passer à la compréhension de la structure des templates, créer les fichiers de template principaux, utiliser le cycle principal pour afficher le contenu, puis… functions.php Ajouter des styles, des scripts et des fonctionnalités, puis effectuer des tests rigoureux ainsi que des vérifications de normalisation : voilà la procédure complète pour créer un thème WordPress de base. Ce processus vous permet non seulement d’obtenir un thème utilisable, mais surtout de développer une compréhension approfondie de l’architecture des thèmes WordPress. En partant de là, vous pourrez explorer des thèmes plus avancés, tels que les types d’articles personnalisés, l’API de personnalisation des thèmes, ou le support de l’éditeur de blocs (Gutenberg), et devenir progressivement un développeur de thèmes WordPress professionnel.

FAQ Foire aux questions

Un thème WordPress nécessite au minimum plusieurs fichiers pour fonctionner correctement. Voici les types de fichiers essentiels :

Un thème qui peut être reconnu et activé par WordPress nécessite au minimum deux fichiers :style.css et index.phpParmi ceux-ci,style.css Il est obligatoire d’inclure les commentaires de tête contenant les informations thématiques correctes.

Pourquoi mon style personnalisé n’est pas appliqué ?

Cela est généralement dû à un manque de priorité des sélecteurs CSS ou à un chargement incorrect du fichier de style. Tout d’abord, vérifiez les outils de développement du navigateur pour vous assurer que votre fichier de style a été chargé avec succès et que vos règles CSS n’ont pas été supprimées par des règles à priorité plus élevée. Ensuite, assurez-vous que vous avez utilisé la bonne méthode pour appliquer vos styles. functions.php Dans… wp_enqueue_style() Il s’agit d’utiliser une fonction pour charger les styles, plutôt que de les écrire directement dans le HTML. <link> Tags.

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

Créez un nouveau fichier PHP, par exemple… page-fullwidth.phpEn haut de ce fichier, ajoutez le commentaire PHP suivant pour déclarer le nom du template :<?php /* Template Name: 全宽页面 */ ?>Ensuite, vous pouvez écrire du code dans ce fichier pour créer une page qui diffère du modèle de page par défaut. page.php Le layout et le code correspondant à ce nouveau modèle peuvent être utilisés pour créer ou modifier des pages. Vous pouvez sélectionner ce modèle dans la section “ Propriétés de la page ”.

Quelle est la différence entre le fichier functions.php et les plugins ?

functions.php Cela fait partie du thème actuel, et sa fonction est étroitement liée à celui-ci. Si vous changez de thème,functions.php Le code présent dans le document ne fonctionnera plus. Les fonctionnalités fournies par les plugins sont indépendantes des thèmes utilisés ; elles sont activées dès que le plugin est installé et fonctionnent quel que soit le thème choisi. En général, les fonctionnalités qui sont étroitement liées à l’apparence visuelle du site sont intégrées dans les thèmes, tandis que les fonctionnalités plus générales et indépendantes sont plus adaptées à être mises en forme sous forme de plugins.

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

Vous devez effectuer deux choses : préparer et charger les fichiers de traduction. Tout d’abord, dans le code, pour toutes les chaînes de caractères destinées aux utilisateurs (comme…) ('Read More', 'my-first-theme')Tout doit utiliser des outils ou des méthodes similaires à… () Ou _e() Emballer une telle fonction de traduction, et associer le deuxième paramètre (le champ de texte) avec… style.css La déclaration du “ Text Domain ” est cohérente avec celle indiquée précédemment. Ensuite, utilisez des outils tels que Poedit pour créer le contenu nécessaire. .pot Fichiers de modèle (template files), et traduire pour générer les correspondants. .po et .mo Fichiers. Enfin, functions.php Utilisé dans load_theme_textdomain() Une fonction est utilisée pour charger les fichiers de traduction.