Démarrer facilement le développement de thèmes pour WordPress : construire votre propre site web à partir de zéro

Comprendre la structure de base des thèmes WordPress

Avant de commencer à écrire du code, il est essentiel de comprendre la structure d’un thème WordPress. Un thème est essentiellement un dossier qui contient une série de fichiers de formats spécifiques, qui ensemble déterminent l’apparence et les fonctionnalités du site web. Les thèmes les plus basiques ne nécessitent que deux fichiers :style.cssetindex.php。

Fichier de style principal

style.cssLe fichier n’est pas seulement un espace de stockage pour les styles CSS ; il constitue également l“” identité “ d’un thème WordPress. En haut de ce fichier, il doit y avoir un bloc de commentaires spécifique, appelé ” en-tête du fichier de style » (style sheet header), qui permet de déclarer au système WordPress les informations métatelles du thème, telles que son nom, son auteur, sa description et sa version. Sans cet en-tête, WordPress ne reconnaîtra pas ce fichier comme étant un thème valide.

Un des éléments les plus fondamentaux…style.cssVoici un exemple du contenu de la tête d'un fichier :

Lectures recommandées Développement de thèmes pour WordPress : Construire votre premier thème personnalisé à 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: GPL v2 or later
Text Domain: my-first-theme
*/

Fichier de modèle principal

index.phpIl s’agit du fichier de modèle par défaut pour le thème, et c’est également le plus important d’entre eux. Lorsque WordPress ne parvient pas à trouver de fichier de modèle plus spécifique pour la page demandée, il recourt à ce fichier de modèle par défaut.index.phpIl est chargé de récupérer des contenus à partir de la base de données et de les afficher dans le navigateur sous une forme HTML structurée. Le modèle le plus simple…index.phpLe fichier ne contient probablement que le squelette HTML de base ainsi que du code PHP qui appelle les fonctions essentielles de WordPress.

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

En plus de ces deux fichiers essentiels, un thème complet et fonctionnel comprend généralement également :
* header.phpLa partie en-tête du site web.
* footer.phpLa partie en bas de la page du site web.
* functions.phpUtilisé pour améliorer les fonctionnalités des thèmes, le menu d’enregistrement, la barre latérale, etc.
* page.phpUtilisé pour afficher une seule page.
* single.phpUtilisé pour afficher un seul article de blog.

Installer un environnement de développement local et créer le premier thème

Développer des thèmes directement sur un serveur réel est dangereux et inefficace. La meilleure pratique consiste à mettre en place un environnement de développement sur votre ordinateur local, similaire à l’environnement en ligne. Vous pouvez utiliser des outils tels que XAMPP, MAMP, Local by Flywheel ou DevKinsta, qui permettent d’installer PHP, MySQL et un serveur web en un seul clic.

Créer un dossier de thème et des fichiers associés.

Tout d’abord, dans le répertoire d’installation local de WordPress, trouvez…wp-content/themes/Chemin. Créez un nouveau dossier ici, dont le nom sera l'identifiant de votre thème. Il est recommandé d'utiliser des lettres minuscules et des traits d'union, par exemple :my-first-theme。

Ensuite, créez dans ce dossier les deux fichiers essentiels mentionnés précédemment :style.cssetindex.phpCopiez le code de la tête du fichier de style ci-dessus dans le fichier approprié.style.cssRemplacez les informations par les vôtres.

Lectures recommandées Introduction au développement de thèmes pour WordPress : Construire votre premier thème pour site web à partir de zéro。

Rédiger un fichier de template de base

Ensuite,index.phpInsérez le code de base suivant, qui contient les balises de template nécessaires à WordPress.

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

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

