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é ?

Vous devriez créer un bloc personnalisé WordPress lorsque vous avez besoin d'une fonctionnalité ou d'une mise en page spécifique qui n'est pas disponible dans la bibliothèque de blocs par défaut ou dans les plugins de blocs existants.

En créant un bloc personnalisé, vous pouvez enregistrer des éléments de conception spécifiques, comme une carte de témoignage ou un encart produit, et les réutiliser instantanément sur plusieurs articles.

Cela accélère considérablement votre flux de travail. Au lieu de coder ou de styliser manuellement le même contenu chaque fois que vous rédigez un article, vous insérez simplement votre bloc personnalisé pré-fait et remplissez les champs.

Voyons maintenant 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 :

• Method 1: Create Custom Blocks for WordPress Using WPCode (Recommended)
• Method 2: Create Custom Blocks for WordPress Using Genesis Custom Code Plugin (Free)
• Bonus : Créer des modèles de blocs réutilisables
• Foire aux questions sur les blocs WordPress personnalisés

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.

Étape 1 : Installer et activer WPCode

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.

Étape 2 : Créer un nouveau fragment de bloc

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 ».

Étape 3 : Concevoir votre bloc personnalisé

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é.

Étape 4 : Configurer les paramètres d'insertion

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.

Étape 5 : Appliquer une logique conditionnelle (facultatif)

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, sur les pages de boutique WooCommerce, sur les pages Easy Digital Downloads, pour des dates spécifiques, et plus encore.

Étape 6 : Activer et enregistrer votre bloc

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.

Étape 1 : Installer Genesis Custom Blocks

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 2 : Créer et configurer un nouveau bloc

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.

Étape 3 : Ajouter des champs à votre bloc

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 4 : Créer un modèle de bloc

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 5 : 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 6 : Insérer votre bloc dans un article

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 de blocs réutilisables

En plus de créer des blocs personnalisés, vous pouvez ajouter des modèles de blocs personnalisés (anciennement appelés blocs réutilisables) 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 se démarque 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 d'article sera enregistré comme un modèle synchronisé. Vous pouvez y accéder et l'ajouter à n'importe quel article 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 beau 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.

Foire aux questions sur les blocs WordPress personnalisés

Voici quelques questions que nos lecteurs ont fréquemment posées sur la création de blocs WordPress personnalisés :

Comment créer un bloc personnalisé dans WooCommerce ?

Vous pouvez créer des blocs personnalisés pour WooCommerce en utilisant des plugins comme WPCode ou Genesis Custom Blocks, tout comme vous le feriez pour une page standard. Comme WooCommerce utilise l'éditeur WordPress standard pour les descriptions de produits et les mises en page de boutique, tout bloc personnalisé que vous créez fonctionnera de manière transparente dans votre boutique en ligne.

ChatGPT peut-il créer un site WordPress ?

ChatGPT ne peut pas créer un site WordPress automatiquement, mais il peut générer le code et le contenu spécifiques dont vous avez besoin pour en créer un. Vous pouvez demander à ChatGPT d'écrire le HTML, le CSS et le PHP requis pour des blocs ou des thèmes personnalisés, que vous pouvez ensuite copier-coller sur votre site à l'aide d'outils comme WPCode.

Comment créer un plugin WordPress personnalisé ?

La façon la plus simple de créer des fonctionnalités de plugin personnalisées est d'utiliser un gestionnaire d'extraits de code comme WPCode, qui s'occupe de la configuration pour vous.

Alternativement, vous pouvez créer un dossier sur votre ordinateur contenant un fichier PHP avec un commentaire d'en-tête de plugin standard, zipper ce dossier et le télécharger via l'écran Plugins » Ajouter.

Comment ajouter un bloc HTML personnalisé dans WordPress ?

Vous pouvez ajouter du HTML personnalisé en utilisant le bloc natif « HTML personnalisé » trouvé dans la bibliothèque de blocs WordPress. Cliquez simplement sur le bouton (+) Ajouter un bloc, recherchez « HTML personnalisé », et collez votre code directement dans le bloc pour le rendre sur votre site web.

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.