Guide de début pour le développement de thèmes WordPress : Créer votre propre site web personnalisé à partir de zéro

Concepts de base du développement de thèmes pour WordPress

Avant de commencer à écrire du code, il est essentiel de comprendre la structure de base d’un thème WordPress. Un thème est essentiellement un dossier qui contient une série de fichiers qui déterminent ensemble l’apparence et certaines fonctionnalités d’un site web. Le système WordPress affiche le contenu des pages web en lisant ces fichiers.

Un thème de base nécessite au moins deux fichiers :style.cssetindex.phpParmi ceux-ci,style.cssNon seulement ces fichiers sont responsables de la définition des styles, mais le bloc de commentaires situé en tête de ces fichiers contient également des métadonnées sur le thème, telles que le nom du thème, l’auteur, la description et le numéro de version. C’est cet ensemble d’informations qui sert de point de départ pour que WordPress puisse reconnaître et utiliser le thème.

WordPress utilise un système de hiérarchie des templates pour déterminer quel fichier de template doit être utilisé pour chaque page. Par exemple, lorsqu’on accède à un article particulier, WordPress cherche en premier lieu…single.phpLors de la visite de la page listant les articles du blog, des recherches sont effectuées…index.phpOuhome.phpLors de la visite d'une page, il est nécessaire de rechercher…page.phpComprendre ces relations hiérarchiques vous permet de coder au bon endroit.

Lectures recommandées De zéro à un : Détail des technologies clés et meilleures pratiques pour la création complète de sites web modernes。

Rôle des fichiers clés du thème

functions.phpLe fichier est le cœur des fonctionnalités d’un thème. Il n’est pas obligatoire, mais la plupart des thèmes modernes l’utilisent. Vous pouvez y ajouter des fonctionnalités de support pour le thème, des menus de registration et des barres latérales, des scripts et des feuilles de style, ainsi que des fonctions personnalisées. Ce fichier est chargé automatiquement lors de l’initialisation du thème et constitue un élément essentiel pour étendre les capacités de celui-ci.

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

Un autre fichier clé est…header.phpIl contient généralement une déclaration du type de document, les sections relatives aux régions (qui permettent d’incorporer des fichiers CSS et JS), ainsi que les éléments communs à la tête de la page web.footer.phpCela inclut le contenu commun du pied de page ainsi que les balises de finification. Cela est possible grâce à des fonctions de WordPress.get_header()etget_footer()Vous pouvez facilement les intégrer dans d’autres fichiers de modèle, ce qui permet de maintenir le code modulaire et facile à entretenir.

Installer un environnement de développement local et créer la structure d'un thème

Avant de déployer un thème sur un serveur en ligne, il est le moyen le plus efficace et le plus sûr de créer un environnement de développement local. Vous pouvez utiliser des outils tels que XAMPP, MAMP, Local by Flywheel ou Docker pour installer rapidement Apache, MySQL et PHP sur votre ordinateur, et ainsi exécuter WordPress.

Une fois que l’environnement est prêt, vous pouvez commencer à créer votre premier thème. Pour ce faire, entrez dans le répertoire d’installation de WordPress.wp-content/themesFichiers de thème. Créez un nouveau dossier ici et nommez-le d’après le nom de votre thème, par exemple “ my-first-theme ”. Tous les fichiers de thème seront placés dans ce dossier.

Ensuite, créez les fichiers de base mentionnés ci-dessus. Pour commencer…style.cssLa tête du fichier doit contenir des informations spécifiques relatives aux feuilles de style.

Lectures recommandées Créer un site web professionnel : La guida complète à l'élaboration et à la personnalisation de thèmes WordPress。

/*
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
License: GPL v2 or later
Text Domain: my-first-theme
*/

Ensuite, créez la version la plus basique possible.index.phpLe fichier peut être très simple à l’origine ; il sert uniquement à garantir que le thème puisse être reconnu et activé par WordPress.

<!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>
    <h1>Bonjour, développement de thèmes WordPress !</h1>
    
</body>
</html>

À ce stade, connectez-vous à l’administration de WordPress et allez à la page “ Apparence ” → “ Thèmes ”. Votre thème devrait déjà y être listé. Activez-le, puis visitez la page d’accueil du site pour voir les informations simples affichées par le code précédent. Vous venez ainsi de créer votre premier thème vide (sans aucune fonctionnalité prédefinie).

Construire des modèles de thèmes et des boucles

