Construire un thème enfant WordPress professionnel à partir de zéro

Dans l’écosystème WordPress, les sous-thèmes constituent une base solide pour personnaliser un site web et en assurer la maintenance et la mise à jour. Ils vous permettent d’hériter de toutes les fonctionnalités, des styles et des fichiers de modèle du thème parent, tout en effectuant des modifications dans un dossier indépendant. Cela signifie que lorsque le thème parent publie des mises à jour de sécurité ou des améliorations, vous pouvez les appliquer en un clic, sans craindre que vos codes personnalisés soient supprimés. Que ce soit pour ajuster les couleurs, modifier le layout ou ajouter des fonctionnalités complexes, utiliser des sous-thèmes est la meilleure pratique.

Pourquoi faut-il absolument utiliser des sous-sujets ?

Modifier directement le fichier du thème parent est une opération à haut risque. Lorsque le thème parent est mis à jour, toutes vos modifications seront perdues et devront être réappliquées manuellement, un processus qui est très susceptible d’erreur et consomme beaucoup de temps et d’efforts. Plus important encore, en l’absence de traces claires des modifications effectuées, cela peut causer de gros problèmes lors de la collaboration en équipe ou lors du futur transfert du site web.

Ce problème est résolu grâce au mécanisme d“” override » (surcouverture) des thèmes. Lorsque WordPress rend une page, il cherche d’abord le fichier de template correspondant dans le répertoire du thème enfant. S’il le trouve, il utilise la version du thème enfant ; sinon, il revient automatiquement à la version du thème parent. Ce système vous permet de modifier uniquement les parties dont vous avez besoin, tout en profitant des mises à jour et des maintenances apportées au thème parent.

Lectures recommandées Guide de début pour le développement de thèmes WordPress : Créez votre premier thème à partir de zéro。

De plus, l’utilisation de sous-thèmes est une pratique recommandée par WordPress officiellement. Elle permet de maintenir le code organisé et facile à entretenir, et constitue un signe d’un développement professionnel.

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

La structure de base pour créer un sous-sujet est la suivante :

Créer un sous-thème est très simple ; il suffit de deux fichiers de base : un fichier de style et un fichier contenant des fonctions. Tout d’abord, vous devez… /wp-content/themes/ Créez un nouveau dossier dans le répertoire, qui porte généralement le nom “ nom-du-sujet-parent-enfant ”, par exemple : twentytwentyfour-child。

Créer le fichier de style principal.

L’essence d’un sous-thème réside dans son fichier de style. style.cssCe fichier contient non seulement des règles CSS, mais surtout des commentaires dans son en-tête qui indiquent à WordPress qu’il s’agit d’un sous-thème, ainsi que le nom de son thème parent.

/*
 Theme Name:   Twenty Twenty-Four Child
 Theme URI:    https://example.com/twentytwentyfour-child/
 Description:  Twenty Twenty-Four Child Theme
 Author:       Your Name
 Author URI:   https://example.com
 Template:     twentytwentyfour
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  twentytwentyfour-child
*/

Parmi ceux-ci,Template: Cette ligne est cruciale : sa valeur doit correspondre exactement au nom du répertoire du thème parent, en tenant compte de la casse (majuscules/minuscules). C’est sur cette base que WordPress reconnaît les relations de parenté entre les thèmes.

Introduire le fichier de style du thème parent

Seuls les fichiers mentionnés ci-dessus sont présents ; le sous-thème ne peut pas encore charger les styles du thème parent. Vous devez modifier le fichier de fonctions du sous-thème. functions.php Utilisé dans wp_enqueue_scripts Des « hooks » sont utilisés pour mettre en file d’attente le chargement des feuilles de style du thème parent.

Lectures recommandées Essentiel pour créer un site web professionnel : Guide complet sur le développement et la personnalisation de thèmes WordPress。

<?php
add_action( 'wp_enqueue_scripts', 'my_child_theme_enqueue_styles' );
function my_child_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( 'parent-style' ),
        wp_get_theme()->get('Version')
    );
}
?>

get_template_directory_uri() La fonction récupère l’URL du répertoire du thème parent. get_stylesheet_directory_uri() Obtenir l’URL du répertoire des thèmes (sous-thèmes) actifs en utilisant un tableau de dépendances. array( 'parent-style' ) Assurez-vous que les styles des sous-thèmes soient chargés après ceux des thèmes parentaux, afin que vos règles CSS personnalisées puissent correctement surcharger les styles du thème parent.

Améliorer les fonctionnalités des sous-sujets

