Écrire des articles avec Gutenberg – Mode d’emploi

Avec l’apparition du nouvel éditeur Gutenberg, rédiger un article a pris une tout autre dimension. Nous allons voir dans cet article ce qui a changé et comment bien utiliser Gutenberg pour écrire un article dans WordPress.

Vous le savez surement, mais WordPress a été conçu à la base comme une plateforme de blogging. Et qui dit blog, dit ? Articles de blog ! Les articles sont donc l’essence même de WordPress, son ADN en quelque sorte, la raison première de son existence.

Avant, l’éditeur classique de WordPress ressemblait fortement à un traitement de texte type Word ou Open Office, aujourd’hui avec l’avènement de Gutenberg, c’est bien différent ! On se rapproche plus d’un constructeur de page. Pour le meilleur ou pour le pire ? On va tenter d’y répondre dans cet article.

AU SOMMAIRE

Créer un article avec Gutenberg

Commençons par le commencement, il existe différentes façons pour ouvrir l’éditeur afin de créer un article dans WordPress, passons-les ensemble en revue.

Créer un article depuis le menu d’administration

  • Cliquer sur l’onglet “Articles”
  • Cliquer sur le bouton “Ajouter”
creer articles wordpress avec gutenberg 2

Créer un article depuis le menu du haut “Créer”

  • Cliquer sur “créer”

Ou

  • Survoler le bouton “Créer”
  • Cliquer sur “Article”
creer articles wordpress avec gutenberg 1

Créer un article depuis la liste “Tous les articles”

  • Cliquer sur “Articles” ou sur “Tous les articles”
  • Cliquer sur le bouton “Ajouter”
creer articles wordpress avec gutenberg 4

Créer un article depuis l’accueil du tableau de bord

Par défaut, l’accueil du tableau de bord propose un cadre “Brouillon rapide” qui permet de créer un début d’article.

  • Cliquer sur “Accueil”
  • Donner un titre provisoire,
  • Ecrire son idée d’article
  • Cliquer sur le bouton “Enregistrer le brouillon”
creer articles wordpress avec gutenberg 6
  • Le brouillon d’article apparait alors sous le cadre dans la liste “Vos brouillons récents”
  • Cliquer sur le nom de votre article pour ouvrir l’éditeur
creer articles wordpress avec gutenberg 7

Si vous n’avez pas le cadre “Brouillon d’article” sur votre page d’accueil, vous pouvez l’activer de la façon suivante.

creer articles wordpress avec gutenberg 5
creer articles wordpress avec gutenberg 8

Découvrir le nouvel éditeur Gutenberg

Maintenant que nous avons vu comment ouvrir l’éditeur afin de créer son premier article WordPress, voyons ensemble les fonctionnalités proposées par le nouvel éditeur Gutenberg.

L’éditeur Gutenberg c’est quoi ?

Gutenberg est le nouvel éditeur WordPress, lancé en décembre 2018 et qui a radicalement modifier la façon d’écrire et d’éditer les articles et les pages dans WordPress.

Gutenberg fonctionne comme un constructeur de page et consiste à ajouter des blocs correspondant à des fonctionnalités d’édition (bloc texte, bloc image, bloc colonnes, etc.)

L’éditeur Gutenberg a été la première étape d’une véritable révolution de WordPress. Révolution toujours en cours, puisque l’on voit doucement apparaitre les prémices du futur de WordPress avec l’arrivée du Full Site Editing. Un fonctionnement de construction par bloc étendu à l’ensemble des éléments de la structure d’un site web (menu, header, footer, etc.)

Les paramètres principaux du nouvel éditeur d’articles

Lorsque vous ouvrez l’éditeur d’article, vous vous retrouvez face à une page blanche et la première chose que vous allez repérer sont un bouton + et une phrase en gris “saisir / pour choisir un bloc”. Bienvenue dans le nouvel éditeur de blocs Gutenberg !

Mais vous allez vite vous rendre compte qu’il y a plein de fonctionnalités situées un peu partout sur la page et vous demander surement à quoi elles servent ! Alors faisons un petit tour du propriétaire !

creer articles wordpress avec gutenberg 47

La barre supérieure gauche

