Tutoriel pratique de développement de thèmes WordPress : créer un thème réactif moderne à partir de zéro.

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

Pour lancer un projet de développement de thème pour WordPress, il est nécessaire de configurer d’abord un environnement de travail approprié. Cela inclut non seulement un serveur de développement local, mais aussi l’établissement d’une structure de répertoires de projet claire et l’utilisation d’outils de développement modernes.

Il existe de nombreuses options pour mettre en place un environnement de développement local. Vous pouvez utiliser des paquets intégrés tels que XAMPP, MAMP ou Local by Flywheel, qui permettent d’installer rapidement Apache, MySQL et PHP sur votre ordinateur. Pour une expérience plus proche de l’environnement de production, vous pouvez envisager l’utilisation de conteneurs Docker. De plus, la plupart des développements de thèmes modernes commencent avec un éditeur de code de base, comme VS Code, accompagné des plugins nécessaires pour améliorer l’efficacité de la programmation.

Une structure de répertoire de thèmes standardisée et claire est la pierre angulaire de la maintenabilité d'un projet. Cela est particulièrement vrai pour WordPress.wp-content/themesDans le répertoire, créez un dossier portant le nom de votre sujet, par exemple…my-modern-themeDans ce dossier, vous devez créer deux fichiers essentiels :style.cssetindex.phpParmi ceux-ci,style.cssCe ne sont pas seulement des feuilles de style, mais elles contiennent également des métadonnées relatives au thème. Les autres fichiers et dossiers, tels que ceux utilisés pour stocker les scripts JavaScript, jouent également un rôle important dans le fonctionnement du site./js… où sont stockés les composants des modèles./template-parts…contenant les modèles de pages./page-templatesCes éléments peuvent être mis en place progressivement au cours du processus de développement.

Lectures recommandées Le guide ultime de Tailwind CSS : De l’initiation aux astuces pratiques pour devenir un expert。

Informations sur le en-tête du fichier de style thématique

Thématiquestyle.cssLa partie en tête du fichier doit contenir une annotation conforme à un format standard, destinée à informer le système WordPress de votre thème. Ces informations sont essentielles car elles définissent le nom du thème, son auteur, sa description, sa version, etc.

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 Modern Theme
Theme URI: https://example.com/my-modern-theme/
Author: Your Name
Author URI: https://example.com/
Description: 一个从零开始构建的现代、响应式WordPress主题。
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-modern-theme
*/

Parmi ceux-ciText DomainConçu pour l’internationalisation, cet élément servira de champ de texte pour les fonctions de traduction ultérieures. Une fois ces informations définies, votre thème apparaîtra dans la liste des thèmes du panneau d’administration de WordPress, sous “ Apparence ” -> “ Thèmes ”.

Introduire le fichier contenant les fonctions essentielles

même siindex.phpetstyle.cssCela suffit pour que un thème soit reconnu, mais un thème complet et fonctionnel doit contenir…functions.phpCe fichier n’est pas conçu pour afficher du contenu directement, mais il sert d“” moteur fonctionnel » pour les thèmes. Il permet d’ajouter des fonctionnalités de support pour les thèmes, de créer des menus de registration, des barres latérales, ainsi que d’intégrer des styles et des scripts.

Créez le fichier dans le répertoire racine du thème.functions.phpFichiers. Au stade initial, nous pouvons y ajouter quelques fonctionnalités de base. Vous pouvez le faire en…add_theme_support()La fonction permet de déclarer les fonctionnalités prises en charge par le thème, telles que les miniatures d’articles (Featured Image), le logo personnalisé, les balises HTML5, etc.

Créer le fichier de modèle principal

WordPress utilise un système de hiérarchie de templates pour déterminer la manière dont différents types de contenu sont affichés. Comprendre et créer ces fichiers de templates fondamentaux est essentiel pour transformer votre conception en un site web dynamique.

Lectures recommandées Analyse complète de la création de sites web modernes : guide pratique complet de la planification à la mise en ligne。

Le fichier de template le plus basique est…index.phpC’est le modèle de retrait final pour toutes les pages. Cependant, pour un contrôle plus précis, nous devrions créer des modèles plus spécifiques. Par exemple, un modèle pour afficher la liste des articles de blog.home.phpOuindex.php\n, utilisé pour afficher un article unique.single.php，用于显示静态页面的page.php… ainsi que pour afficher les catégories des articles, les tags, et d’autres informations sur les pages d’archivage.archive.phpDe plus,header.phpetfooter.phpUtilisé pour séparer le code situé en haut et en bas d'un site web.get_header()etget_footer()La fonction est appelée dans diverses templates, ce qui permet de réutiliser le code.