Après avoir créé la structure de base, vous pouvez ensuite… functions.php Ce fichier permet d’élargir les fonctionnalités du site de manière illimitée. Le code qu’il contient s’exécutera avant celui du thème parent. functions.php L’exécution du fichier vous offre une excellente opportunité de modifier les fonctionnalités essentielles du système.

Fonctionnalités personnalisées pour le site web

Par exemple, vous pourriez vouloir ajouter un nouveau type d’article personnalisé à votre site, appelé “ Projet ”. Vous pouvez le faire dans les sous-thèmes (sub-themes) de votre site. functions.php Enregistrez-le dans le fichier.

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

add_action( 'init', 'register_project_post_type' );
function register_project_post_type() {
    $args = array(
        'public'      => true,
        'label'       => '项目',
        'has_archive' => true,
        'supports'    => array( 'title', 'editor', 'thumbnail', 'excerpt' ),
        'menu_icon'   => 'dashicons-portfolio',
    );
    register_post_type( 'project', $args );
}

En même temps, vous pouvez également supprimer certaines fonctionnalités inutiles des thèmes parentaux. Par exemple, si un thème parental a ajouté une barre de pied (footer widget) que vous ne souhaitez pas voir, vous pouvez utiliser des moyens appropriés pour l’enlever. remove_action() Pour le désactiver, supposons que le thème parent soit… init Utilisé sur le crochet. parent_theme_footer_widgets La fonction contient un petit outil que vous pouvez supprimer de la manière suivante :

add_action( 'after_setup_theme', 'remove_parent_theme_features', 15 );
function remove_parent_theme_features() {
    remove_action( 'init', 'parent_theme_footer_widgets' );
}

Notez que… after_setup_theme L’ajout d’un « crochet » (hook) et la définition d’une priorité légèrement plus élevée (par exemple, 15) ont pour but de s’assurer que le code du thème parent ait été exécuté avant que les actions associées au hook ne soient mises en œuvre. add_actionAinsi, le nôtre… remove_action Pour qu’il puisse prendre effet.

Supprimer le fichier de modèle de thème parent.

L’une des fonctionnalités les plus puissantes des sous-thèmes est la capacité de surcharger les fichiers de modèle du thème parent. Si vous souhaitez modifier la manière dont une page d’article est affichée, il vous suffit de modifier les fichiers de modèle du thème parent. single.php Copiez le contenu dans le répertoire de vos sous-thèmes, puis effectuez les modifications nécessaires. WordPress utilisera automatiquement la version que vous avez sélectionnée.

Lectures recommandées Libérer le potentiel : Découvrez les techniques de base et les meilleures pratiques pour construire des thèmes WordPress avancés !。

Pour un contrôle plus fin, vous pouvez même modifier les composants de modèle (Template Parts) ou des sections de modèle spécifiques. Par exemple, pour modifier la manière dont les métadonnées des articles sont affichées, vous pouvez copier et modifier les éléments correspondants dans le thème parent. template-parts/content-post-meta.php Le fichier est placé dans le même chemin que le sous-sujet.

Astuces avancées pour le développement de sous-thèmes

Lorsque le développement des sous-thèmes atteint un stade plus avancé, vous vous confronterez à des sujets plus complexes tels que la localisation, l'héritage des options du thème principal, ainsi que la mise à jour des sous-thèmes eux-mêmes.

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

Réaliser la traduction locale de textes

Pour que votre sous-thème prenne en charge plusieurs langues, vous devez configurer correctement le domaine de texte (Text Domain) et utiliser les fonctions de traduction. style.css La tête et le functions.php La première étape consiste à charger le champ de texte.

Dans functions.php Dans ce document, il est utilisé… load_child_theme_textdomain Fonction :

add_action( 'after_setup_theme', 'child_theme_localization_setup' );
function child_theme_localization_setup() {
    load_child_theme_textdomain( 'twentytwentyfour-child', get_stylesheet_directory() . '/languages' );
}

Ensuite, utilisez des éléments tels que… à l’endroit où la chaîne de caractères doit être traduite. esc_html__( 'Your Text', 'twentytwentyfour-child' ) Un tel emballage de fonction. Ensuite, vous pouvez utiliser des outils tels que Poedit pour générer le code nécessaire. .po et .mo Translatez le fichier et placez-le dans un sous-sujet. /languages/ Catalogue.

Modifier les fonctions centrales de manière sûre

Parfois, il vous est nécessaire de modifier une fonction complexe présente dans le thème parent, mais cette fonction ne offre pas suffisamment de flexibilité grâce aux hooks. Si cette fonction est “ pluggable ”, c’est-à-dire qu’elle peut être modifiée facilement en utilisant des extensions ou des modules externes, alors vous pouvez procéder à ces modifications. if ( ! function_exists( ... ) ) Dans ce cas, vous pouvez le faire dans les sous-sujets (sub-thèmes). functions.php Vous pouvez réDéclarer cette fonction directement dans le code, ce qui la couvrira entièrement (c’est-à-dire que ses anciennes versions ne seront plus utilisables).

