Dans WordPress 5.0, l’éditeur de contenu classique a été remplacé par un tout nouvel éditeur de blocs, appelé Gutenberg. Après plusieurs mois de béta test en mode module, l’éditeur est maintenant installé par défaut dans le coeur de WordPress

L’éditeur de blocs Gutenberg est une façon totalement nouvelle et différente de créer du contenu dans WordPress. Dans ce tutoriel, nous vous montrerons comment utiliser le nouvel éditeur de blocs Gutenberg et le maîtriser pour créer des articles et des pages de blog visuellement étonnants.

Quelle est la différence entre Gutenberg et un éditeur classique ?

Avant de nous plonger dans le nouvel éditeur, comparons et comprenons d’abord les différences entre l’éditeur de blocs Gutenberg et l’éditeur classique.

Voici à quoi ressemblait l’éditeur classique de WordPress :

Comment utiliser Gutenberg, le nouvel éditeur de Wordpress
Ancien éditeur WordPress

Si vous passez à WordPress 5.0, voici à quoi ressemble le nouvel éditeur de blocs :

Comment utiliser Gutenberg, le nouvel éditeur de Wordpress
Nouvel éditeur de bloc WordPress aussi connu sous le nom de Gutenberg

Comme vous pouvez le voir, ce sont deux éditeurs complètement différents pour créer du contenu dans WordPress.

L’ancien éditeur classique était un éditeur de texte avec des boutons de formatage très similaires à ceux de Microsoft Word.

Le nouvel éditeur utilise une approche totalement différente, appelée ‘Blocks’ (d’où le nom Block Editor).

Les blocs sont des éléments de contenu que vous ajoutez à l’écran d’édition pour créer des mises en page de contenu. Chaque élément que vous ajoutez à votre message ou à votre page est un bloc.

Vous pouvez ajouter des blocs pour chaque paragraphe, des images, des vidéos, des galeries, de l’audio, des listes et plus encore. Il y a des blocs pour tous les éléments de contenu communs et d’autres peuvent être ajoutés par des plugins WordPress ou par de simple développement permettant d’étendre les fonctionnalités de Gutenberg .

En quoi le nouvel éditeur de blocs WordPress est-il meilleur que l’éditeur classique ?

Le nouvel éditeur de blocs WordPress offre un moyen simple d’ajouter différents types de contenu à vos messages et pages.

Par exemple, auparavant, si vous vouliez ajouter une table dans votre contenu, alors vous aviez besoin d’un plugin de table séparé.

Avec le nouvel éditeur, vous pouvez simplement ajouter un bloc de tableau, sélectionner vos colonnes et lignes, et commencer à ajouter du contenu.

Comment utiliser Gutenberg, le nouvel éditeur de Wordpress
Bloc de table

Vous pouvez déplacer les éléments de contenu vers le haut et vers le bas, les éditer sous forme de blocs individuels et créer facilement du contenu riche en médias.

Plus important encore, le nouvel éditeur de blocs WordPress est facile à utiliser et à apprendre.

Cela donne un immense avantage à tous les débutants WordPress qui viennent de commencer leur premier blog ou la construction d’un site de bricolage d’entreprise.

Cela dit, voyons comment utiliser le nouvel éditeur de blocs WordPress comme un pro pour créer du contenu de qualité.

Voici ce que nous allons couvrir dans ce tutoriel Gutenberg :

  1. Utilisation de Gutenberg – Le nouvel éditeur de blocs WordPress
  2. Création d’un nouveau billet ou d’une nouvelle page de blog
  3. Comment ajouter un bloc à Gutenberg
  4. Utilisation des blocs dans le nouvel éditeur
  5. Sauvegarde et réutilisation des blocs à Gutenberg
  6. Publication et mise en page à Gutenberg
  7. Paramètres du plugin dans le nouvel éditeur
  8. Ajout de quelques blocs communs à Gutenberg
  9. Exploration de nouveaux blocs de contenu à Gutenberg
  10. Conseils bonus sur l’utilisation de Gutenberg comme un pro
  11. Ajout de blocs supplémentaires à l’éditeur de blocs Gutenberg
  12. FAQ sur Gutenberg

Prêt ? Plongeons dans le vif du sujet.

Utilisation de Gutenberg – Le nouvel éditeur de blocs WordPress

L’éditeur de blocs est conçu pour être intuitif et flexible. Bien qu’il soit différent de l’ancien éditeur WordPress, il fait tout ce que vous avez pu faire dans l’éditeur classique.

Commençons par couvrir les choses de base que vous avez faites dans l’éditeur classique, et comment elles sont faites dans l’éditeur de blocs.

