Guide de début pour le développement de thèmes WordPress : Construire votre premier thème à partir de zéro

Préparatifs avant le début

Avant de commencer à écrire le moindre code, il est essentiel de vérifier que l’environnement de développement est prêt. Tout d’abord, vous aurez besoin d’un environnement de serveur local, tel que XAMPP, MAMP, ou bien d’utiliser Docker. Ensuite, un éditeur de code est indispensable ; Visual Studio Code ou PHPStorm sont de très bonnes options. Le plus important est d’installer la dernière version de WordPress et de vous assurer qu’elle fonctionne correctement.

Ensuite, dans le répertoire d’installation de WordPress…wp-content/themesDans le dossier, créez un nouveau dossier qui servira de répertoire pour votre thème. Par exemple, vous pouvez l’appeler…my-first-themeLe nom de ce répertoire deviendra directement votre identifiant de thème ; il est donc conseillé d’utiliser des lettres minuscules, des chiffres et des traits d’union.

Dans le dossier thématique, il y a deux fichiers qui sont indispensables et constitueent le minimum requis pour lancer un thème WordPress :style.cssetindex.phpSans elles, WordPress ne sera pas en mesure de reconnaître votre thème dans la liste des thèmes, située dans la section “ Apparence ” → “ Thèmes ” en arrière-plan.

Lectures recommandées Apprendre le développement de thèmes WordPress à partir de zéro : Un guide complet pour créer des sites web personnalisés。

Comprendre la structure de base des fichiers liés au sujet.

Un thème WordPress complet et fonctionnel est composé d’une série de fichiers de template qui suivent des conventions de nommage spécifiques. Chaque fichier est responsable de l’affichage d’une partie différente 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

Feuilles de style et déclarations d'informations sur les thèmes

style.cssLes fichiers ne servent pas seulement à contenir des styles CSS ; leur section d’annotations en tête est également utilisée par WordPress pour lire les métadonnées (meta data) du thème. Cette section doit se trouver en tout en haut du fichier et respecter un format spécifique.

/*
Theme Name: 我的第一个主题
Theme URI: http://example.com/my-first-theme/
Author: 你的名字
Author URI: http://example.com/
Description: 这是一个用于学习的入门级WordPress主题。
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-first-theme
*/

“Le ” Text Domain “ est utilisé pour l’internationalisation et constitue un identifiant essentiel pour le chargement ultérieur des fichiers de traduction. Après avoir saisi ces informations, rafraîchissez la page thème dans l’administration de WordPress, et vous devriez voir une miniature intitulée ” Mon premier thème ».

Quelle est la fonction du fichier de modèle principal ?

index.phpIl s’agit du fichier de modèle principal de votre thème, ainsi que du modèle de “ régression ” (ou de remplacement) par défaut du site web. Lorsque WordPress ne trouve pas de fichier de modèle plus spécifique…single.phpOupage.phpLorsque c’est le cas, on utilise…index.phpSa structure de base consiste à inclure la partie en-tête de WordPress, le contenu du boucle principale, et la partie en pied.