Créer un modèle de tête (header template)

header.phpLes fichiers contiennent généralement des documents HTML.<head>La structure du début des pages, ainsi que des éléments tels que l’identité du site et le menu de navigation principal, est très importante. Une étape clé dans la création d’un site web est de bien définir ces éléments afin de garantir une bonne expérience utilisateur.<head>Appel en cours…wp_head()Les « hooks » sont des mécanismes intégrés au noyau de WordPress, ainsi qu’aux plugins et thèmes, qui permettent d’afficher automatiquement le CSS, le JavaScript et les métadonnées nécessaires.

<!DOCTYPE html>
<html no numeric noise key 1008>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="https://gmpg.org/xfn/11">
    
</head>
<body no numeric noise key 1005>

<header id="masthead" class="site-header">
    <div class="site-branding">
        <?php the_custom_logo(); ?>
        <div class="site-title"><a href="/fr/</?php echo esc_url( home_url( '/' ) ); ?>"></a></div>
    </div>
    <nav id="site-navigation" class="main-navigation">
        'menu-1',
            'menu_id'        =&gt; 'primary-menu',
        ) );
        ?&gt;
    </nav>
</header>

Réaliser une boucle pour afficher les articles de manière répétée.

Le cycle d’articles est le mécanisme central permettant à WordPress d’afficher du contenu dynamique.index.php、single.phpDans ces modèles, nous utilisons…if ( have_posts() ) : while ( have_posts() ) : the_post();Parcourez et affichez chaque article.

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

<div id="primary" class="content-area">
    <main id="main" class="site-main">
        <?php
        if ( have_posts() ) :
            while ( have_posts() ) :
                the_post();
                // 为每篇文章加载对应的模板部件或内容模板
                get_template_part( 'template-parts/content', get_post_type() );
            endwhile;
            // 分页导航
            the_posts_navigation();
        else :
            // 没有找到内容时的模板
            get_template_part( 'template-parts/content', 'none' );
        endif;
        ?>
    </main>
</div>

get_template_part()Les fonctions constituent une excellente pratique qui vous encourage à séparer la structure HTML utilisée pour afficher le contenu des articles.template-parts/content.phpDans de tels fichiers de composants, il est important de rendre le fichier de modèle principal plus simple et plus lisible.

Réaliser un design et des styles réactifs

Les thèmes modernes doivent être réactifs, afin de fournir une bonne expérience de navigation sur toutes sortes d’écrans, des téléphones aux ordinateurs de bureau. Cela est principalement réalisé à l’aide des requêtes de médias CSS, du modèle de boîte flexible (Flexbox) et de la disposition en grille (CSS Grid).

Tout d’abord,functions.phpUtiliser correctement…wp_enqueue_style()La fonction ajoute votre fichier de style principal à la file d’attente. Assurez-vous de définir des styles qui dépendent des styles intégrés à WordPress lors de son appel.dashicons。

Lectures recommandées Le guide ultime de Tailwind CSS : de l’initiation à la maîtrise du développement web moderne。

function my_modern_theme_scripts() {
    // 引入主题主要样式表
    wp_enqueue_style( 'my-modern-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
    // 引入自定义脚本（如果有）
    wp_enqueue_script( 'my-modern-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()-`get( 'Version' ), true );
}
add_action( 'wp_enqueue_scripts', 'my_modern_theme_scripts' );

Stratégie CSS axée sur la mobilité

Il convient de rédiger le CSS en adoptant une stratégie de “ priorité au mobile ”. Cela signifie que l'on commence par définir les styles de base pour les appareils à écran petit (tels que les téléphones portables), puis on ajoute des styles complémentaires et des ajustements de mise en page pour les écrans de taille plus grande (tablets, ordinateurs de bureau) à l'aide de requêtes de médias.

/* 基础样式 - 针对移动设备 */
.site-header {
    padding: 1rem;
    display: flex;
    flex-direction: column;
}
.main-navigation ul {
    display: flex;
    flex-direction: column;
    list-style: none;
    padding: 0;
}

/* 针对平板及以上设备 */
@media (min-width: 768px) {
    .site-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .main-navigation ul {
        flex-direction: row;
        gap: 2rem;
    }
}

/* 针对大桌面设备 */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
        margin: 0 auto;
    }
}

Gérer des images réactives