Création d’un nouveau billet ou d’une nouvelle page de blog à l’aide de l’éditeur de bloc

Vous commencerez à créer un nouveau billet ou une nouvelle page de blog comme vous le feriez normalement. Cliquez simplement sur Article > Ajouter dans votre administration WordPress. Si vous créez une page, allez dans Pages > Ajouter.

Comment utiliser Gutenberg, le nouvel éditeur de Wordpress
Ajouter un nouvel article

Ceci lancera le nouvel éditeur de blocs.

Comment ajouter un bloc à Gutenberg

Le premier bloc de chaque message ou page est le titre.

Ensuite, vous pouvez utiliser la souris pour vous déplacer sous le titre ou appuyer sur la touche tabulation de votre clavier pour vous déplacer vers le bas et commencer à écrire.

Comment utiliser Gutenberg, le nouvel éditeur de Wordpress
Ajouter un titre à votre article

Par défaut, le bloc suivant est un bloc de paragraphe. Cela permet aux utilisateurs de commencer à écrire tout de suite.

Cependant, si vous voulez ajouter quelque chose de différent, alors vous pouvez cliquer sur le bouton ajouter un nouveau bloc dans le coin supérieur gauche de l’éditeur, sous un bloc existant, ou sur le côté gauche d’un bloc.

Comment utiliser Gutenberg, le nouvel éditeur de Wordpress
Ajouter un nouveau bloc dans Gutenberg

Cliquez sur le bouton pour afficher le menu d’ajout de blocs avec une barre de recherche en haut et les blocs couramment utilisés en bas.

Vous pouvez cliquer sur les onglets pour parcourir les catégories de blocs ou taper le mot-clé pour rechercher rapidement un bloc.

Comment utiliser Gutenberg, le nouvel éditeur de Wordpress
Trouver et ajouter des blocs à Gutenberg

Si vous ne voulez pas utiliser une souris pour cliquer sur le bouton, vous pouvez utiliser un raccourci clavier en tapant / pour rechercher et ajouter un bloc.

Comment utiliser Gutenberg, le nouvel éditeur de Wordpress

Utilisation des blocs dans le nouvel éditeur

Chaque bloc est livré avec sa propre barre d’outils qui apparaît sur le dessus du bloc. Les boutons de la barre d’outils changent en fonction du bloc que vous éditez.

Par exemple, dans cette capture d’écran, nous travaillons dans un bloc de paragraphes qui montre des boutons de formatage de base tels que : alignement du texte, gras, italique, lien d’insertion, et boutons barrés.

Comment utiliser Gutenberg, le nouvel éditeur de Wordpress
Chaque bloc est livré avec sa propre barre d’outils

En plus de la barre d’outils, chaque bloc peut également avoir ses propres réglages de bloc qui apparaîtraient dans la colonne de droite de votre écran d’édition.

Comment utiliser Gutenberg, le nouvel éditeur de Wordpress
Réglages des blocs

Vous pouvez déplacer les blocs vers le haut et vers le bas par simple glisser-déposer ou en cliquant sur les boutons haut et bas à côté de chaque bloc.

Comment utiliser Gutenberg, le nouvel éditeur de Wordpress
Déplacement d’un bloc de haut en bas

Sauvegarde et réutilisation de blocs à Gutenberg

L’un des avantages des blocs est qu’ils peuvent être sauvegardés et réutilisés individuellement. Ceci est particulièrement utile pour les blogueurs qui ont fréquemment besoin d’ajouter des extraits de contenu spécifiques à leurs articles.

Cliquez simplement sur le bouton de menu situé dans le coin droit de la barre d’outils de chaque bloc. Dans le menu, sélectionnez l’option ” Ajouter aux blocs réutilisables “.

Comment utiliser Gutenberg, le nouvel éditeur de Wordpress
Enregistrement d’un bloc pour réutilisation ultérieure

On vous demandera de fournir un nom pour ce bloc réutilisable. Entrez un nom pour votre bloc, puis cliquez sur le bouton Enregistrer.

L’éditeur de blocs va maintenant enregistrer le bloc en tant que bloc réutilisable.

Maintenant que vous avez sauvegardé un bloc, voyons comment ajouter le bloc réutilisable dans d’autres messages et pages WordPress sur votre site.

Modifiez simplement le message ou la page où vous voulez ajouter le bloc réutilisable. À partir de l’écran de post-édition, cliquez sur le bouton Ajouter bloc.

Vous trouverez votre bloc sauvegardé sous l’onglet’Réutilisable’. Vous pouvez aussi le trouver en tapant son nom dans la barre de recherche.

Comment utiliser Gutenberg, le nouvel éditeur de Wordpress
Insérer un bloc réutilisable

