L « éditeur de blocs Gutenberg , l » éditeur de contenu de WordPress, compte plus de 81 millions d’installations actives. En raison de la nature dominante du marché de WordPress et de la nature intuitive de la conception de cet éditeur, il n’est pas surprenant que ce système soit si populaire.
Gutenberg est un constructeur de pages et un éditeur de contenu accessible par glisser-déposer. Il offre de nombreuses fonctionnalités, ainsi que des approches variées que vous pouvez utiliser pour créer le site web curaté de vos rêves.
Cet éditeur est construit sur blocs Gutenbergles diverses unités de contenu qui composent les pages et la mise en page d’un site web.
Vous pouvez obtenir ces blocs à partir de la bibliothèque de blocs de WordPress. Cette bibliothèque est très complète, mais elle ne contient pas toujours le bloc exact dont vous avez besoin pour votre site web.
Ainsi, si vous êtes un entrepreneur qui souhaite des fonctionnalités avancées pour son site web ou des éléments spécialisés qui ne sont pas encore proposés par Gutenberg, vous pourriez être intéressé par l’utilisation de blocs personnalisés Gutenberg sur votre site web WordPress.
Gutenberg : L’éditeur de contenu de base de WordPress
L « éditeur Gutenberg est au cœur du cadre d » édition de contenu de WordPress. Sa structure basée sur des blocs facilite la construction d’un site webWordPress et de toutes ses pages – même pour les débutants complets.
Avec cet éditeur, vous pouvez créer un contenu riche en médias dans WordPress en choisissant les nouveaux blocs dont vous avez besoin. Vous pouvez ensuite les dimensionner comme vous le souhaitez et ajouter les éléments spécifiques que vous voulez voir apparaître sur chaque page.
Que sont les blocs Gutenberg ?
Dans Gutenberg, chaque page ou article est constitué d’une collection d’éléments autonomes.
Vous utilisez ces éléments – ou blocs – pour construire des pages, des articles et tout le reste de votre site web WordPress.
Le bloc le plus populaire est le bloc de paragraphes, suivi par les blocs d’images et d’en-têtes. Les titres, le texte, les séparateurs, les widgets et les vidéos sont d’autres exemples de types de blocs.
Comme nous l’avons mentionné précédemment, vous pouvez accéder aux blocs WP via la bibliothèque de blocs. Vous pouvez la trouver en cliquant sur le + en haut à gauche de votre barre d’outils WordPress lorsque vous éditez une page ou un article.
Mais que faire si la bibliothèque de WordPress ne propose pas le type de bloc que vous recherchez ? Ou tout autre bloc que vous pourriez améliorer pour l’adapter à vos besoins ?
C’est là qu’interviennent les blocs personnalisés.
Que sont les blocs personnalisés de Gutenberg ?
Gutenberg permet à quiconque de créer des ressources gratuites. Ainsi, si vous avez de l’expérience en codage et en développement web, vous pouvez construire des blocs personnalisés lors de la création de votre site web.
Les blocs personnalisés offrent encore plus de flexibilité et de fonctionnalités spécifiques que les blocs par défaut.
Les utilisateurs construisent des blocs personnalisés pour créer des éléments de page uniques.
Les blocs personnalisés de Gutenberg offrent de nombreux avantages, notamment :
- Vous pouvez concevoir des éléments WordPress visuellement attrayants, riches en médias et adaptés aux besoins de votre entreprise.
- Ils ajoutent des fonctionnalités uniques et avancées à votre site web.
- Ils améliorent l’aspect esthétique de vos pages et aident votre entreprise à se démarquer.
- Vous ne devez coder les blocs qu’une seule fois. Ensuite, vous pouvez les utiliser sur l’ensemble de vos sites web et pages.
Cependant, les blocs personnalisés posent certains problèmes. Tout d’abord, leur création nécessite des connaissances techniques approfondies. D’autre part, vous aurez besoin d’une expertise spécifique en matière de codage et d’outils de développement.
Comment obtenir des blocs Gutenberg personnalisés pour WordPress ?
Pour obtenir des blocs personnalisés Gutenberg, vous devez soit les construire vous-même, soit les acheter.
La création de blocs personnalisés n’est pas à la portée de tout le monde, mais ce n’est pas un problème. Vous pouvez acheter des blocs Gutenberg personnalisés au lieu de les construire vous-même. Pour ce faire, trouvez un développeur de premier ordre en qui vous avez confiance, puis travaillez avec lui pour créer vos blocs idéaux.
Si vous avez l’intention de créer ces blocs vous-même, vous devez tenir compte de certains éléments avant de commencer.
Ce qu’il faut prendre en compte avant de créer des blocs personnalisés
La création d’un bloc personnalisé Gutenberg prend du temps et de l’énergie. Avant de commencer le processus, vous devez vous assurer d’avoir épuisé toutes vos autres options.
Vous pouvez vérifier qu’il n’existe pas d’autres approches appropriées en examinant attentivement la bibliothèque des blocs par défaut de Gutenberg. Assurez-vous qu’il n’y a pas de blocs existants qui fournissent les fonctions de base ou les spécifications de style dont vous avez besoin.
Et si vous avez déterminé que vous avez besoin d’un bloc personnalisé, définissez les spécifications essentielles de votre bloc avant de commencer la construction. Pensez aux éléments esthétiques, aux paramètres par défaut et aux fonctionnalités de base. Pensez également aux spécifications de la barre d’outils et à d’autres caractéristiques stylistiques et fonctionnelles essentielles.
Ce dont vous avez besoin pour construire des blocs personnalisés Gutenberg
Une fois que vous avez déterminé les aspects les plus essentiels de votre bloc, vous devez satisfaire à quelques autres exigences clés avant d’entamer le processus.
Un site web WordPress actif est essentiel. Vous devrez également avoir au moins une certaine expérience de JavaScript et des outils de construction JavaScript, tels que Node.js.
Vous aurez également besoin de connaissances intermédiaires en HTML, CSS et PHP pour créer vos propres blocs personnalisés.
Si vous n « êtes pas très expérimenté dans ce domaine, ne vous inquiétez pas. Vous pouvez gagner du temps et de l » énergie en faisant appel à des experts en conception de sites web pour vous aider à construire des blocs.
Comment créer des blocs Gutenberg personnalisés dans WordPress ?
Il existe deux approches accessibles pour construire des blocs personnalisés Gutenberg. Vous pouvez soit installer un plugin convivial qui simplifie le processus, soit les construire à partir de zéro en utilisant du code HTML/CSS ou PHP.
Créer des blocs personnalisés avec un plugin
Il existe un certain nombre de plugins WordPress de construction de blocs qui rationalisent le processus de création de blocs personnalisés Gutenberg pour votre site WordPress. Nous recommandons d’utiliser Genesis Custom Blocks.
Pour créer votre premier bloc avec ce plugin :
1. Installer les blocs personnalisés de Genesis
Tout d’abord, naviguez vers Plugins > Add New dans la barre latérale gauche de votre tableau de bord d’administration et recherchez Genesis dans le répertoire des plugins WordPress. Installez-le et cliquez sur le bouton Activer .
2. Créer un nouveau bloc
Ensuite, naviguez vers Custom Blocks (blocs personnalisés) > Add New (ajouter un nouveau bloc) pour créer un bloc.
3. Configurer les spécificités du bloc
Vous pouvez maintenant sélectionner un nom de bloc, puis configurer et personnaliser ses propriétés. Pour faciliter l’optimisation des moteurs de recherche (SEO), ajoutez des mots-clés pertinents.
Ajoutez ensuite des champs – tels que des nombres, des images et des cases à cocher – en appuyant sur le bouton +. Vous devrez saisir d’autres spécifications, telles que l « étiquette du champ, l »emplacement du champ et le texte d’aide. Vous pouvez également réorganiser, modifier et supprimer des champs.
4. Créez votre modèle.
Ensuite, vous pouvez construire votre modèle avec HTML et CSS ou PHP, en fonction de votre bloc de sortie.
Si votre bloc est configuré pour HTML et CSS, vous pouvez utiliser l’éditeur de modèle du plugin, qui se trouve dans la barre supérieure. Vous pouvez y personnaliser votre bloc via les onglets Markup (HTML) et CSS .
Et si vous souhaitez ajouter du PHP, vous devrez utiliser un éditeur de texte simple pour créer manuellement les fichiers block.php et block.css.
5. Sauvegardez et confirmez votre bloc
Veillez à enregistrer votre bloc en cliquant sur Publier en haut à droite.
6. Ajoutez votre bloc à votre site web
Enfin, vous pouvez ajouter le bloc à votre site web. Ouvrez ou créez un article ou une page, puis appuyez sur le + dans la barre latérale gauche de votre tableau de bord pour trouver et intégrer votre bloc.
Ensuite, personnalisez le contenu de la page à votre guise avec d’autres blocs, desshortcodes WordPress utiles et d’autres approches accessibles qui optimisent l’expérience utilisateur (UX) et les performances du site web.
Création manuelle de blocs personnalisés
Vous pouvez également coder des blocs personnalisés Gutenberg à partir de zéro en suivant ce processus étape par étape :
1. Configurer l’environnement de développement de WordPress
Avant tout, installez Node.js et le gestionnaire de paquets Node (npm). Il s’agit d’outils de construction JavaScript qui vous permettent de définir des fonctions de bloc de base. Vous pouvez télécharger Node.js via le programme d’installation en ligne, puis vous assurer que le npm est activé en entrant la commande npm-v dans votre éditeur de code.
Ensuite, vous devrez installer Docker, une condition préalable à l’utilisation de l’outil de développement de WordPress. Le site web de Docker propose une installation simple en un clic.
Ensuite, vous configurerez votre environnement de développement et activerez votre site de mise à l’essai. Vous pouvez configurer l’environnement de développement à l’aide de l’outil par défaut de WordPress. Installez-le globalement en entrant la commande npm -g install @wordpress/env.
2. Configurez votre fichier de plugin de base (starter)
Avant de pouvoir créer votre bloc personnalisé Gutenberg, vous devez créer un plugin de bloc de base pour référence. Heureusement, il existe quelques approches qui vous permettent d’éviter de compléter manuellement cette étape.
Exécutez la commande /wp-content/plugins/ pour naviguer dans votre répertoire de plugins.
Vous pouvez alors exécuter la commande npx @wordpress/create-block, qui vous permet d’accéder facilement à vos fichiers PHP et JS et de les éditer.
Veillez à ajouter à la commande le nom que vous souhaitez donner à votre bloc de départ. Vous pouvez utiliser quelque chose de simple, comme mon-nouveau-bloc, ou faire preuve de créativité.
L’autre option consiste à installer l’outil create-guten-block et à exécuter la commande npx create-guten-block avec le nom de votre bloc de départ.
Ces processus créeront un point de départ.
3. Configurer block.json
Vous devez ajouter un fichier block.json à votre nouveau répertoire, puis le configurer en saisissant des métadonnées et des sélections pour divers paramètres. Les exemples de paramètres incluent les attributs du bloc et d’autres spécifications ajustables, comme laversion, le titre et la catégorie de l‘interface de planification des applications(API).
Voici un exemple de ce à quoi pourrait ressembler une partie du code block.json :
Le fichier block.json permet à votre plugin de bloc de base d’apparaître dans le répertoire des plugins, facilite l’enregistrement de votre bloc par la suite et contribue à la performance de votre site web.
4. Configurer d’autres spécifications
Ensuite, vous déterminerez et mettrez en file d’attente les spécificités concernant :
- Styles.
- Dépendances et fichiers d’actifs.
- Attributs.
- Scripts.
- Étiquettes et mots-clés.
Vous pouvez accéder au fichierpackage.json pour configurer vos propriétés, styles et scripts JavaScript. Dans le fichier block.json, vous pouvez définir des attributs à l’aide de la fonction setAttributes . Vous pouvez également modifier les paramètres des blocs à l’aide d’étiquettes et de mots-clés.
Vous pouvez ajouter d’autres spécifications frontales et dorsales et modifier diverses fonctions. Par exemple, vous devez créer un fichier d’actifs pour ajouter des dépendances. Vous pouvez le faire en entrant la commande npm run build pour votre fichier JavaScript XML (JSX) ou le code PHP suivant :
5. Enregistrez votre bloc
Une fois que vous avez créé votre plugin de bloc, utilisez la fonction register_block_type. Cette technique d’enregistrement des blocs extrait automatiquement les métadonnées précédemment déterminées du fichier block.json.
6. Sauvegardez et confirmez vos travaux de blocage
La dernière étape consiste à enregistrer tous les fichiers et à tester votre nouveau bloc.
Vous pouvez confirmer sa fonctionnalité en ajoutant votre nouveau bloc personnalisé Gutenberg à votre site web. Si vous l’insérez et qu’il affiche le message « Hello World », c’est le signe que vous avez terminé le processus correctement.
Si vous souhaitez utiliser le même bloc dans plusieurs mises en page ou sites web à l’avenir, essayez de l’utiliser dans un modèle de bloc Gutenberg.
Consultez la page « Apprendre » de WordPress pour plus de détails et de tutoriels sur la manière de configurer votre site web.
Dernières réflexions : Comment créer des blocs personnalisés Gutenberg – un guide Bluehost
Faire des blocs personnalisés Gutenberg pour WordPress est une solution utile si vous avez besoin d’éléments de site web qui ne sont pas proposés par les blocs par défaut.
Vous créez vos propres blocs Gutenberg à l’aide d’un plugin ou par codage manuel. Cependant, l’un ou l’autre processus nécessite une certaine expertise technique.
Si vous ne souhaitez pas créer vous-même des blocs personnalisés, essayez les services de conception de sites Web de Bluehost. Notre équipe d’experts dévoués est là pour vous aider à personnaliser et à cultiver le site Web parfait.
Si vous souhaitez concevoir vous-même votre site web, mais que vous avez besoin de conseils d’experts en matière d’édition de site, nous proposons également la conception Pro avec une assistance en direct. Nos experts peuvent vous aider à choisir et à personnaliser les thèmes et les plugins parfaits et à optimiser votre site web.
Ensuite, une fois que votre site web est prêt à être mis en ligne, contactez-nous chez Bluehost pour obtenir des services d’hébergement WordPress rapides, de haute qualité et très performants.
Ecrire un commentaire