WordPress offre un soutien puissant pour les images réactives. Utilisez-le.the_post_thumbnail()Apportez les paramètres de taille appropriés à la fonction, et WordPress affichera automatiquement le résultat avec ces dimensions.srcsetetsizesL’attribut `

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

Ces étiquettes permettent au navigateur de choisir le fichier d'image le plus approprié en fonction de l'écran de l'appareil, afin d'optimiser les performances de chargement.

<?php if ( has_post_thumbnail() ) : ?>
    <figure class="post-thumbnail">
        <?php the_post_thumbnail( 'large', array( 'class' => 'img-fluid' ) ); ?>
    </figure>
<?php endif; ?>

Ajouter la fonctionnalité de thèmes et la possibilité de personnalisation.

Une fois un thème de base mis en place, il est possible d’y ajouter diverses fonctionnalités via l’API de WordPress afin d’en améliorer l’utilisabilité et le professionnalisme. Cela inclut la création de menus personnalisés, la configuration d’une zone d’outils (barre latérale), ainsi que la personnalisation du thème à l’aide des outils de customization ou des pages d’options.

S’inscrire au menu de navigation

Dansfunctions.phpUtilisé dansregister_nav_menus()Une fonction est utilisée pour définir les emplacements dans lesquels votre thème prend en charge l'affichage des menus. Par la suite, les utilisateurs peuvent attribuer des menus à ces emplacements depuis l'onglet “ Apparence ” -> “ Menus ” en arrière-plan.

function my_modern_theme_setup() {
    // 注册一个主菜单
    register_nav_menus( array(
        'menu-1' => esc_html__( 'Primary Menu', 'my-modern-theme' ),
        'footer' => esc_html__( 'Footer Menu', 'my-modern-theme' ),
    ) );
    // 添加其他主题支持...
}
add_action( 'after_setup_theme', 'my_modern_theme_setup' );

Créer une zone pour les outils (ou les gadgets).

La zone des outils (Sidebar) permet aux utilisateurs de personnaliser les blocs de la page en faisant glisser des outils à leur guise.register_sidebar()Les fonctions sont enregistrées. Généralement, vous créez plusieurs zones de gadgets pour la barre latérale principale, la zone des gadgets en bas de page, etc.

function my_modern_theme_widgets_init() {
    register_sidebar( array(
        'name'          => esc_html__( 'Sidebar', 'my-modern-theme' ),
        'id'            => 'sidebar-1',
        'description'   => esc_html__( 'Add widgets here.', 'my-modern-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_modern_theme_widgets_init' );

Après l’enregistrement, dans les fichiers de modèle (comme…)sidebar.phpUtilisé dans…)dynamic_sidebar( 'sidebar-1' )L'affichage de cette zone se fait simplement en appelant la fonction correspondante.

API du intégrateur personnalisé

Le configurateur de WordPress permet aux utilisateurs de modifier les options de leur thème en temps réel, à travers une prévisualisation en direct. Vous pouvez ajouter des paramètres simples via l’API du configurateur, comme le choix de couleurs ou le téléchargement d’un logo. Cela implique l’utilisation des fonctionnalités offertes par cet outil.$wp_customize->add_setting()et$wp_customize->add_control()Méthode.

function my_modern_theme_customize_register( $wp_customize ) {
    // 添加一个站点标题颜色的设置
    $wp_customize->add_setting( 'header_textcolor', array(
        'default'           => '#000000',
        'sanitize_callback' => 'sanitize_hex_color',
    ) );

$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_textcolor', array(
        'label'    => __( 'Header Text Color', 'my-modern-theme' ),
        'section'  => 'colors',
    ) ) );
}
add_action( 'customize_register', 'my_modern_theme_customize_register' );

Ensuiteheader.phpDans ce cas, il est possible de procéder de la manière suivante :get_theme_mod( 'header_textcolor' )Obtenez cette valeur et appliquez-la à l’aide de styles intégrés (inline styles) ou d’autres méthodes appropriées.

résumés

Développer une thématique WordPress moderne et réactive de zéro est un projet systématique qui exige que le développeur soit non seulement familier avec PHP et les API de base de WordPress, mais aussi maîtrise HTML5, CSS3 (en particulier Flexbox, Grid et les queries de médias), ainsi que JavaScript. Le processus suit des principes de modularité et de maintenabilité : il commence par la mise en place de l’environnement de développement et la définition des informations de la thématique, puis se poursuit par la construction progressive de fichiers PHP organisés selon une hiérarchie de templates, afin de mettre en œuvre le cycle des articles de base. Ensuite, une stratégie CSS axée sur les appareils mobiles et des technologies d’images réactives sont utilisées pour garantir que le site fonctionne parfaitement sur tous les appareils. Enfin, les puissantes API de WordPress sont exploitées pour ajouter un menu de navigation, des zones de widgets et des fonctionnalités de personnalisation, offrant aux utilisateurs une grande flexibilité dans leurs modifications. En suivant ces étapes, vous pourrez créer une thématique WordPress professionnelle, efficace et facile à entretenir.

FAQ Foire aux questions

Pour développer un thème WordPress, quelles compétences de base sont nécessaires ?

Pour développer un thème WordPress complet, il vous faut maîtriser une série de technologies essentielles. La première est PHP, car WordPress est lui-même écrit en PHP, et tous les fichiers de template ainsi que la logique des fonctionnalités en dépendent. Ensuite, HTML5 et CSS3 sont indispensables pour construire la structure et le style des pages ; le design responsive repose notamment sur les queries de médias CSS ainsi que sur des modèles de mise en page modernes tels que Flexbox et Grid. Une connaissance de base de JavaScript est également nécessaire pour mettre en œuvre des fonctionnalités interactives. Enfin, il est crucial de comprendre profondément les concepts fondamentaux de WordPress, comme la hiérarchie des templates, les boucles d'affichage des articles, les hooks (points d'ancrage dans le code) et les filtres (mecanismes permettant de modifier le contenu des pages).

Quelle est la fonction de la « Text Domain » dans le fichier style.css ?

Text DomainC’est l’identifiant clé pour l’internationale et la localisation de vos thèmes. Son rôle est de créer un espace de noms unique pour toutes les chaînes de caractères pouvant être traduites dans votre thème. Dans le code, lorsque vous utilisez des éléments tels que…__('Hello World', 'my-modern-theme')Ou_e('Read More', 'my-modern-theme')Dans une telle fonction de traduction, le deuxième paramètre représente le domaine de texte concerné. Cela permet à l'outil de traduction (comme Poedit) d'identifier et d'extraire correctement les chaînes de caractères qui appartiennent à votre thème, afin de générer la traduction appropriée..poet.moVeuillez traduire le fichier de manière à ce que son contenu puisse être facilement adapté à n’importe quelle langue.

Comment faire en sorte qu'un thème prenne en charge la fonction de miniatures d’articles ?

Pour que le thème prenne en charge les vignettes d'articles (également appelées images de mise en évidence), vous devez ajouter un fichier appelé « featured.gif » au dossier « themes/default/images » du thème.functions.phpAjoutez la déclaration de support pour le thème correspondant dans le fichier. Utilisez…add_theme_support()Fonction, et transmettre les paramètres.'post-thumbnails'Paramètres. Vous pouvez les activer pour tous les types d’articles, ou spécifier qu’ils s’appliquent uniquement à certains types d’articles (par exemple…).postetpageActiver sur…

function my_theme_setup() {
    add_theme_support( 'post-thumbnails' );
    // 或者指定文章类型：add_theme_support( 'post-thumbnails', array( 'post', 'page' ) );
    // 你还可以在这里定义默认的缩略图尺寸：set_post_thumbnail_size( 800, 600, true );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

Après l’ajout de cette fonctionnalité, une boîte de métadonnées intitulée “Image de présentation” apparaîtra sur la page d’édition de l’article, permettant aux utilisateurs de télécharger ou de sélectionner une image. Cette boîte de métadonnées est utilisée dans le modèle.has_post_thumbnail()Vérifiez s'il existe des miniatures, et utilisez-les si nécessaire.the_post_thumbnail()Utilisez une fonction pour l'afficher.

Pourquoi recommander l'utilisation de la fonction `get_template_part` ?

get_template_part()Les fonctions constituent l’une des meilleures pratiques pour la réutilisation du code et la modularisation dans le développement de thèmes WordPress. Elles sont principalement utilisées pour séparer les codes de templates couramment utilisés (tels que la structure HTML affichant le contenu des articles) dans des fichiers distincts. Cela présente plusieurs avantages significatifs : le premier est d’améliorer la lisibilité et la maintenance du code. Le fichier de template principal (comme…)index.phpIl est devenu beaucoup plus simple à utiliser ; en second lieu, la flexibilité a été améliorée, vous pouvez charger différents fichiers de composants en fonction de conditions spécifiques (comme le type d’article), par exemple…get_template_part( 'template-parts/content', 'page' )La charge sera effectuée en priorité.content-page.phpEnfin, cela facilite la modification des sous-thèmes : il suffit de fournir un fichier de composant du même nom pour modifier la logique d'affichage du thème parent.