Introduction au développement de thèmes pour WordPress : Construire votre premier thème de zéro

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

Avant de commencer à écrire du code, vous avez besoin d’un environnement de développement approprié. Cela inclut un environnement de serveur local (par exemple, XAMPP, Local by Flywheel ou MAMP) ainsi qu’un éditeur de code (comme VS Code, Sublime Text ou PHPStorm). Assurez-vous que PHP, MySQL et Apache/Nginx sont bien installés sur votre environnement local.

Ensuite, vous devez procéder sur votre serveur local.wp-content/themes/Créez un nouveau dossier dans le répertoire. Le nom de ce dossier sera le même que le nom de votre sujet, par exemple…my-first-themeC’est le “ foyer ” de tous vos fichiers thématiques.

Un thème WordPress de base ne nécessite que deux fichiers :style.cssetindex.phpParmi ceux-ci,style.cssCe n’est pas seulement un fichier de styles, mais aussi l“” identité » d’un thème ; la section de commentaires en haut contient les métadonnées relatives à ce thème. Créons d’abord ce fichier.

Lectures recommandées Apprendre le développement de thèmes WordPress à partir de zéro : Un guide complet pour créer des sites web personnalisés。

Créer un fichier de tête contenant les informations sur le thème

style.cssLe bloc de commentaires en haut du fichier est essentiel pour que WordPress reconnaisse un thème. Veuillez donc le créer dans le dossier de votre thème.style.cssEt écrivez le contenu suivant :

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

/*
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: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-first-theme
*/

Ces informations s’afficheront dans l’administration WordPress, sur la page “ Apparence ” -> “ Thèmes ”.Text DomainUtilisé pour l’internationalisation, il s’agit d’un identifiant clé permettant le chargement ultérieur des fichiers de traduction.

Créer un modèle d'index de base

Ensuite, créez le fichier central du thème.index.phpMême si ce fichier ne contient pour l’instant qu’une seule ligne de code, il permettra à WordPress de reconnaître et d’activer votre thème.

<h1>Bonjour, WordPress Theme World !</h1>

get_header()etget_footer()Ce sont des fonctions de template de WordPress qui tentent de charger des fichiers nommés…header.phpetfooter.phpIl s’agit de fichiers qui, bien que nous ne les ayons pas encore créés, doivent être mentionnés de cette manière selon les normes. Vous pouvez maintenant accéder à l’administration de WordPress et, dans la section “ Apparence ” -> “ Thèmes ”, trouver et activer le thème “ My First Theme ”. Rafraîchissez la page d’accueil du site, et vous verrez l’affichage “ Hello, WordPress Theme World! ”.

Comprendre les niveaux des templates et créer les fichiers essentiels

WordPress utilise un ensemble de règles appelé “ hiérarchie des templates ” pour déterminer quel fichier de template utiliser pour afficher le contenu en fonction des différentes demandes de page (comme la page d’accueil, la page d’un article, la page d’une catégorie). Comprendre ce mécanisme est essentiel pour développer des thèmes (des templates personnalisés pour WordPress) de manière efficace.

Lectures recommandées Introduction au développement de thèmes pour WordPress : Créez pas à pas votre premier thème personnalisé。

Le modèle le plus couramment utilisé est…index.phpC’est la solution de réserve pour toutes les pages. Cependant, afin de contrôler plus précisément l’apparence de chaque page, nous devrions créer des fichiers de template plus spécifiques. Commençons par créer trois fichiers les plus fondamentaux et les plus importants :header.php、footer.phpetfunctions.php。

Construire un modèle de tête pour un site web

header.phpLes fichiers contiennent généralement la partie en tête (« header ») des documents HTML.<head>Les zones publiques en haut du site, telles que le logo et le menu de navigation. Créer un…header.phpFichier :

<!DOCTYPE html>
<html no numeric noise key 1007>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
</head>
<body no numeric noise key 1004>
    <header id="site-header">
        <div class="container">
            <h1><a href="/fr/</?php echo esc_url( home_url( '/' ) ); ?>"></a></h1>
            <p></p>
            <nav>
                'primary',
                    'menu_id'        =&gt; 'primary-menu',
                ) );
                ?&gt;
            </nav>
        </div>
    </header>
    <main id="main-content">

Voici quelques fonctions clés :wp_head()Les hooks permettent au noyau de WordPress, aux plugins et aux thèmes d’interagir et d’effectuer des actions de manière autonome.<head>Insérez le code nécessaire dans la zone concernée (par exemple, des liens vers des feuilles de style).body_class()Une série de noms de classes CSS sera générée, ce qui vous permettra de contrôler le style des différentes pages.wp_nav_menu()Utilisé pour afficher un menu de navigation.

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

Construire un modèle pour la partie inférieure d'un site web

