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

La Version des sites WordPress n’a jamais été aussi facile, et les compositions de blocs y sont pour beaucoup. 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 désormais des compositions de blocs comme les blocs réutilisables pour les CTA et les boutons d’offre de coupon – ils sont devenus essentiels à la façon dont nous créons du contenu.

Les compositions de blocs permettent d’obtenir facilement des conceptions d’aspect professionnel sans avoir besoin de compétences en matière de codage ou de conception web.

Il s’agit de combinaisons prédéfinies de blocs que vous pouvez insérer et personnaliser rapidement, ce qui vous donne une longueur d’avance au lieu de partir 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 affichera comment trouver, utiliser et créer des compositions de blocs qui vous feront gagner du temps sur chaque projet.

Voici les sujets que nous aborderons dans ce guide :

Qu’est-ce qu’un modèle de bloc WordPress ?

Lesmodè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 lorsque nous construisons des pages dans des délais serrés.

L’éditeur de blocs de WordPress est intuitif et permet aux utilisateurs de concevoir de belles mises en page avec des blocs de contenu. Ces derniers comprennent du texte, des images, des boutons et d’autres éléments que vous pouvez agencer en fonction de vos besoins.

Cependant, tous les utilisateurs n’ont pas le temps ou les compétences 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, et c’est pourquoi les modèles de blocs se sont révélés être un outil si précieux dans notre flux de travail.

Les modèles de blocs offrent une solution facile. WordPress inclut par défaut une variété de modèles prédéfinis, ce qui simplifie l’ajout de mises en page de qualité professionnelle en quelques secondes.

Les thèmes WordPress populaires incluent souvent leurs propres modèles personnalisés. Ces modèles permettent d’enregistrer encore plus de temps en vous donnant des designs prêts à l’emploi adaptés à votre thème.

Les modèles peuvent inclure des mises en page telles que des conceptions multi-colonnes, des combinaisons de médias et de textes, des sections d’appel à l’action, des en-têtes et des boutons personnalisés. Cette flexibilité leur permet de s’adapter à une grande variété de types de contenu.

Vous pouvez également trouver d’autres modèles de blocs sur le site WordPress.org. Si vous aimez dessiner, 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 étonnantes pour votre site.

Comment utiliser les compositions de blocs dans WordPress

Par défaut, WordPress est livré avec plusieurs compositions de blocs utiles que vous pouvez utiliser sur votre site. Votre thème WordPress et certaines extensions peuvent également ajouter leurs compositions.

Pour utiliser les compositions de blocs, vous devez modifier l’article ou la page WordPress où vous souhaitez utiliser la composition de blocs.

Dans l’écran de publication, 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 défiler vers le bas pour voir les compositions de blocs disponibles.

Vous pouvez également voir les compositions de blocs dans différentes catégories, telles que les fonctionnalités, les boutons, les colonnes, les en-têtes, etc.

Vous pouvez également cliquer sur le bouton “Explorer tous les motifs” pour visualiser les motifs en bloc.

Consultez cette page pour obtenir des fenêtres surgissantes plus grandes.

Une fois que vous avez trouvé une composition que vous souhaitez essayer, il vous suffit de cliquer pour l’insérer dans la zone de contenu de votre publication ou de votre page.

La composition apparaîtra dans l’éditeur de contenu avec un contenu fictif que vous pouvez modifier et remplacer par le vôtre.

Il suffit de pointer et de cliquer sur n’importe quel bloc à l’intérieur du modèle pour en modifier les compositions selon vos besoins.

Vous disposerez toujours de toutes les options habituelles 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 de fond.

Vous pouvez ajouter autant de compositions que nécessaire pour votre publication ou page de blog. Vous pouvez également supprimer une composition pour la retirer d’une publication ou d’une page, comme vous le feriez pour n’importe quel bloc WordPress.

Grâce aux compositions de blocs, vous pouvez rapidement réaliser de magnifiques mises en page pour vos articles et votre site WordPress.

En fin de compte, les compositions de blocs vous aident à gagner le temps que vous passeriez autrement à arranger manuellement les blocs chaque fois que vous devez ajouter un en-tête, une galerie, des boutons, etc.

Comment créer des compositions dans l’Éditeur/éditrices de blocs ?

WordPress rend super facile la création de compositions dans l’éditeur/éditrices de blocs que vous pouvez réutiliser ultérieurement.