<main>
        &lt;?php
        if ( have_posts() ) :
            while ( have_posts() ) : the_post();
                the_title( &#039;<h2>', '</h2>' );
                the_content();
            endwhile;
        else :
            _e( '抱歉，没有找到任何内容。', 'my-first-theme' );
        endif;
        ?&gt;
    </main>

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


</body>
</html>

Après avoir suivi les étapes ci-dessus, rendez-vous dans l’interface d’administration de WordPress depuis votre ordinateur, puis sélectionnez “ Affichage ” → “ Thèmes ”. Vous devriez voir apparaître le thème intitulé “ Mon premier thème ”. Activez-le, puis accédez à la page d’accueil du site ; les titres et les contenus des articles devraient être affichés.

Utiliser les niveaux de templates et les fonctions de base

WordPress utilise un système intelligent de “ hiérarchie des templates ” pour déterminer quel fichier de template utiliser en fonction des différentes demandes de page (comme la page d’accueil, la page d’article, la page de catégorie). Comprendre ce système est essentiel pour le développement de thèmes (templates).

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

Comprendre l’ordre de chargement des templates

Par exemple, lorsqu’on consulte un article de blog, WordPress recherche les fichiers de template dans l’ordre suivant :single-post.php -> single.php -> singular.php -> index.phpIl utilisera le premier fichier trouvé. Ce design vous permet de créer des layouts très personnalisés pour différents types de pages, tout en disposant d’une…index.phpEn tant que dernière option de réserve.

Utiliser des boucles et des balises de template

Dansindex.phpLe code PHP que vous voyez là est le célèbre “ The Loop ” de WordPress. Il constitue le noyau de tous les fichiers de template et sert à parcourir les articles ou les éléments de la page qui doivent être affichés.

Dans le cyclethe_title()、the_content()、the_excerpt()Les fonctions telles que celle-ci sont appelées “ balises de modèle ”. Leur rôle est de permettre d'afficher de manière sécurisée les données correspondantes de l’article. Une autre fonction importante est…the_post()Il est appelé à chaque itération du cycle et sert à accéder aux variables globales.$postL’objet est mis à jour avec les données de l’article actuel, puis on passe à l’article suivant.

Lectures recommandées Maîtrisez les techniques essentielles : créez votre premier thème WordPress à partir de zéro.。

Moduler la structure des pages est une bonne façon d'améliorer la maintenance du code. C'est exact.header.phpetfooter.phpUn lieu où il est possible de mettre en pratique ses compétences.

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

Il vaindex.phpDans…<head>Partie et<header>Coupez la zone concernée, puis collez-la dans un fichier nouvellement créé.header.phpDans le fichier. De même, procédez de la même manière.<footer>Certaines parties ont été coupées et transférées ailleurs.footer.phpAu milieu.

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

Ensuite, dans l'original…index.phpDans ce document, il est utilisé…get_header()etget_footer()Ces deux balises de modèle sont utilisées pour les introduire.

<main>
    &lt;?php the_title( &#039;<h2>', '</h2>' ); ?&gt;
        <p><?php _e( '抱歉，没有找到任何内容。', 'my-first-theme' ); ?></p>
    
</main>

Ainsi, tous les modèles de page peuvent partager le même en-tête et la même pied de page ; pour effectuer des modifications, il suffit de modifier un seul fichier.

Améliorer les fonctionnalités d’un thème grâce à Functions.php

functions.phpLe fichier constitue le “ centre de contrôle ” de votre thème. Il s’agit pas d’un fichier de modèle, mais plutôt d’une bibliothèque de fonctions qui est chargée automatiquement lors de l’initialisation du thème. Vous pouvez y ajouter de nouvelles fonctionnalités ou modifier le comportement par défaut, sans avoir à modifier les fichiers principaux de WordPress.

Les fonctionnalités prises en charge par l’enregistrement d’un sujet :

Dansfunctions.phpDans ce cas, vous pouvez utiliseradd_theme_support()Utilisez des fonctions pour indiquer les fonctionnalités WordPress que votre thème prend en charge. Par exemple, activer les miniatures d’articles (images de présentation) et les menus personnalisés sont des opérations courantes.

<?php
function my_theme_setup() {
    // 添加对文章缩略图的支持
    add_theme_support( 'post-thumbnails' );

// 添加对自定义菜单的支持
    add_theme_support( 'menus' );

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

Ajouter des styles et des scripts.

La bonne façon d’ajouter du CSS et du JavaScript est de le faire via…wp_enqueue_style()etwp_enqueue_script()Les fonctions, et les monter surwp_enqueue_scriptsCela se trouve sur ce crochet. Cela assure que les dépendances soient correctement gérées et qu’aucun chargement redondant ne se produise.

function my_theme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );

// 引入自定义的JavaScript文件
    wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/script.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

Une fois que vous aurez terminé cela, vous pourrez…header.phpUtilisé danswp_nav_menu()Une fonction pour afficher le menu que vous avez enregistré, utilisée dans le cycle des articles.the_post_thumbnail()Il est temps de présenter les images phares.

résumés

Le développement de thèmes pour WordPress est un processus progressif, allant de la structure globale aux détails les plus fins. Il vous faut d’abord comprendre…style.cssetindex.phpVous formez ainsi le noyau de la structure et mettez en place un environnement de développement local. Ensuite, maîtrisez le système de hiérarchie des templates ainsi que le concept de “ boucles ”, ce qui vous permettra de créer des layouts précis pour différentes pages. En intégrant ces éléments…header.phpetfooter.phpLa modularité rend votre code plus clair et plus facile à maintenir. Enfin…functions.phpLes fichiers vous ouvrent la porte à de nombreuses possibilités d’extension de fonctionnalités : du menu de registration à la charge sécurisée des ressources, ils permettent de transformer les thèmes de simples modèles statiques en des skins de sites web dynamiques et puissants. Suivez cette voie, pratiquez constamment et explorez de plus en plus de fichiers de modèles spécifiques (comme…)single.php、page.php、archive.phpAinsi, vous pourrez progressivement construire un site WordPress personnalisé, complet en fonctionnalités et unique en design.

FAQ Foire aux questions

Quelles connaissances préalables sont nécessaires pour développer un thème WordPress ?

Vous devez maîtriser les bases d’HTML et de CSS pour construire la structure et le style des pages web. De plus, vous devez avoir une connaissance de base de PHP, car les fichiers de templates de WordPress sont principalement composés de code PHP, qui sert à générer dynamiquement le contenu. La maîtrise du JavaScript vous permettra d’ajouter des fonctionnalités interactives aux thèmes, ce qui n’est pas obligatoire au début, mais devient très important par la suite.

Pourquoi mon thème n’apparaît-il pas dans l’arrière-plan (c’est-à-dire dans l’interface de gestion du site) ?

La raison la plus fréquente est…style.cssLe format de la section d’information sur le sujet dans le fichier est incorrect ou manque. Veuillez vous assurer qu’il y a un bloc de commentaires complet et conforme aux exigences de format en haut du fichier. De plus, vérifiez si le dossier contenant les sujets est placé à l’endroit approprié.wp-content/themes/Le fichier se trouve dans le répertoire, et le nom du dossier ne contient aucun caractère spécial.

Comment ajouter une zone de gadgets (barre latérale) à mon thème ?

Vous devez d’abord…functions.phpUtilisé dansregister_sidebar()La fonction enregistre une ou plusieurs zones pour les gadgets. Ensuite, dans les fichiers de modèle correspondants (par exemple…)sidebar.phpDans ce cas, utilisezdynamic_sidebar()Utilisez une fonction pour l’appeler et l’afficher. Enfin, intégrez cela dans le modèle de la page.get_sidebar()Introduisez ce fichier.

Que faire si la modification du fichier functions.php a provoqué un écran blanc sur le site web ?

Cela est généralement dû au fait que…functions.phpIl y a des erreurs de syntaxe PHP dans le fichier. Comme ce fichier est exécuté au début du chargement du thème, ces erreurs peuvent provoquer l’arrêt de tout le site web. La solution consiste à utiliser FTP ou le gestionnaire de fichiers du panneau de contrôle de l’hébergeur pour modifier le fichier concerné et corriger les erreurs.functions.phpRénommer (par exemple en…)functions.php.bakDe cette façon, WordPress l’ignorera et le site pourra de nouveau être accessible. Vous pourrez ensuite télécharger la version corrigée.

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

Vous devez faire deux choses. Tout d’abord, utilisez la fonction de traduction de WordPress dans tous les éléments de texte liés au thème.__()、_e()Et spécifiez leur emplacement.style.cssLe “ Text Domain ” défini dans la partie tête du fichier. Ensuite, utilisez un outil comme Poedit pour analyser les fichiers thèmes et générer les éléments nécessaires..potLes fichiers de modèle, et sur leur base, la création des versions correspondantes dans les différentes langues (par exemple…)zh_CN.poet.moLes fichiers de traduction doivent être placés dans le dossier correspondant au sujet./languages/Dans le répertoire.