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

Les blocs WordPress par défaut sont parfaits pour un contenu simple, mais ils peuvent rapidement montrer leurs limites lorsque vous avez besoin de mises en page personnalisées, d'éléments interactifs ou de designs sur mesure.

C'est là qu'interviennent les blocs personnalisés. Ils vous donnent un contrôle total sur l'apparence et le fonctionnement de votre contenu, sans dépendre de plugins lourds ou de solutions de contournement.

Le meilleur dans tout ça ? Créer des blocs personnalisés est plus accessible que la plupart des gens ne le pensent. Avec les bons outils et un processus clair, vous n'avez pas besoin d'être un développeur pour créer des blocs qui correspondent aux besoins uniques de votre site.

Au fil des ans, nous avons utilisé des blocs personnalisés pour rationaliser les flux de travail et livrer des sites WordPress entièrement personnalisés pour nos clients, et maintenant, nous allons vous montrer comment faire de même.

Dans ce guide, vous apprendrez le processus étape par étape pour créer des blocs WordPress personnalisés, même si vous n'êtes pas un expert en codage.

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 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 peut arriver que vous souhaitiez créer un bloc personnalisé pour faire quelque chose de spécifique sur votre site WordPress, car vous ne trouvez pas de plugin de bloc qui vous convienne.

Avec des blocs personnalisés, vous pouvez ajouter des fonctionnalités uniques à votre site web qui ne sont peut-être pas disponibles dans les blocs pré-construits. Cela peut aider à automatiser des processus ou à rendre la création de contenu pour votre blog WordPress plus efficace.

Par exemple, vous pourriez créer un bloc personnalisé pour afficher des témoignages, puis insérer et gérer facilement ce bloc sans aucune connaissance en codage.

Cela dit, voyons comment créer facilement un bloc entièrement personnalisé dans WordPress.

Pour ce tutoriel, nous allons vous montrer deux méthodes pour créer un bloc personnalisé. Vous pouvez utiliser les liens rapides ci-dessous pour accéder à la méthode de votre choix :

• Méthode 1 : Créer des blocs personnalisés pour WordPress en utilisant WPCode (Recommandé)
• Méthode 2 : Créer des blocs personnalisés pour WordPress en utilisant le plugin Genesis Custom Code (Gratuit)
• Bonus : Créer des modèles personnalisés pour vos articles

Méthode 1 : Créer des blocs personnalisés pour WordPress en utilisant WPCode (Recommandé)

Si vous êtes nouveau sur WordPress et que le codage vous semble intimidant, WPCode est un excellent choix pour vous.

Dans le cadre de notre boîte à outils, nous avons trouvé que WPCode est le moyen le plus simple et le plus sûr pour les débutants d'ajouter des extraits de code personnalisés.

Nous avons également une revue détaillée de WPCode qui pourrait vous être utile pour comprendre tout son potentiel.

L'une de ses fonctionnalités phares est les extraits de blocs, qui vous permettent de créer des blocs personnalisés sans effort.

Tout d'abord, vous devez installer et activer le plugin WPCode. Pour des instructions détaillées, vous pouvez consulter notre guide pour débutants sur comment installer un plugin WordPress.

Après l'activation, rendez-vous sur la page Snippets de code » + Ajouter un snippet depuis la barre latérale d'administration de WordPress.

Une fois sur place, cliquez sur le bouton « Utiliser l'extrait » sous l'option « Ajouter votre code personnalisé (Nouvel extrait) ».

Cela vous mènera à la page « Créer un snippet personnalisé », où vous pourrez commencer par taper un nom pour le nouveau bloc que vous êtes sur le point de créer.

Une fois que vous avez fait cela, sélectionnez simplement l'option « Snippet de blocs » dans le menu déroulant « Type de code » dans le coin droit de l'écran.

Cela affichera le bouton « Modifier avec l'éditeur de blocs » dans la boîte « Aperçu du code ».

Cliquez simplement sur ce bouton pour lancer l'éditeur de blocs.

Maintenant, une invite apparaîtra à l'écran vous demandant de sauvegarder le snippet de code pour le charger dans l'éditeur de blocs. Cliquez simplement sur le bouton « Oui » pour continuer.