Tout en haut à gauche de l’éditeur d’articles, on trouve une première série de paramètres. Pour être tout à fait sincères, ce ne sont surement pas les plus utiles ni les plus utilisés.

  • Bouton “ajout de bloc” pour ouvrir l’outil général d’insertion de bloc
  • Bouton “Outil” pour passer de l’outil “modifier” à l’outil “sélectionner”
  • Boutons “Annuler” ou “Rétablir” une action
  • Bouton “Détails” pour voir le nombre de mots et d’autres détails de l’article
  • Bouton “Options” pour avoir une liste de tous les blocs utilisés dans l’article
creer articles wordpress avec gutenberg 48

La barre supérieure droite

Sur la partie supérieure droite, on retrouve des boutons très utiles et indispensables pour publier son article. On pourra afficher ou cacher la barre latérale et un bouton “options” un peu fourre tout.

  • Bouton “Prévisualiser” pour voir son article en mode brouillon.
  • Bouton “Publier” pour… publier son article
  • Bouton “Réglages” pour afficher/cacher la colonne des réglages avec les ongles “Article” et” Bloc”
  • Bouton “Options” pour afficher tout un tas d’options que l’on détaillera ci-après
creer articles wordpress avec gutenberg 49

Les options de la barre supérieure droite

En cliquant sur le bouton “Options” avec les trois petits points on ouvre une colonne avec beaucoup d’infos et dans laquelle on retrouve un autre onglet paramètres qui ouvre lui-même de nombreuses options de l’éditeur…

On sent là que les développeurs n’ont pas trop su comment ranger tous ces paramètres et cette section ressemble à un fourretout.

creer articles wordpress avec gutenberg 51

Les paramètres de la colonne options

Tout en bas de la colonne d’options de la barre supérieure gauche de l’éditeur (vous suivez ?) se trouve l’onglet “paramètres” qui ouvre une fenêtre popup avec des paramètres UX de l’éditeur d’article.

Pour résumer, les paramètres ci-dessous permettent de régler l’apparence par défaut de l’éditeur d’article.

Onglet Général

creer articles wordpress avec gutenberg 52

Onglet Apparence

creer articles wordpress avec gutenberg 53

Onglet Blocs

creer articles wordpress avec gutenberg 54

Onglet Panneaux

creer articles wordpress avec gutenberg 55

La colonne de droite

La colonne de droite, que l’on peut afficher ou non avec le bouton “Réglages” (écrou), regroupe tous les réglages généraux importants de l’article et les réglages spécifiques à chaque bloc utilisé dans l’article.

  • Onglet “Article” où l’on va retrouver les paramètres à renseigner avant de publier son article : date, auteur, slug d’URL, catégories, image mise en avant, etc.
  • Onglet “Bloc” où l’on va retrouver les réglages spécifiques d’un bloc sélectionné dans l’article.
creer articles wordpress avec gutenberg 50

Comment ajouter un bloc avec Gutenberg

L’éditeur Gutenberg de WordPress propose une série de blocs permettant de construire son article. Pour accéder à ces blocs, on a plusieurs options disponibles.

Voici les quatre façons principales d’ajouter un bloc dans un article WordPress.

creer articles wordpress avec gutenberg 23

Ajouter un bloc avec l’outil général d’insertion

Le bouton “+” en haut à gauche de l’éditeur WordPress permet d’ouvrir l’outil général d’insertion de blocs où l’on va retrouver la liste de l’ensemble des blocs Gutenberg.

creer articles wordpress avec gutenberg 25
creer articles wordpress avec gutenberg 26

Ajouter un bloc sur chaque paragraphe vide

À droite de chaque paragraphe vide, vous verrez apparaitre au survol de la souris, un bouton “+” à droite.

creer articles wordpress avec gutenberg 27

Ajouter un bloc avec le signe “/”

Sur chaque paragraphe vide il est possible d’ajouter un bloc en tapant le signe “/”

creer articles wordpress avec gutenberg 28

Vous verrez que si vous commencez à taper le nom du bloc que vous recherchez, des propositions apparaitront automatiquement.

creer articles wordpress avec gutenberg 29

Ajouter un bloc entre deux blocs

Si vous avez déjà créé des blocs dans votre article vous verrez qu’il est possible d’insérer un bloc entre deux blocs : en passant la souris, une ligne avec un bouton “+” apparait.

creer articles wordpress avec gutenberg 30

Les blocs disponibles par défaut