La tâche principale d’un thème est de présenter le contenu, et la manière dont ce contenu est affiché sur WordPress repose sur les “ boucles ”. Les boucles sont des structures de code PHP utilisées dans WordPress pour récupérer des articles (y compris des pages et des types d’articles personnalisés) à partir de la base de données et pour les afficher sur la page.

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

Comprendre et mettre en œuvre le boucle principale

La structure de boucle la plus basique est présentée ci-dessous et est généralement placée…index.phpOusingle.phpDans les fichiers de modèle :

<!-- 在这里输出每篇文章的内容 -->
        <h2></h2>
        <div></div>
    endwhile ; ?
    <p>Aucun article n’a été trouvé.</p>

have_posts()La fonction vérifie s'il y a des articles à afficher.the_post()La fonction définit alors les données de l’article actuel et les rend disponibles pour les balises de template (comme…)the_title()、the_content()Appel.

Créer des fichiers de modèles fréquemment utilisés

Afin que le thème puisse gérer de manière professionnelle les différentes pages, vous devez créer une série de fichiers de modèle. En plus de…index.phpCe modèle de retrait final devrait également inclure la création des éléments suivants :

Lectures recommandées Guide complet pour le développement de thèmes WordPress : De l'apprentissage de base à la maîtrise pratique。

• header.phpExtrait du code de la partie commune (header).
• footer.phpExtrait du code commun de la partie inférieure de la page.
• single.phpUtilisé pour afficher un seul article.
• page.phpUtilisé pour afficher une seule page.
• archive.phpUtilisé pour afficher les pages d'archive contenant des informations sur les catégories, les tags, les auteurs, etc.

Ensuite, vous devez réstructurer le code.index.phpUtilisez les fonctions de WordPress pour intégrer des éléments modulaires.

<main>
        
            <article>
                <h2><a href="/fr/</?php the_permalink(); ?>"></a></h2>
                
            </article>
        
    </main>

Ainsi, la partie supérieure et la partie inférieure de la page sont gérées par des fichiers indépendants, tandis que le fichier de modèle principal se concentre uniquement sur la logique de contenu propre à cette page. La structure est claire et facile à maintenir.

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

Utiliser le fichier functions.php pour améliorer les fonctionnalités du thème.

functions.phpIl s’agit de la “ Boîte à outils ” relative à votre thème. Vous pouvez y ajouter du code pour modifier et étendre de manière sûre les fonctionnalités de base de WordPress, sans avoir à modifier les fichiers du noyau du système.

Les fonctionnalités prises en charge par l’enregistrement d’un sujet :

Par l’intermédiaire de…add_theme_support()Vous pouvez déclarer les différentes fonctionnalités que votre thème prend en charge. Par exemple, vous pouvez permettre à votre thème d'afficher des images représentatives des articles, un logo personnalisé, ainsi qu'un résumé de l'article.

function my_first_theme_setup() {
    // 让主题支持文章和页面的特色图像功能
    add_theme_support( 'post-thumbnails' );

// 支持自定义Logo
    add_theme_support( 'custom-logo', array(
        'height'      => 100,
        'width'       => 400,
        'flex-height' => true,
        'flex-width'  => true,
    ) );

// 支持文章格式（可选）
    add_theme_support( 'post-formats', array( 'aside', 'gallery', 'quote' ) );

// 为文章和页面开启HTML5标记支持
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

Notez que nous avons monté la fonction.after_setup_themeCet événement se déclenche dans un « hook » spécifique. Il s’agit d’un hook standard exécuté par WordPress après le chargement d’un thème, et c’est le moment idéal pour effectuer l’initialisation du thème.

Menu de registration et scripts de style

Définition de l'emplacement des éléments de navigation dans le menu d'enregistrement, permettant aux utilisateurs de gérer le menu depuis l'onglet “ Apparence ” -> “ Menu ” en arrière-plan.

function my_first_theme_menus() {
    register_nav_menus(
        array(
            'primary' => __( '主导航菜单', 'my-first-theme' ),
            'footer'  => __( '底部菜单', 'my-first-theme' ),
        )
    );
}
add_action( 'init', 'my_first_theme_menus' );

Dans le fichier de template, vous pouvez utiliser…wp_nav_menu( array( ‘theme_location’ => ‘primary’ ) )Pour afficher ce menu.

Enfin, il est essentiel d’incorporer correctement les fichiers CSS et JavaScript ; c’est une pratique recommandée.

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-script’, get_template_directory_uri() . ‘/js/script.js’, array(‘jquery’), ‘1.0’, true );
}
add_action( ‘wp_enqueue_scripts’, ‘my_first_theme_scripts’ );

