Sommaire
La sortie de WordPress 5.0, également connu sous le nom de Gutenberg, a vraiment ouvert la voie à ce que vous pouvez réaliser en créant un site web WordPress. Bien sûr, il y a eu beaucoup de questions sur Gutenberg. Mais comme on continue à y répondre, on peut voir que la construction avec un bloc Gutenberg personnalisé WordPress est l’avenir de la plate-forme.
Les blocs Gutenberg ont ouvert une porte qui nous permet de faire toutes sortes de choses uniques lorsque nous construisons un site, un billet ou une page. Vous pouvez même construire des blocs Gutenberg réutilisables, de sorte qu’à l’avenir vous pourrez simplement brancher ces blocs, ce qui peut vous faire gagner beaucoup de temps.
Cela étant dit, avez-vous déjà voulu construire un bloc Gutenberg personnalisé ? Il existe déjà beaucoup de blocs différents à utiliser dans WordPress, mais la personnalisation est toujours au premier plan.
Eh bien, vous êtes au bon endroit. Je vous montre ci-dessous comment créer facilement un bloc Gutenberg WordPress personnalisé. Cela vous permettra de vous démarquer et vous donnera encore plus de liberté.
N’oubliez pas que vous pouvez même exporter et importer votre bloc Gutenberg personnalisé pour l’utiliser sur d’autres sites WordPress.
Créer un bloc Gutenberg WordPress personnalisé
Afin de créer un bloc Gutenberg personnalisé, nous allons utiliser un plugin appelé Block Lab. Ce plugin vous aidera à créer facilement un bloc personnalisé dans Gutenberg en utilisant la combinaison de votre zone d’administration WordPress et un système de modèles simple.
Avec des fonctions conviviales pour les développeurs et la possibilité de travailler dans le système d’administration de WordPress, Block Lab est sans doute le moyen le plus simple et le plus rapide de créer un bloc Gutenberg personnalisé dans WordPress.
Installer et activer Block Lab
Pour commencer, vous devez installer et activer le plugin Block Lab depuis la page du plugin dans votre tableau de bord d’administration WordPress.
Une fois le plugin installé et activé, vous verrez un onglet “Block Lab” dans le panneau gauche de votre tableau de bord d’administration WordPress. Notre première étape consiste à créer un nouveau bloc Gutenberg personnalisé. Pour ce faire, cliquez sur Block Lab Add New (Ajouter un nouveau bloc).
Créer un nouveau bloc Gutenberg personnalisé
Vous serez amené à la zone Block Lab où vous pourrez créer un nouveau bloc personnalisé. Pour commencer, donnez un nom à votre bloc personnalisé afin qu’il soit facile à reconnaître plus tard. Le nom peut être n’importe quoi, mais de préférence en rapport avec le type de bloc que vous construisez.
Vous pouvez voir que sur le côté droit de la page, il y a quelques propriétés de bloc parmi lesquelles vous pouvez choisir. Passez-les en revue et sélectionnez-les en fonction de ce que vous voulez ou de ce dont vous avez besoin. Vous pouvez également ajouter deux ou trois mots clés si vous souhaitez faciliter la recherche de votre bloc Gutenberg personnalisé.
Il est maintenant temps d’ajouter quelques champs à votre bloc personnalisé. Il y a toutes sortes de champs que vous pouvez ajouter lorsque vous faites cela, et vous pouvez également ajouter plusieurs champs. Voici quelques-uns des champs que vous pouvez ajouter :
- Texte
- Zone de texte
- URL
- Courriel
- Numéro
- Couleur
- Image
- Sélectionnez
- Multi-Select
- Basculer
- Gamme
- Case à cocher
- Boutons radio
Nommez votre domaine, faites vos sélections et continuez. Vous pouvez ajouter autant de champs que vous le souhaitez. Cela dépendra essentiellement du type de bloc Gutenberg personnalisé que vous construisez.
Lorsque vous avez terminé, cliquez sur le bouton “Fermer le champ” en bas. Si vous souhaitez ajouter un autre champ, il vous suffit de cliquer à nouveau sur “Ajouter un champ” et de vous lancer.
Note : Vous pouvez obtenir des options supplémentaires en fonction du type de champ que vous choisissez. Par exemple, si vous utilisez le champ “Texte”, vous obtiendrez d’autres options à remplir comme un texte de remplacement et une limite de caractères.
Une fois que vous avez ajouté tous les champs que vous voulez, prenez une seconde pour les passer en revue. Vous pouvez également faire glisser les champs dans l’ordre que vous souhaitez. Dans l’exemple ci-dessous, j’ai créé trois champs.
Lorsque vous êtes satisfait de vos champs et de leur ordre, cliquez sur le bouton “Publier” qui se trouve en haut à droite de votre écran. Le bloc Gutenberg personnalisé sera alors en ligne et prêt à être utilisé.
Créez votre modèle de bloc personnalisé
Maintenant que vous avez créé un bloc Gutenberg personnalisé, vous avez terminé la première étape. Cependant, le bloc ne fonctionnera pas réellement tant que vous n’aurez pas créé un modèle de bloc. Vous devez créer le modèle et le télécharger dans le dossier de votre thème actuel.
Faisons cela ensemble.
Comme vous pouvez le voir dans la capture d’écran ci-dessous, Block Lab recherche certains fichiers de modèles dans votre thème. Dans ce cas, ils chercheront celui ci-dessous.
Le fichier de modèle de bloc personnalisé indique à votre plugin comment il doit afficher les champs de bloc que vous avez créés dans l’éditeur. À son tour, le plugin recherchera le fichier de modèle et utilisera les informations de ce fichier pour afficher le contenu du bloc sur votre message ou votre page.
Créer un dossier de bureau
La première chose que vous voulez faire ici est de créer un dossier sur votre bureau et de l’intituler “blocs”. Une fois que vous avez créé le fichier modèle de votre site, vous le placerez dans ce dossier, puis vous le téléchargerez dans le répertoire du thème WordPress que vous avez lancé.
Créer un fichier de modèle de bloc
Pour créer le fichier que nous allons réaliser ensemble, vous pouvez simplement utiliser un éditeur de texte simple comme Notepad ou quelque chose de similaire.
Note : Chaque fois que vous ajoutez un de vos nouveaux champs à votre bloc personnalisé, vous devez ajouter le code PHP suivant à votre fichier de modèle de bloc :
N’oubliez pas que vous voulez remplacer ajouter votre nom de champ ici par le nom de champ réel.
Par exemple, le nom du premier champ de cette démo est simplement “new-field-demo”, donc le champ ci-dessus ressemblerait en fait à ceci lorsqu’il serait ajouté :
Pas trop difficile, n’est-ce pas ? Allons de l’avant et faisons le reste pour cet exemple particulier :
Il ne vous reste plus qu’à ajouter quelques balises HTML pour le style. Vous pouvez le faire de plusieurs façons, selon vos préférences en matière de style et d’affichage. Voici une démonstration que vous pouvez suivre :
Note : Le nom de votre fichier doit être le nom de votre bloc Gutenberg personnalisé.
Il sera utile que vous sachiez et compreniez comment écrire des CSS personnalisés.
Télécharger un fichier de modèle de bloc personnalisé dans le dossier thématique
La dernière chose que vous devez faire pour compléter ce processus est de télécharger le dossier blocks qui contient tous les fichiers dans l’emplacement de votre thème WordPress. Le moyen le plus simple est d’utiliser un client FTP pour télécharger ces fichiers.
Si vous avez déjà un client FTP, génial ! Sinon, je vous recommande FileZilla, car c’est un excellent outil pour ce processus. Une fois que vous vous êtes connecté à l’aide du client FTP de votre choix, il suffit de chercher le dossier /wp-content/themes/. Ouvrez le thème que vous utilisez actuellement et faites glisser le dossier blocks dans ce répertoire particulier.
Note : Puisque Block Labs nous permet de créer des blocs personnalisés qui sont spécifiques à un thème, si vous changez votre thème, vous devrez copier le dossier des blocs que vous avez et l’ajouter dans votre nouveau répertoire de thèmes en utilisant le même processus ci-dessus.
C’est tout ! Si cela est fait correctement, vous pouvez aller ouvrir un message et ajouter votre bloc Gutenberg personnalisé quand vous le souhaitez. Votre nouveau bloc s’affichera automatiquement dans la zone des blocs du site et sera là quand vous le voudrez.
La création d’un bloc Gutenberg personnalisé n’a pas besoin d’être un processus long et difficile. J’espère que cet article vous a montré combien il est facile de créer un bloc Gutenberg WordPress personnalisé.
Avez-vous déjà créé des blocs personnalisés dans le passé ? Est-ce le processus que vous avez essayé ou avez-vous procédé autrement ?