Maintenant que vous êtes dans l'éditeur de blocs, vous pouvez facilement créer un bloc personnalisé en utilisant les blocs préfabriqués disponibles dans le menu des blocs.

Pour ce tutoriel, nous allons créer un bloc personnalisé pour ajouter des témoignages à votre site.

Tout d'abord, cliquez sur le bouton « Ajouter un bloc » (+) en haut à gauche de l'écran pour ouvrir le menu des blocs.

À partir de là, faites glisser le bloc Titre dans l'interface de l'éditeur de blocs et nommez-le « Témoignages ».

Ensuite, vous pouvez utiliser les blocs Paragraphe, Citation mise en avant ou Citation pour ajouter des témoignages de différents clients sur votre site Web.

Vous pouvez même personnaliser davantage votre bloc de témoignages en utilisant les blocs Image, Logo du site, Icônes sociales ou Slogan du site.

Vous pouvez également configurer la taille, la couleur du texte ou la couleur d'arrière-plan de vos témoignages à partir du panneau de blocs situé sur le côté droit de l'écran.

Une fois que vous avez terminé, n'oubliez pas de cliquer sur le bouton « Mettre à jour » en haut pour enregistrer les paramètres de votre bloc personnalisé.

Ensuite, cliquez simplement sur le bouton « Retourner à l'extrait WPCode » en haut pour être redirigé vers la page de l'éditeur de code.

Une fois sur place, faites défiler jusqu'à la section « Insertion » et choisissez le mode « Insertion automatique ».

Après avoir activé l'extrait de code, votre bloc personnalisé sera automatiquement ajouté à l'emplacement que vous choisirez pour l'insérer sur votre site Web.

Ensuite, vous devez configurer l'emplacement du bloc personnalisé que vous avez créé.

Pour ce faire, cliquez simplement sur le menu déroulant « Emplacement » dans la section « Insertion » et basculez vers l'onglet « Spécifique à la page ». À partir de là, vous pouvez maintenant choisir l'option « Insérer après l'article » si vous souhaitez afficher votre bloc Témoignages après la fin de l'article.

Une fois que vous avez fait cela, vous pouvez également configurer le nombre d'articles après lesquels le bloc de témoignages doit apparaître. Par exemple, si vous tapez le chiffre 3, le bloc Témoignages apparaîtra dans tous les trois articles.

Vous pouvez également afficher le bloc entre différents paragraphes, après les extraits d'articles, et plus encore.

Cependant, si vous ne trouvez pas l'emplacement de bloc que vous recherchez, vous pouvez également créer votre propre règle de logique conditionnelle pour intégrer le bloc personnalisé à l'endroit de votre choix.

Pour ce faire, faites défiler vers le bas jusqu'à la section « Logique conditionnelle intelligente » et activez le commutateur « Activer la logique ».

Ensuite, vous devez cliquer sur le bouton « Ajouter un nouveau groupe » pour commencer à créer une règle de logique conditionnelle.

Par exemple, si vous souhaitez afficher le bloc personnalisé que vous avez créé uniquement sur une page ou un article spécifique, vous devrez sélectionner l'option « URL de la page » dans le menu déroulant à droite.

Après cela, vous pouvez laisser le menu déroulant au milieu tel quel, puis ajouter l'URL de la page/l'article WordPress de votre choix dans le champ à gauche.

Vous pouvez également configurer votre règle de logique conditionnelle pour n'afficher le bloc personnalisé que sur une page spécifique, pour les utilisateurs connectés, les pages de la boutique WooCommerce, les pages Easy Digital Downloads, des dates spécifiques, et plus encore.

Une fois que vous avez terminé, faites défiler vers le haut de la page et basculez le commutateur « Inactif » sur « Actif ». Ensuite, cliquez sur le bouton « Mettre à jour » pour enregistrer vos paramètres.

Votre bloc personnalisé sera maintenant automatiquement ajouté à tous les emplacements que vous avez sélectionnés pour l'extrait de bloc.

Gardez à l'esprit que le bloc personnalisé que vous avez créé ne sera pas affiché comme une option dans le menu des blocs de l'éditeur Gutenberg de WordPress.