Une fois la liste des blocs apparue, vous allez pouvoir choisir le type de bloc qui vous intéresse. Nous allons faire un tour de toutes les possibilités qu’offre les blocs par défaut de WordPress.

Pour avoir une vision complète de l’ensemble des blocs offerts par défaut dans WordPress il faut se rendre dans l’outil général d’insertion de bloc. Pour cela nous l’avons vu, il suffit de cliquer soit sur le bouton “+” en haut à gauche, soit sur le bouton “+” à droite de chaque paragraphe vide puis sur “tout parcourir”.

Les blocs “Texte”

Il s’agit de tous les blocs permettant “d’écrire”. On y retrouve les indispensables “Paragraphe”, “Titre” ou “Liste” dont vous ne pourrez pas vous passer.

comment utiliser gutenberg editeur wordpress 14

Les blocs “Média”

Il s’agit de tous les blocs permettant d’insérer des médias : images, galerie d’images, audios, vidéos, etc.

creer articles wordpress avec gutenberg 13

Les blocs “Design”

Il s’agit de tous les blocs permettant d’améliorer la mise en forme de votre article : boutons, colonnes, séparateurs, espacement, etc.

creer articles wordpress avec gutenberg 12

Les blocs “Widget”

Il s’agit des blocs reprenant les traditionnels widgets que l’on retrouve par ailleurs.

On y trouve également le très utile “Code court” qui permet d’insérer un “shortcode”.

creer articles wordpress avec gutenberg 11

Les blocs “Thème”

Voilà les prémices du Full Site Editing dont on vous parlait plus haut. Ce sont des fonctionnalités qui permettent d’ajouter des éléments “dynamiques” par exemple une galerie de vos derniers articles.

creer articles wordpress avec gutenberg 10

Les blocs “Contenus embarqués”

Il s’agit ici des blocs permettant d’intégrer des éléments en provenance d’autres sites web comme YouTube, Twitter ou Vimeo, etc.

creer articles wordpress avec gutenberg 9

Les réglages des blocs

Après avoir ajouté un bloc, vous verrez qu’il y a différents réglages possibles qui fonctionnent toujours de la même manière quel que soit le bloc.

Lorsque l’on clique sur un bloc, deux espaces de réglages sont disponibles :

  • Les réglages principaux situés au-dessus du bloc
  • Les réglages complémentaires situés dans la barre latérale
creer articles wordpress avec gutenberg 33

Les réglages principaux identiques sur tous les blocs

En fonction des types blocs, les réglages principaux, situés au-dessus du bloc, proposeront différentes fonctionnalités. Mais certaines options sont disponibles de manière identique pour tous les blocs.

Type de bloc

Tout à fait à gauche, on trouve le symbole du type de bloc. En cliquant sur le symbole, on ouvre une liste de fonctionnalités qui permet de transformer le bloc en un autre forme de bloc.

creer articles wordpress avec gutenberg 34

creer articles wordpress avec gutenberg 39

Déplacer un bloc

Les deux fonctionnalités suivantes permettent de déplacer un bloc dans l’article.

Le premier bouton avec des points permet de déplacer le bloc où on veut dans la page sous forme de “glisser-déposer”.

Le deuxième bouton avec les flèches permet de déplacer le bloc par étape d’un bloc vers le haut ou un bloc vers le bas.

creer articles wordpress avec gutenberg 35
creer articles wordpress avec gutenberg 36

Options de bloc

Le dernier réglage identique sur tous les blocs, quelques soient le type, se situe tout à faire à droite avec le bouton à trois petits points. En cliquant sur les trois petits points, on ouvre une liste de fonctionnalités très utiles ! On vous conseille d’apprendre certains raccourcis clavier, notamment l’option “dupliquer un bloc” qui s’avèrera bien pratique.

creer articles wordpress avec gutenberg 37
creer articles wordpress avec gutenberg 38

Les réglages principaux spécifiques à chaque bloc

Toujours dans la barre supérieure sur chaque bloc, vous pourrez voir ensuite que des réglages spécifiques sont disponibles pour chaque type de bloc.

Voici quelques exemples des réglages principaux que l’on peut trouver pour les blocs les plus utilisés.

