Comment créer des modèles de blocs WordPress pour accélérer la création de sites Web

Les modèles de blocs vont être un gros problème pour tous les utilisateurs de WordPress et dans cet article, je vais vous montrer exactement comment créer vos propres modèles de blocs.

 add_action( 'init', function() { register_pattern( 'NAME', [ 'title' => __( 'TITLE' ), 'content' => 'PATTERN' ] ); } );

Il y a deux jours, j'ai sorti une vidéo et j'ai présenté ce concept qui arrive à grands pas sur WordPress appelé blog patterns. C'est un peu expérimental en ce moment, et c'est quelque chose qui m'excite vraiment. Et je pense que si vous réfléchissez au potentiel de ce que sont les modèles de blocs, alors vous pouvez en voir le potentiel, pour vous aider à livrer des sites Web plus rapidement si vous avez des clients, pour pouvoir leur permettre de faire plus avec leur site Internet.

Alors je vais vous montrer. Exactement comment créer un motif de bloc dans cette vidéo. Maintenant, nous allons faire des choses un peu plus techniques, et je sais que c'est le canal WordPress pour les non-techniciens, donc je vais essayer de le rendre aussi simple que possible, mais vous êtes va voir à la fin à quel point il est simple de créer l'un de ces modèles de blocs.

Alors allons-y et jetons-y un coup d'œil. Voici donc la page où il est question de la nouvelle version de cette fonctionnalité en la faisant. Capable pour les gens moyens de créer un motif de bloc. Ainsi, lorsque je fais défiler vers le bas, cela donne le type de modèle pour cela. Donc, tout ce qui est impliqué est de créer quelque chose appelé une fonction personnalisée.

Mais ne vous inquiétez pas, je vais le rendre super facile pour tout le monde, mais c'est là que se trouve ce petit extrait de code. Maintenant, j'aurai un lien dans la description de la vidéo ci-dessous. Cela vous mènera à mon site Web. Vous recevrez également des instructions écrites sur la façon de procéder. Ce petit extrait de code que vous pouvez copier et coller sur votre propre site Web.

Bon, voici ce dont nous allons avoir besoin. Il s'agit d'une nouvelle fonctionnalité de Gutenberg et vous aurez besoin du plugin Gutenberg installé et activé, vous aurez donc besoin d'une version minimale de 7.8 et c'est ce qui est récemment sorti. Maintenant, ce qui finira par arriver, c'est peut-être dans quatre à six mois, peut-être d'ici la fin de l'été 2020, cela sera inclus dans WordPress par défaut, mais pour l'instant, vous en aurez besoin, si vous voulez essayer ceci , vous devrez installer le plugin Gutenberg.

La prochaine chose que vous pouvez faire, et c'est facultatif, si vous ne savez pas comment ajouter une fonction personnalisée à un thème enfant, et que je n'utilise même plus de thème enfant, vous voudrez peut-être utiliser ce plugin gratuit, et c'est l'un des meilleurs plugins gratuits. Que j'ai jamais rencontré, et ça s'appelle des extraits de code. Et cela va nous permettre d'ajouter cette fonction personnalisée et une manière très facile à utiliser, facile à gérer.

D'accord? Vous allez donc en avoir besoin. Et ceci est facultatif. Il s'agit d'un plugin gratuit appelé blocs de cadence. Et ce que cela fait, c'est qu'il ajoute beaucoup de fonctionnalités de création de pages à Gutenberg. Il est assez soigné dans ce qu'il vous permet de faire. Vous pouvez faire glisser et redimensionner les colonnes. Il y a beaucoup d'éléments qui ajoutent beaucoup de fonctionnalités à ce constructeur de pages, mais à Gutenberg, et c'est un plugin entièrement gratuit.

D'accord. Passons maintenant à mon site Web. Voici donc un site internet. Tout est mis en place en ce moment. Et si vous ne savez pas comment installer un plugin, quelqu'un s'est vraiment fâché contre moi l'autre jour pour ne pas avoir montré comment installer un plugin et une vidéo. Vous allez dans les plugins, vous cliquez sur ajouter un nouveau, puis ici, vous effectuez une recherche sur le nom de ce plugin, puis vous cliquez.

