Rédiger votre premier article sous WordPress avec Gutenberg

Avec l’évolution nommée Gutenberg, l’éditeur de WordPress a été récemment révolutionné. Si ce changement n’a pas été du goût de tous les utilisateurs, cette nouvelle mouture est indéniablement plus facile à utiliser pour les débutants !

L’éditeur classique de WordPress

Dans sa version précédente, l’éditeur de WordPress ressemblait à une version allégée de Word. Des fonctions de mise en forme de base étaient proposées : création de titres, de liens, mise en valeur de texte, insertion d’images ou création de listes. Cependant, l’ensemble était assez désorganisé.

Voilà par exemple ce à quoi ressemblait une version initiale de cette article sous l’éditeur classique de WordPress.

L'éditeur classique de WordPress
L’éditeur classique de WordPress

Éditeur Gutenberg et concept de blocs

L’idée du nouvel éditeur Gutenberg est d’avoir un document structuré en blocs; ceux-ci peuvent être :

  • Un titre
  • Un paragraphe
  • Une liste
  • Une image
  • Une table…

La plupart des articles ont une structure assez simple : un titre, un sous-titre, quelques paragraphes avec des images pour aérer, puis le sous-titre suivant et d’autres paragraphes. Ils seront donc constitués d’une suite de blocs.

Création d’un nouvel article

Cliquons donc sur le menu Créer / Article afin de nous retrouver dans l’éditeur Gutenberg. Celui-ci est constitué principalement d’une zone centrale d’édition qui permet la mise en page de l’article.

La zone d'édition de Gutenberg
La zone d’édition de Gutenberg

En complément, la barre latérale à droite de l’écran permet d’effectuer différents réglages sur l’article ou le bloc en cours d’édition.

Titre de l’article et permalien

Commencez par saisir le titre de l’article, puis sauvegardez un brouillon en cliquant sur Enregistrer le brouillon, en haut de l’éditeur.

Le permalien apparaît ensuite juste en-dessous du titre. Ce permalien constitue l’adresse de l’article; il est donc important qu’il soit à la fois concis, facile à retenir, et bien sûr qu’il reflète le contenu de l’article.

Par défaut, il est constitué du titre de l’article dans lequel les espaces sont remplacés par des tirets, et où les accents ont été supprimés. Raccourcissez-le encore si nécessaire, via le bouton Modifier : éliminez les mots de liaisons, articles et autres éléments non essentiels. Par exemple, si le titre de l’article est “La tarte aux fraises de ma grand-mère”, un permalien adapté pourrait être “tarte-fraises-grand-mere”; “Randonnée en forêt autour de Fontainebleau” peut avoir comme permalien “randonnee-foret-fontainebleau”.

Dans le cas de cet article, le permalien est le suivant :

Édition du titre de l'article et de son permalien sous Gutenberg
Édition du titre de l’article et de son permalien sous Gutenberg

Passons maintenant aux choses sérieuses, c’est-à-dire le contenu de l’article proprement dit. Le moment est donc venu de se frotter aux blocs Gutenberg, concept qui jusque là vous paraît probablement un peu abstrait.

Création de blocs sous Gutenberg

Cliquez en-dessous du titre, dans la partie indiquant Commencez à écrire ou saisissez / pour choisir un bloc, et tapez-y l’introduction de votre article.

Un premier bloc texte sous Gutenberg
Un premier bloc texte sous Gutenberg

Lors de l’édition, vous noterez l’apparition d’un menu au-dessus du bloc courant. Celui-ci fournit des options de mise en forme simple, tels que le passage en gras ou italique ainsi que la création de liens. Il permet aussi de changer le type de bloc courant (par exemple, transformer un paragraphe en titre et vice-versa), ainsi que l’ajout de blocs avant ou après le bloc courant. Voyons d’abord comment créer un lien.

Il faut tout d’abord sélectionner à la souris le texte qui sera utilisé pour le lien. Ici, j’ai sélectionné juste le mot « Gutenberg », mais il est bien sûr possible de créer un lien pour plusieurs mots ou une phrase complète.

Création d'un lien
Création d’un lien

Cliquez ensuite sur l’icône « Lien » du menu, ou utilisez la combinaison de touches Control-K. Ensuite, suivant que vous vouliez faire un lien vers un article de votre blog ou vers une page externe, vous avez deux possibilités :

  • Pour lier un article ou une page de votre site, tapez un des termes contenus dans son titre, et Gutenberg vous proposera les éléments correspondants
  • Pour créer un lien externe, saisissez directement l’adresse correspondante
Saisie de l'adresse d'un lien sous Gutenberg
Saisie de l’adresse d’un lien sous Gutenberg

Prévisualiser la page en cours d’écriture

