1. Livres & vidéos
  2. Créer un site de A à Z avec WordPress
  3. Les blocs pour le texte
Extrait - Créer un site de A à Z avec WordPress Du cahier des charges à la mise en ligne du site
Extraits du livre
Créer un site de A à Z avec WordPress Du cahier des charges à la mise en ligne du site
8 avis
Revenir à la page d'achat du livre

Les blocs pour le texte

Aborder les interfaces de saisie

Que ce soit pour les articles ou pour les pages, l’interface de saisie des contenus est très similaire dans WordPress. La rédaction des textes et l’insertion des médias dans les contenus WordPress se font avec des blocs de l’éditeur Gutenberg, comme cela a été évoqué précédemment. Rappelons que chaque type de contenu doit être inséré et mis en forme avec un bloc dédié.

Voici l’interface de saisie d’un article :

images/C07-01.png

Et voici l’interface de saisie d’une page :

images/C07-02.png

Utiliser la barre des outils

Avec l’éditeur de contenu affiché, dans la partie supérieure de l’écran se trouve la barre d’outils. Cette barre d’outils est similaire entre les articles et les pages.

images/C07-03.png

Voici les différents boutons et leur utilisation, dans la partie gauche de la barre d’outils :

L’outil Voir les articles ou Voir les pages permet de revenir à la liste des articles ou à la liste des pages.

images/C07-04.png

L’outil Ouvrir/fermer l’outil d’insertion de blocs permet d’afficher et de fermer l’affichage de la liste des blocs utilisables.

images/C07-05.png

En voici un extrait :

images/C07-06.png

 Pour fermer cet affichage, cliquez sur le même bouton qui est alors une case de fermeture images/icfermeture.png.

L’outil Outils permet de choisir l’utilisation du pointeur de la souris. L’option Modifier permet de modifier les blocs et leur contenu et l’option Sélectionner permet de sélectionner les blocs.

images/C07-07.png

L’outil Annuler et l’outil Rétablir permettent d’annuler la dernière action appliquée et de la rétablir si besoin est.

images/C07-08.png
images/C07-09.png

L’outil Vue d’ensemble du document permet d’afficher la liste de tous les blocs constituant le contenu.

images/C07-10.png

Voici un exemple du volet Vue d’ensemble du document - onglet Vue en liste avec un article simple composé de deux titres et de quatre paragraphes :

images/C07-11.png

Dans ce même...

Exploiter les options d’affichage

Dans la barre d’outils supérieure, l’outil Options donne accès à de nombreuses options d’affichage dans WordPress.

images/C07-18.png

Voici les options disponibles :

images/C07-19.png

1. Modifier les vues

La première section VUE du bouton Options permet de gérer l’affichage de l’éditeur de contenu.

images/C07-20.png

 Sélectionnez l’option Barre d’outils supérieure pour afficher toutes les barres d’outils des blocs dans la barre des options.

Si l’option Barre d’outils supérieure n’est pas sélectionnée, la barre d’outils de mise en forme du paragraphe s’affiche au niveau du bloc lorsque le point d’insertion est dans ce bloc :

images/C07-21.png

Voici ce même bloc, avec l’option Barre d’outil supérieure sélectionnée. Dans ce cas, la barre d’outils de mise en forme du paragraphe est affichée dans la barre d’outils supérieure :

images/C07-22.png

 Sélectionnez l’option Sans distraction pour masquer automatiquement la barre d’outils supérieure :

images/C07-23.png

 Pour effectuer une mise en forme d’un bloc, positionnez le point d’insertion dans le bloc et passez le pointeur de la souris dans la partie supérieure de l’écran. La barre des outils s’affiche et comprend la barre d’outils de mise en forme du bloc :

images/C07-24.png

 Sélectionnez l’option Mode plein écran pour masquer la barre des menus de WordPress. C’est l’option par défaut. Voici l’affichage obtenu avec cette option désélectionnée :

images/C07-25.png

2. Changer l’éditeur

La section ÉDITEUR de l’outil Options permet de changer la barre d’outils d’édition du bloc.

images/C07-26.png

