Guide pratique pour débuter le développement de thèmes WordPress : Créer votre propre architecture de thème et vos propres modèles à partir de zéro

Les thèmes WordPress sont au cœur de l’apparence et des fonctionnalités d’un site web. Grâce au développement personnalisé, les développeurs peuvent prendre entièrement en main la logique de conception, les performances et les possibilités d’extension du site, échappant ainsi aux contraintes imposées par les thèmes tiers. Ce guide vous guidera pas à pas à partir de la structure de répertoire de base pour créer un thème personnalisé WordPress complet et conforme aux normes de développement modernes. Vous apprendrez les principes fondamentaux de l’architecture d’un thème, la logique d’organisation des fichiers de modèle, ainsi que la manière d’insérer du contenu dynamique à l’aide de fonctions PHP et de hooks.

Préparation des bases et de l'environnement pour le développement de thèmes

Avant de commencer à écrire du code, il est essentiel de mettre en place un environnement de développement approprié et de comprendre la structure de base du sujet sur lequel vous travaillez. Cela permettra de garantir que votre travail de développement soit efficace et conforme aux normes de l’écosystème WordPress.

Créer un environnement de développement local

Nous recommandons l’utilisation d’un environnement de développement local, tel que Local, XAMPP ou MAMP. Ces outils permettent d’installer PHP, MySQL ainsi que Apache/Nginx en un seul clic. Créez une nouvelle installation de WordPress dans cet environnement pour en faire la plateforme de test de vos thèmes.

Lectures recommandées Guideline de développement de thèmes WordPress : construire un thème professionnel de A à Z.。

Structure de répertoire standard pour la compréhension des sujets

Un thème simplifié au maximum, reconnaissable par WordPress, ne nécessite que deux fichiers :style.css et index.phpCependant, un répertoire de thèmes personnalisés bien structuré doit organiser de manière logique les différents types de fichiers. La structure typique d'un répertoire de thèmes est la suivante :

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

your-theme/
├── style.css          (必需，主题样式表和信息头)
├── index.php          (必需，主模板文件)
├── functions.php      (主题功能增强文件)
├── header.php         (头部模板)
├── footer.php         (底部模板)
├── sidebar.php        (侧边栏模板)
└── assets/            (静态资源目录)
    ├── css/
    ├── js/
    └── images/

Créer le fichier de style principal.

style.css Le fichier n’est pas seulement un fichier de style, mais aussi l“” identité » du thème. Le bloc de commentaires en haut du fichier contient toutes les métadonnées nécessaires à WordPress pour reconnaître le thème.

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

Parmi ceux-ci,Text Domain Utilisé pour l’internationalisation, il s’agit d’un identifiant obligatoire à utiliser lors des appels ultérieurs aux fonctions de traduction.

Construire un système de fichiers de modèles de base

WordPress utilise un système de hiérarchie des templates pour déterminer quel fichier template doit être utilisé pour chaque type de page. La création de ces fichiers est l’élément central du développement de thèmes (templates).

Créer un fichier de modèle de base

Tout d’abord, créez les templates pour la partie supérieure et la partie inférieure de la page, qui seront divisées en plusieurs sections. Fichiers : header.php Il doit contenir la tête du document HTML.Dans les zones et à la partie débutale du corps de la page, on utilise généralement… wp_head() Des fonctions permettent d’injecter du code dans les plugins ainsi que dans les fonctionnalités principales du système.

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

<!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>
</header>

papiers footer.php Cela inclut le contenu du pied de page, et se termine par… wp_footer() La fonction se termine.

<footer>
    <p>©</p>
</footer>

</body>
</html>

Réaliser le fichier du modèle principal

index.php En tant que fichier de rétroaction pour le modèle final, sa fonction principale est d’intégrer les parties en tête et en pied de la page, ainsi que de construire le boucle principale permettant d'afficher la liste des articles.

<main>
    
            <article>
                <h2><a href="/fr/</?php the_permalink(); ?>"></a></h2>
                <div></div>
            </article>
        <p><strong>Cette page n'existe pas !</strong></p>
        <p>Aucun article disponible pour le moment.</p>
    
