Contenu du cours
Utiliser WordPress
Le but de ce cours est de voir les possibilités de base de Wordpress : les pages , les articles , les menu, les widget , les categories , les medias D'apprendre les differentes possibilités de mise en page et d'integration de contenus, quelques trucs et astuces
0/6
Utiliser WordPress
À propos de la leçon

Qu’est ce que l’éditeur Gutenberg au juste?

C’est un éditeur qui fonctionne avec le principe de bloc, ce qui rend l’expérience d’utilisateur semblable au Page Builder sans l’être vraiment.
On ajoute des blocs, on y insère différents contenus (textes, images, vidéos, etc.) puis on les dispose dans la page comme on le souhaite.

 

Découverte de Gutenberg

Pour appréhender Gutenberg au mieux, il faut comprendre que, même s’il n’est pas un Page Builder à proprement parler, sa logique est assez similaire car elle repose sur l’utilisation de blocs de contenus. On ajoute des blocs, on y insère différents contenus (textes, images, vidéos, etc.) puis on les dispose dans la page comme on le souhaite – ou presque…

Parce que si vous êtes habitués à utiliser des Page Builders, vous allez très vite vous rendre compte que, malheureusement, Gutenberg souffre d’un immense manque de souplesse et que c’en est très frustrant…

Présentation de l’interface

Je vous propose de créer ensemble une belle page d’accueil pour votre site vitrine, ainsi nous ferons le tour des possibilités offertes par Gutenberg. On va créer une bannière, rédiger une phrase d’accroche, présenter vos prestations et enfin ajouter un bouton d’appel à l’action.

On commence par créer une nouvelle page. Sachez que si vous souhaitez continuer à utiliser l’éditeur classique, c’est possible en cliquant sur la petite flèche vers le bas à droite du bouton Ajouter, ou sur le bouton Editeur classique qui s’affiche au survol d’un article ou d’une page.

Mais ce n’est pas ce qui nous intéresse ici, donc on ajoute une nouvelle page et on arrive directement sur la nouvelle interface d’édition.

Voilà donc à quoi ressemble Gutenberg. Etudions un peu cette interface ensemble :
En haut à gauche, nous pouvons ajouter un nouveau Bloc avec le bouton (+), annuler ou rétablir une action grâce aux flèches, et afficher les informations relatives à la page/article (nombre de mots, de titres, de paragraphes, de blocs) avec le bouton (i).

En haut à droite, nous retrouvons les boutons de publication les plus importants : Enregistrer le brouillon, Aperçu (l’oeil) et Publier.
L’engrenage vous permet de masquer la barre latérale et de passer en pleine largeur et les 3 points déroulent quelques options supplémentaires, notamment la possibilité de passer en aperçu HTML (le raccourci clavier, c’est bien vu, mais c’est dommage qu’il faille appuyer sur 36 touches en même temps…).

Dans la barre latérale, dans l’onglet Document, on retrouve tous les réglages liés à la publication et je la trouve plus ergonomique que sur l’ancien éditeur. Les onglets sont par défaut fermés et il vous suffit de dérouler ceux qui vous intéressent : ça prend moins de place et c’est plus « propre ». Un bon point pour Gutenberg.

Dans l’onglet Bloc, on a accès au descriptif et aux réglages du bloc sélectionné. Chaque bloc de contenu possède ses propres options. Comme vous pouvez le constater sur les captures d’écran ci-dessous, les réglages sont basiques.

Second bon point, la barre du haut et la barre latérale restent toujours visibles à l’écran. Fini le scroll sans fin pour prévisualiser ou mettre à jour lorsque l’on travaille sur de longues pages…

Présentation des blocs de contenus

On va maintenant construire notre page et découvrir les blocs de contenus proposés par Gutenberg. Pour bien comprendre leur fonctionnement, il faut imaginer que les blocs de contenus sont des briques que l’on empile les unes sur les autres pour créer un édifice (votre page, donc) – à la différence près qu’avec Gutenberg on peut déplacer et même supprimer autant de “briques” qu’on veut sans que l’édifice se casse la figure (je vous déconseille de tenter l’expérience avec les briques de votre maison) !

Pour ajouter des blocs, on clique sur le petit (+) en haut à gauche. Par défaut le bloc est ajouté en bas de la page. Si vous sélectionnez un bloc et cliquez sur le (+), le nouveau bloc sera ajouté sous le bloc sélectionné. Vous pouvez voir l’emplacement du bloc que vous êtes sur le point d’ajouter grâce à l’indicateur en bleu.

Remarque : les boutons pour modifier, supprimer ou déplacer un bloc n’apparaissent qu’au survol des blocs. Ça allège la page et permet d’avoir un rendu propre, mais ce n’est pas très user-friendly, les utilisateurs risquent de passer à côté !