Vous pouvez passer votre souris dessus pour voir un aperçu rapide du bloc. Cliquez simplement sur le bloc pour l’insérer dans votre message ou votre page.

Tous les blocs réutilisables sont stockés dans votre base de données WordPress, et vous pouvez les gérer en cliquant sur le lien ‘gérer tous les blocs réutilisables’.

Ceci vous amènera à la page du gestionnaire de blocs. A partir de là, vous pouvez éditer ou supprimer n’importe lequel de vos blocs réutilisables. Vous pouvez également exporter des blocs réutilisables et les utiliser sur tout autre site WordPress.

Options de publication et de gestion dans l’éditeur de blocs Gutenberg

Chaque message WordPress contient beaucoup de métadonnées. Cela inclut des informations comme la date de publication, les catégories et les balises, les images présentées, les permaliens et plus encore.

Toutes ces options sont soigneusement placées dans la colonne de droite de l’écran de l’éditeur.

Comment utiliser Gutenberg, le nouvel éditeur de Wordpress
Paramètres du document dans Gutenberg le nouvel éditeur WordPress

Options de plugin à Gutenberg

Les plugins WordPress peuvent tirer parti de l’API de l’éditeur de blocs pour intégrer leurs propres paramètres dans l’écran d’édition.

Certains plugins populaires sont déjà disponibles sous forme de blocs. Par exemple, WPForms, un plugin de création de formulaires WordPress vous permet d’ajouter des formulaires dans votre contenu en utilisant un bloc widget.

Voici comment Yoast SEO vous permet de modifier vos paramètres SEO dans le nouvel éditeur :

Comment utiliser Gutenberg, le nouvel éditeur de Wordpress
Yoast SEO paramétrage dans le nouvel éditeur Gutenberg

WooCommerce est également livré avec des blocs de widgets que vous pouvez facilement ajouter à n’importe lequel de vos articles et pages WordPress.

Ajout de certains blocs communs dans le nouvel éditeur

Fondamentalement, le nouvel éditeur peut faire tout ce que l’éditeur classique a fait. Cependant, vous ferez les choses beaucoup plus rapidement et élégamment qu’avant.

Ajouter une image dans le nouvel éditeur WordPress

Il y a un bloc image prêt à l’emploi dans le nouvel éditeur WordPress. Il suffit d’ajouter le bloc, puis de télécharger un fichier image ou de le sélectionner dans la médiathèque.

Comment utiliser Gutenberg, le nouvel éditeur de Wordpress
Bloc image dans le nouvel éditeur WordPress

Vous pouvez également glisser-déposer des images depuis votre ordinateur, et l’éditeur créera automatiquement un bloc d’images pour celui-ci.

Une fois que vous avez ajouté une image, vous pourrez voir les paramètres du bloc où vous pouvez ajouter des métadonnées pour l’image comme le texte alt, la taille, et ajouter un lien vers l’image.

Comment utiliser Gutenberg, le nouvel éditeur de Wordpress
Réglages du bloc image

Ajout d’un lien dans le nouvel éditeur de blocs

L’éditeur de blocs est livré avec plusieurs blocs dans lesquels vous pouvez ajouter du texte. Le plus communément utilisé est le bloc de paragraphe qui vient avec un bouton d’insertion de lien dans la barre d’outils.

Tous les autres blocs de texte couramment utilisés incluent également un bouton de lien dans la barre d’outils.

Vous pouvez également insérer un lien en utilisant le raccourci clavier, qui est Commande + K pour Mac et CTRL + K sur les ordinateurs Windows.

Ajout d’une galerie d’images à Gutenberg

Le bloc galerie fonctionne comme le bloc image. Vous l’ajoutez, puis vous téléchargez ou sélectionnez des fichiers image.

Comment utiliser Gutenberg, le nouvel éditeur de Wordpress
Ajout d’une galerie d’images dans le nouvel éditeur WordPress

Ajout de shortcodes dans les messages WordPress en utilisant Gutenberg

Tous vos shortcodes fonctionneront comme dans l’éditeur classique. Vous pouvez simplement les ajouter à un bloc de paragraphes, ou vous pouvez utiliser le bloc shortcode.

Comment utiliser Gutenberg, le nouvel éditeur de Wordpress
Ajout d’un bloc de shortcode

Exploration de nouveaux blocs de contenu à Gutenberg

L’éditeur Gutenberg promet de résoudre quelques problèmes d’utilisabilité de longue date dans WordPress en introduisant de nouveaux blocs.

Voici quelques-uns des favoris que vous trouverez assez utiles à mon sens.

Ajouter une image à côté d’un texte dans WordPress

