Guide d’introduction au développement de thèmes WordPress : Créez l’apparence de votre site web à partir de zéro.

Dans le domaine actuel du développement web, WordPress occupe une place importante grâce à sa grande flexibilité et son vaste écosystème. Le cœur de l'apparence et des fonctionnalités d'un site WordPress est son thème. Apprendre à développer un thème WordPress à partir de zéro vous permettra non seulement de contrôler complètement la conception de votre site, mais aussi de comprendre en profondeur les principes de fonctionnement de WordPress. Cet article vous guidera à travers toutes les étapes nécessaires pour créer un thème simple mais complet.

Environnement de développement et infrastructure de base

Avant d’écrire la première ligne de code, il est essentiel de mettre en place un environnement de développement local approprié. Vous pouvez utiliser des outils tels que XAMPP, MAMP, Local by Flywheel ou Docker. Assurez-vous que l’environnement contient PHP, MySQL et Apache/Nginx. Ensuite, installez une nouvelle instance de WordPress pour les tests.

Un thème WordPress est essentiellement un ensemble de fichiers situés dans le répertoire wp-content/themes de votre site WordPress. /wp-content/themes/ Le dossier sous le répertoire. Le nom de ce dossier est l’identifiant de votre thème. Dans ce dossier, deux fichiers sont obligatoires et constituent la structure de base du thème.

Lectures recommandées Du niveau débutant au niveau expert dans le développement de thèmes WordPress : créer des sites Web personnalisés et performants.。

Document de déclaration d'information sur le sujet.

Le premier document nécessaire est : style.cssSon rôle n’est pas seulement de stocker les styles, mais aussi, et surtout, les blocs d’annotations en haut du fichier, qui servent à déclarer les métadonnées du thème à WordPress. Ce bloc d’informations doit être placé tout en haut du fichier.

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
Text Domain: my-first-theme
*/

Parmi ceux-ci,Text Domain À des fins d'internationalisation, à utiliser ultérieurement dans le thème. __() Ou _e() Lorsque la fonction traduit des chaînes de caractères, elle doit respecter cette cohérence.

Fonctions clés et fichiers d’introduction des templates

Le deuxième document nécessaire est : index.phpC'est le fichier de modèle par défaut du thème. Lorsque WordPress ne trouve pas de fichier de modèle plus spécifique, il l'utilise pour afficher la page. Même s'il est temporairement vide, il doit exister.

Cependant, une approche plus moderne et standard consiste à créer un functions.php Ce fichier est un “ plug-in fonctionnel ” de votre thème, qui sert à ajouter des fonctionnalités de support au thème, à enregistrer des menus, des barres latérales, ainsi que des styles et des scripts d’arrière-plan. Bien qu’il ne soit pas obligatoire, il est presque toujours inclus dans tous les thèmes.

<?php
// 主题功能定义
function my_first_theme_setup() {
    // 让 WordPress 管理文档标题
    add_theme_support( 'title-tag' );
    // 启用文章和评论的 RSS feed 链接
    add_theme_support( 'automatic-feed-links' );
    // 启用文章缩略图（特色图像）功能
    add_theme_support( 'post-thumbnails' );
    // 注册一个导航菜单
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );
?>

Créer le fichier de modèle principal.

WordPress utilise un système de hiérarchie de modèles pour déterminer quel fichier de modèle utiliser pour une page spécifique. Comprendre et créer ces fichiers est au cœur du développement d’un thème. En plus de cela, index.phpVous devez au moins créer les modèles de base suivants.

Lectures recommandées Guide d’introduction au développement de thèmes WordPress : créer une interface avancée à partir de zéro.。

La tête et la queue communes à tout le site.

header.php Le fichier contient du code générique en haut de chaque page, comme la déclaration du type de document, la zone, le titre du site et la navigation principale. Utilisez-le. get_header() La fonction est appelée dans le modèle.

footer.php Le fichier contient du code générique en bas de chaque page, comme les informations de copyright, les références de scripts, etc. Utilisez-le. get_footer() Appel de fonction.

Un exemple typique… header.php La partie d'introduction est la suivante :

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

<!DOCTYPE html>
<html no numeric noise key 1008>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
</head>
<body no numeric noise key 1005>

