Introduction au développement de thèmes pour WordPress : Créez votre premier thème personnalisé à partir de zéro

Quand vous commencez à apprendre le développement WordPress, créer votre propre thème est une étape passionnante. Cela vous permet non seulement de contrôler totalement l'apparence et les fonctionnalités de votre site, mais c'est aussi la meilleure façon de comprendre en profondeur l'architecture de base de WordPress. Cet article vous guidera tout au long du processus, de la configuration de l'environnement à la création d'un thème de base, pour vous aider à faire le premier pas pour devenir un développeur WordPress.

Préparatifs avant le développement

Avant de commencer à écrire du code, il est essentiel de mettre en place un environnement de développement local efficace. Cela vous permettra de tester et de déboguer sans affecter le site en ligne.

Créer un environnement de développement local

Nous devons d’abord installer le logiciel de serveur local. Vous pouvez choisir des outils tels que XAMPP, MAMP ou Local by Flywheel. Ces logiciels intègrent le serveur Apache, la base de données MySQL et PHP, et sont indispensables pour faire fonctionner WordPress. Prenons l’exemple de XAMPP : après l’installation, lancez les services Apache et MySQL, et votre ordinateur se transformera en un serveur local.

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

Ensuite, téléchargez la dernière version de WordPress et décompressez-la dans le répertoire racine du site de votre serveur local (par exemple, celui de XAMPP).htdocs(Dossier). Ensuite, en accédant àhttp://localhost/your-wordpress-folderPour effectuer la fameuse “ installation en cinq minutes ”. Pendant l’installation, vous devez créer une base de données et définir le nom d’utilisateur et le mot de passe de l’administrateur du site Web.

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

Préparez un éditeur de code et des outils.

Un excellent éditeur de code peut grandement améliorer l’efficacité du développement. Visual Studio Code, PhpStorm ou Sublime Text sont tous de bonnes options. En particulier, VS Code dispose d’extensions riches pour WordPress et PHP, telles que PHP Intelephense, qui offre un complétement de code intelligent et une vérification de la syntaxe.

En outre, il est recommandé d’installer un plug-in d’outils de développement de navigateur, tel que le plug-in “ Theme Check ” officiel de WordPress, pour vérifier si le thème est conforme aux normes à un stade ultérieur du développement. Vous pouvez également utiliser la fonction “ Inspecter les éléments ” du navigateur pour déboguer le HTML et le CSS en temps réel.

Comprendre la structure de base des thèmes WordPress

Un thème WordPress simplifié ne nécessite que deux fichiers, mais une structure complète et conforme aux normes contient plusieurs fichiers spécifiques, chacun ayant des fonctions différentes.

Le fichier de style principal.

Chaque thème WordPress doit en avoir un.style.cssCe fichier n’est pas seulement un fichier CSS qui définit le style du thème. Le bloc d’annotations en tête de fichier constitue la “ carte d’identité ” du thème et contient toutes les métainformations nécessaires à WordPress pour identifier le thème. Une annotation d’en-tête de base ressemble à ceci  :

Lectures recommandées Développement de thèmes pour WordPress : Guide complet pour créer vos propres thèmes à partir de zéro。

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

Parmi ceux-ci,Text DomainPour l'internationalisation, c'est l'appel ultérieur à la fonction de traduction.__()Ou_e()Les identifiants utilisés à ce moment-là.

Les fichiers de modèle de base.

Un autre document nécessaire estindex.phpC'est le modèle par défaut du thème, lorsque WordPress ne trouve pas d'autres fichiers de modèle plus spécifiques (tels que <).single.phpOupage.phpLorsque vous utilisez le plug-in WordPress « WPML », il est utilisé pour afficher la page.

Avec ces deux fichiers uniquement, votre thème apparaîtra dans la liste “ Apparence ” -> “ Thèmes ” de l’interface d’administration de WordPress et pourra être activé. Bien sûr, il ne s’agit pour l’instant que d’une structure vide. Pour que le thème fonctionne réellement, nous devrons créer plusieurs fichiers de modèle clés.

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

Tout d'abord, créez unheader.phpIl contient l'en-tête du document HTML, tel que :<doctype>Déclaration,<head>La région (dans laquelle vous devez utiliser)wp_head()La fonction introduit les scripts et les styles principaux de WordPress, ainsi que le balisage de l'en-tête du site Web.