Avant d’essayer cette opération, veillez à vérifier la manière dont les fonctions sont définies dans le thème parent. Si elles ne sont pas conçues pour être réutilisées (c’est-à-dire si elles ne sont pas « plugables »), essayer de les déclarer à nouveau de force pourrait provoquer des erreurs graves. Dans ce cas, il est plus sûr de contacter le développeur du thème ou de rechercher d’autres mécanismes de filtrage (des « hooks ») pour réaliser vos besoins.

résumés

Construire des sous-thèmes pour WordPress est une compétence essentielle que tout professionnel du domaine doit maîtriser. Cela permet d’établir un processus de personnalisation sûr et durable, en séparant clairement votre code personnalisé du code de base du thème lui-même. Pour commencer, il faut créer un fichier contenant les informations de tête (headers) appropriées… style.css Et qui charge les styles… functions.php De la création initiale du site jusqu’à la modification des fichiers de template, en passant par l’ajout de fonctionnalités supplémentaires, ainsi que la gestion de la localisation et des modifications avancées, chaque étape suit les meilleures pratiques de WordPress. L’utilisation systématique de sous-thèmes constitue une base solide pour assurer que votre site reste à la pointe des mises à jour tout en conservant son apparence et ses fonctionnalités uniques au fil des années.

FAQ Foire aux questions

Quelles sont les exigences concernant les noms des dossiers des sous-thèmes ?

Il n’y a pas de restrictions strictes concernant le nom des dossiers des sous-thèmes, mais pour une meilleure clarté, il est généralement conseillé d’utiliser le format “ nom-du-thème-parent-sous-thème ”, par exemple : astra-childL’essentiel réside dans le fait que… style.css Dans l’en-tête du fichier… Template: Le champ dont la valeur doit correspondre exactement au nom du dossier du thème parent (y compris les majuscules et les minuscules) est essentiel pour que WordPress puisse établir correctement la relation de parenté entre les thèmes. Sinon, la fonctionnalité de gestion des thèmes hiérarchisés ne fonctionnera pas correctement.

Tous les sujets parentaux prennent-ils en charge la création de sujets enfants ?

La grande majorité des thèmes modernes qui respectent les normes de codage de WordPress prennent pleinement en charge les sous-thèmes. Théoriquement, n’importe quel thème peut servir de thème parent. Cependant, certains thèmes mal conçus ou très anciens peuvent empêcher les sous-thèmes de fonctionner correctement en raison de l’utilisation de chemins absolus pour référencer des ressources ou du manque de fichiers de modèle essentiels. Il est judicieux de consulter la documentation d’un thème parent ou les avis des utilisateurs avant de le choisir.

Comment migrer un thème parent qui a été modifié directement vers un thème enfant ?

Tout d’abord, dans votre environnement local ou de test, créez un nouveau sous-thème basé sur le thème parent d’origine non modifié. Ensuite, comparez point par point les différences entre les fichiers du thème parent que vous avez modifiés et les fichiers originaux. Transférez ces différences (qui peuvent concerner le CSS, le PHP ou le HTML) de manière organisée dans les fichiers correspondants du sous-thème : placez le CSS dans les fichiers de style du sous-thème, etc. style.cssPlacez le code fonctionnel ici. functions.phpLes fichiers de modèle modifiés doivent être copiés dans le répertoire du sous-thème concerné avant d’y apporter les modifications. Il s’agit d’un processus minutieux, mais il permet de résoudre le problème une fois pour toutes.

Les sous-thèmes (sub-themes) peuvent-ils affecter la vitesse du site web ?

L’impact des sous-thèmes correctement créés sur la vitesse du site est minime. Les fichiers CSS et JS supplémentaires sont généralement de petite taille, et en les chargant de manière optimisée (en utilisant des techniques de chargement asynchrone), ils peuvent être efficacement fusionnés et mis en cache. Le principal coût lié aux sous-thèmes peut provenir des… (La phrase est inachevée dans le texte original.) functions.php La logique PHP complexe ajoutée dans les sous-thèmes peut affecter négativement les performances du site. Il est donc essentiel de maintenir le code des sous-thèmes simple et efficace, tout en respectant les mêmes principes que ceux utilisés pour le développement des thèmes principaux. L’utilisation judicieuse des techniques de cache peut aider à compenser ces impacts potentiels sur les performances.