Lorsque vous modifiez une publication ou une page, il vous suffit de sélectionner les blocs que vous souhaitez inclure dans votre motif et de cliquer sur “Créer un motif”.

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

Toutefois, si vos blocs sont disposés de telle sorte qu’il est difficile de les sélectionner, vous pouvez utiliser la vue Liste sous l’onglet Vue d’ensemble du document.

La création d’une composition fait apparaître une fenêtre surgissante.

Vous devrez donner un nom à votre composition et choisir une catégorie.

En dessous, vous verrez un commutateur permettant de garder la composition synchronisée ou non.

Compositions synchronisées : Lorsque vous ou d’autres utilisateurs modifiez la composition, ces modifications sont enregistrées lors de la prochaine utilisation de cette composition.

Motifs non synchronisés : Les modifications apportées à ces modèles après leur insertion dans une publication ou une page n’affecteront pas le modèle original.

Cliquez sur le bouton “Créer” pour enregistrer votre modèle.

La prochaine fois que vous voudrez utiliser cette composition, il vous suffira de rechercher son nom ou sa catégorie dans l’inserteur de blocs.

Comment créer des compositions dans l’éditeur de site ?

Si vous utilisez un thème de blocs avec un support complet de l’éditeur/éditrice de site, vous pouvez également créer des compositions dans l’éditeur de site.

Ouvrez l’éditeur de site en vous rendant sur la page Apparence ” Éditeur.

Vous arrivez dans l’interface de l’éditeur/éditrices du site.

Cliquez sur “Modèles” dans la barre latérale gauche pour continuer.

Vous verrez tous les modèles et toutes les catégories disponibles.

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

Une fenêtre surgissante apparaît dans laquelle vous devez donner un nom à votre composition, choisir une catégorie et décider si vous souhaitez que la composition soit synchronisée ou non.

Cliquez sur “Créer” pour continuer.

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

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

Une fois que vous avez terminé, n’oubliez pas de cliquer sur le bouton “Enregistrer” pour stocker votre modèle.

Gestion des compositions dans WordPress

Si vous utilisez un thème de blocs avec un support complet de l’éditeur de site, vous pouvez gérer les compositions dans l’éditeur de site.

Ouvrez l’éditeur de site en vous rendant sur la page Apparence ” Éditeur.

Dans l’écran des compositions, vous pouvez cliquer sur une composition pour la modifier. Vous pouvez également cliquer sur le menu à trois points situé à côté d’une composition pour la dupliquer, l’exporter ou la supprimer.

Pour gérer tous vos patrons, cliquez sur l’onglet “Gérer tous mes patrons” dans la barre latérale.

Vous affichez ainsi une liste de toutes vos compositions. 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 de site complet), vous pouvez gérer les motifs en visitant la page Apparence ” Motifs.

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

Gardez à l’esprit que même certains thèmes classiques comme Hestia gèrent désormais les compositions de manière similaire aux thèmes d’édition de site, tandis que d’autres utilisent encore l’ancienne interface affichée dans la capture d’écran ci-dessous.

La gestion des compositions de blocs dépend donc du thème sur lequel vous travaillez.

Trouver d’autres compositions de blocs à utiliser sur votre site

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

Cependant, vous pouvez trouver sur votre site beaucoup plus de compositions de blocs que celles proposées par l’outil d’insertion de blocs.

Il suffit de se rendre sur le site du répertoire des compositions de blocs WordPress pour voir de nombreuses autres compositions.

Vous y trouverez des modèles de blocs soumis par la communauté WordPress.

Pour utiliser l’un de ces motifs de bloc, il suffit de cliquer sur le motif pour l’afficher, puis de cliquer sur le bouton “Copier le motif”.

Ensuite, vous devez retourner sur votre blog WordPress et modifier la publication ou la page où vous souhaitez insérer cette composition de blocs.

Dans l’écran d’édition, il suffit de cliquer avec le bouton droit de la souris et de sélectionner “Coller” dans le menu du navigateur ou d’appuyer sur CTRL+V (Commande + V sur Mac).

Comment créer et partager vos compositions de blocs ?

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

WordPress permet de créer très facilement des compositions de blocs et de les utiliser sur vos propres sites ou de les partager avec tous les utilisateurs/utilisatrices de WordPress à travers le monde.

Il suffit de se rendre sur le site de l’annuaire des modèles WordPress et de cliquer sur le lien “Nouveau modèle”.

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