Téléchargez, ou je suis désolé, vous cliquez sur installer maintenant, puis vous l'activez. C'est un processus très simple. Je vais donc cliquer sur mes plugins installés, et vous pouvez voir que j'ai installé Gutenberg et qu'il s'agissait de blocs de cadence facultatifs, et voici des extraits de code. Je vais donc continuer et activer les extraits de code et vous pouvez voir qu'il est maintenant activé ici.

Alors allez-y et cliquez sur les extraits de code et vous en verrez quelques-uns avec. Et voici cet interrupteur à bascule et il est basculé. Ils sont tous désactivés et vous n'avez en fait pas besoin de conserver ceux qui sont fournis par défaut. Vous pouvez simplement cliquer ici et vous pouvez tous les supprimer, mais je suis déjà allé de l'avant et en ai ajouté un ici appelé modèle de modèle de bloc.

Alors que feriez-vous. Cliquez sur ajouter nouveau, et vous pouvez nommer ce modèle de modèle de bloc dans ce petit extrait de code que je vous ai montré ici, mais je vais vous en donner une version modifiée sur mon site Web. Vous allez simplement copier et coller cela ici, puis vous cliquerez sur enregistrer les modifications.

Vous n'allez pas cliquer sur enregistrer et activer, vous allez cliquer sur pour enregistrer les modifications, et je vais vous montrer pourquoi dans un instant. D'accord. Alors maintenant, ce que vous allez vouloir faire, c'est créer ce motif de bloc. Et un motif de bloc n'est qu'une section enregistrée. Donc, si vous utilisez un constructeur de pages, vous savez maintenant que vous pouvez enregistrer des sections et certaines d'entre elles sont livrées avec des sections prédéfinies, mais l'expérience utilisateur, je pense, est bien meilleure dans Gutenberg.

Donc, ce que vous allez vouloir faire, c'est aller sur des pages. Et cliquez sur ajouter nouveau, et vous voudrez le nommer. Euh, en fait, laissez-moi me débarrasser de cette tournée. Vous allez vouloir nommer ce modèle de bloc, et c'est exactement là que nous allons créer ce modèle de bloc. Maintenant, je ne vais pas passer par la création d'un motif de bloc pour le moment.

Je vais vous montrer celui que j'ai déjà créé, et c'est . Ici. Voici donc un modèle de bloc que j'ai créé. Vous pouvez voir que c'est cette section. Il a ce fond coloré. J'ai un titre, quelques sous-titres et quelques boutons ici, et j'y ai mis une vidéo. Je vais donc en faire mon modèle de bloc afin que je puisse juste en deux clics de souris, l'ajouter n'importe où sur mon site Web.

Donc, ce que je vais faire, c'est cliquer en haut à droite, il y a ces trois points. Ils sont un peu difficiles à voir, et lorsque vous cliquez dessus, il y a cette option ici qui dit éditeur de code. Vous allez donc vouloir cliquer sur l'éditeur de code, puis il vous montrera tout le code impliqué dans la transformation de ce blog en modèle de blog en bloc.

D'accord? Donc, vous allez cliquer ici, puis vous allez cliquer sur control a ou command a sur votre ordinateur pour tout mettre en évidence. Et c'est le nouvel an. Mettez-le dans votre presse-papiers. Donc je vais le faire contrôler C. alors maintenant c'est dans mon presse-papiers. Alors maintenant, ce que je vais faire, c'est que je vais sortir d'ici. En fait, si vous voulez sortir de cette vue, il y a un petit X ici qui dit quitter l'éditeur de code, et maintenant ça va me le montrer comme c'est normalement ici.

D'accord. Vous pouvez donc l'enregistrer en tant que brouillon si vous le souhaitez, mais vous n'en aurez pas besoin. C'est juste pour vous de créer ce modèle de bloc, et vous pouvez créer un modèle de bloc qui est n'importe quoi, et il n'est pas nécessaire qu'il s'agisse d'un bloc de choses. Il peut s'agir d'un modèle complet pour un article de blog, par exemple. Bon, alors maintenant je vais cliquer là où il y a le w, ça me fait sortir de l'éditeur de blocs.