Réglages principaux du bloc “Paragraphe

  • Aligner le texte
  • Mettre en gras
  • Mettre en italique
  • Ajouter un lien
  • Options supplémentaires : barre, exposant, indice, code en ligne, etc.

Réglages principaux du bloc “Image

  • Aligner l’image
  • Ajouter un lien
  • Ajouter du texte sur l’image
  • Recadrer l’image

Réglages principaux du bloc “Titre

  • Changer le niveau de titre
  • Aligner le titre
  • Mettre en gras
  • Mettre en italique
  • Ajouter un lien
  • Options supplémentaires

Réglages principaux du “Colonnes

  • Modifier l’alignement vertical
  • Déplacer la colonne

Les réglages complémentaires

L’autre espace de réglages se situe dans la barre latérale de l’éditeur d’article. On accède à ces réglages complémentaires en cliquant sur un bloc dans l’article et/ou en cliquant sur l’onglet “Bloc” de la colonne.

Réglages complémentaires communs à tous les blocs

Le seul réglage que l’on retrouvera dans toutes les colonnes blocs est l’onglet “Avancé où l’on pourra :

  • Créer une ancre HTML
  • Ajouter une classe CSS
creer articles wordpress avec gutenberg 40

À part cet onglet “Avancé” tous les autres réglages situés dans cette colonne “Bloc” sont spécifiquement liés aux types de blocs choisis.

Voici encore une fois quelques exemples de réglages complémentaires avec les blocs les plus utilisés.

Réglages complémentaires du bloc “Paragraphe

  • Typographie
  • Couleur
  • Lettrine
creer articles wordpress avec gutenberg 42

Réglages complémentaires du bloc “Image

  • Style de l’image
  • Texte alternatif
  • Dimensions de l’image
creer articles wordpress avec gutenberg 43

Réglages complémentaires du bloc “Titre

  • Typographie
  • Couleur
creer articles wordpress avec gutenberg 41

Réglages complémentaires du bloc “Galerie

  • Nombre de colonnes
  • Taille des images
  • Recadre les images
creer articles wordpress avec gutenberg 46

Naviguer entre les blocs pour afficher les réglages

La façon la plus simple de naviguer entre les blocs et accéder aux réglages de chaque bloc, est de cliquer sur le bloc en question. Tout simplement.

Cependant, une fois que vous serez familiariser avec l’éditeur d’article Gutenberg, vous allez vite vous rendre compte qu’il est possible d’empiler des blocs à l’intérieur d’autres blocs.

Et la navigation entre les blocs se complique, car il est parfois difficile de cliquer au bon endroit pour afficher les réglages du bloc que l’on veut.

Naviguer dans les blocs empilés

Nous allons voir ensemble comment cela fonctionne et comment naviguer d’un bloc à l’autre lorsqu’ils sont empilés.

L’exemple le plus évident pour illustrer ce concept de blocs empilés, c’est celui du bloc colonne.

Nous allons créer un bloc avec deux colonnes et du contenu à l’intérieur pour pouvoir vous expliquer comment naviguer entre les empilements de blocs.

Ajouter un bloc “Colonnes”

On commence en ajoutant un bloc “Colonnes”, nous avons vu ensemble qu’il avait plusieurs façons d’ajouter un bloc, vous choisissez celle qui vous convient le mieux.

creer articles wordpress avec gutenberg 63

Choisir le format des colonnes

Par défaut, le bloc “Colonnes” propose différents formats de colonnes (format qu’il est possible de modifier par la suite)

creer articles wordpress avec gutenberg 64

Une fois notre bloc avec deux colonnes créé, on voit mieux comment est structuré le bloc : le bloc principal.

creer articles wordpress avec gutenberg 65

Le bloc d’une colonne seule

creer articles wordpress avec gutenberg 75

Insérer du contenu dans chaque colonne

Une fois nos colonnes créées on peut donc y insérer du contenu. Pour cela il suffit de cliquer sur le bouton “+” et de choisir le bloc qui nous intéresse. Ici nous allons ajouter du texte et une image dans chaque colonne.

creer articles wordpress avec gutenberg 67

Nous voilà avec nos deux colonnes et notre contenu à l’intérieur.

creer articles wordpress avec gutenberg 68

Nous allons pouvoir maintenant voir ensemble comment naviguer entre les différents blocs empilés. Le principe est simple, il s’agit de penser les blocs sous forme hiérarchique, parent/enfant.