<header>
    <h1><a href="/fr/</?php echo esc_url( home_url( '/' ) ); ?>"></a></h1>
    <p></p>
    <nav>
        'primary',
            'menu_class'     =&gt; 'primary-menu',
        ) );
        ?&gt;
    </nav>
</header>

wp_head() et wp_footer() Ce sont des éléments essentiels, et de nombreux plugins ainsi que les fonctionnalités principales de WordPress s'appuient sur eux pour injecter du code. Il est donc primordial de s'assurer qu'ils sont bien présents.

La rotation des articles et l'affichage du contenu.

single.php Il est utilisé pour afficher un article de blog individuel ou un type d’article personnalisé. Son élément central est la “ boucle WordPress ”, un mécanisme permettant de récupérer et d’afficher du contenu à partir d’une base de données.

Un élément de base single.php La structure est la suivante :

Lectures recommandées Maîtriser le développement de thèmes WordPress de zéro à un : un guide pratique pour créer des sites Web modernes.。

<main>
    
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1011>
            <h1></h1>
            <div class="meta">
                Publié en : &lt;?php the_date() ; ? | Auteur :
            </div>
            <?php if ( has_post_thumbnail() ) : ?>
                <div class="post-thumbnail">
                    <?php the_post_thumbnail( 'large' ); ?>
                </div>
            
            <div class="content">
                
            </div>
        </article>
        <br />
</main>

page.php Utilisé pour afficher des pages statiques, sa structure est similaire à… single.php C'est similaire, mais en général, la date de publication et l'auteur ne sont pas affichés.

Styles, scripts et barres latérales

Un thème esthétique et fonctionnel nécessite l’utilisation de CSS et de JavaScript, tandis que la barre latérale fournit un point de montage pour les petits widgets.

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 et des scripts en toute sécurité.

Ne mettez jamais de liens directs vers des fichiers CSS et JS dans les fichiers de template. La bonne méthode consiste à… functions.php Les documents, utilisez-les. wp_enqueue_style() et wp_enqueue_script() Le but de cela est d’utiliser une fonction pour les “ mettre en file d’attente ”. Cela garantit que les dépendances sont correctes et évite le chargement répété.