Maintenant, je vais revenir aux extraits de code. C'est donc ici que j'ai créé ce modèle de modèle de bloc. Je vais cliquer sur cloner, et maintenant il en a créé un clone, et je vais ensuite cliquer sur le titre pour commencer à le modifier. Donc, pour le titre, je vais changer cela en un titre qui a du sens pour le gérer.

Donc pour moi, je vais juste le nommer. Un héros avec vidéo. Alors maintenant, je sais ce que c'est quand je regarde la liste à l'avenir. D'accord, il y a donc quelques éléments ici que vous devrez modifier. Trois choses. C'est ultra simple. Le premier est le nom. Cela peut donc être n'importe quel nom, il doit être entièrement en minuscules, sans espaces ni caractères géniaux.

Je vais donc aller de l'avant et mettre un nom maintenant. Vous pouvez voir que je l'ai nommé héros avec la vidéo. Ensuite, ici, vous devez mettre un titre. Nous remplaçons donc ce titre de mot, et c'est ce qui va apparaître. Vous regardez une liste de modèles de blog, de bloc, pas de modèles de bloc de blog. Et si vous remarquez, vous pouvez, c'est le nom convivial, donc il peut avoir des espaces.

Euh, je ne mettrais pas de personnages funky juste là-dedans. Les espaces, c'est bien. C'est donc ce qui va s'afficher dans cette liste a et ensuite ici où il est écrit modèle a. Vous allez simplement coller ce que vous venez de copier dans votre presse-papiers. Maintenant, je veux que vous notiez une chose. Pour chacun de ceux-ci. J'ai laissé la petite apostrophe au recto et au verso.

Vous voyez qu'il y a l'apostrophe qui doit être là. Si vous l'enlevez accidentellement, remettez-le en place. D'accord. Nous changeons juste. Nous remplaçons simplement l'espace réservé du texte. Donc pour ici, je ne veux pas tout remplacer. Je veux juste remplacer le motif de mot, donc je vais le mettre en surbrillance, puis je vais coller ce que j'ai copié.

Et voilà. Alors maintenant, je vais faire défiler vers le bas et cette fois, je vais cliquer sur enregistrer les modifications et activer. Et maintenant, il devrait dire extrait mis à jour et activé. Et quand je clique sur tous les extraits, vous pouvez voir maintenant que ce héros avec vidéo est activé. Donc, à l'avenir, pour des modèles de blocs supplémentaires, je veux aller là où il est dit modèle de modèle de bloc et cliquer sur cloner et créer ce modèle de modèle de bloc de cette façon.

De cette façon, j'ai toujours le modèle là-dedans. Maintenant, si vous savez déjà et que vous avez votre propre façon d'ajouter des fonctions personnalisées, vous n'avez pas besoin d'extraits de code et, et tout ce genre de choses, vous pouvez le mettre où vous voulez le mettre. C'est juste un moyen beaucoup plus facile de le gérer si vous me demandez. Bon, alors maintenant je vais aller sur les pages de mon clic sur ajouter nouveau, et si vous voulez voir le.

Modèles de bloc. Euh, voici l'icône pour cela. Et lorsque vous passez la souris dessus, cela indique des modèles de blocs. Et quand je clique dessus, vous voyez certains des modèles de blocs qui sont expérimentés en ce moment. Mais lorsque vous faites défiler vers le bas, vous verrez ce motif de bloc que j'ai créé. Et ce qui est vraiment bien, c'est qu'il génère un aperçu des vignettes.

Et il le fait de manière dynamique. Vous avez des outils de création de pages qui ne font même pas cela. Euh, et cela facilite tellement la gestion de vos modèles de blocs. Donc, et vous pouvez voir ici qu'il est écrit héros avec modèle. Maintenant, si je veux l'utiliser n'importe où sur mon site Web, c'est un clic de souris. Et puis ça y est. Et tout ce que j'aurais à faire à ce moment-là pour commencer à changer certains textes, changer les liens vers les boutons.

