Comment créer un bloc WordPress personnalisé (méthode simple)

Vous souhaitez créer un bloc Gutenberg personnalisé pour votre site WordPress ?

Bien que WordPress soit livré avec de nombreux blocs de base pour la création de contenu, vous aurez peut-être besoin de quelque chose de plus personnalisé pour votre site Web.

Dans cet article, nous vous montrerons un moyen simple de créer des blocs Gutenberg personnalisés pour votre site WordPress.

Pourquoi créer un bloc WordPress personnalisé ?

WordPress est livré avec un éditeur de blocs intuitif qui vous permet de créer facilement vos articles et vos pages en ajoutant du contenu et des éléments de mise en page sous forme de blocs.

Par défaut, WordPress est livré avec plusieurs blocs couramment utilisés. Les plugins WordPress peuvent également ajouter leurs propres blocs que vous pouvez utiliser.

Cependant, il se peut que vous souhaitiez parfois créer votre propre bloc personnalisé pour faire quelque chose de spécifique et que vous ne trouviez pas de plugin de blocs qui fonctionne pour vous.

Dans ce didacticiel, nous allons vous montrer comment créer un bloc entièrement personnalisé.

Remarque : Cet article est destiné aux utilisateurs intermédiaires. Vous devrez être familiarisé avec HTML et CSS pour créer des blocs Gutenberg personnalisés.

Étape 1 : Commencez avec votre premier bloc personnalisé

Tout d'abord, vous devez installer et activer le plugin Genesis Custom Blocks. Pour plus de détails, consultez notre guide étape par étape sur la façon d'installer un plugin WordPress.

Créé par les personnes derrière les populaires Genesis Theme Framework et StudioPress, ce plugin fournit aux développeurs des outils simples pour créer rapidement des blocs personnalisés pour leurs projets.

Pour les besoins de ce tutoriel, nous allons créer un bloc "témoignages".

Tout d'abord, rendez-vous sur la page Blocs personnalisés »Ajouter un nouveau dans la barre latérale gauche de votre panneau d'administration.

Cela vous amènera à la page de l'éditeur de blocs.

À partir de là, vous devez donner un nom à votre bloc.

Sur le côté droit de la page, vous trouverez les propriétés du bloc.

Ici, vous pouvez choisir une icône pour votre bloc, ajouter une catégorie et ajouter des mots-clés.

Le slug sera rempli automatiquement en fonction du nom de votre bloc, vous n'avez donc pas à le modifier. Cependant, vous pouvez écrire jusqu'à 3 mots-clés dans le champ de texte Mots-clés afin que votre bloc puisse être facilement trouvé.

Ajoutons maintenant quelques champs à notre bloc.

Vous pouvez ajouter différents types de champs tels que du texte, des chiffres, une adresse e-mail, une URL, une couleur, une image, une case à cocher, des boutons radio et bien plus encore.

Nous ajouterons 3 champs à notre bloc de témoignage personnalisé : un champ d'image pour l'image de l'évaluateur, une zone de texte pour le nom de l'évaluateur et un champ de zone de texte pour le texte du témoignage.

Cliquez sur le bouton [+] Ajouter un champ pour insérer le premier champ.

Cela ouvrira quelques options pour le champ. Jetons un coup d'œil à chacun d'eux.

• Étiquette de champ : Vous pouvez utiliser n'importe quel nom de votre choix pour l'étiquette de champ. Nommons notre premier champ 'Reviewer Image'.
• Nom du champ : Le nom du champ sera généré automatiquement en fonction de l'étiquette du champ. Nous utiliserons ce nom de champ à l'étape suivante, alors assurez-vous qu'il est unique pour chaque champ.
• Type de champ : Ici, vous pouvez sélectionner le type de champ. Nous voulons que notre premier champ soit une image, nous allons donc sélectionner Image dans le menu déroulant.
• Emplacement du champ : vous pouvez décider si vous souhaitez ajouter le champ à l'éditeur ou à l'inspecteur.
• Texte d'aide : Vous pouvez ajouter du texte pour décrire le champ. Ce n'est pas obligatoire si vous créez ce bloc pour votre usage personnel, mais cela peut être utile pour les blogs multi-auteurs.

