L’éditeur de blocs WordPress (« Gutenberg ») propose un grand choix de blocs intégrés, mais une taille unique ne convient pas toujours à tous. Gutenberg n’a peut-être pas tout ce dont vous avez besoin pour créer un beau site Web basé sur des blocs.

Heureusement, il existe des moyens d’étendre la bibliothèque intégrée de Gutenberg. Avec un plugin comme Blocs Genesis personnalisésAvec l’éditeur WordPress bien connu, vous pouvez créer vos propres éléments. Cela peut inclure un bloc de produits associé que vous pouvez utiliser en dehors des pages de produits régulières de WooCommerce, ou un bloc de coupons qui n’est montré qu’aux clients connectés.

Dans cet article, nous allons expliquer pourquoi tant de propriétaires de sites Web développent des blocs Gutenberg personnalisés. Nous vous montrerons ensuite comment créer le vôtre en trois étapes faciles. Commençons!

Une introduction aux blocs personnalisés (et pourquoi vous voudrez peut-être les créer)

L’éditeur WordPress Gutenberg aurait pu être controversé lors de son introduction. Cependant, il est désormais largement admis que l’éditeur de blocs donne plus de flexibilité aux propriétaires de sites Web.

Bien qu’il y ait beaucoup à aimer, cet éditeur a certaines limitations, surtout si vous utilisez des plugins tiers. Par exemple, le plugin principal de WooCommerce a une fonctionnalité de produit connexe que vous voudrez peut-être utiliser à plusieurs endroits sur votre site Web. Cependant, cette fonction n’est pas disponible sous forme de bloc.

Blocs Genesis personnalisés est un plugin que vous pouvez utiliser construisez vos propres blocs. La création d’un élément personnalisé peut être utile si vous avez du mal à donner vie à votre vision créative en utilisant les sélections standard de WordPress. Cela peut également être un excellent moyen de donner un apparence uniqueou même de nouvelles fonctionnalités.

Concevoir vos propres blocs signifie également que vous n’avez pas besoin d’installer de plugins WordPress pour accéder à leurs blocs. Cela peut aider à minimiser le nombre de plugins installés sur votre site. C’est une bonne nouvelle pour la sécurité. Cela peut également réduire le temps nécessaire à la maintenance de vos plugins.

Si vous avez développé votre site avec plusieurs plugins, applications, systèmes ou autres services tiers, des blocs personnalisés peuvent améliorer la compatibilité. Vous pouvez concevoir ces éléments afin qu’ils soient intégrés à tout logiciel et service supplémentaire sur votre site Web.

Bien qu’il soit possible de créer un effet de bloc personnalisé à partir de Ajout de code à vos pages et publicationsCela peut prendre du temps et être frustrant. Il existe également de nombreuses possibilités d’erreur humaine, telles que les fautes d’orthographe et les fautes de frappe. En règle générale, il est beaucoup plus facile d’implémenter votre conception en tant que bloc de contenu réutilisable. Chaque fois que vous souhaitez utiliser ce bloc, vous pouvez simplement le sélectionner dans l’éditeur bien connu de Gutenberg.

Comment créer un bloc Gutenberg personnalisé dans WordPress (en 3 étapes)

Dans cet article, nous utiliserons le plugin Genesis Custom Blocks pour créer un élément personnalisé. À titre d’exemple, créons un biobloc d’auteur que vous pouvez ajouter à la fin de vos articles de blog.

Ce bloc se compose d’un champ image dans lequel l’auteur peut insérer sa photo ou son avatar, et une zone pour sa biographie. Vous pouvez également ajouter des champs supplémentaires que vous souhaitez utiliser. Après ça Activez le plugin Genesis Custom BlocksVous êtes prêt à partir.

Étape 1: configurez votre bloc

Dans le tableau de bord WordPress, accédez à Blocs personnalisés> Ajouter nouveau. Vous pouvez ensuite donner à votre bloc un nom descriptif:

Le plugin de bloc Gutenberg personnalisé de Genesis,

Ensuite, vous allez configurer les propriétés du bloc. Cela vous permet de trouver plus facilement ce bloc dans le sélecteur de blocs Gutenberg.

Dans cette étape, vous pouvez sélectionner l’icône qui représente ce bloc dans l’éditeur et la catégorie dans laquelle il sera enregistré. Vous pouvez choisir parmi les catégories de bloc standard ou en créer une nouvelle en sélectionnant Ajoutez une nouvelle catégorie. Si vous souhaitez créer plusieurs blocs, il peut être utile de créer une catégorie pour stocker tous vos blocs Genesis dans:

Les paramètres de WordPress Gutenberg.

Vous pouvez également attribuer des mots-clés à ce bloc. Ces mots clés facilitent la recherche de ce bloc dans la sélection. Vous pouvez en saisir trois au maximum:

Paramètres de mot-clé des blocs personnalisés Genesis.

Par défaut, vous pouvez utiliser vos blocs personnalisés pour les pages et les articles. Cependant, vous pouvez utiliser pour modifier ce comportement par défaut Types de messages Clés. Puisque vous créez un biobloc d’auteur dans cet exemple, vous souhaiterez peut-être le limiter aux publications car il est rare d’attribuer un auteur aux pages d’un site Web.

