Guide du débutant : Comment utiliser les modèles de blocs WordPress

La création de sites WordPress n'a jamais été aussi facile, et les modèles de blocs y contribuent grandement. Lorsque nous les avons découverts pour la première fois, nous avons vu leur potentiel pour accélérer notre flux de travail.

Nous utilisons maintenant des modèles de blocs comme des blocs réutilisables pour les CTA et les boutons d'offres de coupons — ils sont devenus essentiels à la façon dont nous créons du contenu.

Les modèles de blocs permettent d'obtenir facilement des designs d'aspect professionnel sans avoir besoin de compétences en codage ou en conception web.

Ce sont des combinaisons pré-construites de blocs que vous pouvez insérer et personnaliser rapidement, vous donnant une longueur d'avance au lieu de repartir de zéro à chaque fois.

Que vous construisiez votre premier site WordPress ou que vous souhaitiez travailler plus rapidement, ce guide pour débutants vous montrera comment trouver, utiliser et créer des modèles de blocs qui vous feront gagner du temps sur chaque projet.

Voici les sujets que nous aborderons dans ce guide :

• Que sont les modèles de blocs WordPress ?
• Comment utiliser les modèles de blocs dans WordPress
• Comment créer des modèles dans l'éditeur de blocs
• Comment créer des modèles dans l'éditeur de site
• Gestion des modèles dans WordPress
• Trouver plus de modèles de blocs à utiliser sur votre site web
• Comment créer et partager vos modèles de blocs
• Création manuelle de modèles de blocs WordPress
• Comment supprimer un modèle de bloc dans WordPress
• Qu'est-il arrivé aux blocs réutilisables ?
• Questions fréquemment posées
• Ressources supplémentaires

Que sont les modèles de blocs WordPress ?

Les modèles de blocs WordPress sont des collections de blocs pré-conçus qui vous aident à créer des mises en page personnalisées rapidement et efficacement. Ils ont changé la donne pour nous lors de la création de pages dans des délais serrés.

L'éditeur de blocs dans WordPress est intuitif et permet aux utilisateurs de concevoir de superbes mises en page avec des blocs de contenu. Ceux-ci incluent du texte, des images, des boutons et d'autres éléments que vous pouvez organiser selon vos besoins.

Cependant, tous les utilisateurs n'ont pas le temps ou les compétences en design nécessaires pour créer des mises en page à partir de zéro à chaque fois. Nous avons nous-mêmes été confrontés à ce défi, c'est pourquoi les modèles de blocs ont été un outil si précieux dans notre flux de travail.

Les modèles de blocs offrent une solution simple. WordPress inclut une variété de modèles pré-construits par défaut, ce qui permet d'ajouter facilement des mises en page d'aspect professionnel en quelques secondes.

Les thèmes WordPress populaires incluent souvent leurs propres modèles personnalisés. Ces modèles permettent de gagner encore plus de temps en vous offrant des conceptions prêtes à l'emploi adaptées à votre thème.

Les modèles peuvent inclure des mises en page telles que des conceptions multicolonnes, des combinaisons de médias et de texte, des sections d'appel à l'action, des en-têtes et des boutons personnalisés. Cette flexibilité les rend adaptés à une variété de types de contenu.

Vous pouvez également trouver d'autres modèles de blocs sur le site Web WordPress.org. Si vous aimez concevoir, vous pouvez même créer et partager vos propres modèles avec la communauté WordPress.

Ensuite, nous vous montrerons comment utiliser les modèles de blocs dans WordPress pour créer des mises en page époustouflantes pour votre site Web.

Comment utiliser les modèles de blocs dans WordPress

Par défaut, WordPress est livré avec plusieurs modèles de blocs utiles que vous pouvez utiliser sur votre site Web. Votre thème WordPress et certains plugins peuvent également ajouter leurs propres modèles.

Pour utiliser les modèles de blocs, vous devez modifier l'article ou la page WordPress où vous souhaitez utiliser le modèle de bloc.

Sur l'écran de modification de l'article, cliquez sur le bouton Ajouter un bloc [+] pour ouvrir l'outil d'insertion de blocs. À partir de là, passez à l'onglet « Modèles » pour afficher les modèles de blocs disponibles.

Vous pouvez faire défiler vers le bas pour voir les modèles de blocs disponibles.

Vous pouvez également afficher les modèles de blocs dans différentes catégories, telles que les mises en avant, les boutons, les colonnes, les en-têtes, et plus encore.

Alternativement, vous pouvez également cliquer sur le bouton « Explorer tous les modèles » pour afficher les modèles de blocs.

Ici, vous pouvez voir des aperçus plus grands dans une fenêtre contextuelle.

