De zéro à un : explication détaillée des étapes clés et des techniques pratiques pour le développement de thèmes WordPress.

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

Avant de commencer à coder, il est essentiel de mettre en place un environnement de développement approprié. Cela concerne non seulement l'efficacité, mais aussi la facilité de débogage et la maintenance future. Vous avez besoin d'un environnement de serveur local pour exécuter WordPress. Il est recommandé d'utiliser un logiciel de développement local professionnel, tel que Local by Flywheel, XAMPP ou Laragon. Installez et configurez PHP (version 7.4 ou supérieure), MySQL et un serveur Web (comme Apache ou Nginx).

Ensuite, téléchargez le dernier package d’installation de WordPress, créez un nouveau site dans votre environnement de serveur local et terminez l’installation. Rappelez-vous le répertoire racine de votre site. Pour faciliter l’édition de code et le contrôle de version, il est recommandé d’utiliser un éditeur de code professionnel, tel que VS Code ou PhpStorm, et d’installer les extraits de code PHP et WordPress ainsi que les plugins de débogage appropriés.

Enfin, vous devez comprendre quels sont les éléments fondamentaux d’un thème WordPress. Un thème nécessite au minimum deux fichiers pour être reconnu par le système : un fichier de feuille de style. style.cssL'autre est un fichier de modèle de page d'accueil. index.phpSur le site. /wp-content/themes/ Sous le répertoire, créez un nouveau dossier pour le thème que vous allez créer, par exemple. my-first-theme。

Lectures recommandées Partir de zéro : maîtriser efficacement les processus de base et les techniques pratiques du développement de thèmes WordPress.。

Créer le fichier central du thème.

### Le fichier de définition des informations sur le sujet.
L'identité et la déclaration d'information de chaque thème sont disponibles sur style.css Dans le fichier. Le bloc d’en-tête de commentaire en haut de ce fichier est obligatoire. WordPress utilise-le pour lire des informations telles que le nom de votre thème, son auteur, sa description, etc. Votre style.css Le fichier devrait commencer comme ceci :

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: 我的第一个主题
Theme URI: https://example.com/my-first-theme/
Author: 你的名字
Author URI: https://example.com/
Description: 这是一个从零开始开发的 WordPress 主题演示。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

Text Domain Pour l'internationalisation, il doit être identique au nom de votre dossier de thème. Ce fichier contiendra également tout votre code de style CSS.

La construction du fichier de modèle de base.

Les fichiers de modèle contrôlent l’apparence des différentes pages du site Web. Créons les fichiers les plus importants. Tout d’abord, le fichier de modèle de la page d’accueil. index.phpC'est le modèle de repli par défaut de toutes les pages. C'est une solution simple mais efficace. index.php Le contenu du fichier est le suivant :

<main>
    &lt; ?php
    si ( have_posts() ) :
        pendant que ( have_posts() ) : the_post();
            // Afficher le contenu de l&#039;article
            the_title( &#039;<h2>', '</h2>' );
            the_content();
        fin du while ;
    sinon :
        echo '<p>Aucun article pour le moment.</p>';
    fin si ;
    ?&gt;
</main>

Ce code introduit trois fonctions de composants de modèle principales :get_header(), get_sidebar(), get_footer()Cela signifie que vous devez créer la correspondance appropriée. header.php, sidebar.php et footer.php Les documents.

header.php Les fichiers contiennent généralement une déclaration du type de document et des informations d'en-tête HTML (via ). wp_head() (La sortie de la fonction), le titre du site et le menu de navigation principal. Un élément de base. header.php Les documents sont les suivants :

Lectures recommandées Nous allons vous apprendre, étape par étape, à créer un thème WordPress personnalisé et puissant.。

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

footer.php Le fichier ferme la structure de la page et lance l'appel. wp_footer() Les fonctions, de nombreux plugins s'appuient sur ce hook pour insérer des scripts.

Réaliser les fonctions et les styles du thème.

### Le menu d'inscription et la barre latérale.
Pour permettre aux utilisateurs d'accéder au menu d'administration, vous devez utiliser une fonction pour enregistrer l'emplacement du menu. Cela se fait généralement dans le thème. functions.php Le fichier est terminé. Créer. functions.php Et ajoutez le code suivant :

<?php
function my_theme_setup() {
    // 注册一个主菜单位置
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
    ) );

// 支持文章特色图像
    add_theme_support( 'post-thumbnails' );

// 支持自定义Logo
    add_theme_support( 'custom-logo' );
}
add_action( 'after_setup_theme', 'my_theme_setup' );
?>

Ensuite, vous devez header.php Appeler le menu au bon endroit (par exemple, après le titre du site) et l'utiliser. wp_nav_menu() Une fonction.

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

De même, pour activer la zone des widgets, comme la barre latérale, vous devez le faire dans le functions.php Enregistrez une barre latérale sur Zhihu :