Vous devrez configurer les paramètres du bloc en visitant la page Extraits de code depuis le tableau de bord WordPress et en cliquant sur le lien « Modifier » sous l'extrait de bloc.

Cela ouvrira la page « Modifier l'extrait », où vous pourrez facilement personnaliser le bloc ou modifier son emplacement et ses règles de logique conditionnelle.

Maintenant, visitez votre site Web pour voir le bloc personnalisé que vous avez créé en action.

Voici notre bloc personnalisé « Témoignages » sur notre site Web de démonstration.

Méthode 2 : Créer des blocs personnalisés pour WordPress en utilisant le plugin Genesis Custom Code (Gratuit)

Si vous êtes un utilisateur intermédiaire et recherchez une solution gratuite, alors cette méthode est pour vous. Gardez à l'esprit que vous devrez être familier avec HTML et CSS pour suivre les instructions de cette méthode.

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 comment installer un plugin WordPress.

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

Étape 1 : Créer un bloc personnalisé pour WordPress

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

Cela vous mènera à la page de l'éditeur de blocs, où vous créerez un bloc personnalisé pour votre site WordPress.

À partir de là, vous pouvez commencer par donner un nom à votre bloc.

Maintenant, sur le côté droit de la page, vous trouverez les propriétés du bloc que vous pouvez configurer.

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

Le slug sera automatiquement rempli 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 soit facilement trouvable.

Il est maintenant temps d'ajouter des champs à votre bloc. Vous pouvez ajouter différents types de champs tels que du texte, des nombres, des adresses e-mail, des URL, des couleurs, des images, des cases à cocher, des boutons radio, et plus encore.

Nous allons ajouter trois champs à notre bloc personnalisé Témoignages : un champ image pour la photo du critique, un champ texte pour le nom du critique et un champ zone de texte pour le texte du témoignage.

Cliquez simplement sur le bouton '+' pour insérer le premier champ.

Cela ouvrira quelques options pour le champ dans la colonne de droite. Examinons chacune d'elles.

• Libellé du champ : Vous pouvez utiliser le nom de votre choix pour le libellé du champ. Nommons notre premier champ 'Image du critique'.
• 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, assurez-vous donc 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 choisirons donc « 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. Ceci 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 voir 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 de remplacement et la limite de caractères.

En suivant le processus ci-dessus, ajoutons 2 autres champs pour notre bloc Témoignages en cliquant sur le bouton « + ».

Si vous souhaitez réorganiser les champs, vous pouvez le faire en les faisant glisser à l'aide de la poignée située sur le côté 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 simplement sur le bouton « Publier » situé 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é à l'étape précédente, il 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 décidez de son apparence en utilisant du HTML et du 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 façons 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 du PHP pour s'exécuter 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èle intégré

Sur l'écran de modification du bloc personnalisé, basculez simplement vers l'onglet « Éditeur de modèle » et entrez votre HTML sous l'onglet balisage.

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

Par exemple, nous avons utilisé le HTML suivant pour le bloc d'exemple 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 simplement à l'onglet « CSS » pour styliser le balisage de sortie de votre bloc.

Voici le CSS d'exemple 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 des modèles de blocs personnalisés

Cette méthode est recommandée si vous avez besoin d'utiliser PHP pour interagir avec les champs de votre bloc personnalisé. Vous devrez télécharger le modèle d'éditeur directement dans votre thème.

Tout d'abord, vous devez créer un dossier sur votre ordinateur et le nommer en utilisant le slug du nom de votre bloc personnalisé.

Par exemple, notre bloc de démonstration s'appelle Témoignages, nous allons donc créer un dossier témoignages.

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

Voici le modèle d'exemple 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>

Maintenant, vous avez peut-être remarqué 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 en utilisant l'éditeur de texte brut sur votre ordinateur et l'enregistrer sous le nom block.css dans le dossier que vous avez créé.

Nous utiliserons ce fichier pour ajouter le CSS nécessaire au style de l'affichage de notre bloc. Voici le CSS d'exemple 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éverser votre dossier de blocs sur votre site web en utilisant un client FTP ou l'application Gestionnaire de fichiers de votre compte d'hébergement WordPress.