utiliserwp_enqueue_style()etwp_enqueue_script()Fonction, et l'installerwp_enqueue_scriptsL’utilisation de hooks est la méthode officiellement recommandée par WordPress. Cela permet de gérer les dépendances, d’éviter les chargements redondants et de garantir la compatibilité, notamment dans des environnements tels que les plugins.

résumés

Depuis la création d’un élément contenant…style.cssetindex.phpCommencer par créer des dossiers, puis comprendre les niveaux des modèles et le mécanisme de “ répétition ” (ou de boucle), et enfin apprendre à les utiliser efficacement.functions.phpVous avez ajouté de nombreuses fonctionnalités à votre thème, ce qui vous a permis de suivre les étapes essentielles du développement de thèmes WordPress. La clé du développement de thèmes réside dans une approche modulaire : il s’agit de séparer les éléments répétitifs (comme le haut de page et le bas de page) en fichiers indépendants.functions.phpCette fonctionnalité permet une gestion centralisée des contenus, et l’organisation de la présentation des informations suit les règles de hiérarchie des templates de WordPress. Une fois que vous maîtrisez ces bases, vous disposez des fondements nécessaires pour créer des sites web personnalisés. Vous pourrez ensuite explorer des fonctionnalités plus avancées telles que les zones d’ajout de plugins, les types d’articles personnalisés, ou l’API du thème (theme customizer), afin de perfectionner vos compétences en développement avec WordPress.

FAQ Foire aux questions

Que faire si la page web ne s’actualise pas immédiatement après avoir modifié le thème ?

Cela est généralement dû au cache du navigateur ou au mécanisme de cache de WordPress. Tout d’abord, essayez de rafraîchir la page de force en utilisant les touches Ctrl+F5 (ou Cmd+Shift+R) dans votre navigateur. Si le problème persiste, vérifiez si vous utilisez des plugins de cache ou un mécanisme de cache au niveau du serveur, et essayez de vider tous les caches. Pour les fichiers CSS et JS,wp_enqueue_styleetwp_enqueue_scriptDans une fonction, il est possible de définir une valeur dynamique pour le paramètre numéro de version (par exemple :time()Il convient d’éviter l’utilisation de la cache pendant le développement, mais de passer à une version numérotée fixe avant le lancement du produit.

Pourquoi mon thème n’apparaît-il pas dans l’arrière-plan (c’est-à-dire dans l’interface de gestion du site) ?

Veuillez vérifier d’abord si votre dossier de thèmes est placé dans le chemin correct.wp-content/themes/Deuxièmement, assurez-vous que…style.cssLe bloc de commentaires en haut du fichier est formaté correctement ; la ligne “ Theme Name: ” est particulièrement essentielle. Vérifiez également que les droits d’accès au dossier thématique ainsi qu’aux fichiers qu’il contient soient bien configurés, et que le serveur web (par exemple Apache) ait les autorisations nécessaires pour lire ces fichiers.

Comment ajouter une barre latérale à mon thème ?

Ajouter une barre latérale se fait en deux étapes. Tout d’abord,functions.phpUtilisé dansregister_sidebar()La fonction permet de régister une ou plusieurs zones pour les gadgets. Ensuite, dans le fichier de template où vous souhaitez afficher la barre latérale…sidebar.phpDans ce cas, utilisezdynamic_sidebar()Il faut créer une fonction pour l’appeler. De plus, vous devez le faire dans le fichier de template principal (par exemple…).index.phpUtilisé dans…)get_sidebar()Pour introduire le modèle de barre latérale.

Lors du développement d'un thème, comment garantir sa compatibilité avec les plugins ?

Respecter les normes de codage de WordPress est essentiel pour garantir la compatibilité du site. Concernant les éléments que les plugins pourraient ajouter, veillez à ce que votre thème les utilise de manière appropriée.wp_head()etwp_footer()Les fonctions sont importantes car de nombreux plugins s’appuient sur ces deux « hooks » (points d’interception dans le code) pour insérer le code nécessaire (par exemple, le code de statistiques, le CSS/JS). De plus, lors de l’affichage du contenu des articles, il est toujours conseillé d’utiliser ces fonctionnalités.the_content()Plutôt que d’accéder directement à la base de données, la fonction applique toutes les modifications apportées par les plugins via le filtre “the_content”.