footer.phpLes fichiers contiennent généralement la partie inférieure commune d’un site web, comme les informations sur les droits d’auteur, et se terminent par une ligne de fermeture.header.phpLes balises ouvertes dans le document… Créer.footer.php：

    </main><!-- #main-content -->
    <footer id="site-footer">
        <div class="container">
            <p>©  . Tous droits réservés.</p>
        </div>
    </footer>
    
</body>
</html>

wp_footer()Avecwp_head()De même, c’est un crochet important qui est utilisé pour…</body>Insérer des scripts ou du code avant les balises.

Maintenant, revenons à ce que vous…index.phpMettez à jour le contenu en utilisant les nouveaux fichiers de en-tête et de pied que nous avons créés.

Lectures recommandées Comment choisir et personnaliser un thème WordPress compatible avec les stratégies de SEO ?。

<article>
        <h2></h2>
        <div></div>
    </article>

    <p></p>

Ce code constitue le cycle principal (« The Loop ») d’un thème WordPress. Il vérifie si la page actuelle contient des articles, puis affiche de manière répétée le titre et le contenu de chaque article.

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

functions.phpIl s’agit du “ Centre de contrôle ” de votre thème. Ce n’est pas un fichier de modèle, mais un fichier PHP qui est chargé automatiquement lors de l’initialisation du thème. Vous pouvez y ajouter des fonctionnalités de support pour votre thème, enregistrer des emplacements pour les menus, des feuilles de style pour la gestion des files d’attente, ainsi que des scripts, etc.functions.php：

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

<?php
/**
 * My First Theme 的功能函数文件
 */

// 主题基础设置
if ( ! function_exists( 'my_first_theme_setup' ) ) :
    function my_first_theme_setup() {
        // 让WordPress管理文档标题
        add_theme_support( 'title-tag' );
        // 启用文章和页面的特色图片功能
        add_theme_support( 'post-thumbnails' );
        // 注册一个主导航菜单
        register_nav_menus( array(
            'primary' => esc_html__( 'Primary Menu', 'my-first-theme' ),
        ) );
        // 为文章摘录添加HTML支持
        add_filter( 'excerpt_more', 'my_first_theme_excerpt_more' );
    }
endif;
add_action( 'after_setup_theme', 'my_first_theme_setup' );

// 修改摘录末尾的“更多”链接样式
function my_first_theme_excerpt_more( $more ) {
    return '...';
}

// 注册并加载样式表
function my_first_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );
    // 加载一个自定义样式表
    wp_enqueue_style( 'my-first-theme-custom-style', get_template_directory_uri() . '/assets/css/custom.css', array(), '1.0' );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Ce fichier de fonctionnalités effectue plusieurs choses importantes : 1) En…add_theme_support()Les fonctionnalités couramment utilisées par les thèmes WordPress modernes ont été activées ; 2) Par…register_nav_menus()Nous avons enregistré l’adresse d’un restaurant, ce qui nous permet de…header.phpCelui qui est appelé en interne.primaryLe menu peut être attribué dans l’arrière-plan en allant sur “ Apparence ” -> “ Menu ”. 3) Utilisez-le.wp_enqueue_style()La fonction ajoute correctement le fichier de style à la file d'attente, de manière à respecter les règles de sécurité.

Créer un modèle d'article indépendant

Afin d'améliorer l'affichage d'un article individuel, nous pouvons créer un fichier de template dédié.single.phpSelon les niveaux de hiérarchie des templates, lorsque l'on accède à un article individuel, WordPress utilise en priorité…single.php…plutôt que…index.php。

<article id="post-<?php the_ID(); ?>" no numeric noise key 1007>
    <header class="entry-header">
        &lt;?php the_title( &#039;<h1 class="entry-title">', '</h1>' ); ?&gt;
        <div class="entry-meta">
            <?php 
            printf( 
                esc_html__( '发布于 %s', 'my-first-theme' ), 
                get_the_date() 
            );
            ?>
        </div>
        <?php if ( has_post_thumbnail() ) : ?>
            <div class="post-thumbnail">
                <?php the_post_thumbnail( 'large' ); ?>
            </div>
        
    </header>
    <div class="entry-content">
        
    </div>
</article>

Ce modèle présente plus en détail les informations de l’article, telles que la date de publication et l’image de présentation (si elle a été définie).post_class()La fonction génère des classes CSS adaptées au type d’article.

Ajouter des styles de base et un design responsive.

Maintenant que votre thème dispose d’une structure de base et des fonctionnalités essentielles, il est temps de le rendre plus attrayant visuellement. Nous allons…style.cssAjoutez quelques éléments de CSS de base et assurez-vous que le design soit responsive (adapté à différentes tailles d'écran).

Dans le vôtrestyle.cssApportez le suivant style aux fichiers (en dessous de la tête d'information sur le sujet) :

/* 基础重置与排版 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f9f9f9;
}
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 头部样式 */
#site-header {
    background: #fff;
    border-bottom: 1px solid #eee;
    padding: 1rem 0;
}
#site-header h1 a {
    color: #333;
    text-decoration: none;
}

/* 导航菜单 */
#primary-menu {
    display: flex;
    list-style: none;
}
#primary-menu li {
    margin-right: 1rem;
}
#primary-menu a {
    text-decoration: none;
    color: #555;
}