Il suffit d’ajouter des blocs pour créer votre composition.

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

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

Lorsque vous êtes satisfait de votre composition, vous pouvez l’enregistrer en tant que brouillon ou l’envoyer au répertoire de modèles.

Avant d’envoyer votre composition de blocs au répertoire des compositions, assurez-vous d’avoir lu les directives du répertoire des compositions.

Vous pouvez gérer tous vos modèles de blocs en cliquant sur le lien “Mes modèles”. Vous y trouverez tous les patrons de blocs que vous avez partagés, les projets de patrons et les patrons que vous avez mis en favori.

Si vous souhaitez uniquement créer des compositions de blocs pour votre propre usage, vous pouvez alors les enregistrer en tant que brouillons. Ensuite, copiez et collez-les de la page Mes compositions sur votre site WordPress.

Créer manuellement des compositions de blocs WordPress

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

Il suffit de créer une nouvelle publication ou 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 composition.

Ensuite, passez en mode éditeurs/éditrices de code.

À partir de cette page, vous devez copier tout le contenu que vous voyez dans l’éditeur/éditrices de code.

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

Vous êtes maintenant prêt à inscrire vos compositions de blocs en tant que composition.

Pour ce faire, il suffit de copier et de coller le code suivant dans le fichier functions.php de votre thème ou dans une extension d’extraits de code comme l’extension gratuite WPCode (recommandée).

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 du paramètre de contenu. En d’autres termes, vous devez remplacer le texte “Votre code de contenu de bloc va ici” par votre code de bloc. Veillez à laisser les guillemets simples entourant le texte en place.

Enfin, n’oubliez pas de remplacer le titre et la description par les vôtres et d’enregistrer vos modifications.

Vous pouvez maintenant visiter votre site et modifier une publication ou une page. Votre composition de blocs nouvellement inscrite apparaîtra dans l’outil d’insertion de blocs.

Comment Retirer une Composition de Blocs dans WordPress

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

Il vous suffit de copier et de 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 de la composition que nous avons utilisée pour l’inscrire.

Vous pouvez utiliser ce code pour annuler l’enregistrement de n’importe quelle composition de blocs créée par votre thème ou une extension. Tout ce dont vous avez besoin est le nom utilisé pour inscrire la composition.

Retirer les compositions du cœur de WordPress

Les compositions du cœur de WordPress sont disponibles pour tous les utilisateurs/utilisatrices 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 avec plusieurs auteurs, vous voudrez 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 au WPCode :

remove_theme_support( 'core-block-patterns' );

Qu’est-il advenu des blocs réutilisables ?

Les compositions de blocs et les blocs réutilisables visent tous deux à résoudre un problème similaire : offrir aux utilisateurs/utilisatrices des options leur permettant d’ajouter facilement des blocs couramment utilisés.

Pour corriger cela, l’équipe du cœur de WordPress a fusionné les blocs réutilisables en compositions.

Pour bénéficier de la même fonctionnalité que les blocs réutilisables, vous pouvez désormais utiliser des compositions de blocs synchronisées. Lorsque vous ou d’autres utilisateurs modifiez la composition, ces modifications sont enregistrées lors de la prochaine utilisation de cette composition.

Questions fréquemment posées

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

Où puis-je trouver d’autres compositions de blocs ?

Outre les compositions par défaut de WordPress, vous pouvez explorer le répertoire des compositions de WordPress en ligne pour trouver encore plus d’options créées par la communauté.

Les compositions de blocs peuvent-elles ralentir mon site ?

Aucun, les compositions de blocs en elles-mêmes n’ont pas d’impact sur la vitesse de votre site. Ils constituent un moyen de structurer le contenu, mais veillez à utiliser des images et des blocs optimisés pour obtenir les meilleures performances.

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

Ressources complé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 aucun code)
• Comment redessiner un site WordPress (Guide du débutant)
• Problèmes courants de l’éditeur de blocs de WordPress et comment les résoudre
• Comment styliser le formulaire de commentaire de WordPress (Guide ultime)
• Comment personnaliser la couleur d’arrière-plan de l’Éditeur de blocs de WordPress

Nous espérons que ce guide vous a aidé à apprendre à utiliser les compositions de blocs WordPress sur votre site. Vous pouvez également consulter notre guide sur la maîtrise de l’éditeur de blocs WordPress ou jeter un coup d’œil à ces raccourcis WordPress pratiques pour être plus productif.

Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.