1 Fév, 2022

Éditer une page avec Gutenberg

L’accès aux pages du site

Pour commencer vous récupérez votre URL de connexion et vous l’entrez dans votre navigateur internet.

Si vous avez rentré une URL valide vous devriez arriver sur une page qui vous demande de vous connecter de ce genre

Vous rentrez donc les informations que nous avons dû vous partager dans ces champs et vous arriverez sur la page d’accueil du back office de WordPress qui doit ressembler à cela :

Quand vous êtes arrivés sur cette page vous pouvez cliquer sur le lien au bout de la flèche bleue afin de visualiser votre site tel qu’il est actuellement ou bien cliquer sur le lien au bout de la flèche rouge afin d’accéder au menu qui nous servira à créer votre article comme son nom l’indique.

L’édition d’une page

Une fois que vous êtes dans le menu le seul bouton qui nous intéresse pour le moment est le bouton « ajouter » qui permet de créer un nouvel article.

Dans notre cas vous allez refuser toute mise en page qui pourrait vous être proposée par un constructeur de page qui pourrait être installé sur le site afin de se concentrer sur la mise en page de Gutenberg (celle de base).

Si vous avez tout bien effectué vous devez être sur la page suivante ou une ressemblante (le bouton « utiliser le constructeur divi » n’est pas forcément présent mais ce n’est pas un souci) :

Vous pouvez renseigner les informations que vous voulez dans les champs au centre de la page mais vous pouvez aussi rajouter différents types de contenus en cliquant sur le petit + noir au bout du champ destiné au texte de l’article si vous le souhaitez.

Il est intéressant de rappeler que les titres d’une page doivent suivre une structure simple : Le titre principal de la page doit être un h1 et le reste des titres doivent se découper en suivant la logique numérique h1>h2>h3>h4.

Les sous-titres seront des h2, si vous avez des listes en dessous d’un h2 cela devient un h3 et même logique pour le h4 etc. Bien attribuer ces propriétés aux titres est essentiel car Google sévit à ce propos.

Si vous souhaitez éditer le texte de manière « traditionnelle » vous pouvez tout simplement sélectionner le texte et l’éditer avec le petit menu qui s’ouvre une fois un texte tapé, ce sont des modifications classiques de bureautique.

Si vous voulez ajouter un contenu différent vous pouvez cliquer sur le fameux petit + noir à droite du champ de saisie de texte et cliquer sur le type de contenu que vous désirez ajouter comme ci-dessous :

Une fois que vous avez créé plusieurs blocs des nouvelles options se révèlent :

Le premier bouton permet de changer le type de bloc que vous allez éditer, le second vous permet de déplacer le bloc créé dans la page en restant cliqué sur le bouton et en déplaçant le bloc là ou vous le souhaitez dans la page. Cette manipulation évite d’effacer et recréer des blocs à chaque fois. Le troisième reprend le principe du précédent mais en simplifié, vous pouvez déplacer d’un cran le bloc vers le haut ou le bas en un clic. Le quatrième bouton vous permet de régler l’alignement de votre contenu. Le cinquième transforme le texte en gras, le sixième en italique. Le septième vous permet de lier un lien à un extrait ou le contenu en son entièreté. La petite flèche vous permet d’ouvrir des options avancées (pour des modifications basiques le bouton couleur du texte peut vous servir) :

Les derniers trois petits points vous ouvre ce menu :

Le plus intéressant de ce menu pour notre tuto reste le bouton « Ajouter aux blocs réutilisables » qui permet de sauvegarder un exemple de bloc et le réutiliser à n’importe quel moment puisqu’il apparaîtra désormais directement dans le menu d’ajout de blocs.

Sur la droite de votre écran vous pouvez accéder à beaucoup de paramètres différents qui ne nous intéressent pas tous pour ce tutoriel.

Lorsque vous crééz un article vous pouvez simplement renseigner une catégorie en ouvrant le menu déroulant « Catégorie » et en sélectionnant une catégorie parmi celles que vous avez créées auparavant.