Le slug du bloc est automatiquement généré en fonction de son nom. Cependant, vous pouvez modifier ce slug si nécessaire. Nous utiliserons le slug pour créer notre modèle de bloc dans une étape ultérieure. Par conséquent, il est important de noter ces informations.

Étape 2: concevez votre bloc Gutenberg personnalisé

Ensuite, vous allez en ajouter Champs de l’éditeur à votre bloc personnalisé. Ces champs sont des points de données que vous pouvez modifier à chaque fois que vous utilisez ce bloc (par exemple, ajouter une photo à un champ Image). Pour ajouter un champ, choisissez Champ de l’éditeur puis cliquez sur le symbole plus:

Les champs de l'éditeur de blocs personnalisés Genesis.

En dessous de Nom de domaine, Saisissez le texte qui apparaît à côté du champ de saisie. C’est votre chance de donner à l’auteur un aperçu du contenu qu’il devrait entrer. En dessous de Type de champSélectionnez le type d’entrée que ce champ doit accepter. C’est un excellent moyen de s’assurer que tous les auteurs utilisent le bloc de manière cohérente.

Genesis Custom Blocks prend en charge un Gamme de types de champs, y compris «Case à cocher», «Image» et «Basculer». Pour le biobloc d’un auteur, vous ajoutez généralement un champ d’image pour que l’auteur affiche sa photo ou son avatar. Vous avez également besoin d’un endroit pour votre bio.

Pour ce faire, vous pouvez créer une option de saisie de texte simple en ajoutant un bloc de texte. Vous pouvez également donner à l’auteur plus d’espace pour travailler en ajoutant une «zone de texte». Une option de saisie de texte multiligne adaptée aux paragraphes est créée dans cette zone de texte.

L’ajout de différents champs vous donne accès à différentes options de configuration. Dans les captures d’écran ci-dessous, nous utilisons texte comme type de champ.

Pour un champ de texte, vous pouvez fournir un texte d’espace réservé et spécifier une limite de caractères. Vous pouvez aussi utiliser Largeur du champ Comment choisir comment vous souhaitez qu’il apparaisse sur votre site Web:

Les paramètres de texte de bloc personnalisé de Gutenberg.

Vous pouvez répéter ces étapes pour chaque champ de votre bloc personnalisé. Lorsque vous êtes satisfait de la configuration de votre bloc, cliquez sur Publier. Cet élément est désormais disponible dans le sélecteur de blocs WordPress.

Étape 3: créer un modèle de bloc

Afin d’afficher correctement votre nouveau bloc, vous devrez créer un modèle de bloc pour le thème WordPress que vous avez choisi. Cela inclut toutes les données de champ qui seront utilisées dans votre bloc personnalisé, par exemple B. la photo de votre auteur et le texte bio.

Vous devez enregistrer vos modèles de bloc dans le répertoire de votre sujet actif. La manière dont vous accédez à ce répertoire dépend de votre environnement d’hébergement. La plupart des hébergeurs le font cependant Accès FTP (File Transfer Protocol).

Vous pouvez ensuite en utiliser un Client FTP comme FileZilla pour vous connecter à distance à votre hébergeur. Si vous ne savez pas comment procéder, vous pouvez vous référer à la documentation de votre fournisseur ou les contacter directement pour obtenir de l’aide.

Une fois que vous êtes connecté avec succès à votre site Web, vous pouvez ouvrir le répertoire de votre sujet actif. Dans ce répertoire, créez un nouveau dossier nommé « Blocks »« .

Ensuite, créez un nouveau fichier PHP dans le blocs Annuaire. Vous pouvez nommer ce fichier au format suivant:

block-{block-slug}.php

Assurez-vous de remplacer « Block Slug » par le slug du bloc que vous avez créé à l’étape précédente. Par exemple, cela pourrait ressembler à ceci: « block-custom-block.php ».

À ce stade, Genesis peut reconnaître avec succès votre modèle de bloc. Cependant, vous devrez coder votre modèle en HTML et tous les éléments nécessaires Fonctions PHP.

La manière dont vous procédez à cette étape dépend de votre blocage. Cependant, vous pouvez trouver de nombreux exemples de code sur le site Web Genesis Custom Blocks. Après avoir suivi ces étapes avec succès, vous devriez pouvoir accéder à votre bloc personnalisé dans l’éditeur Gutenberg:

Insérez votre bloc Gutenberg personnalisé.

Si votre bloc n’apparaît pas automatiquement, vous pouvez accéder à la bibliothèque de l’éditeur de Gutenberg en cliquant sur Parcourir tout. Vous pouvez ensuite sélectionner la catégorie dans laquelle vous avez créé votre bloc personnalisé. Vous devriez maintenant pouvoir l’ajouter à votre page ou à votre message.

Conclusion

Gutenberg propose une sélection décente de blocs intégrés mais est loin d’être une liste exhaustive. Avec un plugin comme Blocs Genesis personnalisésvous pouvez aller au-delà des limites de la bibliothèque Gutenberg.

Dans cet article, nous vous avons montré comment concevoir et développer un bloc Gutenberg personnalisé en trois étapes:

  1. Configurez votre bloc Gutenberg personnalisé.
  2. Concevez votre bloc.
  3. Créez un modèle de bloc.

Avez-vous des questions sur la création d’un bloc Gutenberg personnalisé dans WordPress? Demandez dans la section commentaires ci-dessous!



Source link

Recent Posts