Si vous avez fait la dernière mise à jour de wordpress en mars 2019, vous avez du être surpris au moment de créer une page ou un article ! WordPress dans sa version 5.1.1 dispose maintenant d’un outil de création de pages (ou d’article de blog). Dans le milieu, il se fait appeler “Gutenberg” ! Comment utiliser ce pagebuilder de la nouvelle version de wordpress ? Faut-il recréer toutes ses pages ? Comment faire pour utiliser l’ancienne méthode pour créer ses pages ?
Version 5.1.1 : Gutenberg
A chaque changement de version, ça râle ! C’est comme ça, quel que soit le produit, WordPress ou WordPress SaaS : personne n’aime le changement. Au vu de la note de Gutenberg sur le site de wordpress (moins de 3/5), on se doute que pour l’instant c’est compliqué pour la communauté de webmaster habituée à WordPress. Moi même j’ai grogné quand j’ai découvert que je ne pouvais plus écrire un article comme avant. Mais en prenant 20 minutes pour découvrir l’outil, j’avoue avoir été séduit par cette nouvelle fonctionnalité !
Page builder : comment ça marche ?
C’est simple, considérons que votre page ou que votre article devienne un nombre illimité de lignes sur lesquelles vous pouvez ajouter du contenu, comme un énorme tableau ! Précédemment, votre page était plutôt l’équivalent d’une page “word” si on veut être grossier ! Vous ajoutiez du contenu dessus, en sautant des lignes ou intercalant des images.
A moins que vous utilisiez déjà une extension type page builder comme Visual composer, sachez que WordPress vous propose un outil de création de pages en natif : Gutenberg
L’ancienne version versus la nouvelle version
Ce qui peut paraître un peu déroutant dans cette nouvelle version, c’est qu’on choisi d’abord le type de contenu puis après on l’insère. Avant on mettait le texte et les images et on s’occupait ensuite de la mise en forme !
Les options de création ou mise en forme
Si vous cliquez sur le petit “+” vous pourrez ajouter des éléments dans votre page, afin de la construire bloc par bloc. Les éléments sont rangés par catégories
Les blocs les plus utilisés
WordPress détecte les blocs que vous insérez le plus souvent dans vos pages ou vos articles et vous les place en raccourci dans cette catégorie. Dans mon cas, vous verrez que ce sont souvent des paragraphes, des titres et des images
Les blocs communs
Ce sont les éléments que nous connaissons déjà de l’ancienne version de Wordress. Souvenez vous il y avait par exemple l’option d’ajouter une citation, une image ou une galerie via l’éditeur wysiwyg.
Quand j’ai dit que vous trouverez les éléments de l’ancienne version dans les blocs communs, ce n’est pas tout à fait exact ! Essayez le bloc “bannière”, ça c’est vraiment nouveau ! Le bloc bannière permet d’ajouter une image avec un titre dessus !
La bannière propose des options intéressantes, comme un effet parallax mais aussi la possibilité de jouer avec l’opacité du filtre sur l’image pour faire ressortir le titre. Essayez !
Les blocs de mise en forme
En voici une palette de nouveautés dans WordPress avec ces blocs de mises en forme ! Fini tablepress, il est maintenant possible de faire des tableaux et bien d’autres choses avec ces nouvelles options intégrées nativement dans wordpress
Le bloc “HTML personnalisé” : pour intégrer du HTML (un code publicitaire par exemple, une bannière, un code embed de vidéo) sans avoir à switcher sur l’éditeur visuel / htlm. Fini le clic sur le bouton “texte” en haut à droite qui ne voulait de toute façon rien dire !
Le bloc “Classique” vous permet de retrouver l’ancien éditeur
wysiwyg de wordpress. C’est d’ailleurs ce bloc que vous trouverez par défaut dès que vous aurez installé la nouvelle version et que vous éditerez un article écrit avec l’ancienne
Tableau : pour créer un tableau directement dans une page ou un article, sans avoir besoin d’installer une extension comme tablepress et d’insérer un shortcode. Rappelons qu’un tableau ne sert pas à disposer du contenu dans une page, c’est pour présenter des données
Ce petit outil est très complet mais n’intègre pas d’option pour faire des calculs dans les lignes ou les colonnes, c’est vraiment simplement un élément pour présenter des données, pas une alternative à excel. Créez le tableau de base en choisissant les lignes et les colonnes, ajoutez en ou supprimant en si besoin, affichez votre tableau en pleine largeur
| A | B | C | D | |
| 1 | A1 | B1 | C1 | D1 |
| 2 | A2 | B2 | C2 | D2 |
Le bloc “Couplet” ne sert pas à grand chose si ce n’est afficher du texte avec un certain style ! Pour ceux qui tiennent un blog de recueil de poésie pourquoi pas ! Voici un exemple d’utilisation du “bloc couplet”. On peut l’utiliser pour ce qu’on veut, c’est un style pré enregistré
Je mets du texte en ligne
en allant à ligne,
mais avant ça,
j'ai pris soin d'ajouter un bloc "couplet"
Le bloc “code” : il permet d’afficher un morceau de code, pas mal pour les tutoriel. C’est un bloc qui n’interprète pas le code mais qui l’affiche tel quel, pas mal pour les sites de tutoriels !
function generer_lipsum($quantite = 1, $type = 'paras', $lorem = false) { $url = "http://www.lipsum.com/feed/xml?amount= $quantite&what=$type&start=" .($lorem?'yes':'no'); return simplexml_load_file($url)->lipsum; }Le bloc “citation en exergue” : comme son nom l’indique, il permet de présenter une citation, ainsi que son auteur ! Il était déjà possible d’insérer une citation dans l’ancien éditeur, mais l’avantage de la mettre dans un bloc maintenant est de pouvoir la déplacer facilement dans la page. Je lui reproche juste sa mise en forme par défaut, avec un énorme espace au dessus, qui se règle facilement en CSS dans votre thème
Je cite donc je suis
avec le bloc citation exergue
Il y a deux blocs de citations, à croire que de nombreux webmasters utilisent ce type de fonction pour présenter leur contenu ?
Je cite donc je suis,
AVEC LE BLOC CITATION CLASSIQUE
Et voici le dernier bloc de mise en forme, le bloc préformaté, qui est encore une autre façon de présenter du texte. J’étais assez déçu de voir qu’il n’est pas responsive et qu’il ressemble exactement au bloc “couplet”
Lorem Ipsum est un générateur de faux textes aléatoires.
Vous choisissez le nombre de paragraphes, de mots ou de listes.
Vous obtenez alors un texte aléatoire que vous pourrez
ensuite utiliser librement dans vos maquettes.
Les blocs de mise en page
Ici vous retrouverez tous les blocs qui servent à structurer ou présenter du contenu. Le plus intéressant est à mon sens le bloc “colonne” et c’est par lui que nous allons commencer
Voici deux images présentées côte à côte en insérant d’abord le bloc “colonne” et choisissant deux widgets images. Il est bien sûr possible de faire ça avec tout type d’éléments, qui sont bien responsive !
Il est aussi possible du coup de présenter deux paragraphes côte à côte et surtout les déplacer facilement dans la page ! Plus besoin de créer des <div> et mettre les mains dans le code !
Un titre H4
Le texte généré est du pseudo latin et peut donner l’impression d’être du vrai texte.
Ce qu’on a fait avec deux éléments, il est possible de le faire avec plus, mais très rapidement c’est difficile à présenter.
Comme ajouter plus de deux colonnes ? Sélectionnez votre bloc “colonnes” puis regardez sur le coté droit de votre écran, dans l’onglet bloc : vous pourrez en créer jusque 6 !
Dans une colonne, on peut ajouter tout type de contenu (texte, titre, image, bouton etc…)
Le bloc “media” : je suis un peu déçu par ce bloc qui permet de présenter une ligne de contenu type “media + texte”, avec une couleur de fond sur le texte. A ce jour sur plusieurs thèmes, ce bloc n’est jamais bien ressorti (soit non responsive, soit superposé). Je préfère amplement le bloc “colonnes” qui est une façon de présenter aussi tout type de contenu côte à côte
On finit avec une dernière option intéressante qui nous permet d’éviter aussi à copier coller des boutons en HTML : le bouton ! Le bloc présente des options intéressantes pour modifier l’apparence du bouton, son style, sa couleur de fond ou de texte
On retrouve aussi :
- le traditionnel “lire la suite (more) qui permet de couper le texte et ne pas tout afficher sur l’index du blog
- la possibilité de transformer un bloc (exemple une ligne de texte à transformer en titre H2 par exemple. Pour ça, survolez le bloc puis cliquez sur les deux petites flèches interverties pour transformer le bloc en un autre, sans perdre votre texte
- la possibilité de dupliquer une ligne facilement
Votre page (ou votre article) se présente maintenant sous la forme d’une liste de blocs superposés ou alignés, que vous pouvez transformer ou déplacer facilement ! Le plus gros avantages, c’est que vous allez pouvoir vous passer d’extension qui pouvaient être jusqu’à présent très lourde à gérer comme Visual Composer (coût, mise à jour, lourdeur du code). C’est génial quand on démarre un site, bonne chance pour tout transformer
Justement, si on ne veut pas utiliser Gutenberg ?
Si vous êtes réticent ou tout simplement pas prêt, il y a une extension qui permet de garder la mise à jour mais de remettre l’ancien éditeur
wysiwyg de wordpress :
Mais ce n’est pas tout
Votre barre latérale a changé aussi. Si vous ajoutez du contenu, vous êtes sur l’onglet “bloc”, vous accédez donc aux options de chaque bloc (exemple vu ci dessus avec le bloc colonnes). Voici les options pour le bloc “citation” “citation en exergue” et “tableau”
Si vous souhaitez accéder au paramétrage de la page ou de l’article, basculez sur l’onglet “document” pour retrouver les catégories, étiquettes, extrait ou encore l’image de mise en avant
Vous avez la possibilité de sauvegarder un bloc stylisé pour le réintégrer plus facilement dans une autre page ! Et ça, même avec les extensions de pagebuilder, c’était difficile à trouver ! Exemple, reprenons ce bloc ci dessous, deux colonnes avec deux titres et deux paragraphes. Au lieu de le créer à chaque fois, enregistrez-le dans vos blocs en cliquant sur les 3 petits points et “ajouter aux blocs réutilisables” (voir image en dessous)
Vous voyez le V majuscule en début de paragraphe ? C’est l’option “lettrine” qu’il suffit de cocher dans les options du bloc “paragraphe”
Que vous soyez sur cette page ou une autre page /article de votre site, vous retrouverez votre bloc sauvegardé, prêt à être utilisé comme vous l’avez programmé : un gain de temps important et surtout l’assurance de rester cohérent de page en page !
Les contenus embarqués dans une page ou article wordpress
J’ai complètement oublié de vous parler des contenus embarqués ! Ce sont les liens embed, qui permettent d’afficher du contenu de sites externes, des vidéos, des posts facebook ou fil instagram ! Exemple, voici ci dessous un post facebook intégré dans une page web, c’était tout à fait possible avant en copiant collant l’iframe dans la page HTML. La liste des sites depuis lesquels vous pouvez afficher du contenu est grande : facebook, twitter, daylimotion, vimeo, spotify, flickr
Personnellement, j’ai grincé des dents pendant 30 minutes et j’ai très vite adopté Gutenberg ! Je créé des pages beaucoup plus vite, je trouve ça très fluide et très intuitif ! Cependant, il est loin d’être aussi puissant que des extensions de type “Page builder” bien connues “visual composer” pour la citer de nouveau mais j’aime le fait que ce soit natif. J’ai toujours peur du jour où un éditeur arrête de mettre à jour son extension ! Je vous invite à essayer Gutenberg et nous donner votre avis en commentaire !