Utiliser la fonction “vue en liste” pour naviguer entre les blocs empilés

Pour comprendre la structure de notre bloc et pouvoir naviguer entre les différents blocs, le plus simple est d’utiliser la fonction “Vue en liste”.

En cliquant sur l’icône “Vue en liste” apparait la liste de tous les blocs de notre article, dans laquelle on peut naviguer de blocs en blocs. En cliquant sur un élément de la liste, on sélectionne le bloc et on accède aux réglages.

creer articles wordpress avec gutenberg 76

En cliquant sur l’élément “Colonnes” dans la liste, on voit bien la structure de notre bloc :

  • Colonnes
    • Colonne 1
      • Paragraphe 1
      • Image 1
    • Colonne 2
      • Paragraphe 2
      • Image 2

Si je veux accéder aux réglages de l’image à l’intérieur de la première colonne, il me suffit de cliquer sur l’élément image dans la liste.

creer articles wordpress avec gutenberg 77

On voit qu’utiliser la fonction “vue en liste” peut être très pratique pour naviguer entre des blocs empilés. Le seul inconvénient est que cette fonction réduit considérablement la place réservée à notre éditeur de contenu.

Améliorer l’affichage avec la “Vue en liste”

Plusieurs options s’offrent à vous pour régler ce problème :

  • Opter pour la vue “pleine page”
  • Masquer la colonne “réglages”

La vue plein page vous permet de masquer la colonne de gauche d’administration WordPress. Pour cela, il faudra cliquer sur le bouton “Options”, puis sur “Mode plein écran”.

creer articles wordpress avec gutenberg 78

On se retrouve avec un espace d’édition un peu plus important, mais si vous n’avez pas un grand écran d’ordinateur, cela ne reste pas idéal pour continuer à écrire votre article aisément.

Pour améliorer encore le confort d’édition, vous pouvez également masquer la colonne de droite “réglages”. Pour cela il suffit de cliquer sur le bouton “réglages”.

creer articles wordpress avec gutenberg 79

Si le confort d’édition devient intéressant, en revanche ne pas avoir un accès direct aux réglages complémentaires des blocs peut rapidement devenir problématique.

À vous donc de voir quelle est la configuration qui vous convient le mieux.

Reste une autre possibilité, celle de garder la vue d’édition par défaut et de naviguer entre les blocs sans utiliser la fonction “vue en liste”.

Naviguer entre les blocs empilés à travers les réglages principaux

Retrouvons nos deux colonnes et voyons comment il est possible de naviguer entre les blocs empilés en utilisant la barre des réglages principaux des blocs.

Pour rappel, la barre des réglages principaux est la barre supérieure qui apparait lorsque l’on clique sur un bloc.

Ici nous allons cliquer sur le bloc image à l’intérieur de notre colonne.

creer articles wordpress avec gutenberg 69

On voit bien dans la barre supérieure l’icône du bloc sélectionné “Image” (bloc enfant), et à côté l’icône du bloc “Colonne” (bloc parent).

creer articles wordpress avec gutenberg 70

Voilà donc une façon plus directe de naviguer entre des blocs compilés. Le concept est simple : si un bloc est empilé à l’intérieur d’un autre bloc, son bloc “parent” sera affiché de la sorte.

Donc si on veut sélectionner le bloc “colonne” seul, on clique sur l’icône du bloc “parent”.

creer articles wordpress avec gutenberg 71

On passe alors aux réglages du bloc “ColonnE”. Et on voit apparaitre à côté l’icône du bloc parent “ColonneS”.

creer articles wordpress avec gutenberg 72

Si je veux passer au bloc parent supérieur, je vais donc encore une fois cliquer sur l’icône associée.

creer articles wordpress avec gutenberg 73

J’affiche alors les réglages du bloc parent “ColonneS”.

creer articles wordpress avec gutenberg 74

Voilà donc une autre façon de naviguer entre les blocs empilés.

Chacun trouvera des avantages et des inconvénients aux deux, l’une étant plus intuitive quand l’autre aura peut-être l’avantage d’être plus directe et rapide quand on a l’habitude de l’utiliser.

Rédiger votre premier article avec l’éditeur Gutenberg

Après ce tour complet des fonctionnalités de Gutenberg, vous pouvez commencer maintenant à écrire votre premier article !

