Comment créer un thème de bloc WordPress (en 3 étapes)

En tant que débutant WordPress, vous avez peut-être évité de créer des thèmes personnalisés dans un passé récent, pensant que cela nécessitait un processus de codage compliqué. Vous pouvez désormais personnaliser l'intégralité de votre site Web avec l'édition complète du site (FSE), mais il reste le problème de l'exportation de vos conceptions personnalisées.

Heureusement, vous pouvez facilement créer un thème de bloc avec le plugin Créer un thème de bloc. Après avoir personnalisé votre thème avec l'éditeur de site, vous pouvez l'exporter en tant que thème de bloc personnalisé. Ensuite, vous pouvez l'installer sur d'autres sites Web au lieu d'avoir à reconstruire votre conception à partir de zéro.

Dans cet article, nous expliquerons ce qu'est un thème de bloc et comment vous pouvez utiliser l'outil Créer un thème de bloc pour en créer un. Ensuite, nous vous montrerons comment procéder en trois étapes simples. Commençons!

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

Lorsque Gutenberg a été lancé dans le cadre de WordPress 5.0, il a complètement transformé l'expérience de création de contenu. En effet, son nouvel éditeur de blocs vous permet de personnaliser les publications et les pages en ajoutant différents blocs de contenu :

En 2021, WordPress a encore étendu cette fonctionnalité. La mise à jour 5.8 a lancé l'édition complète du site, vous permettant de créer l'intégralité de votre site Web à l'aide d'un système basé sur des blocs. Avec l'éditeur de site, vous pouvez ajouter des blocs thématiques à votre site Web, créer des modèles de blocs, et bien plus :

Cependant, pour commencer à utiliser Full Site Editing, vous devrez installer un thème de bloc. En termes simples, ce sont des thèmes construits avec des blocs Gutenberg.

Voici quelques-unes des fonctionnalités dont vous bénéficierez lorsque vous installerez un thème de bloc WordPress :

• Modifiez n'importe quelle partie de votre site Web sans code
• Personnalisez les couleurs et la typographie avec les styles globaux
• Améliorez la vitesse du site en chargeant uniquement les styles pour les blocs rendus sur la page
• Ajoutez des fonctionnalités d'accessibilité telles qu'un bouton Passer au contenu et une navigation au clavier

En utilisant un thème de bloc, vous pouvez avoir un contrôle total sur la conception de votre site. Auparavant, il aurait été difficile d'éditer des fichiers de thème sans compétences en codage. Cependant, tout le monde peut désormais personnaliser un site Web en créant et en modifiant simplement des mises en page de blocs.

Une introduction au plugin Créer un thème de bloc

Dans de nombreux cas, les propriétaires et les développeurs de sites Web créent des thèmes enfants personnalisés pour les aider à personnaliser un site Web. Un thème enfant est simplement un thème qui hérite de l'apparence et des fonctionnalités de son thème parent. En utilisant un thème enfant, vous pouvez modifier en toute sécurité un thème de bloc sans perdre les modifications avec les nouvelles mises à jour logicielles.

Vous pouvez créer un thème enfant en créant un nouveau dossier de thème et une feuille de style avec le codage du thème parent. Cela semble assez simple, mais cela implique souvent l'utilisation de techniques compliquées qui peuvent être difficiles pour les débutants.

Heureusement, les développeurs de WordPress ont créé le plugin Create Block Theme pour résoudre ce problème. Grâce à ce nouvel outil, vous pouvez facilement exporter votre thème de bloc édité :

Cela signifie que vous pouvez créer des thèmes de blocs personnalisés, puis les utiliser sur d'autres sites Web. Après avoir apporté des modifications avec l'éditeur de site, vous pouvez télécharger votre nouveau design en tant que thème enfant, clone ou variation de style du thème parent. Cela peut simplifier la conception du site Web et le rendre plus accessible aux utilisateurs de tous niveaux.

Comment créer un thème de bloc WordPress (en 3 étapes)

Maintenant que vous connaissez les thèmes de blocs et leurs avantages, discutons de la façon d'en créer un dans WordPress. De cette façon, vous n'aurez pas à modifier les fichiers de thème chaque fois que vous aurez besoin de créer un nouveau thème de bloc.

Étape 1 : Installez un thème de bloc WordPress

Pour créer votre premier thème de bloc, vous devrez commencer par un thème de bloc parent. En utilisant le répertoire de thèmes WordPress, vous pouvez choisir parmi plus d'une centaine d'options différentes. Ici, cliquez simplement sur l'onglet Block Themes pour ajouter un filtre Full Site Editing :

