Accueil/liés à la connaissance/WordPress/Détails du contenu

Partir de zéro : maîtriser les bases des thèmes WordPress.

2 minutes de lecture
2026-03-15
2026-06-03
2,058
Je reçois une commission lorsque vous achetez via les liens ci‑dessous, sans frais supplémentaires pour vous.

Partir de zéro : maîtriser les bases des thèmes WordPress.

Pour comprendre le développement de thèmes WordPress, il est d’abord nécessaire de définir sa structure de base. Un thème WordPress est essentiellement un ensemble de fichiers qui déterminent ensemble l’apparence et les fonctionnalités d’un site Web, y compris les feuilles de style, les fichiers de modèles, les scripts de fonctions et les ressources telles que les images. Les fichiers principaux du thème sont : style.css et index.phpLe premier est un “ document d’identité ” et une définition de style pour le thème, tandis que le second est un fichier de modèle par défaut.

En-tête du sujet

Chaque répertoire racine de chaque thème doit contenir un fichier nommé « index.html ». style.css Le fichier, dont l’en-tête contient une note spéciale, sert à fournir à WordPress des informations de base sur le thème. Cet en-tête est essentiel pour que le thème soit reconnu et activé par WordPress.

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme
Author: 开发者名称
Author URI: https://example.com
Description: 这是一个用于学习 WordPress 主题开发的简单主题。
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

Parmi ceux-ci,Text Domain Utilisé pour l’internationalisation, il s’agit d’un identifiant clé permettant le chargement ultérieur des fichiers de traduction.

Lectures recommandées Introduction au développement de thèmes WordPress : créer un site web personnalisé à partir de zéro.。

Le rôle des fichiers de modèle principaux.

En plus de… style.cssLe thème doit contenir au moins un fichier de modèle PHP. Le plus élémentaire est : index.phpC'est un modèle de secours pour toutes les pages. Lorsque WordPress ne trouve pas de fichier de modèle plus spécifique, il l'utilise. D'autres fichiers de modèle importants incluent ceux utilisés pour afficher un article unique. single.php、用于显示文章列表的 archive.phpUtilisé pour afficher la page. page.php Et définissez la tête et le pied du site web. header.php et footer.php。

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.
Le logo d'UltaHost. page d'accès

Construire la hiérarchie des modèles centraux du thème.

WordPress utilise un système hiérarchique de modèles pour déterminer quel fichier de modèle utiliser pour la page demandée. Ce système suit le principe du spécifique au général, permettant aux développeurs de créer des designs hautement personnalisés pour différents types de pages.

Comprendre l’ordre de chargement des templates

Lorsqu'un utilisateur accède à un article de blog, WordPress recherche successivement les fichiers de modèle suivants :single-{post-type}-{slug}.php、single-{post-type}.php、single.phpEt enfin, singular.php et index.phpPar exemple, pour une page nommée “ À propos ” (dont le type d’article est « page »), WordPress recherchera d’abord : page-about.phpPuis, cherchez. page.phpEt enfin, utilisez-le. index.php。

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

Un thème complet contient généralement les fichiers de modèle de base suivants :
- header.php: Cela comprend une déclaration du type de document,<head> La partie initiale des zones et des sites Web (comme le menu de navigation). À utiliser dans d'autres modèles. get_header() Introduction des fonctions.
- footer.phpIl contient la partie finale du site Web (telle que les informations sur les droits d'auteur). Utilisez-le. get_footer() Introduction des fonctions.
- index.php: Le modèle principal, qui sert de dernier recours pour toutes les pages.
- page.phpUtilisé pour afficher des pages statiques.
- single.phpUtilisé pour afficher un seul article.
- archive.php: Utilisé pour afficher les pages d'archives telles que les catégories, les tags, les auteurs, les dates, etc.

En divisant ces parties, on peut grandement améliorer la réutilisabilité et la maintenabilité du code. Dans le modèle de boucle principale, on utilise généralement une structure similaire à celle-ci :

Lectures recommandées 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。

&lt;?php
if ( have_posts() ) :
    while ( have_posts() ) : the_post() ;
        // Affiche le contenu de l&#039;article
        the_title(&#039;<h2>', '</h2>' ) ;
        the_content() ;
    endwhile.
else :
    // S'il n'y a pas d'articles
    echo '<p>Pas de contenu pour le moment. </p>' ; endif ; // S'il n'y a pas d'articles, echo '<p>Pas de contenu pour le moment.
endif ; ?
? &gt;

利用函数与钩子增强主题功能

Un bon thème doit non seulement avoir une interface agréable, mais aussi offrir une grande évolutivité. Cela est principalement rendu possible par deux fonctionnalités principales de WordPress : les fonctions et les crochets (Hooks). Le fichier principal. functions.php C'est l'endroit principal où ces fonctionnalités sont ajoutées.

Fichier de fonctionnalités du thème

functions.php Les fichiers sont automatiquement chargés lors de l'initialisation du thème et servent à définir les fonctionnalités du thème, à enregistrer les menus et les barres latérales, ainsi qu'à ajouter divers filtres et actions. C'est comme le “ cerveau ” du thème, qui contrôle la logique de son fonctionnement.

Par exemple, le code pour enregistrer un menu de navigation et activer la fonctionnalité des vignettes d'articles est le suivant :

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%.
LOGO hosting.com page d'accès 
<?php
function my_theme_setup() {
    // 注册一个导航菜单位置
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
    ) );

    // 启用文章特色图像支持
    add_theme_support( 'post-thumbnails' );
}
add_action( 'after_setup_theme', 'my_theme_setup' );
?>

Ici, un hook d'action a été utilisé. after_setup_themeCela nous permet d'exécuter notre propre fonction après que le thème ait effectué les réglages de base. my_theme_setup。

Comprendre les actions et les filtres.

Les hooks sont de deux types : les actions et les filtres. Les actions vous permettent d’insérer et d’exécuter votre propre code à un moment précis, par exemple pour afficher quelque chose après le contenu de l’article. Les filtres, quant à eux, vous permettent de modifier les données générées pendant l’exécution de WordPress.

Par exemple, utilisez un filtre pour modifier la longueur du texte du résumé :

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

<?php
function my_excerpt_length( $length ) {
    return 20; // 将摘要长度改为20个单词
}
add_filter( 'excerpt_length', 'my_excerpt_length' );
?>

Et utilisez une action pour ajouter une déclaration de droits d'auteur à la fin du contenu de l'article :

&lt;?php
function my_post_footer( $content ) {
    if ( is_single() ) {
        $content . = &#039;<p class="copyright">Cet article est protégé par des droits d'auteur. </p>' ;
    }
    return $content.
}
add_filter('the_content', 'my_post_footer' ) ; ?
? &gt;

Réaliser un design responsive et personnaliser les thèmes

Les thèmes WordPress modernes doivent être réactifs et offrir des options de personnalisation conviviales. Cela nécessite d’associer les techniques CSS et l’API de personnalisation de WordPress.

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.
Le logo d'InterServer. page d'accès

Les applications réactives en CSS

La conception réactive est généralement réalisée à l'aide de requêtes média CSS. Dans style.css Dans ce cas, vous pouvez définir des styles en fonction de différentes largeurs d'écran.

/* 基础样式 */
.container {
    width: 100%;
    padding: 20px;
}

/* 平板设备（宽度大于768px） */
@media (min-width: 768px) {
    .container {
        width: 750px;
        margin: 0 auto;
    }
}

/* 桌面设备（宽度大于992px） */
@media (min-width: 992px) {
    .container {
        width: 970px;
    }
}

Configurez les paramètres de l'intégrateur personnalisé.

Le personnalisateur WordPress permet aux utilisateurs de prévisualiser et de modifier les paramètres du thème en temps réel. En utilisant functions.phpVous pouvez ajouter diverses options au thème, telles que le téléchargement d'un logo, la sélection de couleurs, etc.

Voici un exemple d'option pour ajouter du texte de copyright en bas de page :

<?php
function my_theme_customize_register( $wp_customize ) {
    // 添加一个设置项
    $wp_customize->add_setting( 'footer_copyright_text', array(
        'default'           => '© 2026 我的网站。',
        'sanitize_callback' => 'sanitize_text_field',
    ) );

    // 为设置项添加一个控件（输入框）
    $wp_customize->add_control( 'footer_copyright_text', array(
        'label'    => __( '页脚版权文本', 'my-first-theme' ),
        'section'  => 'title_tagline', // 放在“站点身份”区域
        'type'     => 'text',
    ) );
}
add_action( 'customize_register', 'my_theme_customize_register' );
?>

Dans le fichier de modèle. footer.php Dans ce cas, vous pouvez afficher la valeur de cette option de la manière suivante :

<p class="site-info">
    <?php echo esc_html( get_theme_mod( 'footer_copyright_text', '© 2026 我的网站。' ) ); ?>
</p>

résumés

Le développement de thèmes WordPress est une compétence globale qui combine la programmation PHP, la structure HTML, le style CSS et la connaissance de l'API principale de WordPress. Pour bien comprendre les bases, il est nécessaire de maîtriser les concepts suivants : style.css 和模板文件开始，逐步掌握模板层级系统，学会在 functions.php Pour étendre les fonctionnalités à l’aide de hooks, et finalement obtenir un design réactif et de nombreuses options de personnalisation, c’est la voie la plus claire pour devenir un développeur de thèmes compétent. Pendant le développement, suivre les normes de codage officielles et les meilleures pratiques permet non seulement d’assurer la qualité et la sécurité du thème, mais aussi de jeter une base solide pour sa maintenance et ses mises à jour futures.

FAQ Foire aux questions

Pour apprendre à développer des thèmes WordPress, quelles connaissances préalables sont nécessaires ?

Il est recommandé d’avoir des connaissances de base en HTML et en CSS, qui sont les fondements de la création d’une page Web. Il faut également avoir une connaissance de base du PHP, car le noyau de WordPress et son système de modèles sont principalement développés en PHP. Une connaissance initiale du JavaScript sera utile pour le développement ultérieur des fonctionnalités interactives.

Les fichiers functions.php du thème et du sous-thème vont-ils entrer en conflit ?

Il n'y a pas de conflit, les deux seront chargés. Pour les sous-thèmes, functions.php Le fichier sera placé dans le thème parent. functions.php Les fichiers sont chargés ensuite. Cela signifie que vous pouvez ajouter de nouvelles fonctionnalités dans un sous-thème ou remplacer les fonctionnalités définies dans le thème parent (à condition que les fonctions du thème parent soient déclarées comme pouvant être remplacées). C'est une manière recommandée de modifier en toute sécurité les fonctionnalités principales du thème.

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

你需要使用 WordPress 的国际化函数来包裹所有需要在界面中显示的文本字符串。主要使用 __() et _e() Définissez les fonctions et spécifiez où elles doivent être appelées. style.css Défini dans le contexte chinois. Text DomainEnsuite, utilisez un outil tel que Poedit pour générer un fichier modèle .pot, que les traducteurs pourront utiliser pour créer des fichiers de traduction .po et .mo, et placez ces fichiers dans le dossier du thème. /languages/ Dans le répertoire.

Quelles questions juridiques et réglementaires doivent être prises en compte lors du développement de thèmes commerciaux ?

Le plus important est de respecter la licence GNU GPL de WordPress elle-même. Cela signifie que la partie PHP de votre thème doit être sous une licence compatible GPL. En général, l'ensemble du thème hérite de la GPL. De plus, vous devez vous assurer que toutes les ressources tierces que vous utilisez (telles que les icônes, les polices, les bibliothèques JavaScript) sont dotées d'une licence commerciale appropriée. En ce qui concerne les normes de codage, vous devez suivre les normes de codage officielles de WordPress et vous assurer que votre thème passe l'audit de base de l'extension Theme Check, afin d'augmenter vos chances d'être répertorié dans le répertoire officiel.

Quelle est la suite, quelle est la suite ?

Si vous êtes en train de créer ou d’optimiser un site WordPress, nous vous conseillons de poursuivre votre lecture en vous concentrant sur l’optimisation des performances, la configuration des plugins et la personnalisation des thèmes.

Lecture approfondie et connaissances pratiques

Les articles suivants sont liés au sujet de cet article et peuvent faire l'objet d'une lecture plus approfondie. Il est souvent préférable de commencer par l'article qui se rapproche le plus de votre problème actuel, puis d'étendre progressivement la lecture aux sujets environnants.

Tags.