En utilisant l’ancien éditeur, placer du texte à côté d’une image n’était pas aussi simple que ça à faire pour des débutants. Vous pouvez le faire maintenant avec le bloc Media & Texte.

Comment utiliser Gutenberg, le nouvel éditeur de Wordpress
Bloc média et texte

Ce bloc simple est livré avec deux blocs placés côte à côte vous permettant d’ajouter facilement une image et d’ajouter du texte à côté de celle-ci.

Ajout d’un bouton dans les messages et pages WordPress

L’ajout d’un bouton à vos billets ou pages de blog était un autre désagrément dans l’éditeur classique. Soit vous deviez utiliser un plugin qui créait un raccourci pour le bouton, soit vous deviez passer en mode HTML et écrire du code.

Gutenberg est livré avec un bloc de boutons qui vous permet d’ajouter rapidement un bouton à un message ou une page.

Comment utiliser Gutenberg, le nouvel éditeur de Wordpress
Ajout d’un bloc de boutons à Gutenberg

Vous pouvez ajouter un lien pour votre bouton, changer les couleurs et choisir parmi trois styles de boutons.

Ajout de belles images de couverture dans les billets de blog et les pages d’atterrissage

Une autre fonctionnalité intéressante que vous pouvez essayer est le bloc ‘Bannière’, qui vous permet d’ajouter des images de couverture à vos messages et pages.

Une bannière est une image plus large souvent utilisée comme couverture pour une nouvelle section d’une page ou le début d’une histoire. Elles sont magnifiques et vous permettent de créer des mises en page de contenu attrayantes.

Ajoutez simplement un bloc de bannière et téléchargez l’image que vous voulez utiliser. Vous pouvez choisir une couleur de surimpression pour la couverture ou en faire une image d’arrière-plan fixe pour créer un effet de parallaxe lorsque les utilisateurs font défiler la page.

Comment utiliser Gutenberg, le nouvel éditeur de Wordpress
Le bloc image bannière dans l’éditeur Gutenberg

Création de tableaux à l’intérieur d’articles

L’éditeur classique n’avait pas de bouton pour ajouter des tableaux dans vos messages WordPress. Vous deviez utiliser un plugin ou créer une table directement en CSS et HTML personnalisés.

Le nouvel éditeur Gutenberg est livré avec un bloc Table par défaut, ce qui facilite grandement l’ajout de tables dans vos messages et pages. Ajoutez simplement le bloc, puis sélectionnez le nombre de colonnes et de lignes que vous voulez insérer.

Comment utiliser Gutenberg, le nouvel éditeur de Wordpress
Bloc de table

Vous pouvez maintenant commencer à ajouter des données aux lignes du tableau. Vous pouvez toujours ajouter des lignes et des colonnes supplémentaires si nécessaire. Il y a aussi deux options de style de base disponibles.

Création de contenu multi-colonnes

La création de contenu multi-colonnes était un autre problème que l’éditeur classique ne traitait pas du tout. L’éditeur de blocs vous permet d’ajouter des blocs de colonnes, ce qui ajoute essentiellement deux colonnes de blocs de paragraphe.

Comment utiliser Gutenberg, le nouvel éditeur de Wordpress
Contenu de plusieurs colonnes

Ce bloc de colonnes est assez flexible. Vous pouvez ajouter jusqu’à 6 colonnes consécutives et même utiliser d’autres blocs dans chaque colonne.

Conseils bonus pour utiliser Gutenberg comme un pro

En regardant le nouvel éditeur de blocs, vous vous demandez peut-être si vous passerez plus de temps à ajouter et ajuster des blocs qu’à créer du contenu réel ?

Eh bien, le nouvel éditeur est incroyablement rapide et même une utilisation très basique pendant quelques minutes vous permettra d’ajouter instantanément des blocs sans même y penser.

Bientôt, vous réaliserez à quel point votre flux de travail sera plus rapide grâce à cette nouvelle approche.

Pour les utilisateurs expérimentés, voici quelques conseils bonus pour vous aider à travailler encore plus vite avec le nouvel éditeur WordPress.

Déplacez la barre d’outils du bloc vers le haut.

Comme vous l’avez peut-être remarqué dans les captures d’écran, il y a une barre d’outils qui apparaît au-dessus de chaque bloc. Vous pouvez déplacer cette barre d’outils en haut de l’éditeur.

Cliquez simplement sur le bouton à trois points dans le coin supérieur droit de l’écran, puis sélectionnez l’option Barre d’outils supérieure.

Comment utiliser Gutenberg, le nouvel éditeur de Wordpress
Déplacer la barre d’outils du bloc vers le haut de l’éditeur