<main id="main">
    &lt;?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            // 显示文章内容
            the_title( &#039;<h2>', '</h2>' );
            the_content();
        endwhile;
    else :
        echo '<p>没有找到任何文章。</p>';
    endif;
    ?&gt;
</main>

Étendre les modèles de base et intégrer de nouvelles fonctionnalités

Seulementindex.php、style.cssCe n’est pas suffisant ; nous devons séparer les parties telles que la tête, la fin et les barres latérales afin de rendre la structure plus claire, et intégrer les fonctionnalités essentielles du thème.

Lectures recommandées Partir de zéro : apprendre à développer un thème WordPress personnalisé étape par étape.。

Séparer les templates de la partie supérieure (en-tête) de la partie inférieure (pièce de contenu).

Créerheader.phpLe fichier contient une déclaration du type de document, ainsi que le code HTML lui-même.Certaines parties du site, ainsi que les titres et les zones de navigation. Utiliser…wp_head()Des « crochets » sont utilisés pour garantir que les plugins et le noyau de WordPress injectent correctement les scripts et les styles nécessaires.

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

<header>
    <h1><a href="/fr/</?php echo esc_url( home_url( '/' ) ); ?>"></a></h1>
</header>

Créerfooter.phpCe fichier contient les informations du pied de page du site web, et il effectue une appel (une fonction ou une instruction) à la fin de son contenu.wp_footer()Crochet.

<footer>
    <p>©</p>
</footer>

</body>
</html>

Ainsi,index.phpDans ce cas, nous pouvons l’utiliser.get_header()etget_footer()Des fonctions sont utilisées pour les introduire.

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

Créer un fichier de fonctionnalités

functions.phpIl s’agit du “ cerveau ” du thème, utilisé pour ajouter des fonctionnalités, créer des menus de registration, activer des images dédiées, définir les barres latérales, etc. Ce n’est pas un fichier de modèle, mais un fichier PHP qui est chargé automatiquement lors de l’initialisation du thème.

Voici ce qui suit :functions.phpUn exemple de base :

<?php
// 启用文章和页面的特色图像功能
add_theme_support( 'post-thumbnails' );

// 注册一个导航菜单位置
function my_first_theme_register_menus() {
    register_nav_menus(
        array(
            'primary-menu' => __( '主导航菜单', 'my-first-theme' ),
        )
    );
}
add_action( 'init', 'my_first_theme_register_menus' );

// 引入主题的样式表和脚本
function my_first_theme_enqueue_scripts() {
    // 引入主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), '1.0' );
    // 引入一个自定义的JavaScript文件
    wp_enqueue_script( 'my-first-theme-script', get_template_directory_uri() . '/js/script.js', array('jquery'), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_enqueue_scripts' );
?>

Créer davantage de fichiers de modèles.

Afin que les différentes types de pages aient un layout plus approprié, nous devons créer davantage de fichiers de templates spécifiques.

Lectures recommandées De l'installation à la maîtrise : guide complet de WordPress pour la création d'un site web et conseils pratiques pour une analyse complète。

Article single page et page template

single.phpConçu pour afficher un seul article de blog. Sa structure est similaire à…index.phpSimilaire, mais généralement contenant des modèles de commentaires.comments.phpL’appel de…

page.phpIl est utilisé pour rendre des pages statiques. Il ne affiche généralement pas de métadonnées telles que des catégories ou des tags, mais se concentre plutôt sur le contenu de la page lui-même.

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

Modèle de liste d'archivage d'articles

archive.phpUtilisé pour afficher des informations sur les catégories, les tags, les auteurs, les dates, etc., sur les pages d’archivage. Vous pouvez utiliser des balises conditionnelles telles que…is_category()、is_tag()Pour distinguer les différents types d’archivages et afficher les titres correspondants.

Créer une page d'erreur 404.

404.phpC’est la page qui s’affiche lorsque l’utilisateur accède à une URL inexistante. Une bonne page 404 doit contenir un message aimable, un champ de recherche et des liens vers les pages principales, afin d’aider l’utilisateur à trouver le contenu souhaité.

résumés

À travers cette guide, vous avez suivi le processus complet allant de la création de dossiers et de fichiers essentiels à la compréhension de la structure des templates, en passant par l’extension des fonctionnalités d’un thème et la création de templates personnalisés. Vous avez ainsi construit un thème doté d’une structure de base, reconnu par WordPress et capable de prendre en charge des fonctionnalités supplémentaires. Bien que cela puisse sembler simple, ce thème intègre déjà tous les concepts fondamentaux. À l’avenir, vous pourrez approfondir votre connaissance des balises de templates, des requêtes personnalisées, des boucles WordPress, ainsi que des méthodes pour créer des types d’articles et des options de personnalisation de thème, afin de rendre votre thème encore plus puissant et adapté à vos besoins.

FAQ Foire aux questions

Pourquoi mon thème n’apparaît-il pas dans l’administration de WordPress ?
Veuillez vérifier d’abord si votre dossier de thèmes est placé dans le bon emplacement.wp-content/themes/Dans le répertoire. Ensuite, vérifiez si le dossier contient les éléments nécessaires.style.cssetindex.phpFichier. Enfin, ouvrez-le.style.cssAssurez-vous que le bloc de commentaires contenant les informations thématiques en haut du fichier est formaté de manière complètement correcte, en particulier…Theme Name:Cette ligne.

Comment ajouter le support d'un logo personnalisé à mon thème ?

Vous avez besoin de… (The sentence is incomplete; please provide the complete sentence for a proper translation.)functions.phpAjoutez une ligne de code dans le fichier pour activer cette fonction.add_theme_support( ‘custom-logo’ )Cette fonction permet aux utilisateurs de télécharger et de configurer leur logo dans les options “ Apparence ” -> “ Personnalisation ” -> “ Identité du site ” une fois qu’elle est activée. Vous devez également…header.phpUtilisez-le à l’endroit approprié.the_custom_logo()Utilisez une fonction pour l'afficher.

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

functions.phpLes fonctionnalités intégrées sont étroitement liées au thème actuellement activé. Si vous changez de thème, ces fonctionnalités ne seront plus disponibles. En revanche, les fonctionnalités des plugins sont indépendantes du thème ; elles s’appliquent quel que soit le thème utilisé, tant que le plugin est activé. Par conséquent, si vos fonctionnalités sont fortement liées à l’aspect visuel du thème (par exemple, l’emplacement des menus de registration ou la définition du layout), il est préférable de les placer…functions.phpSi il s’agit de fonctionnalités universelles (comme les formulaires de contact ou l’optimisation SEO), il est plus approprié de les réaliser sous forme d’extensions (plugins).

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

Vous devez faire deux choses. Premièrement, pendant le développement, enveloppez toutes les chaînes de caractères destinées aux utilisateurs à l’aide d’une fonction de traduction. Par exemple…__( ‘文本’, ‘my-first-theme’ )Ou_e( ‘文本’, ‘my-first-theme’ )… et assurez-vous que…‘my-first-theme’Avecstyle.cssDeuxièmement, utilisez un outil comme Poedit pour extraire toutes les chaînes de caractères à traduire à partir du code de votre thème, afin de générer le fichier de traduction nécessaire..potLes fichiers sont ensuite utilisés par les traducteurs pour créer les versions correspondantes dans la langue ciblée..poEt après compilation..moLe fichier doit être placé dans le thème correspondant./languages/Dans le répertoire.