Le bouton Prévisualiser en haut à droite de l’éditeur vous permet de visualiser votre article sur le blog, tel qu’il apparaîtra une fois publié. Avec la version actuelle de WordPress, la première prévisualisation est parfois assez lente à s’afficher.

Même si WordPress sauvegarde automatiquement de façon régulière, n’hésitez pas à enregistrer un brouillon régulièrement via l’option « Enregistrer en brouillon », située elle aussi en haut à droite de l’écran.

Création d’un nouveau titre

Pour insérer ensuite un titre secondaire, il faut d’abord passer au bloc suivant; cela se fait simplement en appuyant sur la touche Entrée, ce qui termine le paragraphe courant.

Ensuite, pour faire apparaître le menu des blocs disponibles, il faut soit cliquer sur le bouton Plus à gauche du bloc, soit entrer le caractère « slash » (/). La différence entre ces deux méthodes ? La liste de blocs est moins complète quand on utilise /, alors que le clic sur le Plus fait apparaître le menu complet. Dans la plupart des cas, la liste réduite suffira.

Création d'un bloc sous Gutenberg
Création d’un bloc sous Gutenberg

Sélectionnons-y Titre (en cliquant dessus à la souris, ou simplement en pressant Entrée) pour transformer notre bloc vide en titre, et tapons son contenu.

Apparence d'un bloc "titre"
Apparence d’un bloc « titre »

Tout comme pour les paragraphes, un menu permet d’effectuer différentes mises en forme. Pour un titre, il est possible de choisir son importance « H2 » à « H4 ». Le titre principal de votre article aura ainsi implicitement un type « H1 », et par défaut titres à l’intérieur de votre article un type H2, c’est-à-dire d’une importance moindre. Si votre article est assez long, il sera peut-être nécessaire d’ajouter des sous-sections H3, voire H4 pour l’organiser clairement.

Pour clarifier ce concept, voici un condensé de ce que pourraient être les titres pour un article sur New-York dans un blog de voyages. Les titres « présentation générale », « Que voir » et « Où dormir » sont des H2, tandis que les sous-titres « Empire state building », « Statue de la liberté », « Hôtels » et « Airbnb » sont des H3.

Apparence des différents titres sous WordPress
Apparence des différents titres sous WordPress

On note que la taille des titres est proportionnelle à leur importance. Leur apparence exacte variera cependant d’un thème à l’autre, comme on le verra dans un article ultérieur (le thème WordPress utilisé sur cette copie d’écran est Twenty Nineteen).

Si le sujet des techniques d’écriture sera abordé ultérieurement, il est à noter que le fait de commencer par définir d’abord le plan de l’article puis de remplir les blancs simplifie énormément le processus d’écriture.

Revenons à l’article en cours d’écriture. Nous avons déjà saisi le titre, passons donc au remplissage des paragraphes. Il suffit de valider le titre avec Entrée, puis de remplir les paragraphes suivants. Notez que pour créer un paragraphe, il n’est pas utile de passer par le menu spécifiant le type de bloc; le fait de taper du texte indiquera à Gutenberg que le bloc courant est un paragraphe.

N’hésitez pas à aérer le texte en multipliant le nombre de paragraphes, plutôt que d’avoir un gros bloc de texte peu engageant !

Insérer des images

Vous allez me dire, le texte, c’est bien gentil, mais un peu de visuel n’a jamais fait de mal à personne ! Insérons donc une image pour égayer notre nouvel article.

Après un nouveau petit coup de slash (/) sur un nouveau bloc, on sélectionne Image dans la liste des types de blocs disponibles, et nous voilà en face d’un nouveau type de bloc.

Ajout d'un bloc de type "image" avec Gutenberg
Ajout d’un bloc de type « image » avec Gutenberg

C’est le moment de se frotter un peu à la bibliothèque de médias WordPress. Cliquez sur le bouton Téléverser du bloc, et choisissez l’image depuis votre ordinateur. Je conseille cependant de la redimensionner avant de tenter de l’insérer, par exemple avec une largeur de 1600 pixels. En effet, suivant votre hébergeur, l’insertion d’un fichier trop large sera refusée !

Une fois l’image insérée, elle apparaît dans l’éditeur. On peut alors saisir une légende juste en-dessous. Il est également possible de choisir d’aligner l’image à droite ou à gauche plutôt que de la centrer, via l’option « Modifier l’alignement » de la barre de menu. Une autre option utile du même menu permet de visualiser l’image en taille réelle quand on clique dessus, en sélectionnant l’option « Fichier média » dans « Insérer un lien »