Utiliser les raccourcis clavier

Gutenberg est livré avec plusieurs raccourcis pratiques qui rendront votre flux de travail encore meilleur. Le premier que vous devriez commencer à utiliser immédiatement est le /.

Il vous suffit d’entrer / et ensuite commencer à taper, et il vous montrera les blocs correspondants que vous pouvez ajouter instantanément.

Pour d’autres raccourcis, cliquez sur le menu à trois points dans le coin supérieur droit de votre écran, puis sélectionnez “Raccourcis clavier”.

Comment utiliser Gutenberg, le nouvel éditeur de Wordpress
Lancer les raccourcis clavier

Une fenêtre contextuelle s’affichera avec la liste de tous les raccourcis clavier que vous pouvez utiliser. La liste aura différents raccourcis pour les utilisateurs Windows et Mac.

Glisser-déposer des médias pour créer automatiquement des blocs médias

Gutenberg vous permet de simplement glisser-déposer des fichiers n’importe où sur l’écran et il créera automatiquement un bloc pour vous.

Vous pouvez déposer une seule image ou un seul fichier vidéo, et il créera le bloc pour vous. Mais vous pouvez également déposer plusieurs fichiers images pour créer un bloc de galerie.

Comment utiliser Gutenberg, le nouvel éditeur de Wordpress
Glisser-déposer le bloc galerie dans le nouvel éditeur WordPress

Ajout de YouTube, Twitter, Facebook, Vimeo, Vimeo, et d’autres embarcations

Gutenberg introduit de nouveaux blocs d’intégration dans l’éditeur de blocs. Il existe un bloc pour tous les types d’intégration pris en charge, y compris YouTube, Twitter, Facebook, et plus encore.

Comment utiliser Gutenberg, le nouvel éditeur de Wordpress
Bloc de contenus embarqués

Cependant, vous pouvez simplement copier et coller l’URL d’intégration à n’importe quel moment, et cela créera automatiquement un bloc pour vous.

Par exemple, si vous avez ajouté une URL de vidéo YouTube, elle créera automatiquement un bloc YouTube embed et affichera la vidéo.

Ajout de blocs supplémentaires à l’éditeur de blocs Gutenberg dans WordPress

Le nouvel éditeur de blocs dans WordPress permet aux développeurs de créer leurs propres blocs Gutenberg. Il y a quelques plugins WordPress géniaux qui offrent des blocs pour le nouvel éditeur.

En voici quelques-uns :

Plugin Avanced Gutenberg

Comment utiliser Gutenberg, le nouvel éditeur de Wordpress
Avanced Gutenberg

Advanced Gutenberg est livré avec plusieurs blocs pour les éléments de contenu populaires comme le curseur de produit WooCommerce, des témoignages, des cartes, des compteurs, des onglets, des accordéons, et plus.

Il vous donne également un contrôle avancé sur lequel les utilisateurs peuvent accéder aux blocs en fonction de leurs rôles d’utilisateur. Vous pouvez créer des profils utilisateur et sélectionner les blocs qu’ils peuvent ajouter.

Plugin Stackable – Gutenberg Blocks

Comment utiliser Gutenberg, le nouvel éditeur de Wordpress
Stackable – Gutenberg Blocks

Stackable – Gutenberg Blocks est une collection de blocs Gutenberg magnifiquement conçus que vous pouvez utiliser sur votre site Web. Il inclut des blocs pour le conteneur, les messages, la grille de caractéristiques, l’accordéon, la boîte d’images, la liste d’icônes, l’appel à l’action, et plus encore.

Plugin Editor Blocks

Comment utiliser Gutenberg, le nouvel éditeur de Wordpress
Editor Block pour Gutenberg

Editor Blocks est une autre collection soignée de blocs Gutenberg que vous pouvez utiliser. Il est livré avec des blocs utiles comme le profil de l’auteur, l’image, le tableau des prix, les marques, les fonctionnalités, et plus encore.

FAQ sur Gutenberg – Le nouvel éditeur de blocs dans WordPress

Depuis que Gutenberg est devenu le nouvel éditeur de WordPress, beaucoup de questions sont posées. Voici les réponses à celles les plus fréquemment posées sur Gutenberg.

Qu’advient-il de mes anciens messages et pages ? Puis-je encore les éditer ?

Vos anciens messages et vos anciennes pages sont en sécurité et ne sont pas affectés par le Gutenberg. Vous pouvez encore les éditer, et Gutenberg les ouvrira automatiquement dans un bloc contenant l’éditeur classique.

Vous pouvez les éditer dans l’ancien éditeur, ou vous pouvez convertir les anciens articles en blocs et utiliser le nouvel éditeur de blocs.