On va voir ensemble les étapes clefs de la rédaction d’un article WordPress avec l’éditeur Gutenberg.

Préparer vos idées et vos mots clefs

C’est peut-être idiot à rappeler, mais avant toute chose, pour écrire un article, il faut avoir une idée de ce que vous allez aborder dans votre article. Ici plusieurs degrés de préparation sont possibles :

  • Au minimum, il faut que vous ayez réfléchi à un sujet à traiter. Sujet qui dans l’idéal doit aussi contenir votre mot clef principal sur lequel vous souhaitez positionner votre article. Mot clef principal qui devra être renseigné dans le titre de votre article (Titre H1)
  • L’étape au-dessus est de préparer un plan qui décline les différentes idées que vous allez aborder pour traiter mes différents angles de votre sujet dans votre article. Différentes idées qui seront déclinées sous formes de Titres H2 et développés sous formes de sous-titres et paragraphes dans votre article.
  • L’étape encore au-dessus sera de déterminer les mots clefs qui feront références à vos différentes parties, mots clefs qui devront être cohérent par rapport à votre mot clef principal et être utilisés dans le contenu de votre article (Titre H2 et paragraphes au minimum)

Ces conseils sont à prendre comme une base. Le référencement est une science (inexacte) que l’on maitrisera avec du temps et l’étude des différentes techniques existantes.

Pour ceux qui ont des boutons à l’idée de tout préparer et de tout penser en amont, il est tout à fait possible de se lancer dans un premier jet d’article, un brouillon d’idées, pour ensuite reprendre son article et le structurer en fonction des idées et mots clefs apparus.

Ouvrir l’éditeur

Nous l’avons vu, pour créer votre premier article, vous allez devoir ouvrir l’éditeur. Pour rappel, vous avez trois façons de le faire :

  • Depuis le menu latéral > Articles > Ajouter
  • Depuis le menu du haut > Créer > Article
  • Depuis la page “Tous les articles” > Ajouter

Configurer votre article

Avant de commencer à écrire votre article, nous vous conseillons d’effectuer les configurations de base afin de ne rien oublier. L’idée est de préparer votre article afin de vous concentrer ensuite sur l’écriture du contenu.

  • Saisir le titre
  • Optimiser le permalien
  • Choisir la catégorie
  • Choisir l’image mise en avant
  • Enregistrer le brouillon

Saisir le Titre

Si vous avez bien préparé votre article, vous devez être capables de rédiger un titre pertinent qui parlera du sujet de votre article en y incluant le mot clef principal sur lequel vous souhaitez vous positionner.

creer articles wordpress avec gutenberg 56

Optimiser le permalien (à des fins de SEO retirez les mots d’arrêt)

Le permalien, c’est l’adresse ou l’URL à laquelle on va avoir accès à votre article. Si vous avez bien configurer les réglages de vos permaliens en amont, il devrait s’afficher de cette manière : https://mon-domaine.com/mon-permalien

Pour optimiser votre permalien, il est recommandé de supprimer les mots d’arrêts (ou mots vides). Ce sont des mots trop communs pour avoir un intérêt en matière de SEO.

Ici par exemple, je vais enlever “mon” et “avec”.

creer articles wordpress avec gutenberg 57

Définir la catégorie et les étiquettes

Une autre étape importante est de définir dans quelle catégorie vous allez placer votre article. Il est déconseillé de multiplier les catégories pour un même article. L’idéal est de placer votre article dans une seule catégorie, cela signifiera que vous avez bien préparé les catégories de votre site WordPress.

Vous pouvez éventuellement choisir une étiquette, dans le cas où vous avez réfléchi le classement de vos articles sous deux formes différents, comme un tableau à deux entrées.

Par exemple, imaginons que nous avons un blog de voyage, et que nous avons décidé de classer nos articles par “Destination” (catégorie) et par “Thématique” (étiquettes). Imaginons que notre article traite de la visite du Musée du Louvre à Paris, on pourra alors le placer sous la catégorie “Destination > Paris” et en même temps lui appliquer une étiquette “Thématique > Activités”.

creer articles wordpress avec gutenberg 58

Choisir une image mise en avant

L’étape suivante consiste à choisir une image mise en avant. C’est l’image qui va représenter votre article.