Une fois connecté, naviguez vers le dossier /wp-content/themes/votre-thème-actuel/ .

Si votre dossier de thème ne contient pas de dossier nommé 'blocks', alors créez un nouveau répertoire et nommez-le blocks.

Ensuite, vous devez téléverser le dossier que vous avez créé sur votre ordinateur dans le dossier blocks.

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

Étape 3 : Prévisualiser votre bloc personnalisé

Avant de pouvoir prévisualiser votre HTML/CSS, vous devrez fournir des données de test qui pourront être utilisées pour afficher un exemple de sortie.

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

Ces données ne feront pas partie de votre bloc personnalisé et ne serviront qu'à prévisualiser les modifications que vous avez apportées à l'aide de HTML et CSS.

Une fois que vous avez ajouté les données, n'oubliez pas de cliquer sur le bouton 'Mettre à jour' pour enregistrer vos modifications.

Si vous ne cliquez pas sur le bouton 'Mettre à jour', vous ne pourrez pas voir l'aperçu de votre bloc personnalisé.

Vous pouvez maintenant basculer vers l'onglet 'Aperçu front-end' pour voir à quoi ressemblera votre bloc sur le front-end de votre site WordPress.

Si tout vous semble correct, vous pouvez mettre à jour votre bloc à nouveau pour enregistrer les modifications non sauvegardées.

Étape 4 : Utiliser votre bloc personnalisé dans WordPress

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

Modifiez simplement n'importe quel article ou page où vous souhaitez utiliser ce bloc. Ensuite, cliquez sur le bouton « Ajouter un bloc » (+) dans le coin supérieur gauche pour ouvrir le menu des blocs.

Ici, utilisez la fonction de recherche pour trouver votre bloc en tapant son nom ou des mots-clés. Ajoutez-le ensuite à la page ou à l'article.

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

Vous pouvez remplir les champs de bloc selon vos besoins.

Lorsque vous quittez le bloc WordPress personnalisé pour en utiliser un autre, l'éditeur affichera 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 Témoignages sur notre site de test.

Bonus : Créer des modèles personnalisés pour vos articles

En plus de créer des blocs personnalisés, vous pouvez ajouter des modèles personnalisés pour les articles de blog ou les pages de votre site Web.

Un modèle est une mise en page que vous pouvez ajouter à votre article pour qu'il soit différent des autres pages et contenus. Cela peut rendre vos articles plus attrayants et visuellement intéressants et peut aider à générer plus de prospects.

Vous pouvez facilement créer un modèle pour tous vos articles en créant un bloc Groupe réutilisable.

Tout d'abord, vous devrez cliquer sur le bouton « Ajouter un bloc » (+) pour ajouter le bloc Groupe à l'article. Ensuite, vous pouvez ajouter n'importe quels blocs dans le groupe, y compris des titres, des médias et du texte, des images de couverture, et plus encore.

Une fois que vous avez créé le modèle de publication, cliquez sur le menu à trois points dans la barre d'outils du bloc en haut du bloc. Ensuite, cliquez sur le bouton « Créer un modèle ».

Après cela, votre modèle de publication sera enregistré comme un bloc réutilisable. Vous pouvez y accéder et l'ajouter à n'importe quelle publication en ouvrant le menu des blocs (+) et en passant à l'onglet « Modèles ».

Cependant, gardez à l'esprit que cette méthode de création de modèles de publication personnalisés offre des fonctionnalités limitées. Pour créer un modèle personnalisé plus esthétique sans aucun codage, vous pouvez utiliser SeedProd, qui est le meilleur constructeur de pages du marché.

Pour plus de détails, consultez notre tutoriel sur comment créer des modèles d'articles uniques personnalisés dans WordPress.

Nous espérons que cet article vous a aidé à apprendre comment créer facilement des blocs Gutenberg personnalisés pour votre site Web WordPress. Vous voudrez peut-être aussi consulter notre guide sur comment ajouter une liste de contrôle d'articles de blog dans l'éditeur WordPress et consulter nos conseils essentiels pour utiliser les shortcodes sur votre site Web.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.