Puis-je continuer à utiliser l’ancien éditeur ?

Oui, vous pouvez toujours utiliser l’ancien éditeur. Il suffit d’installer et d’activer le plugin Classic Editor.

Une fois activé, l’éditeur de blocs sera désactivé et vous pourrez continuer à utiliser l’éditeur classique.

Veuillez noter que Classic Editor sera supporté jusqu’en 2022.

Que faire si le nouvel éditeur ne fonctionne pas avec un plugin ou un thème que j’utilise ?

Le projet Gutenberg était en développement depuis longtemps. Cela a donné aux auteurs de plugins et de thèmes beaucoup de temps pour tester la compatibilité de leur code.

Cependant, il y a toujours une chance que certains plugins et thèmes ne fonctionnent pas bien avec le nouvel éditeur. Dans ce cas, vous pouvez installer le plugin classic éditor, demander au développeur d’ajouter le support Gutenberg, ou simplement trouver un plugin ou un thème alternatif.

Comment en savoir plus sur les trucs et astuces Gutenberg ?

Vous pouvez m’envoyer vos questions et j’essaierai d’y répondre aussi rapidement que possible.

J’essaierai d’écrire et publier d’autres articles autour de l’utilisation de Gutenberg mais depuis la sortie officielle de plus en plus d’articles sortent sur l’éditeur. N’hésitez pas à me demander si vous voulez que je fasse un article sur un sujet particulier

En attendant, si vous avez des questions, n’hésitez pas à me contacter en laissant un commentaire. J’essaierai d’y répondre aussi rapidement que possible.

J’espère que ce tutoriel Gutenberg vous a aidé à apprendre à utiliser le nouvel éditeur de blocs WordPress. Vous pouvez également consulter l’article sur la performance WordPress et l’importance du cache pour améliorer la vitesse de votre site Web.


siddhy

Développeur web full stack depuis une 15aine d'année dans une agence web du sud de la France et Geek depuis toujours, l'apprentissage et le partage font parti intégrante de ma philosophie au même titre que l'évolution personnelle et la sagesse bouddhiste.

25 commentaires

jourdan · 7 mars 2019 à 21 h 56 min

Merci pour ce tutoriel.
Juste une question : Lorsqu’on a insérer un bloc tableau, comment fait-on pour mettre une image dans une des colonnes du tableau à partir de la bibliothèque médias ?

    siddhy · 8 mars 2019 à 8 h 17 min

    Salut Jourdan et merci pour ton commentaire 🙂

    Pour insérer une image dans un tableau il suffit de mettre ton curseur dans la cellule du tableau, puis de cliquer sur le [+] tout en haut à gauche de l’éditeur (l’icone [+] qui se trouve juste à droite de l’item de menu [tableau de bord]). Ensuite tu choisis “Elements en ligne” puis “Inline image” et tu choisis ton image. Elle s’insérera directement dans ton tableau 😉

    Belle journée à toi

Pascal · 21 avril 2019 à 10 h 24 min

Bonjour et merci pour ce super tuto, pour des personnes de mon niveau on en apprend beaucoup et vite. Je voulais savoir quel bloc utilisé ou plugin pour insérer deux box ou l’on peut mettre “avantages” et “Inconvénients” pour un comparatif produit
J’ai bien essayé de coller une image mais on ne peut pas!
Cdt

    siddhy · 21 avril 2019 à 16 h 24 min

    Salut ! et content que mon article te plaise et t’aide 🙂
    Pour un comparatif produit le tableau html devrait suffire. Et on peut insérer une image dans un tableau facilement (voire ma réponse au commentaire précédent)
    Sinon j’ai déjà utilisé “Wp Compear” (plugin payant) pour un site et le plugin “easy-pricing-tables” me parait pas mal en gratuit (compatible Gutenberg)
    En espérant t’avoir aidé !
    Bon weekend de paques

Pascal · 21 avril 2019 à 17 h 45 min

