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

Publié: 2022-05-03

Voulez-vous apprendre à utiliser les modèles de blocs WordPress sur votre site Web ?

Les modèles de blocs vous permettent d'ajouter rapidement des éléments de conception couramment utilisés à vos mises en page de publication ou de page.

Dans cet article, nous allons vous montrer comment utiliser les modèles de blocs WordPress et trouver d'autres modèles à utiliser sur votre site Web.

Using block patterns in WordPress

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
  • Trouver plus de modèles de blocs à utiliser sur votre site Web
  • Comment créer et partager vos propres modèles de blocs
  • Création manuelle de modèles de blocs WordPress
  • Supprimer un modèle de bloc dans WordPress
  • Quelle est la différence entre les blocs réutilisables et les modèles de blocs

Que sont les modèles de blocs WordPress ?

Les modèles de blocs WordPress sont une collection d'éléments de conception prédéfinis que vous pouvez utiliser pour créer plus rapidement des mises en page de contenu personnalisées.

WordPress est livré avec un éditeur intuitif communément appelé éditeur de blocs. Il permet aux utilisateurs de créer de belles mises en page pour leurs publications et leurs pages en utilisant des blocs pour les éléments de contenu communs.

WordPress block editor

Cependant, tous les utilisateurs de WordPress ne sont pas des concepteurs ou ne veulent pas passer du temps à créer des mises en page chaque fois qu'ils ont besoin de créer un article ou une page.

Les modèles de blocs fournissent une solution simple à ce problème. WordPress est désormais livré par défaut avec un tas de modèles de blocs utiles.

Block patterns in WordPress

Les thèmes WordPress populaires fournissent également leurs propres modèles que vous pouvez utiliser lors de la rédaction de contenu.

Ces modèles incluent des éléments tels que des mises en page multi-colonnes prédéfinies, des modèles de médias et de texte, des modèles d'appel à l'action, des en-têtes, des boutons, etc.

Vous pouvez trouver encore plus de modèles sur le site Web WordPress.org, et vous pouvez même créer et partager vos propres modèles.

Cela étant dit, voyons comment utiliser facilement les modèles de blocs dans WordPress pour créer un beau contenu pour votre site Web.

Comment utiliser les modèles de blocs dans WordPress

Par défaut, WordPress est livré avec un tas de 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 motifs.

Pour utiliser des modèles de bloc, vous devez modifier la publication ou la page WordPress où vous souhaitez utiliser le modèle de bloc.

Sur l'écran de post-édition, cliquez sur le bouton Ajouter un bloc pour ouvrir l'outil d'insertion de bloc. À partir de là, passez à l'onglet Patterns pour afficher les modèles de bloc disponibles.

Add block pattern

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

Vous pouvez également afficher les modèles de bloc dans différentes catégories telles que les vedettes, les boutons, les colonnes, l'en-tête, etc.

Sort block patterns by category

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

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

Block patterns preview

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

Edit block pattern

Après cela, vous pouvez simplement pointer et cliquer sur n'importe quel bloc à l'intérieur du motif pour éditer et modifier son contenu selon vos propres 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 modifier la couleur de la couverture ou l'image d'arrière-plan.

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

Remove cover block

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

En fin de compte, les modèles de blocs vous permettent de gagner du temps que vous passeriez autrement à organiser manuellement les blocs chaque fois que vous devez ajouter un en-tête, une galerie, des boutons, etc.

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 sous l'insertion de blocs sur votre site Web.

Rendez-vous simplement sur le site Web WordPress Patterns Directory pour afficher de nombreux autres modèles de blocs.

Block pattern directory

Vous trouverez ici de nombreux autres modèles de blocs soumis par la communauté WordPress.

Pour utiliser l'un de ces modèles de bloc, placez simplement votre souris sur le modèle de bloc et cliquez sur le bouton Copier.

Copy block pattern

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

Sur l'écran de post-édition, cliquez simplement avec le bouton droit de la souris et sélectionnez Coller dans le menu du navigateur ou appuyez sur CTRL + V (Commande + V sur Mac).

Paste block pattern

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

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

WordPress facilite la création de modèles de blocs et les utilise sur vos propres sites Web ou les partage avec tous les utilisateurs de WordPress à travers le monde.

Visitez simplement le site Web WordPress Pattern Directory et cliquez sur le lien « Créer un nouveau modèle ».

Create block pattern

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èle de bloc. Il est identique à l'éditeur de blocs WordPress par défaut et vous pouvez l'utiliser pour créer votre modèle.

Block pattern creator

Ajoutez simplement des blocs pour créer votre disposition de motif.

Vous pouvez utiliser des blocs de mise en page tels que groupe, couverture, galerie, etc. pour organiser votre mise en page.

Editing block pattern layout

Il existe également des images libres de droits disponibles à utiliser dans vos blocs médias. La médiathèque de WordPress vous permettra de trouver et d'utiliser facilement ces images dans vos motifs.

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

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

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

Your patterns

Si vous souhaitez uniquement créer des motifs de blocs pour votre propre usage, vous pouvez les enregistrer en tant que brouillons. Après cela, vous pouvez simplement les copier et les coller de 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 à votre plugin d'extraits personnalisés.

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.

Switch to the code editor

Après cela, passez en mode Éditeur de code et copiez tout le contenu que vous voyez dans l'éditeur de code.

Copy raw code blocks

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

Vous êtes maintenant 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 spécifique au site.

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' );

Copiez et collez maintenant les données de blocs bruts que vous avez copiées précédemment comme valeur pour le paramètre de contenu. 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 changer le titre et la description par les vôtres et d'enregistrer vos modifications.

Vous pouvez maintenant visiter votre site Web et modifier et publier ou page. Vous pourrez maintenant voir votre modèle de bloc nouvellement enregistré dans l'insertion de bloc.

Add custom block pattern to your post

Supprimer un modèle de bloc dans WordPress

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

Tout ce que vous avez à faire est de copier-coller le code suivant dans le fichier functions.php de votre thème ou dans un plugin spécifique au site.

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 pattern que nous avons utilisé lors de son enregistrement.

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

Supprimer les modèles de base de WordPress

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

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

Pour supprimer tous les modèles de base de WordPress, vous devez ajouter le code suivant au fichier de fonctions de votre thème ou à un plugin spécifique au site.

remove_theme_support( 'core-block-patterns' );

Quelle est la différence entre les blocs réutilisables et les motifs de blocs ?

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

Cependant, ils sont assez différents les uns des autres.

Par exemple, les blocs réutilisables peuvent être modifiés et enregistrés directement dans l'éditeur de publication, mais ils ne sont pas aussi flexibles que les modèles de blocs.

Une grande différence est que si vous modifiez un bloc réutilisable, cela modifie le bloc sur chaque publication ou page sur laquelle vous l'avez utilisé.

Reusable block in WordPress

Pour plus de détails, consultez notre tutoriel sur l'utilisation des blocs réutilisables dans WordPress.

D'autre part, si vous insérez un modèle et que vous le modifiez, ces modifications ne s'appliquent qu'à la publication ou à la page où vous avez ajouté ce modèle.

Les modèles de blocs peuvent également être enregistrés par votre thème WordPress ou des plugins tels que les plugins de blocs. Cela permet à ces développeurs de vous offrir beaucoup plus d'options de conception pour créer vos mises en page de publication et de page.

Nous espérons que ce guide vous a aidé à apprendre à utiliser les modèles de blocs WordPress sur votre site Web. Vous pouvez également consulter notre guide sur la façon de choisir le meilleur logiciel de conception Web, ou notre sélection d'experts des meilleurs services de marketing par e-mail pour les petites entreprises.

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.