Si vous souhaitez assigner une image à votre article il vous suffit de cliquer sur le menu déroulant « image mise en avant » et de renseigner une image via le menu qui s’ouvre lorsque vous cliquez sur le carré gris du menu déroulant.

Ce fameux menu vous propose 2 nouveaux sous-menus qui ont tous les deux pour finalité d’uploader une image :

L’onglet Médiathèque vous permet de choisir une image parmi celles déjà enregistrées sur le site et de l’envoyer en un clic.
L’onglet Téléverser vous permet d’intégrer une nouvelle image à la médiathèque et la lier à votre article en glissant un fichier de votre ordinateur dans le menu.

Une fois que vous avez cliqué sur le bouton « Définir l’image mise en avant » en bas à droite en bleu vous pouvez désormais voir ce que donne le rendu de votre article via l’onglet prévisualisation en haut à droite.

Les modules d’édition de Gutemberg

Le module paragraphe

Le premier qui vous est proposé vous permet d’écrire des paragraphes comme son nom l’indique, de la même manière que les outils de bureautique classiques.

Le module image

Le second vous permet d’ajouter une image de différentes manières. Soit vous importez une image de votre bureau ou une source externe, soit vous pouvez regarder dans la bibliothèque de média du site si elle a déjà été importée, enfin vous pouvez utiliser une image en renseignant uniquement l’url de celle-ci.

Le module titre

Le troisième est très simple cela vous permet d’intégrer un nouveau titre dans la page, faites attention à bien respecter l’ordre des titres de votre page (h1>h2>h3>h4).

Le module galerie

Le quatrième (le bloc galerie) est similaire à celui de l’image mais vous permet d’afficher plusieurs images dans un seul bloc

Le module vidéo audio

Les blocs audio et vidéo fonctionnent de la même manière que celui de l’image.

Le référencement

Avant de publier votre article il est nécessaire de changer encore deux petits champs afin d’améliorer votre référencement et par conséquent la visibilité de votre contenu.

Comme vous pouvez le voir dans la capture d’écran ce sont les deux champs indiqués par les flèches rouges qu’il faut changer, pour le moment il y a des textes ou des variables définies par défaut par le plugin mais notre objectif c’est de les changer avec du contenu pertinent en lien avec l’article qui vient d’être créé.

Dans la section « titre SEO » il vous faut renseigner le titre avec lequel vos pages seront affichées sur les moteurs de recherche lorsque vous publierez vos articles/pages à l’avenir. Par défaut ce sont des variables qui reprennent des éléments basiques du site, de l’article ou autre mais le but est d’indiquer à Google que nous savons ce que nous voulons afficher.

Dans la seconde section vous allez renseigner la « meta description » comme vous pouvez le voir dans l’exemple au-dessus de ces champs (cela correspond au texte qui se trouve en dessous du titre de la page lors d’une recherche Google). Cette description apparait dans le but de décrire à l’utilisateur qui fait sa recherche ce que contient la page et ce qu’il peut y trouver ou non.

Pour ceux qui s’y connaissent un peu vous pouvez facilement ajouter une variable au lieu d’un texte en dur avec les boutons « Insert variable » mais il vaut mieux éviter en général et préférer écrire du contenu personnalisé à chaque fois.

Une fois toutes ces modifications effectuées vous pouvez mettre en ligne votre travail en appuyant sur le bouton publier en haut à droite de votre écran.

L’astuce pratique

Si vous avez réussi vous pouvez désormais voir votre article lorsque vous revenez sur la page « Articles » dans la liste globale.

Lorsque vous passez votre souris sur l’article vous avez accès à certains réglages génériques. Si vous cliquez sur « Modification rapide » vous pouvez changer de catégorie, de titre d’article ou autre en 2-3 clics.

Si le fonctionnement et l’utilisation de WordPress et de Gutenberg vous intéressent pour la création de votre site web ou boutique en ligne, n’hésitez pas à utiliser le formulaire ci-dessous, pour prendre directement contact avec notre pôle WordPress, qui vous guidera étape par étape dans la mise en place des outils adaptés à votre projet.