Editions ENI Livres | Vidéos | e-Formations
La mise en forme du contenu
Les objectifs
Dans ce chapitre, nous allons étudier l’utilisation de Gutenberg et de ses blocs pour la conception des contenus, que ce soit pour les articles ou les pages. La conception des contenus ne passe plus par un unique champ de saisie avec une barre d’outils de mise en forme unique. La conception des contenus utilise des blocs typés. Pour ajouter un type de contenu, vous allez utiliser un bloc de type dédié. Pour ajouter un titre, vous allez utiliser un bloc de type Titre, pour ajouter une image, vous utiliserez un bloc de type Image, pour une liste, un bloc Liste, etc.
L’écran de conception des contenus
L’écran de conception des contenus des articles et des pages, est très similaire.
Voici l’écran de conception d’un nouvel article avec tous les volets de la colonne latérale de droite fermés :
Et voici celui d’une page :
Sur la droite, seuls les volets des onglets Article et Page diffèrent.
L’interface de rédaction des articles et des pages est constituée de plusieurs parties.
Dans la partie supérieure, vous trouvez la barre d’outils :
Voici les boutons dans l’ordre d’affichage et leur fonction :
-
Le bouton
avec le logo WordPress permet de revenir dans
l’administration générale du site. -
Le bouton Ajouter un bloc
affiche la liste des blocs de contenu accessibles
pour insérer du contenu. En voici un extrait :
-
Le bouton Modes
permet de choisir le mode de travail sur les
blocs. Vous pouvez utiliser le mode Modifier,
qui est le mode par défaut, ou le mode Sélectionner pour
sélectionner les blocs de contenu.
-
Les boutons Annuler et Rétablir
permettent d’annuler la dernière
opération et de la rétablir si besoin est. -
Le bouton Détails
affiche des informations sur le contenu de l’article
ou de la page.
-
Le bouton Contours
permet d’afficher la liste des blocs
utilisés dans la rédaction....
Gérer les blocs
1. Utiliser le premier bloc
Sous le titre du contenu, vous disposez d’un premier bloc qui est par défaut un bloc de type Paragraphe.
Cliquez dans ce bloc et saisissez du texte.
2. Ajouter un bloc
Pour ajouter un autre bloc, vous avez plusieurs solutions. La première consiste à utiliser le premier bouton de la barre d’outils.
Cliquez sur le bouton Ajouter un bloc.
Dans le menu qui s’ouvre, choisissez le type de bloc que vous souhaitez.
Pour cet exemple, c’est un bloc Paragraphe qui est sélectionné. Le nouveau bloc de paragraphe est inséré après le bloc qui est actif, ou après le dernier bloc, quand aucun bloc n’est sélectionné.
Notez dès maintenant que vous pouvez utiliser le champ de recherche placé en haut de la liste des blocs pour trouver plus rapidement un bloc.
La deuxième solution est d’utiliser le menu des options des blocs qui est symbolisé par les trois points verticaux. Ce menu est systématiquement affiché tout à droite de la barre d’outils de mise en forme de tous les blocs. Voici ce menu dans la barre d’outils d’un bloc de type Paragraphe :
Voici le menu local déroulé :
Dans ce menu, vous avez les éléments Insérer avant et Insérer après.
-
Utiliser Insérer avant si vous souhaitez ajouter...
Le bloc Paragraphe
1. La barre de mise en forme
Le bloc Paragraphe fait partie de la catégorie Texte. Souvenez-vous que vous avez un paragraphe par bloc. La barre de mise en forme des blocs de type Paragraphe contient les boutons classiques pour formater le texte.
Vous trouvez les boutons d’alignement :
-
Aligner le texte à gauche.
-
Centrer le texte.
-
Aligner le texte à droite.
Les boutons de style :
-
Gras.
-
Italique.
Ensuite, le bouton pour créer des liens hypertextes :
Sélectionnez le texte sur lequel les visiteurs vont cliquer.
Cliquez sur le bouton Lien.
Dans ce premier exemple, nous allons cibler une page d’un site web extérieur au vôtre.
Dans le champ de saisie, indiquez l’adresse web de la page du site à cibler.
Dans cet exemple WordPress a reconnu l’URL indiquée et il l’affiche comme étant valide.
Vous pouvez cliquer sur le bouton Ouvrir dans un nouvel onglet pour que la page ciblée s’ouvre dans un nouvel onglet du navigateur du visiteur.
Validez avec la touche Entrée de votre clavier.
Pour modifier le lien, cliquez dans celui-ci.
Vous pouvez tester le lien en cliquant sur son URL.
Puis cliquez sur le bouton Modifier pour modifier le lien.
Vous retrouvez l’écran précédent.
Faites les modifications voulues et validez-les.
Pour supprimer un lien, cliquez dans le lien et cliquez sur le bouton Supprimer le lien.
Voyons maintenant comment insérer...
Le bloc Titre
1. Insérer un titre
Le bloc Titre fait partie de la catégorie Texte.
Insérez un bloc de type Titre et saisissez son texte.
2. La barre de mise en forme
La barre de mise en forme des titres permet de modifier le niveau de ceux-ci. Par défaut, c’est un niveau de titre 2 qui est utilisé, c’est un H2 en HTML. Le niveau 1 est réservé usuellement au titre de l’article ou de la page. Plus le niveau est élevé, plus l’importance est grande. Un titre de niveau H2 est donc plus important qu’un titre de niveau H4.
Pour modifier le niveau de titre, utilisez les trois boutons H2, H3 ou H4.
Vous avez aussi à votre disposition les boutons pour modifier les alignements du bloc et du texte
Vous retrouvez les boutons Gras, Italique, Lien et les options de mise en forme supplémentaires, vus précédemment.
Voici les paramètres d’alignement du bloc :
-
Grande largeur affiche le titre sur toute la largeur de la page, mais en laissant des marges à gauche et à droite.
-
Pleine largeur affiche le titre sur toute la largeur de la page, sans utiliser de marges à gauche ni à droite.
3. Les autres volets
Dans la colonne latérale de droite, dans l’onglet Bloc, vous retrouvez les volets Typographie, Couleur et Avancé vus précédemment.
Le bloc Liste
Le bloc Liste fait partie de la catégorie Texte. Le bloc Liste permet d’insérer des listes à puces et des listes numérotées.
Quand le bloc est inséré, saisissez la liste en allant à la ligne après chaque item, avec la touche Entrée du clavier.
La mise en forme des listes se fait uniquement dans la barre d’outils du bloc.
Par défaut, la liste est à puces et elle est nommée liste non-ordonnée.
Pour avoir une liste numérotée, cliquez sur le bouton Convertir en liste ordonnée.
Pour créer des listes imbriquées, utilisez les boutons Indenter l’élément de la liste et Désindenter l’élément de la liste.
Cliquez dans un élément de la liste.
Pour imbriquer cet élément, cliquez sur le bouton Indenter l’élément de la liste.
Pour supprimer une imbrication, cliquez sur le bouton Désindenter l’élément de la liste.
Dans la colonne latérale de droite, dans l’onglet Bloc, vous retrouvez les volets Typographie et Couleur vus précédemment.
Le bloc Image
1. Insérer une image
Le bloc Image fait partie de la catégorie Média. Lorsque vous choisissez d’insérer un bloc de type Image, Gutenberg vous propose plusieurs méthodes pour ajouter une image :
Vous pouvez :
-
Téléverser permet d’afficher la fenêtre de sélection de fichier de votre ordinateur afin que vous puissiez sélectionner l’image voulue. L’image sera alors automatiquement ajoutée à la bibliothèque de votre site.
-
Médiathèque vous ouvre la fenêtre de sélection des médias de la bibliothèque de votre site.
Cliquez sur l’image que vous souhaitez pour la sélectionner.
Cliquez sur le bouton Sélectionner.
-
Insérer à partir d’une adresse web permet de faire un copier/coller de l’adresse web d’une image déjà publiée sur le Web. Mais il faut faire attention aux droits d’auteur et à la pérennité de cette image publiée.
Quand l’image est insérée, vous devez saisir une légende, si cela n’est pas déjà fait.
Vous pouvez mettre en forme cette légende.
2. La barre de mise en forme
Lorsque l’image est sélectionnée, vous pouvez en changer, si elle ne vous convient pas, en cliquant sur le bouton...
Le bloc Galerie
1. Sélectionner les images de la galerie
Le bloc Galerie fait partie de la catégorie MÉDIA. Le bloc Galerie permet d’afficher une galerie d’images. Lorsque vous insérez un bloc Galerie, Gutenberg vous demande la source des images devant constituer cette galerie.
Vous retrouvez les deux boutons classiques Téléverser et Médiathèque.
Sélectionnez les fichiers à utiliser dans la galerie.
Pour désélectionner une image, cliquez sur le bouton en haut à droite, en forme de X.
Cliquez sur le bouton Créer une nouvelle galerie.
Saisissez la description de chaque image.
Cliquez sur le bouton Insérer la galerie.
La galerie est insérée.
Puis saisissez la légende de la galerie.
Vous visualisez les boutons Téléverser et Médiathèque, pour ajouter une autre image à la galerie.
Pour modifier la galerie, cliquez sur l’image à modifier et utilisez les boutons de mise en forme.
Vous pouvez ajouter et supprimer des images de la galerie.
2. La mise en forme de la galerie
Dans l’onglet Bloc, dans le volet Réglages de la galerie, à l’aide du champ Colonnes, vous pouvez indiquer combien de colonnes vous souhaitez avoir pour cette galerie.
Laissez activée l’option Recadrer les images afin que les images soient...
Le bloc Bannière
1. Insérer l’image de la bannière
Le bloc Bannière fait partie de la catégorie MÉDIA. Le bloc Bannière va permettre d’insérer une image avec un effet de parallaxe quand les visiteurs vont utiliser la barre de défilement. Pensez à utiliser une image de grande taille pour un meilleur affichage.
Vous retrouvez les mêmes méthodes que précédemment pour sélectionner une image.
Lorsque l’image est sélectionnée, Gutenberg vous demande d’ajouter un titre qui s’affichera au-dessus de l’image.
Saisissez un titre que vous pouvez mettre en forme avec la barre d’outils ou avec le volet Typographie.
2. La mise en forme de la bannière
La mise en forme de la bannière et de l’effet de parallaxe se font dans l’onglet Bloc.
Pour avoir l’effet de parallaxe, dans le volet Réglages des médias, cochez le bouton Arrière-plan fixe.
Dans le volet Dimensions, vous pouvez modifier la Hauteur minimale de la bannière.
Dans le volet Calque de superposition, choisissez la Couleur du calque qui s’affichera au-dessus de l’image et déterminez l’Opacité du calque, c’est-à-dire sa transparence.
Dans le volet Espacement, vous pouvez modifier la Marge interne, c’est-à-dire l’espace entre l’image...
Le multimédia
1. Le bloc Vidéo
Le bloc Vidéo fait partie de la catégorie MÉDIA. Le bloc Vidéo va permettre de créer un lien vers une vidéo déjà publiée sur une plateforme de partage. Cette solution est la plus facile, la plus efficace pour ajouter une vidéo à votre site et surtout la plus économe en termes de capacité de stockage puisque le fichier de la vidéo n’est pas hébergé dans votre espace disque.
Quand vous insérez un bloc Vidéo, Gutenberg vous demande sa source :
-
Téléverser permet d’ouvrir la fenêtre de sélection de fichiers de votre ordinateur. Le fichier vidéo sera alors placé dans la bibliothèque des médias de votre site WordPress.
-
Médiathèque affiche la fenêtre de sélection de médias de la bibliothèque de votre site.
-
Insérer à partir d’une URL permet de faire un copier/coller de l’URL d’une vidéo déjà publiée.
Copiez l’URL de la vidéo que vous souhaitez insérer.
Cliquez sur le bouton Insérer à partir d’une URL.
Dans le champ, collez l’URL copiée.
Validez la saisie.
Saisissez la légende.
Pour modifier la vidéo, cliquez sur le bouton Modifier l’URL...
Le bloc Média et texte
Le bloc Média & texte fait partie de la catégorie MÉDIA. Ce bloc permet de créer des mises en page élaborées avec une image qui sera affichée à côté d’un texte.
Lorsque vous insérez ce bloc, WordPress vous demande d’indiquer la source de l’image et de saisir le texte associé à cette image.
Ajoutez une image et saisissez le texte.
Vous pouvez redimensionner l’image en utilisant la poignée bleue sur le côté droit de l’image sélectionnée.
Cliquez dans le texte pour en effectuer la mise en forme.
Par défaut, l’image est placée à gauche du texte :
Pour placer l’image à droite, cliquez sur le bouton suivant :
Le bouton Modifier l’alignement vertical vous permet de choisir l’alignement vertical entre l’image et le texte. Initialement l’alignement est centré. Dans cet exemple, l’alignement est en haut, le texte est donc aligné sur le haut du bloc, tout comme l’image.
Le bloc Tableau
Le bloc Tableau fait partie de la catégorie TEXTE. Le bloc Tableau va permettre d’insérer des tableaux dans vos contenus. Lors de l’insertion de ce bloc, Gutenberg vous demande combien de colonnes et de lignes vous souhaitez avoir pour votre tableau. Sachant que vous pourrez par la suite modifier ces nombres.
Saisissez les valeurs souhaitées et cliquez sur le bouton Créer un tableau.
Saisissez les données dans le tableau en utilisant la touche Tab pour passer d’une cellule à l’autre.
Pour modifier la structure du tableau, cliquez dans une cellule.
La modification se fait par rapport à la cellule qui est sélectionnée, qui contient le point d’insertion.
Dans la barre d’outils, cliquez sur le bouton Modifier le tableau et choisissez l’item permettant d’ajouter ou de supprimer une ligne ou une colonne.
Dans l’onglet Bloc, dans le volet Styles, sélectionnez le style voulu : Par défaut ou Rayures pour avoir des lignes alternées avec une couleur de fond gris clair.
Dans l’onglet Bloc, dans le volet Réglages du tableau, vous pouvez cocher l’option Cellules de tableau à largeur fixe, afin que les cellules aient toutes la même largeur.
Les boutons Section d’en-tête et Section de pied de page permettent d’avoir une première ligne et une dernière...
Le bloc Colonnes
Le bloc Colonnes fait partie de la catégorie APPARENCE. Ce bloc va vous permettre d’afficher du texte en colonnes.
Dès que vous insérez le bloc, vous devez indiquer le nombre et les dimensions des colonnes.
Dans cet exemple, il s’agit de deux de dimensions égales : 50/50, l’unité étant le pourcentage.
Les colonnes sont insérées :
Dans la première colonne cliquez sur le bouton + pour ajouter un bloc de contenu.
Pour cet exemple, c’est un Paragraphe qui est choisi et du texte y est ajouté.
Faites de même pour la deuxième colonne :
Vous avez à votre disposition la barre d’outils et les volets pour mettre en forme les textes des paragraphes, comme vous l’avez vu précédemment.
Pour mettre en forme les colonnes et le bloc, vous devez les sélectionner.
Cliquez dans un paragraphe de texte.
Dans la barre d’outils, passez le pointeur de la souris sur le bouton du type de bloc, Paragraphe dans cet exemple. Un autre bouton apparaît alors pour sélectionner l’élément parent, la Colonne.
La colonne est sélectionnée :
Dans l’onglet Bloc, dans le volet Réglages de la colonne, vous pouvez modifier sa Largeur en pourcentage.
La largeur des deux colonnes est mise à jour.
Pour sélectionner le bloc, faites...
Le bloc Classique
Le bloc Classique fait partie de la catégorie TEXTE. Ce bloc permet de retrouver l’ancien éditeur de contenu, TinyMCE, qui était présent avant cette version 5 de WordPress.
D’autres blocs de mise en forme
Dans la catégorie TEXTE, Gutenberg vous propose plusieurs blocs spécialisés et d’usage moins courant :
-
Code, ce bloc permet de saisir du code tout en respectant les espaces, les tabulations et les indentations.
-
Préformaté, le texte saisi conservera tous les espaces supplémentaires et sera affiché avec une police de caractères à espace fixe, de type Courrier.
-
Citation et Citation en exergue permettent d’afficher une citation avec des mises en forme spécifiques
-
Couplet utilise une mise en forme particulière pour afficher un extrait d’une chanson ou d’une poésie.
D’autres blocs de mise en page
1. Le bloc Lire la suite
Par défaut, tout le contenu d’un article est affiché en page d’accueil. Cela n’est pas forcément très pratique pour les visiteurs car la page d’accueil peut être très chargée et longue à faire défiler. Le bloc Lire la suite de la catégorie APPARENCE permet d’afficher uniquement le début du contenu d’un article.
Affichez le bloc qui fait office d’introduction à votre article.
Après ce bloc « d’introduction », insérez le bloc Lire la suite.
Vous pouvez modifier le texte LIRE LA SUITE.
Voici l’affichage obtenu sur la page d’accueil, avec le thème par défaut Twenty Twenty-One. Cet affichage dépend totalement du thème que vous allez utiliser.
2. Le bloc Saut de page
Il n’est pas toujours très agréable d’utiliser la barre de défilement d’un très long article pour afficher le bas de celui-ci. Le bloc Saut de page de la catégorie APPARENCE permet de créer une pagination automatique là où vous le souhaitez dans votre article. Vous pouvez insérer plusieurs blocs de ce type lorsque vous avez des articles très longs, avec beaucoup de contenu.
Il n’y a pas de paramètre pour ce bloc.
Voici l’affichage...
Les blocs de type Widgets
Dans des chapitres précédents, nous avons vu l’utilisation des widgets liés aux contenus. Eh bien Gutenberg nous propose d’utiliser certains d’entre eux, directement dans les contenus rédactionnels. Ces blocs sont classés dans la catégorie WIDGETS.
1. Le bloc Derniers articles
Le bloc Derniers articles permet d’insérer le widget qui affiche les derniers articles publiés.
Par défaut, les articles récents sont affichés en liste. Dans la barre de mise en forme, c’est le bouton Vue liste qui est actif.
Vous pouvez afficher les articles en grille avec le bouton Vue grille.
Pour paramétrer les articles affichés, dans la colonne latérale de droite, dans l’onglet Bloc, utilisez les paramètres disponibles dans les volets Styles, Réglages de contenu de publication, Réglages de l’image mise en avant et Tri et filtrage.
2. Le bloc Catégories
Le bloc Catégories permet d’afficher la liste de toutes les catégories d’articles dans un contenu. Notez que ce bloc affiche aussi les catégories n’ayant pas d’articles.
Pour paramétrer les catégories, dans la colonne latérale de droite, dans l’onglet Bloc, utilisez les paramètres disponibles dans le volet Réglages des catégories.
3. Le bloc Archives...
Les blocs des Contenus embarqués
Les blocs des Contenus embarqués permettent d’afficher dans un article ou dans une page, des contenus provenant d’autres systèmes de publication, comme Twitter, Facebook, Instagram, Flickr... Gutenberg nous propose plus d’une dizaine de contenus embarqués. Voyons un exemple avec Twitter.
Insérez un bloc de type CONTENUS EMBARQUÉS et choisissez Twitter.
Dans le champ de saisie, indiquez l’URL du compte Twitter voulu.
Cliquez sur le bouton Embarquer.
En bas du bloc, vous pouvez saisir une légende.
Pour paramétrer l’affichage du contenu embarqué de type Twitter, dans la colonne latérale de droite, dans l’onglet Bloc, utilisez dans le volet Réglages des médias, l’option Redimensionner pour les petits appareils, afin d’avoir un affichage optimisé pour les smartphones.
Les blocs pour le design
1. Placer les blocs pour le design
WordPress propose plusieurs blocs qui sont liés au design et au thème du site. Vous pouvez placer ces blocs là où vous le souhaitez, dans des articles et des pages. Mais surtout, vous pourrez placer ces blocs dans les emplacements supplémentaires proposés par les thèmes que vous utiliserez : en-têtes et pieds de page, colonnes latérales…
2. Le bloc des boutons
Le bloc Boutons de la catégorie Design permet aux visiteurs d’effectuer une action en cliquant sur un bouton. Cette action peut être, par exemple, la possibilité de revenir à la page d’accueil du site ou sur une autre page.
Dans la catégorie Design, insérez le bloc Boutons.
Le bloc des boutons est inséré :
Dans le champ du bouton, saisissez le libellé voulu.
Pour ajouter un lien sur le bouton, dans la barre d’outils du bloc, cliquez sur le bouton Lien.
Dans cet exemple, le lien pointe vers la page d’accueil en local :
Pour mettre en forme le bouton, dans la colonne latérale de droite, dans l’onglet Bloc, utilisez les différents volets disponibles.
-
Le volet Styles permet de choisir un style de bouton prédéfini :
-
Le volet Typographie permet de modifier la taille de caractères du libellé du bouton :
-
Le volet Couleur permet de modifier les couleurs du texte et de l’arrière-plan :
-
Le volet Réglages de largeur permet de modifier la largeur du bouton :
Dans ce même bloc, vous pouvez ajouter d’autres boutons....
Les blocs réutilisables
1. Utiliser les blocs réutilisables
Dans la rédaction des sites web, il peut arriver que certains contenus soient toujours les mêmes. Nous pouvons parfaitement imaginer d’avoir la photo du rédacteur et ses informations de contact dans les réseaux sociaux par exemple. Il serait très fastidieux d’insérer ces éléments à chaque article. Et si une information de contact devait être modifiée, il faudrait revoir tous les contenus pour mettre à jour ces informations.
Avec WordPress vous pouvez mettre en place des contenus récurrents avec les blocs réutilisables.
2. Créer des blocs réutilisables
La première étape consiste à insérer les blocs que vous souhaitez rendre réutilisables.
Dans un article ou une page, insérer les blocs que vous souhaitez et ajoutez du contenu.
Dans cet exemple, nous utilisons un bloc Média & texte que nous mettons en forme.
Dans la barre d’outils du bloc, cliquez sur le bouton Options (les trois points verticaux) et choisissez Ajouter aux blocs réutilisables.
Le bloc réutilisable est créé et est nommé Bloc réutilisable sans titre.
Dans la colonne latérale de droite, dans l’onglet Bloc il est bien indiqué que vous avez créé un bloc réutilisable, avec le type Bloc réutilisable.
Faites de même pour tous les blocs réutilisables que vous souhaitez.
3. Gérer les blocs réutilisables
Vous allez maintenant devoir gérer vos blocs réutilisables.
Ouvrez le contenu (article ou page) qui contient un des blocs réutilisables que vous avez créés.
Dans la colonne latérale de droite, dans le menu des Options (le bouton avec les trois points verticaux), choisissez Gérer tous les blocs réutilisables.
Vous affichez l’administration du site et visualisez l’écran Blocs réutilisables...
Le bloc Boucle de requête
Dans la catégorie des blocs Thème, WordPress propose le bloc Boucle de requête qui permet de créer une liste d’articles selon des critères variés, selon des catégories ou des étiquettes d’articles, selon les rédacteurs et rédactrices… Cette possibilité était précédemment réservée aux développeurs WordPress qui codaient en PHP ces requêtes. Maintenant, elle est proposée à tout un chacun.
Créez un nouvel article et ajoutez-lui un titre.
Dans la catégorie Thème, ajoutez le bloc Boucle de requête.
Une boucle de requête par défaut est insérée :
Pour paramétrer vous-même la boucle, dans la barre d’outils du bloc, cliquez sur le bouton Partir de zéro.
WordPress affiche une présélection d’affichage des articles qui seront sélectionnés dans la requête :
Dans cet exemple, c’est le modèle Titres, date et extrait qui est choisi.
Une sélection d’articles et un affichage sont immédiatement réalisés dans le bloc, à partir de vos articles :
Par défaut, c’est un affichage en liste.
Pour avoir un affichage sous la forme d’une grille, dans la barre des outils, cliquez...
Les compositions
Les thèmes peuvent proposer des modèles de mise en page prêts à l’emploi. Ce sont les compositions. Le thème par défaut de cette version de WordPress propose plusieurs modèles.
Créez un nouveau contenu, article ou page.
Ajoutez un bloc et cliquez sur l’onglet Compositions.
Pour insérer une composition, cliquez sur son nom.
La composition est insérée.
Vous pouvez alors modifier les différents blocs et y ajouter votre contenu.