Magazine Gadgets

Comment créer un thème enfant et un thème de bloc

Publié le 23 janvier 2023 par Mycamer

Quand utiliser un thème enfant pour WordPress ? Il est important de créer un thème enfant si vous envisagez d’apporter des modifications personnalisées au code.

Ainsi, lorsque le thème est mis à jour, les modifications personnalisées apportées au code ne seront pas écrasées.

Traditionnellement, lorsque vous travaillez avec WordPress, cela nécessitait de faire une copie de functions.php et de style.css pour créer le thème enfant et de mettre le thème enfant en file d’attente dans le thème parent.

Avec la structure de fichiers différente dans Édition complète du sitequelques ajustements ont dû être faits pour que tous les fichiers appropriés soient trouvés.

Heureusement, avec la création du Créer un plug-in de thème de bloc par WordPress.org, créer non seulement un thème enfant, mais aussi un thème entièrement personnalisé ou une variation de style est plus facile que jamais.

Créer un plug-in de thème de bloc
Capture d’écran du référentiel de plugins WordPress.org, décembre 2022<img decoding="async" src="https://cdn.searchenginejournal.com/wp-content/uploads/2022/12/create-block-theme-plugin-638e18a7e8bd8-sej-768x413.png" alt="Créer un plug-in de thème de bloc" />

Configuration du plugin Créer un thème de bloc sur WordPress

Tout d’abord, vous voudrez installer et activer le thème de bloc WordPress pour lequel vous souhaitez créer votre nouveau thème ou thème enfant – dans ce cas, j’utilise Twenty Twenty-Two.

Thème vingt vingt-deux
Capture d’écran du tableau de bord WordPress, décembre 2022<img decoding="async" src="https://cdn.searchenginejournal.com/wp-content/uploads/2022/12/twenty-twenty-two-theme-638e18e365084-sej-768x385.png" alt="Thème vingt vingt-deux" />

Ensuite, suivez les étapes suivantes :

Aller à Plugins > Ajouter nouveau.

Dans la fenêtre de recherche, recherchez “Créer un thème de bloc”.

Cliquez sur Installer et activer.

Page des plugins
Capture d’écran du tableau de bord WordPress, décembre 2022<img decoding="async" src="https://cdn.searchenginejournal.com/wp-content/uploads/2022/12/plugins-page-638e18dd4671f-sej-768x203.png" alt="Page des plugins" />

Avec le plugin installé, vous aurez de nouvelles options sous Apparence, comprenant Créer un thème de bloc et Gérer les polices de thème.

Options d'apparence
Capture d’écran du tableau de bord WordPress, décembre 2022<img decoding="async" src="https://cdn.searchenginejournal.com/wp-content/uploads/2022/12/appearance-options-638e188b9786c-sej-768x638.png" alt="Options d'apparence" />

Créer un thème enfant WordPress

Le plug-in Créer un thème de bloc est un moyen extrêmement simple de créer un thème enfant pour un bloc, y compris un thème d’édition de site complet. Le plugin créera automatiquement le dossier des pièces, le dossier des modèles, theme.json et style.css.

Une fois le plugin installé, vous êtes prêt à créer le thème enfant :

  • Sous Apparencesélectionner Créer un thème de bloc.
  • Sélectionnez ensuite Créer un enfant de Twenty Twenty-Two (si vous avez sélectionné un thème différent, il listera ce thème).
  • Sur la droite, remplissez le nom du thème, la description du thème, l’URI du thème, l’auteur et l’URI de l’auteur.
  • Cliquez sur le bleu Générer bouton pour créer le thème enfant.
informations sur le thème enfant
Capture d’écran du tableau de bord WordPress, décembre 2022<img decoding="async" src="https://cdn.searchenginejournal.com/wp-content/uploads/2022/12/child-theme-info-638e189098b40-sej-768x375.png" alt="informations sur le thème enfant" />

Votre thème enfant sera exporté sous forme de fichier zip.

fichier zip thème enfant
Capture d’écran du fichier de thème enfant généré, décembre 2022<img decoding="async" src="https://cdn.searchenginejournal.com/wp-content/uploads/2022/12/child-theme-zip-file-638e189c1f856-sej.png" alt="fichier zip thème enfant" />

Sous Apparence > ThèmesCliquez sur Ajouter un thème et Télécharger le thème, et sélectionnez le fichier zip qui a été généré.

Allez dans Thèmes et assurez-vous que vous voyez votre nouveau thème enfant.

Créer une image personnalisée pour un thème enfant WordPress

Un défaut du plugin est qu’il ne vous permet pas d’ajouter un screenshot.png pour votre thème enfantni celui fourni avec le thème parent.

Cela peut être facilement corrigé et offre une belle touche personnalisée pour votre thème enfant.

À l’aide de votre éditeur d’images préféré, créez une nouvelle image de 1200 pixels sur 900 pixels, et nommez-le screenshot.png.

Placez le nouveau screenshot.png dans le dossier du thème enfant que vous avez créé.

fichiers dans le thème enfant
Capture d’écran des fichiers de thème pour le thème enfant WordPress, décembre 2022<img decoding="async" src="https://cdn.searchenginejournal.com/wp-content/uploads/2022/12/files-in-child-theme-638e18b0cdb6e-sej-768x274.png" alt="fichiers dans le thème enfant" />

Revenez aux thèmes et votre nouvelle image devrait apparaître avec votre thème enfant.

Image du thème enfant actif
Capture d’écran du tableau de bord WordPress, décembre 2022<img decoding="async" src="https://cdn.searchenginejournal.com/wp-content/uploads/2022/12/active-child-theme-image-638e1876ef989-sej-768x585.png" alt="Image du thème enfant actif" />