Cette image sera affichée sur votre site web si vous avez une section “mes derniers articles” ou sur vos pages “Archives”, qui regroupent les articles d’une même catégorie.

C’est aussi l’image qui sera utilisée lorsque vous partagerez votre article sur les réseaux sociaux.

creer articles wordpress avec gutenberg 59

Enregistrer

Pour terminer la configuration de votre article, n’oubliez pas d’enregistrer vos modifications.

creer articles wordpress avec gutenberg 60

Rédiger votre article

Ouf ! Il est temps de se mettre enfin au boulot ! (Ah parce que ce n’était pas du boulot jusque-là ? Si c’était du boulot…) Il est temps de passer à la rédaction du contenu de votre article.

Vous pouvez commencer à écrire directement dans la partie dédiée à l’édition sans créer de bloc spécifique, car c’est un bloc “paragraphe” qui est appliqué par défaut. En allant à la ligne (touche “Entrer”) un nouveau bloc paragraphe est automatiquement créé pour poursuivre la rédaction.

creer articles wordpress avec gutenberg 61
creer articles wordpress avec gutenberg 62

Utiliser les blocs pour construire votre article

Vous allez construire votre article en ajoutant les blocs dont vous avez besoin pour mettre en page votre article.

Pour rappel, utilisez le signe “/” suivi du nom du bloc désiré pour insérer des blocs plus rapidement, voici quelques exemples des blocs les plus utilisés :

  • Pour insérer une image : Tapez “/image”
  • Pour insérer un titre : Tapez “/titre”
  • Pour insérer une liste : Tapez “/liste”
  • Etc.

Hiérarchie des titres

Pour rappel les hiérarchies des titres :

  • H1 – Titre de votre article
  • H2 – Titre de vos sections principales
  • H3, H4, H5, H6 – Sous-titres entre vos paragraphes

Règles à respecter

  • Vous devez utiliser des titres H2 pour séparer les grandes idées de votre article.
  • Vous n’êtes pas obligés d’utiliser des sous-titres H3, H4, H5, etc.
  • Vous devez respecter la hiérarchie des titres avec une règle simple : pas de saut de hiérarchie, c’est-à-dire que vous ne devez pas placer un H4 après un H2, ou placer un H3 comme premier titre de paragraphe, etc. Restez le plus logique possible.

Exemple de plan d’article type

Voici un plan d’article classique qui respecte les règles de base en SEO (référencement).

  • Titre de l’article (H1)
    • Paragraphe d’introduction
  • Titre de votre 1ère partie (H2)
    • Introduction de votre 1ère partie
    • Sous-titre du sous paragraphe (H3) (optionnel)
    • Paragraphe
    • Sous-titre du sous paragraphe (H3) (optionnel)
    • Paragraphe
  • Titre de votre 2ᵉ partie (H2)
    • Introduction de votre 2ᵉ partie
    • Sous-titre du sous paragraphe (H3) (optionnel)
    • Paragraphe
    • Sous-titre du sous paragraphe (H3) (optionnel)
    • Paragraphe
  • Titre de conclusion (H2)
    • Paragraphe de conclusion

Publier votre article

Votre article est prêt ? Il est temps de le publier ! Quelle émotion.

Vérifications avant publication

Avant de publier votre article, il serait dommage d’avoir oublié des choses, car sachez qu’une fois publié votre article est accessible au public, il est donc préférable qu’il soit nickel non ?

  • Relisez votre article et vérifier l’orthographe
  • Vérifier à nouveau votre configuration (Titre, Permalien, Catégorie, Image à la une)
  • Vérifiez la hiérarchie de vos titres (pas de saut hiérarchique)
  • Vérifiez la présence de votre/vos mot(s) clef(s)

Configuration des paramètres de publication

Avant de publier il est également important de configurer les paramètres de publication dans l’onglet “Article > État et visibilité”.

creer articles wordpress avec gutenberg 80
  • Publier immédiatement ou programmer à une date ultérieure
  • Choisir l’auteur de l’article

Définir le “degré” de visibilité de la publication

Par défaut, lorsque l’on publie un article, il va être visible pour tout le monde. Mais il est également possible d’en limiter l’accès :

  • Privée : pour ne le rendre visible qu’aux administrateurs/éditeurs
  • Protégé par un mot de passe : pour rendre l’accès possible uniquement aux personnes possédant le mot de passe.