Le sujet des images sous WordPress fera l’objet de plusieurs articles à venir. Voici cependant déjà plusieurs conseils :

  • Renommez vos fichiers avant des les utiliser, afin que leur nom reflète leur contenu. Mieux vaut un fichier appelé « PontDeBrooklyn.jpg » ou « TarteAuxFraises.jpg » plutôt qu’un cryptique « DSC00243.jpg » !
  • Comme indiqué ci-dessus, redimensionnez les images à une largeur raisonnable (1600 pixels par exemple). Il est en effet inutile d’avoir une image de plusieurs milliers de pixels de large quand nos moniteurs ne peuvent pas en afficher autant !

Personnalisation des blocs

C’est le moment de s’intéresser à la partie droite de l’écran, que l’on n’a pas encore examiné. Celle-ci fournit des options supplémentaires de modification du bloc courant, en complément de la barre d’outils située au-dessus du bloc.

Les réglages des images sous Gutenberg
Les réglages des images sous Gutenberg

Par exemple, pour les images, il est possible de changer leur taille. Ou alors, en dépliant la partie « Styles », il est possible d’obtenir une image découpée dans un disque; cet effet peut être intéressant pour des photos.

Un autre élément important pour les images est le texte alternatif. Nous reviendrons en détail dessus dans un article consacré aux images sous WordPress; en résumé, c’est le texte qui est affiché si le navigateur n’arrive pas à charger l’image. Il est aussi utilisé par les moteurs de recherche pour comprendre le contenu de l’image, d’où son importance !

Dans le cas d’un bloc de type « paragraphe », les options permettent de modifier la taille de la police, la couleur du texte, ou d’appliquer une lettrine. Voila à quoi ressemble l’introduction de cet article avec cette option sélectionnée.

Rendu de l'option "Lettrine" de Gutenberg
Rendu de l’option « Lettrine » de Gutenberg

Suivant le thème utilisé, le rendu pourra être différent. L’utilisation de la lettrine est en général intéressant lorsque l’introduction est assez longue, afin que le blog de texte soit aussi long que la lettrine.

De manière générale, je déconseille cependant d’utiliser ces options autrement que pour des changements ponctuels. Si par exemple vous voulez changer le centrage ou la couleur de tous les titres de votre blog, il sera bien plus simple de le faire via la personnalisation du thème ou en CSS, comme on le verra ultérieurement.

Réglages supplémentaires du document

Votre nouvel article a encore besoin d’un peu de peaufinage avant d’être publié. C’est donc le moment de s’intéresser à l’onglet « Document » de la barre latérale droite ! Certaines options telles que les catégories et étiquettes seront abordées dans l’article suivant.

Réglages du document sous Gutenberg
Réglages du document sous Gutenberg

Commençons plutôt par choisir l’image mise en avant. Celle-ci a divers usages suivant le thème utilisé; en général, elle est affichée en page d’accueil, dans la liste des articles. Elle peut aussi être affichée en haut de l’article.

Dans la section Image mise en avant, cliquez sur le bouton Définir l’image mise en avant, ce qui vous amène à la bibliothèque WordPress. Là, vous pouvez choisir une image déjà téléchargée, ou en sélectionner une nouvelle dans l’onglet Téléverser des fichiers.

Publication de l’article

Si vous êtes satisfait du résultat, il est temps de publier votre création ! Rien de plus simple : le bouton Publier vous permet après confirmation de faire enfin apparaître votre nouveau contenu sur le site.

L’écran de confirmation suggère d’ajouter des étiquettes, ce que l’on fera dans le chapitre suivant. Validez donc la publication en cliquant à nouveau sur « Publier », et voilà ! Votre premier article est désormais en ligne.

Il devrait donc être listé en page d’accueil de votre blog, ou en tapant directement son adresse (renseignée comme permalien) dans votre navigateur ! Autre option, si vous êtes encore dans l’éditeur Gutenberg : utiliser le bouton « Voir l’article » dans la barre d’outils WordPress, en haut de l’écran.

Modifications ultérieures

Si vous repérez une coquille ou avez simplement envie d’effectuer des modifications sur un article déjà publié, il suffit se rendre sur votre blog, visiter l’article, et d’utiliser l’option Modifier l’article de la barre d’administration. Si celle-ci n’est pas visible, il faudra vous connecter de nouveau à WordPress.

Une autre possibilité est de passer par le tableau de bord WordPress; votre article sera présent dans la liste de l’écran Articles / Tous les articles. L’option Modifier vous ramènera dans l’éditeur Gutenberg.

Une fois les corrections effectuées, il suffit de cliquer sur le bouton « Mettre à jour » (qui remplace « Publier ») en haut à droite de l’écran. Il est aussi possible d’utiliser le raccourci clavier « Control-S », comme dans la plupart des logiciels.