function my_first_theme_scripts() {
    // 排队主题的主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
    // 排队一个自定义 JavaScript 文件
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()->get( 'Version' ), true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Enregistrer la barre latérale dynamique

La barre latérale (zone des widgets) permet aux utilisateurs d'ajouter du contenu dynamiquement via l'interface d'administration de WordPress. Vous devez d'abord le configurer dans < functions.php Enregistrez-le en Chine.

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' );

Après l'inscription, vous pouvez utiliser des fichiers de modèle (tels que sidebar.phpUtilisé dans…) dynamic_sidebar( 'sidebar-1' ) Nous allons utiliser une fonction pour appeler cette barre latérale et l'afficher là où c'est nécessaire. get_sidebar() Introduire.

L'internationalisation du thème et la préparation à sa publication.

Après avoir achevé le développement de base du thème, il reste deux étapes importantes : l'internationalisation (i18n) pour la traduction, et la préparation à la publication.

Mettre en œuvre la fonction de traduction de texte.

L’internationnalisation consiste à envelopper toutes les chaînes de texte destinées aux utilisateurs à l’aide de fonctions spécifiques de WordPress, afin qu’elles puissent être traduites en d’autres langues. Cela se fait principalement… ()、_e() Les fonctions et esc_html() De telles variantes.

Vous devez vous assurer que... style.css La configuration correcte a été effectuée dans le centre de contrôle. Text Domain… et également dans functions.php de after_setup_theme Appeler une action pendant une animation load_theme_textdomain()。

function my_first_theme_load_textdomain() {
    load_theme_textdomain( 'my-first-theme', get_template_directory() . '/languages' );
}
add_action( 'after_setup_theme', 'my_first_theme_load_textdomain' );

Ensuite, utilisez quelque chose de similaire. echo __( '阅读更多', 'my-first-theme' ); La méthode consiste à exporter tous les chaînes de caractères. Les développeurs peuvent utiliser des outils tels que Poedit pour générer ces chaînes. .pot Traduire le fichier de modèle.

Créer des captures d'écran thématiques et des listes de contrôle.

Avant de soumettre un thème au catalogue ou de le livrer à un client, il est nécessaire de créer une capture d'écran du thème. C'est une étape appelée screenshot.png Les images, dont la taille est généralement de 1200 × 900 pixels, présentent l’apparence de votre thème. Placez-les dans le répertoire racine du thème.

En outre, il est bon de procéder à une vérification thématique. Vous pouvez installer le plug-in “ Theme Check ”, qui soumettra votre thème à une série de tests conformes aux normes les plus récentes du répertoire de thèmes WordPress, afin de garantir la qualité de son code, sa sécurité et sa compatibilité.

résumés

Développer un thème WordPress à partir de zéro est un projet systématique qui implique de nombreux aspects, allant de la structure de base des fichiers et de la hiérarchie des modèles aux fonctions et à l'internationalisation. En créant un thème WordPress à partir de zéro, vous devez prendre en compte tous ces aspects. style.css、functions.php En outre, une série de fichiers modèles vous permettra de construire progressivement l’ossature du site. Comprendre et utiliser correctement les boucles WordPress, les balises de modèle et les fonctions d’accroche est la clé. Suivre les meilleures pratiques, telles que l’ordonnancement sécurisé des scripts, l’enregistrement des menus et des barres latérales, ainsi que l’ajout d’une prise en charge de la traduction pour tout le texte, rendra votre thème plus professionnel, robuste et facile à entretenir. Ce processus vous permettra non seulement d’obtenir la possibilité de personnaliser l’apparence de votre site, mais aussi de mieux comprendre le fonctionnement de WordPress, un puissant système de gestion de contenu.

FAQ Foire aux questions

Quelles langages de programmation faut-il maîtriser pour développer des thèmes pour WordPress ?

Pour développer un thème WordPress, il est essentiel de maîtriser le PHP, le HTML, le CSS et le JavaScript de base. Le PHP est utilisé pour traiter la logique et appeler les fonctions WordPress ; le HTML sert à structurer les pages ; le CSS est responsable de la conception des styles ; et le JavaScript est utilisé pour réaliser des effets interactifs. Une compréhension approfondie des fonctions et du système de hooks de WordPress est également cruciale.

Comment faire en sorte que mon thème soit compatible avec l'éditeur de blocs de Gutenberg ?

Afin que votre thème soit mieux compatible avec l'éditeur de blocs Gutenberg, vous pouvez le faire en : functions.php Ajoutez des fonctionnalités de support pour des sujets pertinents. Par exemple, utilisez add_theme_support( 'wp-block-styles' ) Pour charger le style par défaut du bloc central ; utilisez add_theme_support( 'align-wide' ) Pour activer les options d’alignement large et d’alignement pleine largeur. Vous pouvez également ajouter des styles d’éditeur aux articles et aux pages, afin de vous assurer que l’aperçu de l’éditeur d’arrière-plan correspond à celui de l’avant-plan.

Quelle est la différence entre le fichier functions.php d'un thème et un plugin ?

functions.php Les fichiers font partie du thème, et leur fonctionnalité est étroitement liée à la profondeur du thème. Lorsque vous changez de thème, le code qu’ils contiennent n’est généralement plus valide. Leur rôle principal consiste à ajouter des fonctionnalités, des styles et des scripts à un thème spécifique. Les plugins, quant à eux, sont des modules fonctionnels indépendants du thème, conçus pour fournir des fonctionnalités communes ou spécifiques pouvant être utilisées dans différents thèmes. Un principe simple consiste à placer les fonctionnalités étroitement liées à l’apparence du site Web dans le thème, et à créer des plugins pour les fonctionnalités réutilisables et indépendantes.

Comment déboguer les erreurs PHP que je rencontre lors du développement de thèmes ?

Tout d’abord, assurez-vous que… wp-config.php Le mode de débogage est activé dans le fichier. Veuillez le désactiver. define( ‘WP_DEBUG’, true ); Cette ligne est configurée pour trueCela affichera tous les erreurs, avertissements et notifications PHP sur la page. Pour plus de sécurité (en évitant d'afficher les erreurs au public), vous pouvez également configurer ceci en même temps. define( ‘WP_DEBUG_LOG’, true ); Enregistrer l'erreur dans le journal des erreurs. /wp-content/debug.log En outre, utilisez les outils de développement du navigateur (onglets Console et Réseau) pour vérifier les erreurs JavaScript et les problèmes de chargement des ressources.