Une fois que vous avez trouvé un modèle que vous souhaitez essayer, cliquez simplement dessus pour l'insérer dans la zone de contenu de votre article ou de votre page.

Le modèle apparaîtra dans l'éditeur de contenu avec un contenu d'espace réservé que vous pouvez modifier et remplacer par le vôtre.

Pointez et cliquez simplement sur n'importe quel bloc à l'intérieur du modèle pour modifier et changer son contenu selon vos besoins.

Vous aurez toujours toutes les options que vous avez normalement pour chaque bloc. Par exemple, s'il s'agit d'un bloc de couverture, vous pouvez changer la couleur de la couverture ou l'image d'arrière-plan.

Vous pouvez ajouter autant de modèles que nécessaire pour votre article de blog ou votre page. Vous pouvez également supprimer un modèle pour le retirer d'un article ou d'une page, tout comme vous supprimeriez n'importe quel bloc WordPress.

En utilisant les modèles de blocs, vous pouvez rapidement créer de superbes mises en page pour vos articles et votre site WordPress.

En fin de compte, les modèles de blocs vous aident à gagner du temps que vous passeriez autrement à organiser manuellement les blocs chaque fois que vous avez besoin d'ajouter un en-tête, une galerie, des boutons, et plus encore.

Comment créer des modèles dans l'éditeur de blocs

WordPress rend très facile la création de modèles dans l'éditeur de blocs que vous pouvez réutiliser plus tard.

Lors de la modification d'un article ou d'une page, sélectionnez simplement les blocs que vous souhaitez inclure dans votre modèle et cliquez sur « Créer un modèle ».

Vous pouvez sélectionner plusieurs blocs en appuyant sur la touche Maj de votre clavier et en cliquant dessus.

Cependant, si vos blocs sont disposés d'une manière qui rend leur sélection plus difficile, vous pouvez utiliser la vue Liste sous l'onglet Aperçu du document.

La création d'un modèle fera apparaître une fenêtre contextuelle.

Vous devrez fournir un nom pour votre modèle et choisir une catégorie.

En dessous, vous verrez un interrupteur pour garder le modèle Synchronisé ou Désynchronisé.

Modèles synchronisés : Lorsque vous ou d'autres utilisateurs modifiez le modèle, ces modifications seront enregistrées la prochaine fois que ce modèle sera utilisé.

Modèles désynchronisés : Les modifications apportées à ces modèles après les avoir insérés dans un article ou une page n'affecteront pas le modèle d'origine.

Cliquez sur le bouton « Créer » pour enregistrer votre modèle.

La prochaine fois que vous voudrez utiliser ce modèle, il vous suffira de rechercher son nom ou sa catégorie dans l'insert de blocs.

Comment créer des modèles dans l'éditeur de site

Si vous utilisez un thème de blocs avec prise en charge de l'éditeur de site complet, vous pouvez également créer des modèles dans l'éditeur de site.

Ouvrez l'éditeur de site en visitant la page Apparence » Éditeur.

Vous accéderez maintenant à l'interface de l'éditeur de site.

Cliquez sur « Motifs » dans la barre latérale gauche pour continuer.

Vous verrez tous les motifs et catégories disponibles.

Pour créer un nouveau motif, cliquez sur le bouton Ajouter [+] puis sélectionnez « Créer un motif ».

Cela ouvrira une fenêtre contextuelle où vous devrez fournir un nom pour votre motif, choisir une catégorie et décider si vous souhaitez que le motif soit synchronisé ou non.

Cliquez sur « Créer » pour continuer.

WordPress créera une toile vierge pour que vous puissiez créer votre motif.

À partir de là, vous pouvez ajouter des blocs pour concevoir votre motif.

Une fois que vous avez terminé, n’oubliez pas de cliquer sur le bouton « Enregistrer » pour stocker votre motif.

Gestion des modèles dans WordPress

Si vous utilisez un thème de bloc avec la prise en charge de l'éditeur complet du site, vous pouvez gérer les motifs dans l'éditeur de site.

Ouvrez l'éditeur de site en visitant la page Apparence » Éditeur.

Sur l'écran Motifs, vous pouvez cliquer sur un motif pour le modifier. Vous pouvez également cliquer sur le menu à trois points à côté d'un motif pour le dupliquer, l'exporter ou le supprimer.

Pour gérer tous vos motifs, cliquez sur l'onglet « Gérer tous mes motifs » dans la barre latérale.

Cela vous montrera une liste de tous vos motifs. Vous pouvez maintenant les modifier, les exporter ou les supprimer.