On distingue 5 groupes de blocs de contenus :

  • Communs : ce sont les blocs basiques – les titres, les paragraphes, les listes à puce, les citations, les images, les galeries d’images, etc.
  • Formattage : ce sont les différents formats dans lesquels vous pourrez rédiger vos contenus – classique, HTML, code source, texte préformatté, etc.
  • Mise en page : il s’agit des blocs qui vous permettront de soigner votre mise en page. C’est à mon sens le groupe le plus important, mais il est encore très pauvre pour le moment – séparateur, colonnes, boutons, etc.
  • Widget : vous pourrez, dans ce groupe, retrouver vos widgets WordPress et les intégrer directement dans vos pages / articles.
  • Embed : ce sont des contenus embarqués depuis d’autres plateformes (YouTube, Flickr, Twitter, Tumblr, etc.).

Gutenberg permet également d’ajouter des Widgets directement dans les pages / articles. Vous pouvez afficher vos derniers articles (mais ce n’est pas beau pour l’instant et Gutenberg ne permet pas de personnaliser leur affichage) et vos catégories. Et vous pouvez toujours avoir recours à des shortcodes en utilisant le bloc shortcode disponible dans les widgets.

Publions notre page, maintenant qu’elle est prête. Il faut deux clics pour pouvoir publier une page ou un article. Une sécurité plutôt bien pour les utilisateurs qui débutent, pour les empêcher de commettre des boulettes, de publier sans le vouloir. Mais, qu’on se le dise, c’est très vite agaçant…

Les forces et les faiblesses de Gutenberg

Les forces de Gutenberg

Amélioration de l’expérience de l’utilisateur final

L’éditeur classique se faisait vieillissant et Gutenberg apporte la touche de modernité qu’il lui manquait, notamment grâce à une interface sobre, propre et soignée qui simplifie la publication de contenus. Dans son utilisation, il se rapproche davantage d’un Page Builder que d’un éditeur de texte standard. Il reste simple et efficace pour de la mise en page basique et génère un code propre (oui, parce qu’on y pense tous, aux shortcodes bien sales de Visual Composer).

Gutenberg pourra bien satisfaire les utilisateurs de l’éditeur classique qui n’ont encore jamais goûté aux Page Builders et qui se contentaient jusque là de mises en page simples. Il leur permettra en gros de faire la même chose, mais de manière plus intuitive et agréable. Mais pour les autres, je pense en particulier aux différents professionnels WordPress, eh bien… ce n’est pas gagné.

Les faiblesses de Gutenberg

Manque de souplesse

Bien qu’il s’en inspire, Gutenberg n’est clairement pas un véritable Page Builder, ce qui est à mon sens très limitant. La structure en Rangées / Colonnes et le système du Glisser-Déposer (Drag and Drop) des Page Builders manquent affreusement… on se voit contraint de déplacer les blocs uniquement à l’aide des flèches – manque d’intuitivité et perte de temps – et l’utilisation des colonnes est réservée aux blocs de texte, il n’est pas possible actuellement de les utiliser avec d’autres modules. Gutenberg est moins maniable, moins souple qu’un Page Builder et si ça passe crème sur de petites pages, c’est vite handicapant lorsque les pages s’allongent…

De plus, Gutenberg ne nous permet pas, à l’heure actuelle, de modifier un site en front, c’est-à-dire directement depuis un site en ligne. On ne peut pas voir en direct les modifications apportées, fonctionnalité que la plupart des Page Builders proposent.

Manque de personnalisation des blocs de contenus

De plus, les modules manquent de personnalisation… ils ne proposent que trop peu d’options là où l’on imaginerait un panel riche et complet. On ne peut pas jouer sur les marges des blocs (on n’a donc pas le contrôle sur les espaces blancs et c’est difficile d’aérer ses mises en page)… Les options d’affichage et de personnalisation des différents modules sont vraiment trop sommaires (par exemple, il n’est actuellement pas possible d’afficher une galerie sous forme de diaporama ou de carrousel).

Et le peu d’options disponibles ne sont, à mon sens, pas pertinentes. C’est dommage de permettre aux utilisateurs de créer des pages et des articles « sapin de Noël » en leur offrant la possibilité de changer la taille et la couleur des polices, ainsi que la couleur d’arrière plan des paragraphes. Ce n’est, en soi, pas une mauvaise chose, mais ça implique d’éduquer l’utilisateur afin qu’il respecte la charte graphique définie et les codes du design.

On préfèrerait donc avoir davantage d’options de mise en page que d’options de personnalisation graphique.

Gutenberg : alors, bien ou pas ?

