Comment créer un thème enfant bloc dans WordPress

Publié: 2023-07-14

Imaginez ce scénario : vous venez de trouver un thème presque parfait à utiliser sur votre site Web. Il est bien conçu, inclut les mises en page souhaitées, mais vous souhaitez modifier la palette de couleurs et empêcher les clients de modifier certaines zones. Malheureusement, le thème que vous utilisez ne vous permet pas de supprimer les couleurs par défaut ou les blocs de verrouillage.

Bien que vous puissiez modifier directement les fichiers du thème, toutes vos modifications seront perdues lorsque vous exécuterez des mises à jour du thème. Vous pouvez ajouter un peu de CSS personnalisé à l'aide d'un plug-in d'extrait de code, mais cela ne modifiera pas les options de style disponibles pour les utilisateurs connectés.

Alors que peux-tu faire? Comment modifiez-vous les options disponibles du style global ? Pour cela, vous avez besoin d'un thème enfant bloc.

Qu'est-ce qu'un thème enfant WordPress ?

Selon la documentation du développeur WordPress :

Un thème enfant hérite de l'apparence du thème parent et de toutes ses fonctions, mais peut être utilisé pour apporter des modifications à n'importe quelle partie du thème. De cette façon, les personnalisations sont séparées des fichiers du thème parent. L'utilisation d'un thème enfant vous permet de mettre à niveau le thème parent sans affecter les personnalisations que vous avez apportées à votre site.

Donc, pour utiliser un thème enfant dans WordPress, vous devez également installer le thème parent. Votre thème enfant hérite de tout du parent, avec quelques variantes ajoutées.

Comment créer un thème enfant

Préférez-vous une option de code pour personnaliser le style de votre site ? Comme pour remplacer d'autres thèmes WordPress, l'utilisation d'un thème enfant est le meilleur moyen de remplacer le code. Lorsque votre thème sera mis à jour, votre code de thème enfant restera.

Dans cet article, nous couvrons les éléments clés de ce qui fait un bon thème enfant WordPress et fournissons des ressources de lecture approfondies.

1. Quand utiliser un thème enfant de bloc

Les thèmes enfants sont souvent une excellente solution. Cependant, si vous cherchez à ajouter juste un peu de code CSS, un thème enfant entier peut être exagéré. Considérez un plugin comme Code Snippets pour ajouter un peu de personnalisation.

Personnalisation des sites clients

Lorsque vous créez des sites pour des clients, vous pouvez proposer une personnalisation supplémentaire.

Si vous souhaitez contrôler la capacité des utilisateurs à insérer de nouveaux blocs, à déplacer des blocs existants ou à supprimer des blocs, vous pouvez implémenter le verrouillage des blocs. Vous pouvez apprendre à verrouiller des blocs et plus encore dans ce didacticiel d'introduction.

Créer des variations de thème

En plus de définir les régions de la mise en page du thème que les clients peuvent modifier, vous pouvez également modifier les options de leur palette de couleurs, en omettant ce qui est fourni par défaut avec le thème ou WordPress et en ajoutant des options uniques. Vous pouvez également définir des dégradés et des options de bichromie qui devraient également être disponibles dans votre thème.

2. Choisissez un bon thème WordPress

Tous les thèmes ne sont pas créés de la même manière. En plus de ce que vous voyez dans la conception du thème, la sélection d'un thème parent implique des facteurs supplémentaires tels que la fréquence des mises à jour, la qualité du support, la documentation et la réputation du développeur du thème. Apprenez-en plus dans Comment utiliser les thèmes WordPress pour créer un site Web.

3. Créer un environnement de test

Vous avez maintenant choisi le thème parent, rassemblé les éléments de la marque et décidé des paramètres que vous souhaitez remplacer. Ensuite, vous devrez configurer un environnement de test.

Si vous utilisez un fournisseur d'hébergement WordPress géré comme l'hébergement WordPress géré de GoDaddy, vous pouvez utiliser votre site intermédiaire en un clic comme environnement de développement. Si vous utilisez quelque chose comme cPanel ou VPS pour l'hébergement, vous pouvez configurer une installation WordPress distincte et cloner ou copier votre site existant vers la nouvelle installation.

Si vous n'appliquez pas le thème enfant à un site existant, ou si vous préférez créer à partir de zéro, vous pouvez créer un environnement de développement WordPress local sur votre ordinateur à l'aide d'un outil comme MAMP ou DesktopServer de ServerPress.

4. Créez votre répertoire de thèmes

Vous devez d'abord installer le thème parent. Ensuite, à l'aide d'un client FTP, connectez-vous à votre environnement de développement et accédez à l'emplacement de vos fichiers WordPress.

Vous recherchez le dossier suivant :

 /wp-content/themes/

C'est là que vous pouvez trouver tous vos thèmes WordPress installés. Chaque thème a son propre dossier ou répertoire qui contient tous les fichiers du thème. Vous allez ajouter un nouveau répertoire à la liste, qui contiendra votre thème enfant. Vous vous retrouverez avec quelque chose comme :

 /wp-content/themes/votre-theme-enfant/

5. Créez vos fichiers de thème

Pour notre exemple, nous supposerons que nous utilisons le thème Twenty Twenty Two. Vous aurez besoin d'avoir ce thème installé pour que le thème enfant s'y réfère.

Dans votre nouveau dossier de répertoire de thème enfant, vous allez créer deux nouveaux fichiers :

 style.css
thème.json