Pour visualiser les mises en forme appliquées au contenu...

Maîtriser l’usage des blocs

1. Insérer un bloc

Les contenus rédactionnels se composent de blocs Gutenberg. Il faut pour cela ajouter les blocs de type voulus, y saisir le texte souhaité et le mettre en forme.

 Dans un contenu, article ou page, pour afficher la liste des blocs, dans la barre supérieure des outils, cliquez sur l’outil Ouvrir/fermer l’outil d’insertion de blocs.

images/C07-05.png

La liste des blocs disponibles s’affiche. Les blocs sont classés par catégorie, en voici un extrait :

images/C07-06.png

Au survol de chaque bloc, WordPress affiche un aperçu et une aide. Voici l’exemple pour le bloc Paragraphe :

images/C07-44.png

 Pour insérer le bloc dans le contenu, cliquez sur son nom. Voici un bloc Titre ajouté dans un contenu.

images/C07-45.png

Le point d’insertion clignote dans le bloc ajouté pour y saisir le texte.

 Vous pouvez aussi cliquer sur l’outil images/icplus.png Ajouter un bloc affiché en bas de chaque contenu :

images/C07-46.png

Le panneau des blocs s’affiche.

 Cliquez sur le type de bloc à insérer.

images/C07-47.png

 Pour effectuer une recherche sur le nom du bloc voulu, saisissez les premiers caractères de celui-ci dans la zone Rechercher. Dans cet exemple, c’est le bloc Tableau qui est recherché :

images/C07-48.png

Enfin, il est aussi possible d’insérer un bloc en utilisant le menu des options d’un bloc déjà inséré. Le nouveau bloc s’insère...

Utiliser les blocs pour le texte

1. Mettre en forme les blocs

Chaque type de bloc, que ce soit pour le texte ou pour les autres types de contenu, possède sa propre barre d’outils de mise en forme. Cette barre d’outils est affichée dès que le bloc est sélectionné ou que le point d’insertion clignote dans le bloc. Elle permet d’appliquer une mise en forme à une sélection de texte dans le bloc.

Voici la barre d’outils pour le bloc Titre :

images/C07-63.png

Les trois premiers outils de la barre d’outils de mise en forme sont communs à tous les blocs.

  • L’outil Titreimages/C07-72.png dans cet exemple, permet de distinguer le type de bloc, il s’agit bien d’un bloc de type Titre.
  • L’outil Glisserimages/C07-73.png permet de déplacer le bloc par un cliqué-glissé au sein même du contenu.
  • Les outils Monter et Descendreimages/C07-74.png permettent de déplacer le bloc au-dessus et en dessous de sa position actuelle.

Voici la barre d’outils pour le bloc Paragraphe :

images/C07-64.png

De plus, dans le volet de droite des réglages, dans l’onglet Bloc, des mises en forme communes à plusieurs types de blocs seront disponibles. Attention, ces mises en forme s’appliquent à la totalité du bloc. Pour les blocs textuels, ce sont les mises en forme Couleur et Typographie qui sont, entre autres, communes.

Le volet des réglages indique le type de bloc sélectionné.

 Cliquez par exemple dans un bloc Titre pour le sélectionner. Le volet des réglages indique Titre :

images/C07-88.png

 Cliquez dans un bloc de type Paragraphe. Le volet des réglages indique Paragraphe :

images/C07-87.png

Voici les réglages de mise en forme disponibles dans l’onglet Bloc du volet des réglages pour un bloc de type Paragraphe :

images/C07-65.png

Voici les réglages de mise en forme disponibles dans l’onglet Bloc du volet des réglages pour un bloc de type Titre :

images/C07-66.png

Pour chaque type de mise en forme un menu des options peut être disponible afin d’afficher des réglages supplémentaires.

 Pour afficher le menu des options, cliquez sur l’outil avec les trois points verticaux à droite.

Certaines mises en forme ne proposeront pas de menu des options.

Voici le menu des options pour la mise en forme Couleur :

images/C07-67.png

Voici le menu des options pour la mise en forme Typographie :

images/C07-68.png

2. Connaître les réglages...