Si vous utilisez un thème classique (thèmes WordPress qui ne prennent pas en charge l'éditeur complet du site), vous pouvez gérer les motifs en visitant la page Apparence » Motifs.

À partir de là, vous pouvez ajouter, supprimer et exporter vos motifs de blocs.

Gardez à l'esprit que même certains thèmes classiques comme Hestia gèrent désormais les motifs de manière similaire aux thèmes d'édition complète du site, tandis que d'autres utilisent toujours l'ancienne interface montrée dans la capture d'écran ci-dessous.

Ainsi, la façon dont vous gérez les motifs de blocs dépend vraiment du thème que vous utilisez.

Trouver plus de modèles de blocs à utiliser sur votre site web

Par défaut, WordPress est livré avec quelques modèles de blocs couramment utilisés. Les thèmes WordPress peuvent également ajouter leurs propres modèles à votre site web.

Cependant, vous pouvez trouver beaucoup plus de modèles de blocs que ceux disponibles dans l'outil d'insertion de blocs sur votre site web.

Rendez-vous simplement sur le site web Répertoire des modèles WordPress pour voir beaucoup plus de modèles de blocs.

Ici, vous trouverez des modèles de blocs soumis par la communauté WordPress.

Pour utiliser l'un de ces modèles de blocs, cliquez simplement pour afficher le modèle, puis cliquez sur le bouton « Copier le modèle ».

Ensuite, vous devez retourner sur votre blog WordPress et modifier l'article ou la page où vous souhaitez insérer ce modèle de bloc.

Sur l'écran d'édition, faites simplement un clic droit et sélectionnez « Coller » dans le menu du navigateur ou appuyez sur CTRL+V (Commande + V sur Mac).

Comment créer et partager vos modèles de blocs

Vous souhaitez créer vos propres modèles de blocs WordPress et les partager avec le monde entier ?

WordPress rend très facile la création de modèles de blocs et leur utilisation sur vos propres sites web ou leur partage avec tous les utilisateurs de WordPress à travers le monde.

Visitez simplement le site web du Répertoire des modèles WordPress et cliquez sur le lien « Nouveau modèle ».

Remarque : Vous devrez vous connecter ou créer un compte WordPress.org gratuit pour enregistrer vos modèles.

Une fois connecté, vous accéderez à la page de l'éditeur de modèles de blocs. Elle est identique à l'éditeur de blocs WordPress par défaut, et vous pouvez l'utiliser pour créer votre modèle.

Ajoutez simplement des blocs pour créer la mise en page de votre modèle.

Vous pouvez utiliser des blocs de mise en page comme groupe, couverture, galerie, et plus encore pour organiser votre mise en page.

Il existe également des images libres de droits disponibles pour être utilisées dans vos blocs de médias. La bibliothèque de médias WordPress vous permettra de trouver et d'utiliser facilement ces images dans vos modèles.

Une fois que vous êtes satisfait de votre modèle de bloc, vous pouvez l'enregistrer comme brouillon ou le soumettre au répertoire de modèles.

Avant de pouvoir soumettre votre modèle de bloc au répertoire de modèles, assurez-vous d'avoir lu les directives du répertoire de modèles.

Vous pouvez gérer tous vos modèles de blocs en cliquant sur le lien « Mes modèles ». Il affichera tous les modèles de blocs que vous avez partagés, les brouillons et les modèles que vous avez mis en favoris.

Si vous souhaitez uniquement créer des modèles de blocs pour votre propre usage, vous pouvez les enregistrer comme brouillons. Ensuite, copiez-les et collez-les depuis la page Mes modèles sur votre site Web WordPress.

Création manuelle de modèles de blocs WordPress

Vous pouvez également créer des modèles de blocs manuellement et les ajouter à votre thème WordPress ou à un plugin d'extraits de code personnalisé comme WPCode.

Créez simplement un nouvel article ou une nouvelle page dans WordPress. Dans la zone de contenu, utilisez des blocs pour créer une mise en page personnalisée ou une collection de blocs que vous souhaitez enregistrer en tant que modèle.

Ensuite, passez en mode Éditeur de code.

À partir de là, vous devez copier tout le contenu que vous voyez dans l'éditeur de code.

Ensuite, ouvrez un éditeur de texte brut comme le Bloc-notes et collez ce code. Vous en aurez besoin à l'étape suivante.

Maintenant, vous êtes prêt à enregistrer vos blocs en tant que modèle.

Pour ce faire, copiez et collez simplement le code suivant dans le fichier functions.php de votre thème ou dans un plugin d'extraits de code comme le plugin gratuit WPCode (recommandé).

Pour plus de détails, voici le guide complet pour ajouter du code personnalisé dans WordPress.

function wpb_my_block_patterns() {
    register_block_pattern(
        'my-plugin/my-awesome-pattern',
        array(
            'title'       => __( 'Two column magazine layout', 'my-theme'),
            'description' => _x( 'A simple magazine style two-column layout with large image and stylized text', 'my-theme' ),
            'categories'  => array( 'columns' ),
            'content'     => ' Your block content code goes here'
            )
    );
}
add_action( 'init', 'wpb_my_block_patterns' );

Maintenant, copiez et collez les données brutes du bloc que vous avez copiées précédemment comme valeur pour le paramètre content. En d'autres termes, vous devrez remplacer le texte qui dit « Votre code de contenu de bloc va ici » par votre code de bloc. Assurez-vous de laisser les guillemets simples entourant le texte en place.

Enfin, n'oubliez pas de modifier le titre et la description à votre convenance et d'enregistrer vos modifications.

Vous pouvez maintenant visiter votre site Web et modifier un article ou une page. Votre modèle de bloc nouvellement enregistré apparaîtra dans l'outil d'insertion de blocs.

Comment supprimer un modèle de bloc dans WordPress

Vous pouvez facilement supprimer ou désenregistrer n'importe quel modèle de bloc dans WordPress. Disons que vous souhaitez supprimer le modèle de bloc que vous avez créé dans l'exemple ci-dessus.

Tout ce que vous avez à faire est de copier et coller le code suivant dans le fichier functions.php de votre thème ou dans WPCode :

function wpb_unregister_my_patterns() {
  unregister_block_pattern( 'my-plugin/my-awesome-pattern' );
}
add_action( 'init', 'wpb_unregister_my_patterns' );

Dans cet exemple, 'my-plugin/my-awesome-pattern' est le nom du modèle que nous avons utilisé lors de son enregistrement.

Vous pouvez utiliser ce code pour désenregistrer tout modèle de bloc créé par votre thème ou un plugin. Tout ce que vous avez à savoir est le nom utilisé pour enregistrer le modèle.

Supprimer les modèles WordPress de base

Les modèles WordPress de base sont disponibles pour tous les utilisateurs de WordPress. Cela signifie qu'ils peuvent être surutilisés et ne pas correspondre au reste de votre thème WordPress.

Si vous ne souhaitez pas utiliser un modèle, vous pouvez simplement éviter de l'ajouter à votre contenu. Cependant, si vous gérez un site WordPress multi-auteurs, vous voudrez peut-être empêcher tous les utilisateurs d'utiliser ces modèles de base.

Pour supprimer tous les modèles WordPress de base, vous devez ajouter le code suivant au fichier functions de votre thème ou à WPCode :

remove_theme_support( 'core-block-patterns' );

Qu'est-il arrivé aux blocs réutilisables ?

Les modèles de blocs et les blocs réutilisables visaient tous deux à résoudre un problème similaire : offrir aux utilisateurs des options pour ajouter facilement des blocs couramment utilisés.

Pour résoudre ce problème, l'équipe de Core WordPress a fusionné les blocs réutilisables dans les modèles.

Pour avoir la même fonctionnalité que les blocs réutilisables, vous pouvez maintenant utiliser les Modèles Synchronisés. Lorsque vous ou d'autres utilisateurs modifiez le modèle, ces modifications seront enregistrées la prochaine fois que ce modèle sera utilisé.

Questions fréquemment posées

Voici quelques questions fréquemment posées par nos lecteurs sur les modèles de blocs.

Où puis-je trouver des modèles de blocs supplémentaires ?

Outre les modèles par défaut de WordPress, vous pouvez explorer le Répertoire des modèles WordPress en ligne pour encore plus d'options créées par la communauté.

Les modèles de blocs peuvent-ils ralentir mon site web ?

Non, les modèles de blocs eux-mêmes n'ont pas d'impact sur la vitesse de votre site. Ils sont un moyen de structurer le contenu, mais assurez-vous d'utiliser des images et des blocs optimisés pour de meilleures performances.

Pour des conseils, consultez notre guide ultime sur la vitesse et les performances de WordPress.

Ressources supplémentaires

Si vous souhaitez personnaliser le design de votre site WordPress, les ressources suivantes vous seront utiles :

• Comment créer facilement un thème WordPress personnalisé (sans code)
• Comment refondre un site WordPress (Guide pour débutants)
• Problèmes courants de l'éditeur de blocs WordPress et comment les résoudre
• Comment styliser le formulaire de commentaires WordPress (Guide ultime)
• Comment personnaliser la couleur d'arrière-plan de l'éditeur de blocs WordPress

Nous espérons que ce guide vous a aidé à apprendre comment utiliser les modèles de blocs WordPress sur votre site web. Vous voudrez peut-être aussi consulter notre guide sur la maîtrise de l'éditeur de blocs WordPress ou jeter un œil à ces raccourcis WordPress pratiques pour être plus productif.

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.