Ces deux fichiers ont un but précis. Le fichier style.css est utilisé pour fournir à WordPress des informations sur le thème, telles que le nom, l'auteur, les balises et l'ID du thème parent.

Le fichier theme.json est utilisé pour définir les nombreux paramètres dans les styles globaux et plus encore. En savoir plus sur theme.json dans le manuel du développeur.

Dans les thèmes Classic précédents, le fichier functions.php était nécessaire dans les thèmes enfants. Les thèmes enfants de bloc ne nécessitent pas ces étapes.

Style.css

Qu'est-ce qui appartient à votre fichier style.css ? La documentation du développeur indique :

Votre feuille de style doit contenir le commentaire d'en-tête requis ci-dessous tout en haut du fichier. Cela indique à WordPress des informations de base sur le thème, y compris le fait qu'il s'agit d'un thème enfant avec un parent particulier.

Vous devrez inclure le passe-partout dans le fichier style.css contenant vos informations d'en-tête. Le nom du modèle : correspond au nom du dossier (répertoire) du thème parent sur lequel vous construisez. Le nom de domaine de texte : est unique à votre thème enfant WordPress.

Ci-dessous un exemple de thème enfant utilisant Twenty Twenty Two :

 /*
Nom du thème: Vingt vingt-deux enfants
URI du thème : https://example.com/
Auteur : Votre nom
URI de l'auteur : https://example.com/
Description: Vingt vingt deux thème enfant
Nécessite au moins : 5.8
Testé jusqu'à : 5,9
Nécessite PHP : 5.6
Version : 0.1
Licence : Licence publique générale GNU v2 ou ultérieure
URI de la licence : http://www.gnu.org/licenses/gpl-2.0.html
Domaine du texte : vingt-vingt-deux-enfants
Modèle : vingt-vingt-deux
Balises: couleurs personnalisées, menu personnalisé, logo personnalisé, style éditeur, images en vedette, édition complète du site, modèles de blocs

Thème WordPress Twenty Twenty-Two Child, (C) 2021 WordPress.org
Twenty Twenty-Two Child est distribué sous les termes de la GNU GPL.
*/

Thème.json

Consultez la documentation du développeur pour une plongée plus approfondie dans theme.json. Jetons un coup d'œil au fichier Twenty Twenty Two theme.json :

 {
 "version 2,
 "paramètres": {},
 "modes": {},
 "modèles personnalisés": {},
 "templateParts": {}
}

Dans chacun d'eux, d'autres styles sont à votre disposition. Par exemple, dans la zone du style, Twenty Twenty Two utilise :

 {
 "paramètres": {
 "AppearanceTools": vrai,
 "couleur": {
 "bichromie": [
 {
 "couleurs": [
 "#000000",
 "#ffffff"
 ],
 "slug": "avant-plan et arrière-plan",
 "name": "Premier plan et arrière-plan"
}

Besoin d'aide pour créer un fichier theme.json ? Consultez le themegen.app pour un guide créant de nombreux choix pour votre fichier theme.json.

6. Personnalisation de votre thème enfant de bloc

Bien que vous puissiez facilement créer votre fichier theme.json et l'ajouter à votre thème, il vous reste quelques autres choix à faire. Les thèmes enfants et même les thèmes de blocs sont un nouveau domaine pour WordPress. L'éditeur du site a clairement une étiquette bêta dessus au moment de ce post. Vous voudrez vous référer pour voir ce qui fonctionne et ce qui ne fonctionne pas encore dans les thèmes enfants, tels que les composants de modèle.

De plus, vous pouvez trouver des paramètres que Global Styles et theme.json ne prennent pas encore en charge. Si vous ajoutez du CSS supplémentaire, comme une bordure de bloc de groupe avec une boîte-ombre, vous voudrez peut-être l'ajouter à votre fichier style.css .

 .has-primary-border-color {
 boîte-ombre : .1rem .1rem .05rem #647BAF ;
}

7. Testez votre thème enfant

Une fois que vous sentez que votre site a l'air bien dans votre environnement de développement actuel, il est temps de le tester avant de le télécharger sur un site en ligne.

  • Testez dans différentes tailles de navigateur, telles que les fenêtres mobiles
  • Testez dans différents navigateurs ou utilisez un outil comme BrowserStack
  • Revoir les normes d'accessibilité. Démarrer avec WebAim

8. Préparez-vous à télécharger votre thème enfant de bloc

Si vous avez développé sur un site intermédiaire, vos fichiers sont exactement là où ils doivent être. Vous pouvez visiter vos options d'hébergement pour pousser le site de staging à vivre. Si vous avez créé des fichiers dans un environnement de développement local, il est temps de compresser les fichiers style.css et theme.json en un seul fichier zip et de les télécharger sur votre site.

Récapitulatif de la création de votre thème enfant de bloc

  1. Décidez si vous avez besoin d'un thème enfant bloc
  2. Choisissez un thème parent
  3. Configurez votre environnement de test
  4. Créez votre répertoire de thèmes
  5. Créez vos fichiers de thème
  6. Personnalisez votre thème enfant de bloc
  7. Testez votre thème enfant
  8. Téléchargez-les sur le site en direct

Comme les thèmes classiques dans WordPress, les thèmes Block ont ​​toujours besoin d'un emplacement pour stocker les personnalisations qui ne seront pas écrasées lorsque le thème parent recevra une mise à jour. La création d'un thème enfant de bloc vous permet d'ajouter, de verrouiller et d'omettre des options disponibles pour les autres utilisateurs du site.