Maintenant qu’un thème enfant est défini sur votre thème de bloc, des modifications peuvent être apportées au thème.json et les fichiers de modèle style.css sans remplacer les fichiers de thème parent.

De cette façon, le thème parent peut être mis à jour sans aucun problème.

Vous pouvez également exporter le nouveau thème enfant avec les modifications apportées, telles que l’image, à utiliser comme thème enfant pour les nouvelles installations du thème parent.

Créer un thème de bloc personnalisé sur WordPress

Les Créer un plug-in de thème de bloc fournit un certain nombre d’options pour créer votre propre thème. Vous pouvez cloner le thème actuel et apporter vos propres modifications personnalisées en l’utilisant comme modèle.

Une fois que vous avez apporté les modifications et que vous en êtes satisfait, vous pouvez ensuite utiliser le plugin pour exporter le thème avec toutes les modifications que vous avez apportées afin d’utiliser votre nouveau thème sur d’autres sites Web.

De plus, vous pouvez créer un nouveau thème complètement vierge qui utilise le thème actuel comme passe-partout. C’est un excellent moyen de créer quelque chose de complètement personnalisé.

Pour créer un thème entièrement nouveau, procédez comme suit :

Sous Créer un thème de blocchoisir Créer un thème vierge.

Remplissez toutes les informations sur le côté droit, nommez-le et ajoutez votre nom en tant que créateur, puis appuyez sur Générer.

Créer un thème vierge
Capture d’écran du tableau de bord WordPress, décembre 2022<img decoding="async" src="https://cdn.searchenginejournal.com/wp-content/uploads/2022/12/create-blank-theme-638e189ee50f9-sej-768x378.png" alt="Créer un thème vierge" />

Votre nouveau thème sera téléchargé sous forme de fichier zip.

Sous Apparence > Thèmesvous pouvez télécharger et activer votre nouveau thème.

Suivez les mêmes étapes que le thème enfant, si vous souhaitez ajouter une image personnalisée pour le screenshot.png.

Activez le nouveau thème et utilisez-le comme point de départ pour votre nouveau thème.

nouveau thème vierge
Capture d’écran du tableau de bord WordPress, décembre 2022<img decoding="async" src="https://cdn.searchenginejournal.com/wp-content/uploads/2022/12/new-blank-theme-638e18c75f800-sej-768x594.png" alt="nouveau thème vierge" />

Utilisez des modèles, des blocs, des éléments de modèle et l’éditeur de styles pour créer votre nouveau thème selon l’apparence souhaitée.

Une fois que vous avez terminé de travailler sur votre nouveau thème, retournez à Apparence > Créer un thème de bloc et exportez le nouveau thème, qui contient toutes les modifications que vous lui avez apportées.

Il sera exporté sous forme de fichier zip et pourra être téléchargé sur toute nouvelle installation WordPress.

Gestion des polices de thème WordPress

Une autre grande caractéristique du Créer un plug-in de thème de bloc est de pouvoir facilement ajouter et supprimer des polices pour le thème.

En règle générale, pour ajouter de nouvelles polices à un thème, les polices doivent être téléchargées, ajoutées au dossier des polices et mis en file d’attente dans functions.php fichier, ou un Lien Google devrait être ajouté au code.

L’ajout de plusieurs polices peut compliquer encore plus le processus.

Avec le plugin, Polices Google et polices locales de votre ordinateur peuvent être ajoutés ou supprimés facilement de votre thème personnalisé ou d’un thème que vous avez installé et activé.

Pour les polices Google, cliquez sur Ajouter une police Google et la fenêtre déroulante vous donnera une liste des polices Google disponibles.

Sélectionnez la police, cochez la case et cliquez sur le bouton pour ajouter Google Font à votre thème.

Gérer les polices de thème
Capture d’écran du tableau de bord WordPress, décembre 2022<img decoding="async" src="https://cdn.searchenginejournal.com/wp-content/uploads/2022/12/manage-theme-fonts-638e18bf6bc00-sej-768x359.png" alt="Gérer les polices de thème" />
Ajouter des polices Google
Capture d’écran du tableau de bord WordPress, décembre 2022<img decoding="async" src="https://cdn.searchenginejournal.com/wp-content/uploads/2022/12/add-google-fonts-638e1883c4092-sej-768x362.png" alt="Ajouter des polices Google" />

L’ajout d’une police locale que vous avez téléchargée est un processus similaire.

Cliquez pour Ajouter une police localetéléchargez le fichier de police, renseignez le nom, le style et le poids de la police, puis appuyez sur le bouton pour télécharger la police locale sur votre thème.

Polices locales
Capture d’écran du tableau de bord WordPress, décembre 2022<img decoding="async" src="https://cdn.searchenginejournal.com/wp-content/uploads/2022/12/local-fonts-638e18b6cddad-sej-768x510.png" alt="Polices locales" />

Thèmes enfants WordPress simplifiés

Avec Édition complète du site et le Créer un plug-in de thème de bloccréer vos propres variations de thème et de style n’a jamais été aussi simple.

L’utilisation du plug-in au lieu de mettre manuellement les fichiers en file d’attente et de modifier le code simplifie la création de thèmes enfants et l’ajout de nouvelles polices.

Motifs, variantes de styleet blocs réutilisables lorsqu’il est utilisé avec le plugin, il existe d’excellents moyens simples de créer votre propre thème personnalisé que vous pouvez exporter et réutiliser.

Le tout sans avoir besoin de toucher à aucun des codes de thème.

Davantage de ressources:


Image en vedette : Kaspars Grinvalds/Shutterstock



— to news.google.com


Retour à La Une de Logo Paperblog

A propos de l’auteur


Mycamer Voir son profil
Voir son blog

l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte

Magazines