N'aimons-nous pas tous WordPress ? La plate-forme a connu un énorme succès depuis sa création, les développeurs ajoutant constamment de nouvelles fonctionnalités. L'une des fonctionnalités les plus remarquables de ces derniers temps est l'éditeur de blocs WordPress, dont le nom de code Gutenberg.

Gutenberg offre aux utilisateurs de WordPress une nouvelle façon passionnante de publier du contenu et de personnaliser votre site. Il est incroyablement facile à utiliser, ce qui est une excellente nouvelle pour les débutants et les développeurs. Si vous utilisez la dernière version de WordPress, vous connaissez déjà l'éditeur de blocs et le concept de blocs.

Par défaut, l'éditeur de blocs WordPress est livré avec des blocs qui vous permettent d'inclure du texte, des images, des citations, de l'audio, des vidéos, des intégrations, etc. En plus de cela, il existe une tonne de modules complémentaires Gutenberg qui vous permettent d'étendre l'éditeur sans transpirer.

Néanmoins, vous pourriez avoir un besoin spécifique qui vous invite à créer vos propres blocs personnalisés. C'est ici qu'intervient le message d'aujourd'hui. Dans quelques paragraphes, vous apprendrez exactement comment créer des blocs Gutenberg personnalisés pour répondre à vos besoins spécifiques.

Sans plus tarder, commençons car il y a beaucoup à apprendre.

Que sont les blocs, de toute façon ?

le nouvel éditeur de blocs de gutenberg wordpress

Si vous êtes le parfait débutant, vous vous demandez probablement en quoi consiste cette entreprise Gutenberg. Je sais, j'étais assez confus quand Gutenberg a été présenté. Mais personne n'est à blâmer, nous étions tous habitués à Éditeur classique que faire le changement était inconfortable au début.

Pourtant, l'éditeur de blocs WordPress est là pour rester, que cela nous plaise ou non. C'est précisément pourquoi vous devriez en apprendre le plus possible sur Gutenberg (et tout ce qui va avec) pour en tirer le meilleur parti.

Les blocs traitent les paragraphes, les en-têtes, les médias et les intégrations comme des composants qui, lorsqu'ils sont liés, constituent le contenu stocké dans la base de données WordPress, remplaçant le concept traditionnel de texte libre par des médias intégrés et des codes abrégés. – Manuel de l'éditeur de blocs

Dans le passé, les utilisateurs de WordPress s'appuyaient sur du texte libre et des codes abrégés pour ajouter du contenu. Gutenberg utilise blocs. Le nouvel éditeur vous permet d'utiliser des unités de blocs pour créer des mises en page riches et flexibles faciles à gérer. Actuellement, vous pouvez utiliser l'éditeur de blocs pour les articles et les pages, mais il existe des plans actifs pour prendre en charge édition complète du site à l'avenir.

blocs wordpress gutenberg

Éditeur Gutenberg montrant quelques blocs

Travailler avec des blocs rend la création de contenu dans WordPress assez rafraîchissante. De plus, de nombreux plugins existants prennent en charge le nouvel éditeur et sont livrés avec des blocs prêts à l'emploi qui facilitent l'ajout de contenu à partir de ces plugins. L'éditeur vous permet de faire glisser et de déposer des blocs sur une page afin que vous puissiez appuyer plus rapidement sur le bouton de publication.

Tout comme un constructeur de pages intégré directement dans WordPress.

Si vous connaissez les constructeurs de pages visuels tels qu'Elementor, vous connaissez probablement le concept de création de pages par glisser-déposer. Gutenberg est une tentative d'intégrer pleinement la création de sites par glisser-déposer dans le noyau de WordPress. N'hésitez pas à consulter notre guide étape par étape du Gutenberg Builder pour WordPress pour en savoir plus.

Cela dit, passons à la meilleure partie du message d'aujourd'hui. Apprenons à créer un bloc simple. Vous pouvez le faire manuellement ou en utilisant des plugins tels que Blocs personnalisés Genesis (anciennement BlockLab), Blocs paresseuxou ACF. La création de blocs personnalisés est un peu technique, donc pour les besoins de l'article d'aujourd'hui, nous utiliserons un plugin.