Je peux cliquer ici et je peux changer la vidéo. Alors. C'est ainsi que vous créez un motif de bloc. Maintenant, c'est un gros problème, je pense parce que ce qui va se passer est un thème. Développeurs et créateurs de plugins, ils pourront créer ces modèles de blocs pour vous, il sera donc beaucoup plus rapide, plus rapide et plus facile de créer un site Web à l'aide de l'outil de création de blocs natif que WordPress inclut déjà.

Il n'y a rien à acheter, il n'y a pas de gonflement de code. Il n'y a rien de tout cela, et. Ce qui va encore plus loin. Vous pouvez voir à quel point il est facile pour vous de créer vos propres modèles de blocs, et il est vraiment facile de le voir dans une liste. Cliquez sur un bouton et il y sera inséré. Alors maintenant, vous pouvez penser à quel point il peut être plus facile de créer un site Web lorsque vous avez votre propre bibliothèque de modèles de blocs.

Donc, si vous créez des sites Web pour des clients et que vous ne souhaitez pas utiliser de constructeur de pages. Vous voulez juste utiliser le constructeur de blocs intégré. Vous pouvez créer votre propre bibliothèque de motifs. Vous avez vu comme c'est facile. Je peux le faire. Vous pourriez le faire. Euh, vous pouvez créer votre propre bibliothèque de modèles de blocs que vous pouvez déplacer d'un site à l'autre, et vous pouvez montrer à votre client comment il peut créer cela.

Maintenant, ce n'est pas seulement pour les pages, c'est pour les publications, et ce n'est pas limité à cette seule section que vous avez vue. Fondamentalement, tout ce que vous pouvez créer sur une page. Vous pouvez faire un motif de bloc. Donc, si vous utilisez le générateur de blocs uniquement pour les articles de blog, et que vous souhaitez utiliser certains éléments encore et encore dans un article de blog pour améliorer la mise en page des articles de blog, eh bien, vous pouvez créer un modèle de bloc pour ce.

Et c'est vraiment facile. Un clic et vous pouvez l'utiliser. En fait, l'ensemble des modèles de publication de blog. Donc, s'il existe une formule que vous suivez pour les sections d'un article de blog, vous pouvez faire de cet article de blog entier un modèle de bloc. Ce clic est appliqué et tout ce que vous avez à faire est de pointer, cliquer et modifier.

Donc, la dernière chose avant de conclure ici, c'est un nouveau concept et c'est quelque chose à penser au cours des prochains mois. Expérimentez maintenant. Ce n'est pas tout à fait Yeti, Yeti. Ce n'est pas tout à fait prêt pour les heures de grande écoute parce que si vous avez remarqué, euh, le seul point négatif que j'ai vu, c'est quand vous regardez le blog. Regarde, j'y retourne.

Si vous regardez les modèles de blocs, il s'agit simplement d'une liste d'articles supérieure dans laquelle vous devez faire défiler, ils doivent donc améliorer le processus de catégorisation et d'organisation. Peut-être qu'ils ont une sorte d'interface pour le rendre plus visuel et facile à utiliser. Si vous allez avoir 50 blocs différents.

Motifs. Donc, ils ont juste besoin d'améliorer cela. Et une partie de la syntaxe du code peut changer un peu. Qui sait quand cela sortira enfin. Mais tout l'intérêt de cette vidéo est juste de vous montrer ce qui va être possible très, très bientôt pour que vous puissiez commencer. Réfléchissez à la manière dont cela peut s'appliquer à votre flux de travail et à ce que vous faites en tant que créateur de site Web.

Quoi qu'il en soit, c'est tout ce que j'ai pour vous dans ce post. J'espère que vous apprécierez les regards avancés sur l'avenir de WordPress comme celui-ci, et si vous avez apprécié cette vidéo ou trouvé une valeur, envisagez de lui donner un coup de pouce et de partager cette vidéo afin que les gens puissent voir ce qui se passe au coin de la rue.