Partir de zéro : apprenez à développer un thème WordPress personnalisé étape par étape.

Développer un thème personnalisé pour WordPress est la meilleure façon de concrétiser vos idées sur le web et de prendre entièrement le contrôle de l’apparence et des fonctionnalités de votre site. Contrairement aux thèmes prêts à l’emploi, les thèmes personnalisés vous permettent de partir de zéro pour créer un site unique qui répond parfaitement à vos besoins ou à ceux de vos clients. Bien que ce processus puisse sembler intimidant, il peut être mené à bien de manière claire et méthodique en suivant les spécifications officielles de WordPress. Cet article vous guidera pas à pas à travers tout le processus, de la création des fichiers de base à la mise en place des fonctionnalités essentielles de votre thème.

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

Avant d’écrire la première ligne de code, vous avez besoin d’un environnement de développement approprié et d’une planification de projet claire.

Création d'un environnement de développement local

Tout d’abord, vous devez mettre en place un environnement de serveur PHP sur votre ordinateur local. Il est recommandé d’utiliser des paquets intégrés tels que XAMPP, MAMP ou Local by Flywheel. Ces outils permettent d’installer Apache, MySQL et PHP en un seul clic, évitant ainsi des configurations complexes. Prenons l’exemple de XAMPP : après l’installation, vos fichiers de site web se trouveront généralement dans le répertoire d’installation de XAMPP.htdocsDans le dossier. Ici, vous pouvez créer un nouveau dossier, par exemple.my-custom-themeCela deviendra le répertoire racine de votre thème.

Lectures recommandées Apprendre à développer des thèmes WordPress à partir de zéro : un guide essentiel pour créer un site Web personnalisé.。

Planification de la structure du projet thématique

Un thème WordPress standard contient au moins deux fichiers essentiels :style.cssetindex.phpCependant, avant de commencer le projet, il est conseillé de planifier une structure de répertoire claire et extensible. Une structure de thème moderne typique peut ressembler à ceci :

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

my-custom-theme/
├── style.css          // 主样式表，包含主题信息头
├── index.php          // 主模板文件
├── functions.php      // 主题功能与函数文件
├── header.php         // 头部模板
├── footer.php         // 底部模板
├── sidebar.php        // 侧边栏模板
├── page.php           // 页面模板
├── single.php         // 文章页模板
├── archive.php        // 文章归档页模板
├── 404.php            // 404错误页模板
├── search.php         // 搜索结果页模板
├── assets/            // 静态资源目录
│   ├── css/           // 样式文件
│   ├── js/            // 脚本文件
│   └── images/        // 图片资源
└── templates/         // 可选的模板部件目录

Disposer d’une bonne structure facilite l’organisation et la maintenance du code.

Créer le fichier thématique principal.

Ces éléments constituent les fondements de la construction d’un thème. Les en-têtes d’information contenus dans le fichier indiquent à WordPress qu’il s’agit d’un thème valide.

Définir un fichier de style pour le thème

style.cssIl s’agit de l“” identité » du thème, et la section de commentaires en haut (l’en-tête des informations sur le thème) est obligatoire. WordPress utilise ces informations pour reconnaître et afficher votre thème en arrière-plan. Créez-la.style.cssFaites glisser le fichier, puis saisissez le contenu suivant :