Comment créer un bloc personnalisé (à l'aide des blocs personnalisés Genesis)

Il est plus facile d'emprunter la voie du plugin, car la création de blocs Gutenberg personnalisés à partir de zéro nécessite une bonne maîtrise de HTML, CSS, PHP et, plus important encore, de JavaScript. Vous devrez également comprendre React, qui lance une balle courbe aux débutants.

Pour la section suivante, nous utiliserons les blocs personnalisés Genesis, qui vous sont proposés par StudioPress et WPEngine, entre autres développeurs. La version gratuite de Genesis Custom Blocks est disponible sur le référentiel WordPress officiel, ce qui signifie que nous pouvons l'installer dans le tableau de bord d'administration de WordPress.

Installer les blocs personnalisés Genesis

Connectez-vous à votre tableau de bord d'administration WordPress et accédez à Plugins> Ajouter un nouveaucomme indiqué ci-dessous.

installation du plugin wordpress de blocs personnalisés genesis

Ensuite, entrez “Genesis Custom Blocks” dans la zone de recherche par mot-clé et appuyez sur le Installer maintenant bouton:

installation du plug-in de blocs personnalisés genesis

Après ça, Activer le plugin pour que la fête commence.

activer les blocs personnalisés genesis

Tu vas très bien 🙂

Ensuite, créons un nouveau bloc personnalisé. À des fins d'illustration, créons un Call-To-Action (CTA) personnalisé que nous ajouterons à la fin de chaque article que nous publions. La meilleure partie est que vous pouvez réutiliser des blocs pour vous éviter de créer les mêmes blocs encore et encore.

Dans votre menu d'administration WordPress, accédez à Blocs personnalisés > Ajouter nouveaucomme nous le soulignons ci-dessous.

créer un bloc personnalisé avec des blocs personnalisés Genesis

Cela vous mènera à la page suivante où vous trouverez toutes les options pour créer notre bloc personnalisé (dans notre cas, un CTA) :

plugin wordpress de blocs personnalisés de genèse

Voici quelques mots pour expliquer ce que vous voyez dans la capture d'écran ci-dessus. En partant du haut, vous avez.

Zone d'édition principale :

  • Constructeur – Vous passerez probablement beaucoup de temps ici à concevoir votre bloc personnalisé. le Constructeur vous permet d'ajouter un titre, des champs, un slug, des mots clés, une catégorie et de prévisualiser votre bloc personnalisé. Vous apprendrez à ajouter des champs.
  • Éditeur de modèles – Après avoir conçu votre bloc personnalisé (c'est-à-dire, en ajoutant divers champs), vous devrez créer un modèle de bloc (lire, ajouter un peu de code) dans le Éditeur de modèles. Nous en apprendrons plus lors de la conception du CTA.
  • Aperçu de l'éditeur – Cela vous permet de prévisualiser le bloc personnalisé dans l'éditeur de blocs WordPress.
  • Aperçu frontal – Ici, vous pouvez prévisualiser l'apparence du bloc personnalisé sur votre site.
  • Champs de l'éditeur – Affichera les champs dans la zone d'édition principale d'un article ou d'une page (vous savez, tout comme la façon dont vous voyez vos articles réguliers dans l'éditeur WordPress)
  • Champs de l'inspecteur – Affichera le champ dans la barre latérale droite sous l'inspecteur de bloc.

Options de la barre latérale

  • Limace – Le slug est rempli automatiquement en fonction du titre que vous donnez à votre bloc personnalisé. C'est important lors de la création du modèle de bloc.
  • Icône – Cette option vous permet d'ajouter une icône à votre bloc personnalisé.
  • Catégorie – Cela vous permet d'attribuer une catégorie à votre bloc personnalisé. Vous pouvez catégoriser votre bloc personnalisé en utilisant l'une des catégories intégrées, ou vous pouvez créer une toute nouvelle catégorie.
  • Mots clés – Ajoutez un maximum de trois mots-clés liés à votre bloc personnalisé afin que les gens puissent le trouver facilement dans le sélecteur de bloc.
  • Champs de blocs ouverts dans un modal au lieu de rendre sur place – Activez si vous souhaitez ouvrir des champs dans un modal. C'est utile si vous avez un bloc personnalisé avec de nombreux champs.
  • Types de publication – Cochez la ou les cases pour permettre à votre bloc personnalisé d'être affiché sur chaque type de publication. Par exemple, si vous décochez Publications, le bloc n'apparaîtra sur aucune publication.

Création d'un bloc personnalisé

Maintenant que vous avez une meilleure compréhension de l'interface utilisateur et de ce que fait chaque partie, retroussons les manches et mettons-nous au travail.

Dans le Constructeur, donnez à votre bloc personnalisé un titre approprié. Je vais avec CTA pour celui-ci, comme indiqué ci-dessous.

new title - Sabma Digital

Avant d'ajouter de nouveaux champs, ajoutons une icône, des mots-clés et choisissons une catégorie pour le bloc personnalisé, comme indiqué ci-dessous.

options - Sabma Digital

Cet ensemble, ajoutons quelques champs à notre bloc personnalisé. Pour notre exemple de bloc CTA, nous n'ajouterons que trois champs dans l'ordre suivant : une image, du texte et un champ de fichier permettant aux utilisateurs de télécharger un ebook imaginaire 🙂

Ajout de champs de bloc

Sur le Champs de l'éditeur section, cliquez sur le Plus (+) icône pour ajouter le premier champ, comme indiqué ci-dessous.

new field - Sabma Digital

Ensuite, ajoutons un champ image. Dans la barre latérale, définissez le Type de champ à Image et définir les autres options. Aussi, prenez note de la limace (j'ai mis le mien à champ d'image) car nous l'utiliserons lors de la création du modèle de bloc. Voir l'image ci-dessous.

image field - Sabma Digital

Après cela, ajoutez les champs de texte et de fichier de la même manière.

all fields - Sabma Digital

Ne célébrez pas encore, il reste une étape à franchir. Passez à la Éditeur de modèle > Balisage :

markup - Sabma Digital

Le mien a déjà du code mais le vôtre sera vide 🙂

Ici, nous allons concevoir l'apparence de votre bloc personnalisé sur votre site. le Éditeur de modèles accepte HTML, CSS et les slugs de champ (que vous devez mettre entre 2 crochets). Si vous avez besoin d'utiliser PHP, vous pouvez créer le modèle en utilisant le Méthode de template PHP plutôt.

Ne vous inquiétez pas, c'est facile.

À l'intérieur de Éditeur de modèlessous le Balisage (voir l'image ci-dessus), ajoutez le balisage HTML suivant (code) :

<div class="cta-block">
<div class="cta-image">
<img src ="https://www.wpexplorer.com/create-block-plugin/{{image-field}}">
</div>
<div class="text-upload">
<h2>{{text-field}}</h2>
<a href="{{file-field}}">
<button type="button" class="dwnld">Download</button></a>
</div>
</div>

Lorsque vous écrivez votre balisage HTML, vous remarquerez que le Éditeur de modèles complète automatiquement les slugs de champ (par exemple {{image-field}} ) pour vous 🙂

Ensuite, allez à la CSS section pour ajouter quelques styles simples.

css - Sabma Digital

Vous pouvez ajouter les styles que vous désirez, mais voici ce avec quoi je travaille :

.cta-block {
text-align:center;
background-color:orange;
width:100%;
height:auto;
border: 2px solid orange;
}

.dwnld {
background-color: black;
border: 2px solid black;
color: green;
padding: 5px 10px;
text-align: center;
display: inline-block;
font-size: 20px;
margin: 10px 30px;
cursor: pointer;
border-radius:2px;

}

Et vous êtes prêt ! Cliquez sur Publier:

publish 1 - Sabma Digital

Pour voir votre nouveau bloc personnalisé en action, revenez à votre tableau de bord d'administration WordPress et accédez à Messages > Ajouter un nouveau (Cela fonctionne aussi avec les pages):

new post 3 - Sabma Digital

Créez une publication comme vous le faites normalement, cliquez sur le Plus (+) pour ajouter un nouveau bloc et choisissez votre nouveau bloc personnalisé brillant, comme nous le soulignons ci-dessous.

Add New Post ‹ Test — WordPress - Sabma Digital

Ensuite, remplissez votre bloc personnalisé comme vous le souhaitez et publiez votre message :

success 6 - Sabma Digital

Maintenant, si je vérifie mon nouveau bloc CTA personnalisé sur le front-end, je vois ceci :

Genesis Custom Blocks Test – Test - Sabma Digital

Mon CTA personnalisé est là ! S'il vous plaît, ne vous occupez pas de mes capacités de conception – bien sûr, dans un scénario réel, vous voudrez passer un peu plus de temps à styliser votre bloc. Mais j'espère que vous avez appris quelque chose ici aujourd'hui.


Construire des blocs personnalisés ne doit pas être une tâche difficile avec des outils tels que Genesis Custom Blocks et Lazy Blocks, entre autres. Cela, en plus, vous pouvez rendre vos blocs personnalisés complexes ou simples en fonction de vos besoins. Si vous devez créer manuellement des blocs personnalisés, suivez quelques leçons JavaScript. Ça va aider 🙂

Des idées ou des questions? Veuillez nous en informer dans les commentaires ci-dessous.