Vous pouvez également obtenir des options supplémentaires en fonction du type de champ que vous choisissez. Par exemple, si vous sélectionnez un champ de texte, vous obtiendrez des options supplémentaires telles que le texte d'espace réservé et la limite de caractères.

En suivant le processus ci-dessus, ajoutons 2 autres champs pour notre bloc de témoignages en cliquant sur le bouton [+] Ajouter un champ .

Si vous souhaitez réorganiser les champs, vous pouvez le faire en les faisant glisser à l'aide de la poignée située à gauche de chaque étiquette de champ.

Pour modifier ou supprimer un champ particulier, vous devez cliquer sur l'étiquette du champ et modifier les options dans la colonne de droite.

Une fois que vous avez terminé, cliquez sur le bouton Publier , présent sur le côté droit de la page, pour enregistrer votre bloc Gutenberg personnalisé.

Étape 2 : créer un modèle de bloc personnalisé

Bien que vous ayez créé le bloc WordPress personnalisé à la dernière étape, cela ne fonctionnera pas tant que vous n'aurez pas créé un modèle de bloc.

Le modèle de bloc détermine exactement comment les informations saisies dans le bloc sont affichées sur votre site Web. Vous pouvez décider de son apparence en utilisant HTML et CSS, ou même du code PHP si vous avez besoin d'exécuter des fonctions ou de faire d'autres choses avancées avec les données.

Il existe deux manières de créer un modèle de bloc. Si la sortie de votre bloc est en HTML/CSS, vous pouvez utiliser l'éditeur de modèle intégré.

D'autre part, si la sortie de votre bloc nécessite l'exécution de PHP en arrière-plan, vous devrez créer manuellement un fichier de modèle de bloc et le télécharger dans votre dossier de thème.

Méthode 1. Utilisation de l'éditeur de modèles intégré

Sur l'écran d'édition de bloc personnalisé, passez simplement à l'onglet Éditeur de modèles et entrez votre code HTML sous l'onglet de balisage.

Vous pouvez écrire votre code HTML et utiliser des accolades doubles pour insérer des valeurs de champ de bloc.

Par exemple, nous avons utilisé le code HTML suivant pour l'exemple de bloc que nous avons créé ci-dessus.

<div class="testimonial-item">
<img src="reviewer-image" class="reviewer-image">
<h4 class="reviewer-name">reviewer-name</h4>
<div class="testimonial-text">testimonial-text</div>
</div>

Après cela, passez à l'onglet CSS pour styliser le balisage de sortie de votre bloc.

Voici l'exemple de CSS que nous avons utilisé pour notre bloc personnalisé.

.reviewer-name  
    font-size:14px;
    font-weight:bold;
    text-transform:uppercase;


.reviewer-image 
    float: left;
    padding: 0px;
    border: 5px solid #eee;
    max-width: 100px;
    max-height: 100px;
    border-radius: 50%;
    margin: 10px;


.testimonial-text 
    font-size:14px;


.testimonial-item  
 margin:10px;
 border-bottom:1px solid #eee;
 padding:10px;

Méthode 2. Téléchargement manuel de modèles de blocs personnalisés

Cette méthode est recommandée si vous devez utiliser PHP pour interagir avec vos champs de bloc personnalisés.

Vous devrez essentiellement télécharger le modèle d'éditeur directement sur votre thème.

Tout d'abord, vous devez créer un dossier sur votre ordinateur, nommez-le avec votre slug de nom de bloc personnalisé. Par exemple, notre bloc de démonstration s'appelle Témoignages, nous allons donc créer un dossier de témoignages.

Ensuite, vous devez créer un fichier appelé block.php à l'aide d'un éditeur de texte brut. C'est ici que vous placerez la partie HTML/PHP de votre modèle de bloc.

Voici l'exemple de modèle que nous avons utilisé pour notre exemple.

<div class="testimonial-item <?php block_field('className'); ?>">
<img class="reviewer-image" src="<?php block_field( 'reviewer-image' ); ?>" alt="<?php block_field( 'reviewer-name' ); ?>" />
<h4 class="reviewer-name"><?php block_field( 'reviewer-name' ); ?></h4>
<div class="testimonial-text"><?php block_field( 'testimonial-text' ); ?></div>
</div>

Remarquez comment nous avons utilisé la fonction block_field() pour récupérer les données d'un champ de bloc.