function my_theme_widgets_init() {
    register_sidebar( array(
        'name'          => __( '主侧边栏', 'my-first-theme' ),
        'id'            => 'sidebar-1',
        'description'   => __( '在此添加小工具。', 'my-first-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_theme_widgets_init' );

Ensuite, dans sidebar.php Le fichier utilise dynamic_sidebar( 'sidebar-1' ) Pour le montrer.

Ajouter des styles et des scripts.

Mettre correctement en file d'attente les fichiers CSS et JavaScript est une des meilleures pratiques pour le développement de WordPress. Cela permet d'éviter les conflits de dépendances et d'utiliser la mise en cache. functions.php Créons une nouvelle fonction en Chine :

Lectures recommandées Démystifier le développement de thèmes WordPress : les techniques clés pour créer un site web personnalisé à partir de zéro.。

function my_theme_scripts() {
    // 引入主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );

// 引入一个自定义脚本
    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_theme_scripts' );

De cette façon, WordPress ajoutera automatiquement le lien vers votre feuille de style en haut de la page. En même temps, créez un /js/ Créez un catalogue et ajoutez-y votre contenu. navigation.js Les documents.

Niveaux de modèles et techniques avancées

### Comprendre la hiérarchie des modèles.
WordPress sélectionne le fichier de modèle correspondant selon un ordre hiérarchique précis en fonction du type de page consultée. C'est l'un des concepts les plus puissants du développement de thèmes. Par exemple, lorsqu'on accède à un article unique, WordPress recherche successivement :single-{post-type}-{slug}.php -> single-{post-type}.php -> single.php -> singular.php –> Revenir finalement à index.php。

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

Pour créer un modèle d'article unique personnalisé pour vos articles de blog, vous pouvez créer un modèle d'article unique personnalisé. single.php. Créez un modèle pour une page spécifique, par exemple la page "À propos de nous". Vous pouvez créer un modèle nommé "À propos de nous". page-about.php Le fichier (en supposant que l'alias de la page est “ about ”).

Utiliser la fonctionnalité d'extension des hooks.

L'API des plugins de WordPress (crochets et filtres) vous permet de modifier en toute sécurité le thème ou les fonctionnalités principales. Les crochets d'action vous permettent d'effectuer une action à un moment précis. Par exemple, si vous voulez ajouter automatiquement un paragraphe à la fin du contenu d'un article, vous pouvez utiliser les crochets d'action. the_content Filtre :

La fonction my_theme_add_footer_text( $content ) {
    si ( c'est une page unique ) {
        $content .= ' '<p class="custom-footer">Cet article a été généré par mon thème.</p>'fonction my_theme_add_footer_text() :  
    if ( is_home() || is_archive() || is_search() || is_404() ) {  
        $content = 'A propos du site';  
    } else {  
        $content = 'Ceci est le contenu du pied de page.';  
    }  
    return $content;  
}
add_filter( 'the_content', 'my_theme_add_footer_text' );

résumés

En suivant les étapes de cet article, vous avez parcouru le processus de base du développement d’un thème WordPress : de la préparation de l’environnement local à la création d’un fichier qui définit les informations du thème. style.css De même, pour les fichiers de modèle qui constituent la structure de la page, et ensuite pour les éléments qui s'y trouvent. functions.php J'ai enregistré les fonctionnalités (comme les menus et les barres latérales) et intégré les scripts de style. Enfin, j'ai compris la hiérarchie des modèles et le mécanisme des hooks. Rappelez-vous les deux concepts fondamentaux que sont la “ hiérarchie des modèles ” et le “ classement correct des scripts/styles ”, et vous éviterez de nombreux problèmes courants. Le développement de thèmes est un processus itératif. En pratiquant sans cesse et en déconstruisant les thèmes existants de qualité, vous progressez rapidement.

FAQ Foire aux questions

Est-il nécessaire de développer un thème à partir de zéro ?
Ce n’est pas le cas. Vous pouvez choisir d’utiliser un thème de base officiel (Underscores) ou un framework (comme Genesis) comme point de départ. Ils fournissent une structure de code standardisée et des fonctionnalités de base, ce qui peut considérablement améliorer l’efficacité du développement et la qualité du code, en particulier pour les débutants.

Comment tester mon thème sans avoir à coder ?

Dans votre environnement de développement local, vous pouvez utiliser les “ données de test de thème ” intégrées de WordPress pour importer un grand nombre d’articles, de pages, de menus et de commentaires d’exemple contenant divers formats et éléments. Cela vous aidera à tester complètement le comportement du thème dans différentes situations.

Pourquoi mes modifications de style ne prennent-elles pas effet immédiatement en arrière-plan ?

Cela est généralement dû au cache du navigateur. Vous pouvez essayer d’effectuer un rafraîchissement forcé en appuyant sur “ Ctrl + F5 ” ou “ Cmd + Shift + R ”. Si c’est dû à un plug-in de cache WordPress, vous devez vider le cache de ce plug-in. En outre, veuillez vérifier votre . style.css Le numéro de version du fichier a-t-il été mis à jour ?

Après que le développement du thème soit terminé, comment le packager et le distribuer ?

Tout d'abord, vous devez vous assurer que... style.css Les informations sur le sujet contenues dans le document sont complètes et précises. Ensuite, supprimez tous les fichiers de sauvegarde et les dossiers de contrôle de version créés pendant le processus de développement (tels que <). .gitEnsuite, téléchargez les fichiers du thème, y compris les fichiers d’installation et les fichiers temporaires. Enfin, compressez le dossier du thème au format ZIP. Ce fichier ZIP peut ensuite être installé via l’interface d’administration de WordPress en sélectionnant “ Apparence ” -> “ Thèmes ” -> “ Ajouter ” -> “ Télécharger un thème ”.