Merci pour la réactivité et la réponse, je regarde cela

    Pascal · 24 avril 2019 à 16 h 09 min

    Bonjour
    Je reviens vers vous, je veux mettre un bouton d’appel à l’action dans une cellule de mon tableau, est ce possible ? Je n’y arrive pas le short code se mets systématiquement en dessous de la ligne du tableau
    Merci

      siddhy · 29 avril 2019 à 18 h 37 min

      Bonjour Pascal,
      Un bouton d’action n’est rien d’autre qu’un lien (une balise [a]) ou un bouton de formulaire ([input]) sur lequel une action javascript est attachée. Est ce qu’en affichant la source de ton block tu ne pourrais pas voir ce qui cloche ? Ne connaissant pas le shortcode dont tu parles je ne peux pas vraiment te dire mais en regardant la source html du block tu peux souvent voir et résoudre le problème 😉 Tu peux aussi copier/coller directement ton shortcode dans la cellule ( le [mon_short_code] )

        Pascal · 29 avril 2019 à 18 h 58 min

        Bonjour
        Merci pour la réponse, j’ai trouvé la solution, il suffisait de juste coller le shortcode correctement et le tour était joué. Je découvre Gutenberg et j’apprends, je reconnais que pour des personne comme moi qui ne connaissent pas le HTML Gutenberg et ses bloc c’est bien pratique.
        0=
        Pascal

          siddhy · 30 avril 2019 à 11 h 54 min

          Ah ben super alors 😉

          Oui Gutenberg est bien pratique. Bien plus que l’ancien editeur je trouve (beaucoup ne sont pas du même avis mais je continue de penser que Gutenberg est une avancée 🙂 )

momo-fr · 10 mai 2019 à 16 h 38 min

Très bon article, quelqu’un peut-il me dire quel est le raccourci clavier sur Mac pour supprimer un bloc (celui indiqué est inopérant).

    siddhy · 14 mai 2019 à 14 h 53 min

    Désolé mais je n’utilise pas de Mac :/
    Mais merci pour le commentaire 🙂

Pascal MOREAU · 11 mai 2019 à 10 h 19 min

Bonjour
Depuis le dernière mise à jour WordPress 5.2, je ne retrouve plus la fonction “éléments en ligne” qui sert à insérer une image dans le tableau. Est ce normal ou avez vous le même soucis ?
Merci
Pascal

    siddhy · 14 mai 2019 à 14 h 56 min

    Bonjour Pascal,

    J’avoue ne pas encore avoir mis à jour en 5.2 .. Je prévoyais de le faire ce weekend. As tu pu résoudre le soucis et retrouver la fonction “éléments en ligne” ? ça m’intéresse de connaitre la solution aussi 😉

    Merci et bonne journée

    siddhy · 14 mai 2019 à 17 h 50 min

    Re-bonjour,

    Je viens de faire la mise à jour 5.2 et les éléments en ligne sont directement accessible dans l’éditeur de la cellule du tableau (pour insérer une image en tous cas)

    Element inline dans une cellule de tableau

      Pascal MOREAU · 14 mai 2019 à 18 h 02 min

      Super, en fait avant les éléments en ligne je les récupérai dans le (+) en haut à gauche comme pour ajouter ou rechercher un bloc !!
      Merci en tous cas ça me sauve, je commençais à pester

Pascal · 5 juin 2019 à 16 h 32 min