Nous avons enveloppé nos champs de bloc dans le HTML que nous voulons utiliser pour afficher le bloc. Nous avons également ajouté des classes CSS afin de pouvoir styliser correctement le bloc.

N'oubliez pas d'enregistrer le fichier dans le dossier que vous avez créé précédemment.

Ensuite, vous devez créer un autre fichier à l'aide de l'éditeur de texte brut sur votre ordinateur et l'enregistrer sous block.css dans le dossier que vous avez créé.

Nous utiliserons ce fichier pour ajouter le CSS nécessaire pour styliser notre affichage de bloc. Voici l'exemple de CSS que nous avons utilisé pour cet exemple.

.reviewer-name  
    font-size:14px;
    font-weight:bold;
    text-transform:uppercase;


.reviewer-image 
    float: left;
    padding: 0px;
    border: 5px solid #eee;
    max-width: 100px;
    max-height: 100px;
    border-radius: 50%;
    margin: 10px;


.testimonial-text 
    font-size:14px;


.testimonial-item  
 margin:10px;
 border-bottom:1px solid #eee;
 padding:10px;

N'oubliez pas de sauvegarder vos modifications.

Votre dossier de modèle de bloc contiendra désormais deux fichiers de modèle à l'intérieur.

Après cela, vous devez télécharger votre dossier de blocs sur votre site Web à l'aide d'un client FTP ou de l'application Gestionnaire de fichiers dans le panneau de configuration de votre compte d'hébergement WordPress.

Une fois connecté, accédez au dossier /wp-content/themes/your-current-theme/ .

Si votre dossier de thème n'a pas de nom de dossier blocks, alors continuez et créez un nouveau répertoire et nommez-le blocks .

Entrez maintenant dans le dossier des blocs et téléchargez le dossier que vous avez créé sur votre ordinateur dans le dossier des blocs.

C'est tout! Vous avez créé avec succès des fichiers de modèles manuels pour votre bloc personnalisé.

Étape 3. Prévisualisez votre bloc personnalisé

Maintenant, avant de pouvoir prévisualiser votre HTML/CSS, vous devez fournir des données de test qui peuvent être utilisées pour afficher un exemple de sortie.

Dans la zone d'administration de WordPress, modifiez votre bloc et passez à l'onglet Aperçu de l'éditeur. Ici, vous devez entrer des données factices.

N'oubliez pas de cliquer sur le bouton Mettre à jour pour enregistrer vos modifications avant de pouvoir prévisualiser.

Vous pouvez maintenant passer à l'onglet Aperçu frontal pour voir à quoi ressemblera votre bloc sur le front-end (zone publique de votre site Web WordPress).

Si tout vous semble bon, vous pouvez mettre à jour votre bloc pour enregistrer les modifications non enregistrées.

Étape 4. Utilisation de votre bloc personnalisé dans WordPress

Vous pouvez maintenant utiliser votre bloc personnalisé dans WordPress comme vous utiliseriez n'importe quel autre bloc.

Modifiez simplement n'importe quel article ou page où vous souhaitez utiliser ce bloc.

Cliquez sur le bouton Ajouter un nouveau bloc et recherchez votre bloc en tapant son nom ou ses mots-clés.

Après avoir inséré le bloc dans la zone de contenu, vous verrez les champs de bloc que vous avez créés pour ce bloc personnalisé.

Vous pouvez remplir les champs de blocage selon vos besoins.

Lorsque vous vous éloignez du bloc vers un autre bloc, l'éditeur affiche automatiquement un aperçu en direct de votre bloc.

Vous pouvez maintenant enregistrer votre article et votre page et les prévisualiser pour voir votre bloc personnalisé en action sur votre site Web.

Voici à quoi ressemble le bloc de témoignages sur notre site de test.

Nous espérons que cet article vous a aidé à apprendre à créer facilement des blocs Gutenberg personnalisés pour votre site Web WordPress.

Vous pouvez également consulter notre guide sur la création d'un thème WordPress personnalisé à partir de zéro, ou consulter notre sélection d'experts des plugins WordPress indispensables pour votre site Web.

Si vous avez aimé cet article, veuillez vous abonner à notre chaîne YouTube pour les didacticiels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.