</main>

Développer des modèles de page spécifiques

Selon le niveau de hiérarchie des modèles, vous pouvez créer des modèles plus spécifiques pour des pages particulières. Par exemple, vous pouvez… single.php Utilisé pour afficher un seul article.page.php Pour afficher une page indépendante,archive.php Utilisé pour afficher les archives par catégorie. WordPress appellera automatiquement ces templates plus spécifiques en priorité.

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

Améliorer les fonctionnalités du thème grâce à des fichiers de fonctions.

functions.php Le fichier correspond à votre thème “ Centre de contrôle ” et sert à ajouter des fonctionnalités, à enregistrer des menus, à prendre en charge des images personnalisées, etc., sans avoir à modifier les fichiers principaux.

Ajouter un support de base pour les thèmes.

Dans functions.php Dans ce document, il est utilisé… add_theme_support() Une fonction est utilisée pour déclarer les fonctionnalités prises en charge par le thème. C’est un point de départ standard.

function my_custom_theme_setup() {
    // 让WordPress管理文档标题
    add_theme_support( 'title-tag' );
    // 启用文章和页面的特色图像功能
    add_theme_support( 'post-thumbnails' );
    // 注册导航菜单位置
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-custom-theme' ),
    ) );
    // 支持HTML5标记
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );

Zone des outils de la barre latérale pour l’enregistrement

utiliser register_sidebar() Une fonction est utilisée pour définir la zone des outils, permettant aux utilisateurs d'ajouter du contenu dynamiquement en arrière-plan.

Lectures recommandées Introduction au développement de thèmes pour WordPress : Construisez votre premier thème personnalisé à partir de zéro。

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

Introduire des scripts et des styles en toute sécurité.

Il ne faut jamais créer de liens directs vers des fichiers CSS et JS à l’intérieur d’un modèle. Il est préférable d’utiliser des méthodes appropriées pour inclure ces fichiers dans le projet. wp_enqueue_style() et wp_enqueue_script() Fonction, et l'installer wp_enqueue_scripts Sur le crochet.