Bonjour
Je n’arrive pas à rendre une image cliquable, dans le bloc galerie j’ai cru comprendre qu’il fallait lier l’image à l’URL de cette dernière ?
Dans le bloc galerie on ne me propose rien
Merci

    siddhy · 6 juin 2019 à 18 h 46 min

    Bonjour Pascal,

    On peut rendre les images d’une galerie cliquables grâce aux options de la galerie (colonne de droite lorsqu’on selectionne le bloc galerie) : il y a le paramètre “lier à” qu’il faut mettre à “fichier média”. Toutes les images de la galerie seront cliquable vers elle même.
    Image cliquable dans galerie

    Pour rendre une image simple (pas une galerie) il suffit de selectionner l’image et de renseigner ses options de lien dans la colonne de droite toujours (il y a un choix de lien supplémentaire pour les images simples : le lien personnalisé

      Pascal · 19 juin 2019 à 11 h 24 min

      Merci
      Désolé pour la réponse tardive, je pensais avoir répondu !
      J’ai réussi super
      Pascal

Laura · 5 juin 2019 à 18 h 50 min

Bonsoir,

Je me lance avec ce nouvel éditeur, après avoir désactivé Classic Editor afin de le prendre en mains.
Et bien, je dois dire que c’est une belle galère pour écrire mes articles de blog.
Par exemple, la taille de la police. Avant, j’utilisais une taille 12, mais là, quand je clique sur 12 ça me fait tout petit et quand je prévisualise mon article, que ce soit petit, moyen, gros, ça reste tout petite.

Je n’y comprends rien, pas très intuitif je trouve :/

Aurais-tu une idée ?

Merci

    siddhy · 6 juin 2019 à 19 h 04 min

    Bonsoir Laura,

    Je n’ai pas le même avis que toi : pour moi cet éditeur est plus pratique que l’ancien 🙂 Mais je pense que c’est une question d’habitude.

    Concernant la taille de ta police, je vois sur ton dernier article que tu as mis une taille de 12pt directement sur certains paragraphes ! et 12pt correspond à 16px (pixels)

    Je vois donc plusieurs choses :
    – mettre une taille de caractère précisement sur un paragraphe n’est pas une bonne pratique : il vaut mieux modifier globalement la taille du texte au niveau de la configuration de ton thème ça permettra d’être homogène sur tout le site sans avoir besoin de préciser la taille de caractère paragraphe par paragraphe (si tu changes de police de caractère et que 12pt ça devient trop petit alors tu vas devoir retourner sur chaque paragraphe de chaque article pour le modifier… Bon courage !)
    – Avec Gutenberg la gestion de la taille des caractères est en Pixel ! donc pour avoir une équivalence avec tes 12pt il faudrait mettre 16. Et si c’est un article déjà écrit avec ta surcharge paragraphe par paragraphe alors ton style personnalisé prendre le dessus !(en fait il y a une “balise” [SPAN] dans ton paragraphe auquelle tu ajoutes un style de 12pt : tu n’as peut etre pas fait expres mais juste fait un copié/collé depuis un logiciel de traitement de texte sur l’ancien éditeur)
    – je te conseille soit d’utiliser Gutenberg sur de nouveaux articles, soit de reprendre les anciens articles en coupant/collant l’intégralité de ton ancien texte => normalement Gutenberg reformate le texte en créant des blocs scindés et en nettoyant ce qu’il peut.

    Je te laisse regarder de ton côté mais tiens moi au courant de tes tests 🙂
    Bonne soirée bon courage

alizee · 10 juillet 2019 à 15 h 06 min

Bonjour,

Je n’arrive pas, quand je mets un bloc media et texte, à attacher un lien à l’image (pour que quand je clique sur l’image, ça me renvoie vers un autre site. Avez vous une idée de comment je pourrais faire svp?
Nous souhaiterions également changer la forme de notre site: réorganiser les dossiers, les ressources, pour rendre ça plus sympa à la lecture. Mais nous avons peur que les liens des pages et des documents changent si nous modifions les choses, et du coup que les visiteurs et partneaires qui ont déjà les liens enregistrés, dans leurs mails ou sur un document officiel, ne soient plus capable d’atteindre les pages et documents existant auparavant. Avez-vous des conseils également sur ce point?
Merci beaucoup pour votre aide.
Bien à vous
Alizée

    siddhy · 10 juillet 2019 à 18 h 58 min

    Bonjour Alizee,

    Très bonne question pour le lien sur l’image du bloc “Image & texte” ! En fait, malheureusement, c’est une fonctionnalité qui n’est pas encore là… C’est une demande forte de la communauté mais a priori ce n’est pas encore au gout du jour : https://wordpress.org/support/topic/feature-request-media-text-block-image-link/

    Pour ta 2eme question je ne vois pas exactement ce que tu veux dire. Remanier l’arborescence et les ressources est faisable mais il faut penser aux Redirections 301 (pour que l’ancienne url soit redirigée vers le nouveau automatiquement. Le module [redirection] devrait te permettre de faire ces redirections simplement) et au référencement en le faisant. Mais en faisant les choses avec rigueur ça devrait bien se passer 🙂

    Merci de me lire et pour le commentaire !
    Belle fin de journée

Pascal · 15 juillet 2019 à 11 h 19 min

Bonjour SIDDHY
Depuis hier je ne peux plus mettre de sommaire sur mes articles avec Generatepress ?
De plus sur les articles déjà en place le sommaire ne fonctionne plus non plus ?
Merci

    siddhy · 15 juillet 2019 à 12 h 50 min

    Bonjour Pascal,

    J’avoue ne pas avoir tellement utilisé le thème GeneratePress mais a priori il a dû se passer quelque chose pour que le sommaire ne fonctionne plus. Une mise à jour du coeur de WordPress peut etre ? Est ce que la fonctionnalité de sommaire vient avec le thème ou avec un module supplémentaire ? Il faudrait regarder le support du thème ou module pour voir s’il n’y aurait pas une mise à jour corrective pour ça.

    Sinon il faut regarder dans les logs pour voir les erreurs qui s’affichent.

    Je suis désolé mais c’est un peu compliqué de pouvoir répondre à ta question sans avoir d’info supplémentaires. Peut etre qu’un autre lecteur aurait déjà eu une erreur similaire ?

      Pascal · 15 juillet 2019 à 18 h 22 min

      Merci Siddhy
      En fait je me suis aperçu que l’extension Advanced Gutenberg était désactivée, je ne sais pas pour qu’elle raison ? Tout fonctionne de retour.
      Pascal

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *