La structure de base d’un thème WordPress.

Lectures recommandées Dans le monde en ligne hautement compétitif d'aujourd'hui, un site Web bien conçu et performant est indispensable.。

Informations de la tête du fichier de style de thème

Thématiquestyle.cssLa partie en tête du fichier doit contenir une annotation conforme à un format spécifique. WordPress utilise ces informations pour reconnaître et afficher le thème en arrière-plan.

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 Awesome Theme
Theme URI: https://example.com/my-awesome-theme/
Author: Your Name
Author URI: https://example.com/
Description: A modern, responsive WordPress theme built for speed and SEO.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-awesome-theme
*/

Parmi ces éléments, le “ Text Domain ” est utilisé pour l’internationalisation et sert d’identifiant lors des traductions linguistiques ultérieures. Il correspond généralement au nom du dossier thématique.

Opérations courantes sur les fichiers de fonctionnalités thématiques

functions.phpLe fichier est le “ cerveau ” du sujet. Une opération courante consiste à utiliser…add_theme_support()Des fonctions sont utilisées pour déclarer les fonctionnalités prises en charge par un thème. Par exemple, elles permettent d’activer l’affichage d’une image de présentation pour l’article, de personnaliser le logo, ou de modifier l’arrière-plan.

<?php
function my_awesome_theme_setup() {
    // 添加对文章特色图片的支持
    add_theme_support( 'post-thumbnails' );
    // 添加对自定义Logo的支持
    add_theme_support( 'custom-logo' );
    // 添加对HTML5标记的支持
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption' ) );
    // 添加对标题标签的支持
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_awesome_theme_setup' );
?>

Ce code utilise des « hooks » (des mécanismes d’interception) pour effectuer certaines tâches.after_setup_themeCes fonctionnalités du noyau de WordPress sont activées de manière sécurisée après le chargement du thème correspondant.

Niveaux de templates et templates personnalisés

WordPress utilise un système intelligent appelé “ hiérarchie des templates ” pour déterminer la manière de rendre les différentes types de pages. Lorsqu’un utilisateur accède à une page, WordPress recherche le fichier de template correspondant selon un ordre de priorité spécifique. Par exemple, pour un article classé dans la catégorie “ Nouvelles ”, WordPress recherche successivement :single-post-news.php -> single-post.php -> single.php -> singular.php -> index.phpLes développeurs peuvent utiliser ces règles pour mettre en œuvre un contrôle précis des pages en créant des fichiers de modèles dotés de noms spécifiques.

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

En plus des modèles préétablis par le système, les développeurs peuvent également créer des “ modèles de page ”. Il s’agit de modèles personnalisés conçus pour des pages spécifiques ou pour un type de page particulier. Pour créer un modèle de page, il est nécessaire de le déclarer explicitement dans les commentaires en tête du fichier de modèle.

Créer un modèle de page personnalisé.

Par exemple, pour créer un modèle de page à largeur complète, vous pouvez créer un nouveau fichier nommé…template-fullwidth.phpLe fichier, et ajoutez la note suivante en début de fichier :

<?php
/**
 * Template Name: 全宽度页面布局
 * Description: 一个没有侧边栏的全宽度页面模板
 */
?>

Par la suite, lorsque vous modifiez une page depuis l’administration de WordPress, vous pourrez voir et sélectionner le “ Layout de page à largeur complète ” dans le menu déroulant “ Modèle ” des “ Propriétés de la page ”. Cela offre une grande flexibilité pour la présentation du contenu, permettant de répondre à des besoins de mise en page spécifiques sans avoir à modifier les fichiers fondamentaux du thème.

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

Utiliser des balises de conditionnalité pour effectuer des contrôles logiques.

Dans les fichiers de template, il est souvent nécessaire d'afficher des contenus différents en fonction de conditions spécifiques. C’est là que les balises conditionnelles de WordPress entrent en jeu. Par exemple,index.phpDans ce cas, il est possible d’utiliser des balises conditionnelles pour déterminer si l’on se trouve sur une page de liste d’articles ou sur une page d’un article spécifique. Cependant, il est généralement plus courant que des fichiers de template plus spécifiques s’occupent de cette tâche.

<?php if ( is_home() && ! is_front_page() ) : ?>
    <h1>Liste des articles du blog</h1>
<?php elseif ( is_search() ) : ?>
    <h1>搜索结果：</h1>

Les balises conditionnelles les plus couramment utilisées comprennent également :is_single()、is_page()、is_category()、is_archive()Elles constituent les fondamentaux pour construire des thèmes dynamiques et intelligents.

Gestion des scripts et des styles des thèmes

Afin de garantir la stabilité et les performances du thème, tous les fichiers JavaScript et CSS doivent être chargés de manière séquentielle (en file d’attente) à l’aide des méthodes fournies par WordPress, et non directement dans les fichiers de template.OuCes étiquettes ont été créées grâce à…functions.phpDans…wp_enqueue_scriptsCela est réalisé à l’aide de « crochets » (hooks).

Lectures recommandées Se concentrer sur la pratique : maîtriser les compétences de base du développement de thèmes WordPress modernes, de zéro à un.。

Enregistrer et mettre en file d'attente les ressources de manière correcte.

utiliserwp_register_script()etwp_enqueue_script()(Script) ou son équivalentwp_register_style()etwp_enqueue_style()Les fonctions de style permettent à WordPress de gérer de manière centralisée les dépendances, le contrôle de version et d’éviter les chargements redondants.

<?php
function my_awesome_theme_scripts() {
    // 注册并排队主样式表（style.css）
    wp_enqueue_style( 'my-awesome-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get('Version') );

    // 注册一个自定义JavaScript文件
    wp_register_script( 'my-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array('jquery'), '1.0.0', true );
    // 排队这个脚本（仅在需要时）
    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'my_awesome_theme_scripts' );
?>

Dans l'exemple ci-dessus,get_stylesheet_uri()Obtenir le thème actuel…style.cssTrajectoire.get_template_directory_uri()Obtenir l’URI du répertoire des thèmes. Définissez le dernier paramètre de la script comme suit :trueCela signifie que le contenu est chargé en bas de la page, ce qui contribue à améliorer les performances de chargement de la page.

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

Ajouter des styles intégrés ou des scripts

Parfois, il est nécessaire de générer dynamiquement du CSS ou du JavaScript en fonction de la logique PHP. Dans ces cas, il est possible d’utiliser…wp_add_inline_style()etwp_add_inline_script()Les fonctions doivent être associées à une ressource qui est déjà en attente d’être utilisée (c’est-à-dire qui fait partie d’une file d’attente).

<?php
function my_dynamic_css() {
    $custom_css = "
        .site-header {
            background-color: #" . get_theme_mod('header_bg_color', 'ffffff') . ";
        }
    ";
    wp_add_inline_style( 'my-awesome-theme-style', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'my_dynamic_css' );
?>

Personnalisateur de thème avec fonctions de personnalisation

Le Personaliseur de thèmes WordPress offre une interface de prévisualisation en temps réel, permettant aux utilisateurs (administrateurs) de modifier certaines options des thèmes, telles que les couleurs, le logo, l'image de fond, etc. Grâce à l’API du Personaliseur de thèmes, les développeurs peuvent ajouter des options configurables aux thèmes de manière sécurisée.

Ajoutez une option de configuration dans le configurateur.

Tout d’abord, il est nécessaire de…functions.phpUtilisé danscustomize_registerDes fonctions permettent de régister des paramètres, des contrôles et des zones d'affichage.

<?php
function my_awesome_theme_customize_register( $wp_customize ) {
    // 添加一个“颜色”板块
    $wp_customize->add_section( 'theme_colors', array(
        'title'    => __( '主题颜色', 'my-awesome-theme' ),
        'priority' => 30,
    ) );

    // 添加一个“链接颜色”设置
    $wp_customize->add_setting( 'link_color', array(
        'default'           => '#0073aa',
        'sanitize_callback' => 'sanitize_hex_color',
        'transport'         => 'postMessage', // 支持实时预览
    ) );

    // 为该设置添加一个颜色选择器控件
    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'link_color', array(
        'label'    => __( '链接颜色', 'my-awesome-theme' ),
        'section'  => 'theme_colors',
        'settings' => 'link_color',
    ) ) );
}
add_action( 'customize_register', 'my_awesome_theme_customize_register' );
?>

Afficher les paramètres personnalisés dans le thème.

Après avoir ajouté ces paramètres, il est nécessaire de les afficher sur l’interface utilisateur du thème. Cela se fait généralement…style.cssOu parwp_add_inline_style()Dans le CSS dynamique ajouté, il est utilisé…get_theme_mod()La fonction récupère une valeur.

<?php
function output_customizer_css() {
    $link_color = get_theme_mod( 'link_color', '#0073aa' ); // 第二个参数为默认值
    if ( $link_color !== '#0073aa' ) {
        $css = "
            a { color: {$link_color}; }
            a:hover { color: " . adjust_color( $link_color, -50 ) . "; }
        ";
        wp_add_inline_style( 'my-awesome-theme-style', $css );
    }
}
add_action( 'wp_enqueue_scripts', 'output_customizer_css' );
?>

De cette manière, les fonctionnalités et l’apparence du thème deviennent très personnalisables, tout en préservant la clarté et la sécurité du code.

résumés

Développer un thème pour WordPress est un projet systématique qui implique une compréhension approfondie des structures des templates, des fonctions de base du système, de la gestion des ressources, ainsi que des API personnalisées. Il faut commencer par construire les éléments les plus fondamentaux…style.cssetindex.phpPour commencer, il suffit de créer des fichiers de modèle spécifiques afin de contrôler l'affichage des différentes pages.functions.phpL’extension des fonctionnalités d’un thème, ainsi que la gestion des scripts et des styles conformément aux normes de WordPress, constituent les bases pour créer un thème solide et efficace. De plus, l’intégration de l’API du thème personnalisable offre aux utilisateurs une expérience de personnalisation en temps réel et intuitive. Maîtriser ces concepts et compétences essentiels est clé pour devenir un développeur de thèmes WordPress professionnel.

FAQ Foire aux questions

Un thème WordPress de base nécessite au minimum plusieurs fichiers. Quels sont-ils ?

Un thème de base, reconnu par WordPress, nécessite au minimum deux fichiers :style.cssetindex.php。style.cssLa partie en tête doit contenir les annotations d'information sur le sujet correct.index.phpIl s’agit du fichier de régression (« rollback file ») situé au niveau le plus élevé du système de templates, utilisé pour afficher le contenu le plus basique (le contenu de base).

Quelle est la différence entre un sous-sujet et un sujet parent ? Comment les créer ?

Les sous-thèmes héritent de toutes les fonctionnalités et des styles du thème parent, mais permettent aux développeurs de les modifier et de les personnaliser sans avoir à modifier les fichiers du thème parent. Cela facilite le maintien des modifications personnalisées lorsque le thème parent est mis à jour. Pour créer un sous-thème, il suffit de…/wp-content/themes/Créez un nouveau dossier dans le répertoire, puis y créez un fichier.style.cssLe fichier doit contenir, dans ses commentaires en tête, des informations essentielles.Template:Indique le nom du répertoire du thème parent.

Pourquoi mon modèle de page personnalisé n’apparaît-il pas dans la liste déroulante en arrière-plan ?

Veuillez vérifier vos fichiers de modèle de page (par exemple…)my-template.phpLe fichier doit se trouver dans le répertoire racine du thème, et le bloc de commentaires au début du fichier doit être formaté de manière parfaitement correcte. Le bloc de commentaires doit contenir…Template Name:Cette ligne, suivie immédiatement du nom de votre modèle, est essentielle pour que WordPress puisse la reconnaître correctement. Un espace incorrect ou l’absence d’un point-virgule peuvent empêcher WordPress de l’interpréter correctement.

Comment puis-je rendre mon thème compatible avec la traduction en plusieurs langues ?

Cela se réalise principalement grâce à l“” internationalisation (i18n) “ et à la ” localisation (l10n) ». Tout d’abord,style.cssLe “ Text Domain ” et…functions.phpdeload_theme_textdomain()Lors de l’appel, utilisez un domaine de texte thématique cohérent. Ensuite, appliquez cette convention à toutes les chaînes de caractères qui doivent être traduites.__()、_e()Encapsulez les fonctions de traduction nécessaires. Enfin, utilisez un outil comme Poedit pour générer le résultat final..potFichiers de modèle, et création des versions correspondantes pour chaque langue..poet.moLe fichier est placé dans le thème./languages/Catalogue.