Ensuite, créezfooter.phpIl contient le contenu du pied de page du site Web et appelle avant de se terminer.wp_footer()Une fonction, c'est un crochet nécessaire pour que de nombreux plugins puissent ajouter du code en bas de la page.

Enfin, créer…functions.phpCe fichier n’est pas obligatoire, mais il constitue le “ cerveau ” du thème. Vous pouvez y ajouter les fonctionnalités prises en charge par le thème, enregistrer les menus et les barres latérales, importer des fichiers de style et de script, ainsi que définir diverses fonctions personnalisées.

Lectures recommandées Comment développer un thème WordPress personnalisé à partir de zéro ?。

La fonctionnalité centrale de la création d'un thème.

Après avoir créé le document de base, nous pouvons commencer à donner vie au thème et lui permettre d’offrir les fonctionnalités de base d’un site web.

Réaliser un menu de navigation.

Les sites web modernes ont généralement un menu de navigation. Tout d'abord, vous devez créer un menu de navigation.functions.phpUtilisé dansregister_nav_menus()Fonction pour enregistrer l'emplacement des plats.

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

function my_first_theme_setup() {
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
        'footer'  => __( '页脚菜单', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

Ce code enregistre deux emplacements de menu : “ Menu de navigation principal ” et “ Menu de pied de page ”. Ensuite, dans les modèles où vous souhaitez afficher les menus (par exemple), vous pouvez utiliser les emplacements suivants :header.php(En chinois), utilisezwp_nav_menu()La fonction l’appelle.

wp_nav_menu( array(
    'theme_location' => 'primary',
    'menu_class'     => 'primary-menu',
) );

Les utilisateurs peuvent désormais créer des menus dans la section “ Apparence ” -> “ Menus ” de l’interface d’administration de WordPress, puis les affecter à la position “ Menu de navigation principal ”.

Activate the article featured image and sidebar.

De nombreux thèmes prennent en charge les vignettes d'articles (images de présentation) et les barres latérales de widgets. De même, surfunctions.phpdemy_first_theme_setupDans la fonction, ajoutez le code suivant pour activer ces fonctionnalités :

add_theme_support( 'post-thumbnails' ); // 启用文章特色图像
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) ); // 启用HTML5标记支持

Pour enregistrer une zone de widgets latérale, utilisez :register_sidebar()Fonction :

function my_first_theme_widgets_init() {
    register_sidebar( array(
        'name' => __('Main Sidebar', 'my-first-theme' ),
        'id' => 'sidebar-1',
        'description' => __('Ajouter un widget ici.' , 'mon-premier-thème' ), 'description' => __( 'Ajouter un widget ici.
        '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_first_theme_widgets_init' );

Ensuite, dans le fichier de modèle (par exemple,sidebar.phpUtilisé dans…)dynamic_sidebar( 'sidebar-1' )Pour afficher cette zone.

Intégrer le modèle et ajouter un style.

Maintenant, nous allons relier les différentes parties du modèle et lui ajouter un style de base afin que le site ait une apparence visuelle.

\nUtiliser un modèle pour introduire une fonction.

WordPress fournit plusieurs fonctions principales pour intégrer d'autres fichiers de modèle, ce qui garantit la modularité et la maintenabilité du code. Dans votreindex.phpEn chinois, la structure devrait être la suivante :

<?php get_header(); ?>

<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>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

get_header(), get_sidebar(), get_footer()Les fonctions introduisent respectivement les fichiers de modèle correspondants.get_template_part()C'est une fonction plus flexible, qui vous encourage à séparer les blocs de contenu réutilisables (comme les résumés d'articles) entemplate-partsDans les fichiers indépendants sous le dossier, par exemple.content.php。

Écrire des styles de base et une conception réactive.

Maintenant, ouvrez-le.style.cssCommençons par ajouter du style à votre thème. Tout d’abord, définissez quelques styles globaux, tels que le modèle de boîte, la police et la couleur.

* {
    box-sizing: border-box;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
    color: #333;
    margin: 0;
}
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

Pour mettre en œuvre une conception réactive, utilisez des requêtes média pour ajuster la disposition en fonction de la taille de l'écran. Par exemple, déplacez la barre latérale sous le contenu principal sur les petits écrans :

@media (max-width: 768px) {
    .site-main {
        width: 100%;
    }
    #sidebar {
        width: 100%;
        margin-top: 2rem;
    }
}

N'oubliez pas d'indiquer...header.phpde<head>Ajoutez des balises de vue partielle pour garantir un redimensionnement correct sur les appareils mobiles :<meta name="viewport" content="width=device-width, initial-scale=1">。

résumés

Depuis la création d’un élément contenant…style.cssetindex.phpLe processus commence par la création d’un dossier et se poursuit par la construction d’un thème complet comprenant une navigation, une barre latérale et une mise en page réactive. Ce processus couvre les concepts fondamentaux du développement de thèmes WordPress. Vous avez appris comment créer un thème WordPress à partir de zéro en utilisant le langage de programmation PHP et le framework WordPress.functions.phpÉlargissez les fonctionnalités du thème, découvrez comment organiser le code à l'aide d'un système de hiérarchie de modèles, et comment transformer un design en HTML et en CSS pour le front-end. Ce n'est qu'un point de départ ; vous pourrez ensuite explorer des fichiers de modèles plus avancés (tels que <).single.php, page.php, archive.phpIl est possible, par exemple, de créer des types d’articles personnalisés, d’utiliser l’API du personnalisateur de thèmes, et même d’utiliser Sass et des frameworks JavaScript pour créer des thèmes plus complexes et modernes. Pratiquer régulièrement et se référer à la documentation officielle des développeurs est le meilleur moyen d’améliorer ses compétences.

FAQ Foire aux questions

Les thèmes de développement doivent-ils utiliser des sous-thèmes ?

Pas nécessairement. Il est tout à fait possible de créer un thème indépendant à partir de zéro, et c'est la meilleure façon d'apprendre les principes fondamentaux. L'utilisation de sous-thèmes est généralement une bonne pratique lorsqu'il s'agit de personnaliser et de modifier un thème parent existant (comme un thème de framework populaire), car cela garantit que vos modifications personnalisées ne seront pas écrasées lorsque le thème parent sera mis à jour. Pour de nouveaux projets de développement, il est plus courant de construire un thème indépendant à partir de zéro.

Comment faire en sorte que mon thème soit compatible avec plusieurs langues ?

Pour que le thème prenne en charge plusieurs langues (internationalisation), il faut principalement suivre deux étapes. Tout d’abord, dansstyle.cssLa tête et lefunctions.phpToutes les chaînes de caractères nécessitant une traduction sont encapsulées dans la fonction de traduction de WordPress, par exemple :__( ‘文本’, ‘my-first-theme’ )Ou_e( ‘文本’, ‘my-first-theme’ )Ensuite, vous devez utiliser un outil comme Poedit pour créer.potTraduire le fichier de modèle, puis générer la version correspondante pour chaque langue..poet.moOuvrez le fichier et placez-le dans le dossier du thème./languagesDans le répertoire.

Après avoir développé un thème, comment le publier ?

Avant la publication, assurez-vous de tester rigoureusement votre thème avec l’extension “ Theme Check ” afin de vous assurer qu’il respecte toutes les normes de codage et les exigences de sécurité du répertoire de thèmes WordPress. Nettoyez tout le code de débogage et les commentaires. Ensuite, vous pouvez choisir de soumettre le thème au répertoire officiel de thèmes WordPress.org (qui nécessite une révision) ou de le packager dans un fichier ZIP pour le fournir directement aux clients ou le distribuer sur votre propre site Web. Si vous le distribuez vous-même, veillez à fournir des instructions d’installation et une documentation claires.

Pourquoi mon style personnalisé a-t-il disparu après une mise à jour en arrière-plan ?

Cela est probablement dû au fait que vous avez directement modifié les fichiers du thème parent que vous utilisez. Lorsque ce thème parent est mis à jour via l’interface d’administration de WordPress, tous les fichiers principaux sont remplacés par la nouvelle version, ce qui entraîne la perte de vos modifications. C’est pourquoi, pour tout développement personnalisé, il est fortement recommandé d’utiliser un thème enfant. Le style et les fonctions du thème enfant sont chargés indépendamment du thème parent, et même si le thème parent est mis à jour, vos fichiers de thème enfant conserveront tous vos contenus personnalisés intacts.