creer articles wordpress avec gutenberg 81

Programmer la publication

Par défaut l’article est publié immédiatement, mais il est possible de programmer sa publication à la date et à l’heure de son choix. Une fois configuré, le bouton “publier” se transforme en “planifier”, on clique dessus et l’article sera publié à la date et à l’heure choisie.

creer articles wordpress avec gutenberg 82

Publier votre article

C’est bon ? Vous êtes sûr de vous ? Il est temps de vraiment publier votre article.

Pour cela, il suffit de cliquer sur le bouton “Publier” (ou Planifier si vous avez programmé la publication)

creer articles wordpress avec gutenberg 83

Une fois le bouton cliqué, une nouvelle fenêtre s’ouvre pour vous demander confirmation, cela évite de publier son article par mégarde !

creer articles wordpress avec gutenberg 84

Votre article est publié ! Vous pouvez le partager partout afin qu’il soit lu par le plus grand monde !

Modifier un article publié

Il est toujours possible de venir modifier un article déjà publié. On peut être mené à modifier un article publié parce qu’on a trouvé des coquilles ou des erreurs, ou parce qu’au bout de quelque temps son contenu mérite d’être mis à jour avec des nouvelles informations.

Liste des articles

Tous vos articles sont regroupés sous l’onglet “Articles > Tous les articles”.

Dans cette section vous pouvez effectuer différentes opérations :

  • Rechercher un article par mot clef
  • Trier vos articles par date ou par catégorie
  • Supprimer un article ou un groupe d’article
  • Voir la version publiée d’un article
  • Effectuer une modification rapide sur un article ou un groupe d’article
  • Ouvrir l’éditeur pour modifier un article
creer articles wordpress avec gutenberg 85 1

Modification rapide

La fonction “Modification rapide” permet de modifier les paramètres généraux d’un article ou d’un groupe d’article :

  • Titre
  • Permalien
  • Date de publication
  • Auteur
  • Catégories
  • étiquettes
  • État de publication
creer articles wordpress avec gutenberg 86

N’oubliez pas de mettre à jour vos modifications rapides.

Modifier un article

Pour modifier le contenu d’un article, il faut cliquer sur le bouton “Modifier” qui apparait au survol au-dessous du nom de l’article que vous souhaitez modifier.

creer articles wordpress avec gutenberg 87

L’éditeur va ouvrir votre article à modifier et vous allez voir deux éléments qui ont changé depuis que votre article est publié.

creer articles wordpress avec gutenberg 88
  • Bouton “Mettre à jour” : ce bouton permet de mettre à jour les modifications que vous aurez apportées à votre article. Votre article restera en ligne, mais sera mis à jour avec les nouvelles modifications.
  • Bouton “Basculer un brouillon” : permet de repasser votre article en mode brouillon. Attention si vous choisissez cette option votre article ne sera plus accessible en ligne.

Conclusion

Gutenberg apporte une toute nouvelle façon de créer des articles WordPress. Si vous ne vous y êtes pas encore mis, nous vous conseillons vraiment de franchir le pas ! Une fois pris en main, l’éditeur d’article Gutenberg s’avère en plus très agréable à utiliser.

Rappel : Désormais Gutenberg est le nouvel éditeur de texte WordPress, cependant si vous continuez d’utiliser l’éditeur classique, je vous invite à relire notre article WordPress : Le Mode d’Emploi Complet de l’éditeur classique.

A propos de l'auteur...

Avatar of Samuel Bourille

Samuel Bourille

Blogueur voyage et rédacteur web depuis 2015, j'ai la geek attitude depuis que j'ai mis le nez dans un ordinateur il y a pas mal d'années maintenant ! Wordpress est une source inépuisable de découvertes et de nouveaux défis à relever et même si l'écriture et la photographie sont ma passion première, j'avoue que j'aime beaucoup mettre les mains dans le cambouis.

2 commentaires pertinents à ce jour ;)

  • Merci pour cet article qui reprend tout ce que je connaissais déjà intuitivement. Celui-ci me permet d’utiliser les bonnes méthodes et le bon cheminement.
    Très complet et facile d’accès.

  • Bravo pour ce tuto très complet qui m’a permis de compéter mes connaissances sur cet éditeur et sur WP.