/* 主内容区 */
#main-content {
    padding: 2rem 0;
}
article {
    background: #fff;
    padding: 2rem;
    margin-bottom: 2rem;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* 底部样式 */
#site-footer {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 1.5rem 0;
    margin-top: 2rem;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .container {
        padding: 0 15px;
    }
    #primary-menu {
        flex-direction: column;
    }
    #primary-menu li {
        margin-right: 0;
        margin-bottom: 0.5rem;
    }
    article {
        padding: 1rem;
    }
}

Ces styles offrent des effets visuels clairs et modernes, ainsi qu’un layout réactif de base sur les appareils à écran petit. Vous pouvez les créer vous-même./assets/css/custom.cssCe fichier est utilisé pour stocker davantage de styles personnalisés, et il est déjà en place.functions.phpIl a été chargé dans la file d'attente.

résumés

En suivant les étapes décrites dans cet article, vous avez réussi à créer un thème WordPress complet et bien structuré, à partir d’un dossier vide. Vous avez également découvert les fichiers de base nécessaires au développement de thèmes WordPress.style.cssetindex.phpJ’ai appris le concept de hiérarchie des templates et j’en ai créé.header.php、footer.php、single.phpVous faites également référence à des fichiers de modèles clés.functions.phpLe fichier ajoute des fonctionnalités de soutien et de gestion des ressources à votre thème, et lui confère une apparence visuelle attrayante grâce à des styles CSS.

C’est juste un point de départ. Ensuite, vous pourrez explorer la création d’autres fichiers de modèle (comme…)page.php、archive.php、404.phpVous approfondirez votre connaissance du système de hooks, d’actions et de filtres de WordPress, ainsi que des moyens de faire en sorte que votre thème prenne en charge les widgets et les personnalisations (customizers). En pratiquant régulièrement et en explorant de nouvelles fonctionnalités, vous deviendrez un développeur de thèmes WordPress expérimenté.

FAQ Foire aux questions

Comment modifier le logo d’un thème ?

Dansheader.phpDans le fichier, trouvez la ligne de code qui affiche le titre du site web. Vous pouvez utiliser…

Remplacement des étiquettesbloginfo( ‘name’ )Et ajoutez un lien vers l’image de votre logo. Une approche plus professionnelle consisterait à…functions.phpUtilisé dansadd_theme_support( ‘custom-logo’ )Cela vise à soutenir la fonction d’upload de logos dans les personnalisations (customizers) de WordPress.

Pourquoi mon menu de navigation n’apparaît-il pas ?

Tout d’abord, veuillez vous assurer que vous avez déjà…functions.phpEn Chine, on peut obtenir un diplôme d'ingénieur en trois ans.register_nav_menus()Vous avez enregistré l'emplacement de votre unité de cuisine (par exemple...).primaryEnsuite, vous devez vous connecter à l’administration de WordPress et accéder à la page “ Étiquettes ” → “ Menus ”. Créez un nouveau menu, sélectionnez les éléments que vous souhaitez y inclure, cochez la case correspondante pour indiquer l’emplacement où ce menu doit être affiché (par exemple, “ Menu principal ”), puis enregistrez le menu.

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

Tout d’abord,functions.phpUtilisé dansregister_sidebar()La fonction permet de réserver une zone pour un widget de barre latérale. Ensuite, dans le fichier de template où vous souhaitez afficher la barre latérale (par exemple…index.phpOusingle.phpDans ce cas, utilisezdynamic_sidebar()Cette zone est destinée à l’appel de fonctions. De plus, vous devez créer…sidebar.phpUn fichier est utilisé pour définir la structure HTML spécifique de la barre latérale.

Les opérations contenues dans le fichier functions.php doivent-elles obligatoirement être déclenchées à l’aide de « hooks » (des fonctions préétablies) ?

Oui, dans la plupart des cas, afin de garantir que le code s’exécute au bon moment, vous devez encapsuler le code fonctionnel à l’intérieur de fonctions et l’utiliser à travers des événements spécifiques (ou des « hooks »).after_setup_theme、wp_enqueue_scriptsMontage. Écrivez-le directement.functions.phpLe code à l’échelle globale peut s’exécuter au mauvais moment ou provoquer des erreurs.