23mn de lecture
Si vous utilisez WordPress depuis toujours pour la création de votre site Web, vous êtes peut-être déjà familier avec l’éditeur WordPress Gutenberg à venir. Cet article vise à vous fournir une ressource complète sur la façon d’utiliser l’éditeur WordPress Gutenberg sur votre site afin de pouvoir continuer à produire du contenu.
Que ce soit la première fois que vous entendiez parler de l’éditeur WordPress Gutenberg ou que vous le connaissiez déjà un peu, cet article vous aidera à apprendre comment utiliser le nouvel éditeur pour créer des mises en page pour votre contenu WordPress.
Qu’est ce que l’éditeur Gutenberg ?
En bref, Gutenberg est le remplaçant à venir de l’éditeur WordPress TinyMCE (l’éditeur de texte WYSIWYG actuel où vous écrivez vos publications et vos pages).
Pour rappel, voici à quoi ressemble l’éditeur WordPress TinyMCE actuellement :
Voici à quoi ressemble le nouvel éditeur WordPress Gutenberg :
C’est plus qu’une mise à jour esthétique, Gutenberg va complètement changer l’expérience du montage en adoptant une approche du contenu basée sur des blocs.
Alors que l’accent est actuellement mis sur la création du contenu, l’objectif final est de faire en sorte que Gutenberg permettent une personnalisation complète du site.
Cela signifie que vous serez en mesure de construire votre site en utilisant Gutenberg, y compris pour les pages et autres contenus importants.
Quand Gutenberg fera-t-il partie de WordPress ?
Gutenberg ne fera officiellement pas partie du noyau WordPress avant la prochaine version majeure, WordPress 5.0.
La sortie de WordPress 5.0 est prévu courant 2018. Cela étant dit, vous pouvez toujours installer et utiliser l’éditeur WordPress Gutenberg dès maintenant en installant et en activant le plugin.
Comment fonctionne l’éditeur WordPress Gutenberg ?
Gutenberg est un éditeur basé sur des blocs. Il remplace essentiellement le champ d’édition unique de l’éditeur WordPress TinyMCE actuel par de nombreux blocs individuels.
Ces blocs vous permettent ensuite de créer des conceptions plus complexes que celles autorisées dans l’éditeur WordPress actuel.
Alors, qu’est-ce qu’un bloc ?
Un bloc peut être à peu près n’importe quoi. Par exemple, vous pouvez avoir des blocs pour :
- Le texte normal
- Les images
- Les vidéos
- Les boutons
- Les widgets
- Les tables
L’avantage est que les développeurs pourront créer leurs propres blocs tiers auxquels il sera possible d’accéder grâce à des plugins pour encore plus de flexibilité.
Chaque bloc est sa propre entité que vous pouvez manipuler individuellement. Par exemple, voici un post rapide de Gutenberg qui contient deux blocs :
- Texte
- Image
Comme chaque bloc est séparé, vous pouvez également ajouter des éléments tels que des arrière-plans personnalisés uniquement pour des blocs spécifiques.
Gutenberg est-il un constructeur de pages ?
Dans sa formule actuelle, non, il ne s’agit pas d’un constructeur de page.
Gutenberg rend beaucoup plus facile la création de contenu comme les articles de blogs ou les pages standard, mais ce n’est pas un substitut au générateur de pages tel que Visual Composer.
Gutenberg dispose actuellement de deux choses essentielles :
- Colonnes flexibles ( Il existe un bloc de colonnes expérimental, mais cela reste assez basique)
- Glisser-déposer ( Il est possible de réorganiser l’ordres des blocs par glisser-déposer).
Cependant, si vous désirez créer des pages complexes, vous allez très certainement apprécier la plus grande flexibilité offert par les générateurs de pages existant actuellement.
Si vous comparez actuellement Elementor et Divi Builder, vous verrez une différence concernant les choix possibles pour la génération des pages :
- Glisser-déposer sans modification
- Support multi-colonne où il est possible de créer un nombre illimité de colonnes
- Des tonnes de modèles prédéfinis
- Options de style avancées avec la possibilité de personnaliser la marge
- Paramètres de conception réactifs
Gutenberg pourrait arriver un jour à ce même niveau de performance. Cependant, dans sa version initiale, les générateurs de pages vous donneront la possibilité de concevoir des pages autonomes plus complexes.
Comment installer Gutenberg sur votre site ?
Comme il a été dit plus haut, Gutenberg remplacera l’éditeur WordPress par défaut sur la version 5.0. Pour le moment, votre seule option pour y accéder est d’installer le plugin Gutenberg. Rappelez-vous cependant que Gutenberg est toujours en version bêta, il est donc recommandé de l’installer sur un site Web de test et non un site en production.
Voici comment installer le plugin Gutenberg :
- Connectez-vous à votre Tableau de bord WordPress, allez sur “Extension” et “Ajouter un nouveau“.
- Recherchez le module “Gutenberg“
- Cliquez sur “Installer“
- Cliquez enfin sur “Activer“.
Dès le plugin actif, votre site utilisera automatiquement cet éditeur par défaut lorsque vous irez sur “Articles/ajouter“.
Alors que Gutenberg est conçu pour fonctionner avec n’importe quel thème WordPress (tout comme l’éditeur WordPress), choisir un thème qui offre spécifiquement la compatibilité avec Gutenberg offrira des avantages bien réels.
Parce que Gutenberg est toujours en version bêta, peu de thèmes proposent actuellement un support. Si vous êtes impatient de l’essayer, vous pouvez installer ce thème à partir de Tammie Lister sur votre site de test.
Comment construire votre première mise en page avec l’éditeur WordPress Gutenberg ?
Maintenant que vous avez installé Gutenberg, nous allons découvrir comment utiliser le nouvel éditeur WordPress Gutenberg afin de créer une mise en page complète.
Tour rapide de l’interface Gutenberg
Avant de commencer à ajouter des blocs, passons en revue rapidement les éléments de l’interface principale de Gutenberg :
- Vous permet d’ajouter de nouveaux blocs
- Annuler / rétablir les boutons
- Vous donne accès aux paramètres du document, couvrant des choses comme les catégories et les tags, les images présentées, etc… Ceci est similaire à la barre latérale actuelle dans l’éditeur WordPress
- Lorsque vous avez sélectionné un bloc individuel, vous accédez à des paramètres spécifiques à ce bloc
- Vous permet d’accéder à un aperçu en direct de votre publication ou de publier/mettre à jour votre publication.
- Une fois que vous avez ajoutez des blocs, c’est là que vous allez réellement travailler avec le contenu de votre message.
Ajout de blocs à Gutenberg
Afin d’ajouter un nouveau bloc, il vous suffit de cliquer sur l’icône “+” et de sélectionner le type de contenu que vous souhaitez ajouter :
Gutenberg comprend une tonne de blocs différents, répartis en différentes sections :
Dans l’onglet Blocs, vous avez :
- Blocs Communs : contient des éléments de base tels que des images, des paragraphes, des en-têtes, des guillemets
- Formatage : Vous permet d’ajouter plus de contenu formaté comme des guillemets, des tableaux ou l’éditeur de texte WordPress classique
- Eléments de mise en page : Vous permet de diviser le texte en deux colonnes, d’inclure des boutons, des séparateurs ou la balise “Plus“
- Widgets : Vous permet d’ajouter des raccourcis, les derniers messages ou des catégories. Il est même possible d’afficher les widgets de la barre latérale directement dans Gutenberg
- Inserts : Il vous est possible d’intégrer du contenu provenant de sources externes, notamment: Youtube, Facebook, Instagram
Comment construire un agencement de base avec Gutenberg ?
Supposons que vous souhaitez simplement créer une mise en page de publication de blog comprenant :
- Texte
- Image
- Citation
- Une vidéo Youtube
Voici comment le faire avec Gutenberg:
Ecrivez l’intégralité de votre texte dans l’éditeur ou sur un document Google Docs. Collez le tout, Gutenberg le convertira automatiquement en bloc.
Comment ajouter des blocs non textuels ?
Maintenant que votre contenu est divisé en blocs, vous pouvez survoler l’endroit où vous souhaitez insérer votre première image et cliquez sur l’icône “Plus“.
Cela permettra d’insérer un bloc d’image, à partir duquel vous pourrez télécharger ou sélectionner des images comme sur l’éditeur actuel de WordPress :
Afin d’insérer une vidéo Youtube, vous pouvez ajouter un nouveau bloc Youtube à partir de l’onglet Intégrations. Pour insérer une vidéo, il vous suffit d’introduire l’URL et de cliquer sur “Incorporer“:
Comment réorganiser les blocs Gutenberg ?
Afin de réorganiser les blocs, vous avez deux options. Vous pouvez utiliser la flèche Haut ou Bas lorsque vous survolez un bloc afin de le déplacer dans la direction souhaitée :
Vous pouvez également tirer parti des nouvelles fonctionnalités de glisser-déposer en survolant le bloc et en le faisant glisser.
Conclusion
Pour la plupart des utilisateurs occasionnels, il apportera, après quelques difficultés, une expérience de création de contenu plus flexible.
Si vous n’êtes pas un développeur expérimenté, il vous sera possible de créer de manière intuitive, des mises en page plus complexes avec des éléments supplémentaires tels que des boutons, des contenus incorporés et bien plus encore.
Prêt à vous lancer sur WordPress ? La dernière mise à jour et de nombreuses fonctionnalités sont disponibles avec l’hébergement WordPress LWS !
