Ce que vous devez savoir sur le répertoire de modèles WordPress

Publié: 2021-08-26

À la fin de l'année dernière, j'ai écrit un guide complet sur ce qu'étaient les modèles WordPress, à quoi ils servaient et comment les créer et les utiliser dans l'éditeur de blocs WordPress. En un peu plus de six mois, grâce au travail de toute la communauté WordPress, de grandes avancées ont été réalisées dans le développement des modèles de blocs. Nous voyons comment après la publication de la version WordPress 5.8, sa disponibilité et son utilisation augmentent rapidement. Pour cette raison, je pense qu'il est intéressant d'être à jour sur le répertoire de modèles WordPress, car cela affectera la façon dont nous reconcevons nos pages et nos thèmes à l'avenir.

Comme nous l'avions déjà commenté précédemment, un modèle de bloc est un ensemble de sections ou de fragments prédéfinis constitués d'un groupe de blocs que vous pouvez utiliser pour créer des pages et des publications. Ces conceptions peuvent être quelque chose d'aussi simple qu'une section montrant deux boutons ou une section de prix avec des conceptions flashy et complexes.

Insérer et modifier des motifs de bloc

L'insertion d'un motif de bloc à partir de l'éditeur de blocs est aussi simple que l'ajout de n'importe quel bloc. Après avoir cliqué sur l'icône + dans le coin supérieur gauche de l'éditeur, une boîte de dialogue contextuelle apparaît avec laquelle vous pouvez ajouter des blocs, des motifs ou d'autres éléments réutilisables.

Insertion d'un motif de bloc dans l'éditeur WordPress
Recherchez un modèle de bloc dans l'éditeur WordPress.

Dans l' onglet Motifs , vous trouverez une liste déroulante dans laquelle vous pouvez sélectionner par catégorie les motifs à rechercher. Certains des modèles que vous trouverez sont fournis par défaut avec WordPress, d'autres sont spécifiques au thème que vous avez installé et certains proviendront de vos plugins. En fait, il y a beaucoup de plugins qui ajouteront un tout nouvel ensemble de beaux motifs !

Une fois que vous avez sélectionné un modèle, l'ensemble de blocs qui le composent est automatiquement ajouté à votre message ou à votre page. Tout ce que vous avez à faire maintenant est de le modifier pour qu'ils contiennent le contenu que vous souhaitez.

Modification d'un des blocs qui forment un motif
Modification de l'un des blocs qui forment un motif.

Copier et coller à partir du répertoire de modèles WordPress

Fin avril 2021, WordPress a publié le Pattern Directory sur WordPress.org. Au moment de la rédaction de cet article, là (23 août 2021), il n'y a pas d'élément de menu dans WordPress.org pour accéder directement à cette page. Du moins, il n'y en a pas en anglais, car il y en a un en espagnol.

Répertoire de modèles sur WordPress.org
Répertoire de modèles sur WordPress.org

Bien qu'à première vue, ce répertoire puisse sembler être le même que le répertoire du thème ou du plugin, il a la fonctionnalité d'ajouter très facilement n'importe quel motif à n'importe quel article ou page.

La recherche de modèles de blocs dans le répertoire de modèles WordPress.org est très similaire à ce que vous avez disponible sur votre tableau de bord WordPress. Vous pouvez effectuer une recherche par mot-clé ou vous disposez également d'un ensemble de catégories pour affiner votre recherche. De plus, si vous êtes connecté à WordPress.org, vous pouvez marquer n'importe quel modèle.

Lorsque vous double-cliquez sur le motif, il l'affiche en détail et vous pouvez choisir entre différentes dimensions d'écran pour voir à quoi il ressemble dans chacune d'elles.

Modèle de répertoire de cartes sociales de l'équipe WordPress
Modèle de répertoire WordPress : cartes sociales d'équipe

Comme vous pouvez le voir dans l'image ci-dessus, vous avez un bouton avec lequel vous pouvez copier le motif et après avoir collé sur n'importe quelle page ou publication, vous avez déjà l'ensemble des blocs afin que vous puissiez ensuite apporter les modifications nécessaires pour les adapter à votre site web comme vous le souhaitez :

En remplaçant les photos, les textes et les liens, vous construisez rapidement une section de blocs qui correspond parfaitement à ce dont vous avez besoin sur une page.

Facile, non ?

Ajouter des modèles au répertoire de modèles WordPress

Bien que des travaux soient encore en cours sur ce à quoi devrait ressembler l'environnement final de création et de soumission de modèles au répertoire de modèles WordPress, l'appel est maintenant ouvert pour que vous téléchargiez vos propres modèles à publier dans le répertoire. Voyons comment nous procédons avec un exemple simple.

Vous devez d'abord créer votre propre modèle. Vous pouvez le créer directement dans l'éditeur de blocs, comme cela peut être le cas avec le modèle de témoignage que je viens de créer ci-dessous à partir de celui que nous avons sur notre page d'accueil. N'oubliez pas que si vous incluez des images, elles doivent avoir une licence gratuite pour un usage commercial.