/*
Theme Name: 我的自定义主题
Theme URI: https://example.com/my-custom-theme
Author: 你的名字
Author URI: https://yourwebsite.com
Description: 这是一个为了学习从零开始开发而创建的自定义WordPress主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/

Parmi ceux-ci,Text DomainUtilisé pour l’internationalisation (i18n), il s’agit de l’identifiant unique de votre thème, qui correspond généralement au nom du dossier contenant votre thème. Après ce bloc de commentaires, vous pouvez commencer à écrire vos styles CSS.

Lectures recommandées Guide de développement de thèmes WordPress : un tutoriel pratique complet pour passer de débutant à expert.。

Créer des fichiers de modèles de base

index.phpC’est le modèle de retrait par défaut pour toutes les pages. Il est très basique, mais nous pouvons commencer avec une structure HTML simple. Tout d’abord, créons…header.phpCe fichier est utilisé pour stocker la partie en tête des documents (commençant par…)<!DOCTYPE html>Ouvrir<body>La partie concernant les étiquettes (…)footer.phpIl sert à stocker les balises de fermeture ainsi que le contenu du pied de page.

header.phpExemple :

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

Notez que l’utilisation a été prise en compte.wp_head()Les « hooks » sont essentiels au noyau de WordPress, ainsi qu’aux plugins et thèmes, car ils permettent d’ajouter des scripts et des styles.

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

footer.phpExemple :

    <footer>
        <p>©  . Tous droits réservés.</p>
    </footer>
    
</body>
</html>

Il est utilisé ici.wp_footer()Crochet.

Maintenant, le vôtre…index.phpOn peut le rendre très concis :

Lectures recommandées Guichet unique pour le développement de thèmes WordPress : de zéro à un, comment créer un thème de niveau professionnel.。

<main>
    
            <article>
                <h2></h2>
                <div></div>
            </article>
        <p><strong>Cette page n'existe pas !</strong></p>
        <p><p><strong>Désolé, aucun article ne correspond à vos critères.</strong></p></p>
    
</main>

Ce modèle utilise le bouclage de base de WordPress (The Loop) pour afficher la liste des articles.

Intégration de fonctionnalités et de contenu dynamique

Un véritable thème ne se limite pas à des pages statiques ; il doit interagir avec le noyau de WordPress, charger des ressources et mettre en œuvre des fonctionnalités dynamiques.

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

Rédiger un fichier contenant la fonction thème

functions.phpIl s’agit de votre thème “ Cerveau ”, conçu pour ajouter des fonctionnalités, un menu d’enregistrement, une barre latérale, ainsi que des styles et des scripts. Créez ce fichier et commencez à y intégrer les fonctionnalités de base.

<p> <p> __( '主导航菜单', 'my-custom-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );

// 注册小工具区域（侧边栏）
function my_custom_theme_widgets_init() {
    register_sidebar( array(
        'name'          =&gt; __( '主侧边栏', 'my-custom-theme' ),
        'id'            =&gt; 'sidebar-1',
        'description'   =&gt; __( '在此添加小工具。', 'my-custom-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_custom_theme_widgets_init' );

add_theme_support()La fonction est utilisée pour activer la fonctionnalité des thèmes.register_nav_menus()etregister_sidebar()Il faut alors s’inscrire séparément pour la zone du menu de navigation et pour la zone des outils (ou des gadgets).

Chargement des styles et des scripts

La bonne façon de charger les ressources est d’inclure les fichiers de style et les fichiers JavaScript via…wp_enqueue_scriptsFile d’attente des tâches à exécuter. Chez vous…functions.phpAjouter au milieu :

function my_custom_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-custom-theme-style', get_stylesheet_uri() );

// 加载自定义JavaScript文件
    wp_enqueue_script( 'my-custom-theme-navigation', get_template_directory_uri() . '/assets/js/navigation.js', array(), '1.0.0', true );

// 如果使用评论功能，加载评论回复脚本（仅当需要时）
    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_scripts' );

get_stylesheet_uri()Obtenirstyle.cssL’URL…get_template_directory_uri()Obtenir l’URL du répertoire des thèmes.

Créer une structure hiérarchique de templates

WordPress utilise des niveaux de templates pour déterminer le fichier template à utiliser pour une page spécifique. Créer des fichiers templates dédiés permet de rendre l'affichage de votre contenu plus précis et plus flexible.

Créer des modèles pour différents types de contenu.

Vous devez créer des modèles spécifiques pour différents types de pages. Par exemple :
* single.phpUtilisé pour afficher un seul article.
* page.phpUtilisé pour afficher une seule page.
* archive.phpUtilisé pour afficher des informations sur les catégories, les tags, les auteurs, les dates, etc., sur les pages d'archivage.
* search.phpUtilisé pour afficher les résultats de la recherche.
* 404.phpUtilisé pour afficher la page “ Introuvable ”.

Un élément de basesingle.phpCela pourrait ressembler à ceci :

<main>
    
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1012>
            <header>
                <h1></h1>
                <div>
                     | 
                </div>
            </header>
            <?php if ( has_post_thumbnail() ) : ?>
                <div>
                    <?php the_post_thumbnail(); ?>
                </div>
            
            <div>
                
            </div>
            <footer>
                &lt;?php the_tags( &#039;标签: &#039;, &#039;, &#039;, &#039;<br />' ); ?&gt;
            </footer>
        </article>
    
</main>

Ce modèle utilise…the_post_thumbnail()Pour afficher les images représentatives, ainsi que…comments_template()Pour charger la zone des commentaires.

Utiliser des composants de template pour réaliser une approche modulaire

Afin d'améliorer encore la réutilisabilité du code, les parties répétées sur une page, telles que les métadonnées des articles ou les éléments de la liste d'articles, peuvent être extraites et transformées en composants de modèle (Template Parts). Par exemple, il est possible de créer…template-parts/content.phpFichier, puis…index.phpOuarchive.phpUtilisé dans un cycle…get_template_part( 'template-parts/content' );Appelez-le. Cela permet de garder votre fichier de modèle principal simple et léger.

résumés

À travers les étapes précédentes, vous avez développé un thème WordPress personnalisé, basique mais fonctionnel. Ce processus a couvert toutes les étapes essentielles, allant de la mise en place de l’environnement, de la création des fichiers fondamentaux, de l’intégration des fonctionnalités de WordPress à la construction de la structure des templates. N’oubliez pas que le développement de thèmes est un processus itératif : vous pouvez commencer par les fonctionnalités les plus simples et ajouter progressivement des fonctionnalités plus complexes, telles que des types d’articles personnalisés, des options de personnalisation du thème ou un design responsive. Le plus important est de suivre les normes de codage et les bonnes pratiques de WordPress, afin de garantir que votre thème soit sûr, efficace et facile à maintenir. Maintenant, copiez le dossier de votre thème dans le répertoire d’installation de WordPress.wp-content/themes/Dans ce cas, vous pourrez le voir et l’activer dans la section “ Apparence ” → “ Thèmes ” en arrière-plan.

FAQ Foire aux questions

Quelles connaissances en langages de programmation sont nécessaires pour développer un thème WordPress ?

Pour développer des thèmes pour WordPress, il est essentiel de maîtriser HTML, CSS et PHP. HTML sert à construire la structure des pages, CSS est utilisé pour la conception des styles, et PHP est le langage de programmation côté serveur de WordPress, permettant de gérer la logique, les requêtes de base de données et la génération de contenu dynamique. De plus, connaître les bases du JavaScript est très utile pour ajouter des fonctionnalités interactives aux thèmes.

Pourquoi faut-il absolument utiliser les fonctions `get_header()` et `get_footer()` ?

get_header()etget_footer()Ce sont des balises de template de WordPress, utilisées pour inclure des contenus spécifiques dans la page affichée à l'utilisateur.header.phpetfooter.phpFichiers. Utilisez ces fonctions plutôt que d’utiliser les méthodes directes.includeLes « statements » constituent l’essence du mécanisme de hiérarchie des templates et des sous-thèmes dans WordPress. Elles permettent aux sous-thèmes de surcharger les parties supérieure et inférieure du template parent en créant des fichiers portant le même nom, offrant ainsi une grande flexibilité dans la personnalisation du design du site.

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

Vous devez utiliser les fonctions d’internationalisation (i18n) de WordPress pour encadrer toutes les chaînes de texte affichées dans le thème. Cela se fait principalement en utilisant…__()、_e()Fonctions telles que… et également…style.cssAssurez-vous que les paramètres corrects sont définis dans les réglages.Text DomainEnsuite, utilisez un outil comme Poedit pour générer le contenu souhaité..potCe fichier de modèle de traduction permet aux traducteurs de créer des versions du document dans la langue cible.zh_CN.poet.moEnfin,functions.phpEn Chine, on peut obtenir un diplôme d'ingénieur en trois ans.load_theme_textdomain()Translation of “Function loading”.

Une fois le développement d’un thème terminé, comment tester sa compatibilité ?

Avant de publier ou de déployer un thème dans l’environnement de production, il est essentiel de le tester exhaustivement. Tout d’abord, effectuez des tests de réactivité sur différents navigateurs (Chrome, Firefox, Safari, Edge) et sur divers appareils (ordinateurs de bureau, tablettes, smartphones). Ensuite, testez le thème avec différentes configurations de WordPress, en activant ou désactivant divers plugins, ainsi qu’en utilisant différents types d’articles et d’outils. De plus, vous pouvez utiliser le plugin officiel de vérification des thèmes de WordPress (Theme Check) pour analyser votre thème et vous assurer qu’il respecte les dernières normes de codage et les meilleures pratiques de WordPress.