Une fois que vous avez trouvé un thème de bloc que vous aimez, vous pouvez le télécharger. Ensuite, allez dans Apparence > Thèmes dans votre tableau de bord WordPress pour installer et activer le nouveau thème. Pour ce tutoriel, nous utiliserons Twenty Twenty-Two :

Vous devez maintenant sélectionner Plugins > Ajouter nouveau et rechercher « Créer un thème de bloc ». Ensuite, installez et activez le plugin :

Avant de commencer à éditer votre thème, vous devez également disposer de la dernière version du plugin Gutenberg. Si vous ne l'avez pas déjà fait, assurez-vous que cet outil est également installé, activé et mis à jour.

Étape 2 : Personnalisez votre thème avec l'éditeur de site

Ensuite, vous pouvez ouvrir l'éditeur de site et modifier le thème de votre bloc. Pour ce faire, accédez à Apparence > Éditeur (bêta) :

Cela ouvrira l'éditeur de site complet. Ici, vous pouvez cliquer sur des éléments spécifiques comme l'en-tête ou le pied de page pour modifier les paramètres du bloc :

En cliquant sur l'icône du cercle bicolore dans le coin supérieur droit, vous pouvez mettre à jour la typographie, les couleurs et la mise en page. Vous pouvez même choisir l'une des combinaisons de styles de thème par défaut :

Si vous avez besoin d'ajouter de nouveaux blocs, vous pouvez sélectionner le bouton +. À partir de cette liste d'options, vous pouvez simplement faire glisser et déposer des éléments sur la page :

Pour afficher vos modèles de thème, cliquez sur le logo WordPress dans le coin supérieur gauche. Ici, vous pouvez sélectionner des modèles ou des parties de modèle :

En fonction de vos objectifs de conception, vous souhaiterez peut-être ajouter de nouveaux modèles. Vous pouvez également modifier les options par défaut disponibles :

Après avoir sélectionné un modèle, vous ouvrirez l'éditeur de modèle. Vous pouvez modifier cette page en ajoutant de nouveaux blocs, motifs de bloc ou éléments de modèle :

En fin de compte, il existe des façons presque infinies de concevoir votre thème de bloc. Une fois que vous avez effectué toutes les modifications nécessaires, enregistrez vos modifications.

Étape 3 : Exportez votre thème de bloc

Pour réutiliser ce thème de bloc sur d'autres sites Web, accédez à Apparence > Créer un thème de bloc . Cela vous permettra d'exporter votre nouveau thème de bloc de différentes manières :

Si vous souhaitez exporter le thème avec les modifications que vous venez d'apporter, sélectionnez Exporter . Cependant, voici les options d'exportation alternatives disponibles avec le plugin Create Block Theme :

• Créer un thème enfant : télécharge un nouveau thème enfant en utilisant le thème activé comme parent.
• Cloner le thème actuel : Clone le thème activé, y compris tous ses actifs et les modifications apportées par l'utilisateur.
• Écraser les fichiers de thème : enregistre les modifications en tant que changements de thème, puis supprime les modifications de l'utilisateur.
• Générer un thème vierge : crée un thème passe-partout dans le répertoire de thèmes de votre site.
• Créer une variation de style : enregistre les modifications en tant que variation de styles globaux du thème activé.

Si vous sélectionnez Exporter ou Remplacer , vous pouvez simplement télécharger vos fichiers de thème. Pour toute autre option, vous devrez fournir un nom de thème, une description, un URI de thème, un auteur et un URI d'auteur :

La seule exception est la variation de style. Cela nécessite juste un nom de variation :

Après avoir sélectionné l'une de ces options, cliquez sur Créer un thème . Cela téléchargera votre thème de bloc personnalisé sous forme de fichier .zip, qui contient tous les fichiers de thème modifiés. Vous pouvez ensuite installer ce thème sur d'autres sites pour accélérer le processus de développement.

Conclusion

Avant l'édition complète du site et les thèmes de blocs, la création de votre propre conception de site Web unique était un processus compliqué. Si vous êtes un débutant WordPress, vous n'avez peut-être pas les compétences de codage nécessaires pour le travail. Cependant, maintenant, l'éditeur de site et le plugin Créer un thème de bloc peuvent travailler ensemble pour simplifier radicalement cette tâche autrefois délicate.

Pour récapituler, voici comment vous pouvez créer un thème de bloc WordPress :

1. Installez un thème de bloc WordPress.
2. Personnalisez votre thème avec l'éditeur de site.
3. Exportez votre thème de bloc avec Créer un thème de bloc.

Avez-vous des questions sur la création de votre premier thème de bloc dans WordPress ? Faites-nous savoir dans la section commentaires ci-dessous!