Qu'est-ce que nos clients disent de nous

Nos clients nous aiment parce que…

Image d'un profil de femme

️️️️️
WOW ça marche vraiment
De loin, ce plugin est le meilleur outil que nous ayons utilisé. Tous nos clients sont ravis de travailler avec ce plugin. Interface utilisateur facile à utiliser et agréable.

Nom Prénom – Fonction

Image d'un profil de femme

️️️️️
WOW ça marche vraiment
De loin, ce plugin est le meilleur outil que nous ayons utilisé. Tous nos clients sont ravis de travailler avec ce plugin. Interface utilisateur facile à utiliser et agréable.

Nom Prénom – Fonction

Image d'un profil de femme

️️️️️
WOW ça marche vraiment
De loin, ce plugin est le meilleur outil que nous ayons utilisé. Tous nos clients sont ravis de travailler avec ce plugin. Interface utilisateur facile à utiliser et agréable.

Nom Prénom – Fonction

Ensuite, vous devez avoir un compte Github et remplissez un formulaire prédéfini dans lequel vous devez inclure :

  • une description du motif,
  • un titre,
  • une catégorie de celles disponibles dans l'annuaire,
  • une capture d'écran du motif,
  • crédits d'image que vous avez inclus, et
  • le balisage de bloc. Pour cela, il vous suffit de positionner la souris dans le groupe qui forme le motif, de cliquer sur le bouton avec l'icône des trois points, et de cliquer sur Copier (afin de pouvoir le coller dans Github).
Envoi d'un nouveau modèle au répertoire de modèles WordPress
Modification de la soumission d'un nouveau modèle au répertoire de modèles WordPress.

Et c'est tout. Vous pouvez aller dans l'onglet Aperçu pour voir comment cela s'est passé et enfin cliquer sur le bouton Soumettre un nouveau problème .

Vue de modèle envoyée au répertoire de modèles WordPress
Vue du modèle envoyé au répertoire de modèles WordPress.

Maintenant, il ne vous reste plus qu'à attendre que quelqu'un l'examine pour qu'il soit disponible dans le répertoire des modèles de WordPress.

Annuaire Actualités

Comme je l'ai mentionné précédemment, le processus de soumission des modèles est toujours en cours de développement. Des travaux sont en cours pour que vous n'ayez pas besoin de soumettre depuis GitHub et que vous n'ayez qu'à être connecté à WordPress.org.

L'idée en cours d'élaboration est qu'à partir de https://wordpress.org/patterns/new-pattern/ (actuellement la page est vide), vous verrez une page similaire à l'image suivante dans laquelle, une fois connecté à WordPress.org, vous aurez un bouton Créer un motif.

Proposition d'une nouvelle page de création de patrons
Maquette pour une nouvelle page de création de pattern (source : Block Pattern Directory).

Pour créer un modèle, vous pourrez utiliser une instance hébergée WordPress de l'éditeur de blocs. Cet éditeur fonctionnera (pour la plupart) comme l'éditeur de blocs normal, mais avec quelques ajustements. Le premier changement est que vous aurez une version personnalisée de la fenêtre contextuelle de bienvenue de l'éditeur axée sur la création et la soumission de modèles.

Maquette contextuelle de bienvenue de l'éditeur de motifs
Maquette contextuelle de bienvenue de l'éditeur de modèles (source : WordPress.org Pattern Directory.

D'autre part, la barre latérale d'édition d'un modèle comprendra également des informations à son sujet, telles que le titre, la description et les catégories.

Maquette de la barre latérale de l'éditeur de motifs
Maquette de la barre latérale de l'éditeur de modèles (source : WordPress.org Pattern Directory).

Enfin, vous aurez la possibilité de soumettre le modèle à réviser et de le partager avec le reste du monde.

Maquette de soumission d'un patron pour révision et publication dans le répertoire des patrons
Maquette d'une soumission de modèle pour examen et publication dans le répertoire des modèles (source : WordPress.org Pattern Directory).

Résumé

Les modèles de blocs WordPress finiront probablement par être les éléments les plus utilisés pour la conception de pages et de publications. Ils sont suffisamment utiles pour ajouter des sections parfaitement logiques en tant qu'unité et qui vous permettent de créer des pages beaucoup plus rapidement que si vous deviez ajouter chacun des blocs qui composent cette section un par un. Et la recherche de modèles dans le répertoire deviendra standardisée de la même manière que celle des plugins et des thèmes.

Personnellement, quand je regarde maintenant les patrons disponibles dans l'annuaire, j'ai encore du mal à trouver ceux que j'utiliserais directement sur mon site. Mais je sais que cela va changer en quelques jours. Lorsque de grands designers commenceront à ajouter leurs propositions, nous aurons une énorme explosion de designs à portée de main qui nous permettra de mettre à jour nos pages beaucoup plus rapidement.

Photo de Nick Morrison sur Unsplash.