Les nouveautés apportées Gutenberg sont loin d’être pertinentes et les faiblesses de l’ancien éditeur ne sont pas toutes corrigées… A quoi bon s’inspirer des Page Builders si c’est pour passer à côté de leurs plus gros atouts ?

En l’état actuel, Gutenberg est une bonne avancée par rapport à l’éditeur classique, il est plus moderne et plus abouti, mais il est encore bien en dessous de tout ce qui se fait en matière de Page Builders.

Gutenberg et le futur de WordPress ?

Gutenberg en est donc clairement à ses balbutiements. Mais il va peu à peu s’enrichir de nouvelles fonctionnalités et de nouveaux blocs de contenus. Les développeurs de thèmes et de plugins pourront créer des modules et des widgets qui s’intègreront à Gutenberg – de nombreux développeurs travaillent d’ores et déjà à rendre leurs extensions compatibles avec Gutenberg .

Mes coups de cœurs sur l’éditeur Gutenberg

Ce sont des options n’existant pas sur l’éditeur TinyMCE, ou nécessitant des shortcode, voir plugin.

  1. L’option insertion des boutons sur les articles: il faut aller sur mise à jour, puis choisir le bouton. Vous avez votre bouton sans une ligne de code. Il ne reste plus qu’à entrer l’ URL de la page qu’on voudrait envoyer à ses lecteurs. En plus vous pouvez customiser le bouton sans faire appel au CSS.

  2. L’ouverture d’un lien dans un autre onglet: dans l’éditeur TinyMCE, lorsque vous mettez un lien à votre article, quand l’internaute clique  là dessus la page en question s’ouvre en fermant la page de l’article. “c’est pas cool ça!” avec Gutenberg, en un clic vous pouvez faire en sorte que le lien en question s’ouvre dans un autre onglet,sans code, permettant ainsi de ne pas troubler vos lecteurs.

  3. Le bouton yoast a droit de l’éditeur:  il vous permet de visualiser en temps réel l’impact des mots choisis sur votre référencement. trop génial!

  4. La possibilité d’intégrer des tableaux dans vos articles, et ceci en un clic, sans code, ni plugin. sous la fenêtre mise en forme, vous trouvez  la fonction tableau. même si la customisation est encore basique, on note néanmoins une avancée majeure.  

L’éditeur Gutenberg WordPress, a tellement des fonctionnalités qu’il m’est impossible de tout citer dans cet article, nous n’avons qu’effleuré tout son potentiel.  

Annexe

Les différents blocs de contenu gutenberg

Les blocs de contenu sont répartis en plusieurs catégories :

  • Les plus utilisés : dans cette section les blocs de contenu utilisés dernièrement

  • Eléments en ligne :

    • Image en ligne : permet de positionner une image à côté de votre texte

  • Blocs communs :

    • Titre : pour l’ensemble de vos titres (H2, H3, H4)

    • Paragraphe : pour la saisie standard de votre texte

    • Image : pour ajouter un bloc image

    • Galerie : pour ajouter une galerie d’image

    • Bannière : pour ajouter une image sur laquelle vous pourrez saisir du texte par-dessus

    • Liste : pour faire une liste à puce ou numérotée

    • Citation : pour ajouter une citation

    • Son : pour ajouter un média son

    • Fichier : pour faire un lien vers un fichier

    • Vidéo : pour ajouter une vidéo

  • Mise en forme :

    • Code : pour saisir du code

    • Classique : pour retrouver l’éditeur classique de WordPress

    • HTML personnalisé : pour ajouter du code HTML

    • Pré-formaté : ajouter un texte qui respecte les espacements et tabulations

    • Citation en exergue : pour ajouter une citation et définir un aspect visuel

    • Tableau : pour ajouter un tableau

    • Couplet : pour ajouter de la poésie ou des paroles en utilisant un espacement spécifique

  • Mise en page :

    • Bouton : permet d’ajouter un bouton

    • Colonnes : créer des zones pour afficher des blocs de contenu sur plusieurs colonnes

    • Media & texte : définir un média et du texte côte à côte

    • Lire la suite : ajouter un lien “lire la suite”

    • Saut de page : ajouter un saut de page

    • Séparateur : ajouter un séparateur (ligne entre 2 blocs)

    • Espacement : ajouter un espace (entre 2 blocs)

  • Widget :

    • Code court : pour ajouter des shortcodes

    • Archive : afficher les archives mensuelles de vos articles

    • Catégorie : afficher la liste des catégories

    • Commentaires récents : afficher les commentaires récents

    • Articles récents : afficher les articles récents

  • Contenus embarqués :

    • Intégrer le contenu de vos réseaux sociaux

Visits: 1

Fichiers de l’exercice
WP_Gutenberg.pdf
Taille: 517,53 Ko