function my_custom_theme_scripts() {
    // 引入主题主样式表
    wp_enqueue_style( 'my-custom-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
    // 引入自定义JavaScript文件
    wp_enqueue_script( 'my-custom-theme-script', get_template_directory_uri() . '/assets/js/main.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_scripts' );

Réaliser des balises de template et des boucles

Les balises de modèle sont une série de fonctions PHP fournies par WordPress, permettant d'afficher dynamiquement du contenu dans les templates, tel que le titre des articles, leur contenu, la date, etc. Elles sont généralement utilisées à l’intérieur du boucle principale.

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

Comprendre et utiliser le boucle principale

Le boucle principale est le concept le plus essentiel dans les templates de WordPress ; elle utilise des variables globales. $wp_query Il faut parcourir les articles qui doivent être affichés sur la page actuelle. La structure de base est la suivante :

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <!-- 在这里使用模板标签 -->
<?php endwhile; else : ?>
    <!-- 没有找到文章时的内容 -->
<?php endif; ?>

En appelant… the_post() Par la suite, les données relatives aux articles sont configurées à l’échelle globale, et il est alors possible d’utiliser diverses balises de modèle.

Utiliser les balises de modèle couramment utilisées pour afficher le contenu.

À l’intérieur d’un boucle, vous pouvez appeler une série de fonctions pour afficher les informations de l’article. Par exemple :
- the_title()Titre de l'article :
- the_permalink()Afficher le lien permanent de l’article.
- the_content()Le contenu intégral de l'article est disponible sur le site de la Commission européenne.
- the_excerpt(): Résumés d'articles de sortie.
- the_post_thumbnail()Affichez les images représentatives de l’article.
- the_date() et the_author()Date de publication et auteur.

Réaliser une navigation par pagination pour les articles

Après la fin de la boucle qui affiche la liste des articles (par exemple, sur la page d’accueil ou la page d’archivage), il est nécessaire de fournir une navigation par pagination. Cela peut être réalisé en utilisant des éléments de interface adaptés. the_posts_pagination() Une fonction pour générer une liste de liens de pagination esthétique et facilement accessible.

the_posts_pagination( array(
    'mid_size'  => 2,
    'prev_text' => __( '上一页', 'my-custom-theme' ),
    'next_text' => __( '下一页', 'my-custom-theme' ),
) );

résumés

Depuis la création du fichier contenant les en-têtes d’information corrects… style.css et de base index.php Pour commencer, vous avez déjà suivi les étapes essentielles pour créer un thème personnalisé pour WordPress. Nous avons examiné en détail le système de hiérarchie des templates et analysé leur structure. header.php et footer.php Afin d'améliorer la réutilisabilité du code et grâce à… functions.php Le fichier a été enrichi de manière fiable avec des fonctionnalités de thème et des ressources supplémentaires. Comprendre et utiliser correctement la “ boucle principale ” ainsi que les “ balises de modèle ” est essentiel pour afficher du contenu dynamique sur la page. En suivant ces étapes et ces bonnes pratiques, vous n’avez pas seulement créé un thème fonctionnel, mais vous avez également établi une base de projet facile à maintenir, à étendre et conforme aux normes de WordPress.

FAQ Foire aux questions

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

Oui, PHP est une compétence essentielle à maîtriser. Le noyau de WordPress est lui-même écrit en PHP ; tous les fichiers de templates, la logique des fonctionnalités ainsi que les interactions avec la base de données reposent sur PHP. HTML, CSS et JavaScript sont utilisés pour construire l’aspect visuel et les interactions de l’interface utilisateur, mais PHP constitue la base permettant d’injecter des données dynamiques dans cette interface.

Pourquoi mon thème n’apparaît-il pas dans l’arrière-plan (dans les options de configuration) ou ne peut-il pas être activé ?

La raison la plus fréquente est… style.css Le format des commentaires contenant les informations thématiques en haut du fichier est incorrect, certaines informations essentielles manquent, ou il y a un problème avec le codage du fichier. Veuillez remplir ces informations conformément aux spécifications et assurez-vous que le codage du fichier est UTF-8 sans BOM. De plus, vérifiez si le dossier contenant les thèmes a été placé correctement./wp-content/themes/Dans le répertoire.

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

functions.php Les fonctionnalités contenues dans ce fichier sont étroitement liées au thème actif ; elles deviennent inutilisables lors du changement de thème. Celles-ci sont donc adaptées à l’ajout de fonctionnalités directement liées à l’apparence et à la mise en page du thème (comme le menu d’enregistrement, la définition des zones pour les gadgets, ou les options de support du thème). En revanche, les fonctionnalités fournies par les plugins sont généralement indépendantes du thème et restent disponibles même après un changement de thème, ce qui les rend idéales pour l’ajout de fonctionnalités universelles (telles que les formulaires de contact, les optimisations SEO, ou la mise en cache).

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

Vous devez utiliser les fonctions d’internationnalisation de WordPress pour encapsuler tous les textes destinés aux utilisateurs. Dans votre code, utilisez… () Ou _e() Fonctions telles que…, et spécifiez où elles doivent être utilisées. style.css Défini dans le contexte chinois. Text DomainPar exemple :echo ( ‘阅读更多’, ‘my-custom-theme’ );Ensuite, utilisez un outil comme Poedit pour générer le contenu souhaité..potFichier de modèle de traduction, destiné aux traducteurs pour créer leurs propres outils de travail..poet.moFichiers de langue.

Devrait-on modifier directement les fichiers de templates principaux pendant le développement ?

Il est absolument interdit de modifier directement les fichiers du noyau de WordPress, ainsi que les fichiers du noyau des thèmes parentaux que vous utilisez (à moins que vous n’ayez créé un thème enfant). Toute modification sera effacée lors du prochain téléchargement de mises à jour. Le développement personnalisé doit toujours être effectué dans votre propre thème indépendant ou dans un thème enfant ; c’est un principe de base du développement avec WordPress.