Les contenus rédactionnels dans WordPress

WordPress permet de saisir deux types de contenus rédactionnels : les articles et les pages. Ces deux types de contenus sont différents, même si, avec les versions récentes, cette différence tend à s’estomper quelque peu.

Comme dit précédemment, les articles sont faits pour l’actualité régulière et les pages pour l’actualité plus statique. Les articles apparaissent habituellement sur la page d’accueil des sites d’information et sont affichés dans l’ordre chronologique. Les pages sont faites pour les informations statiques qui n’évoluent que très peu. Les pages sont généralement accessibles dans les menus de navigation.

L’éditeur Gutenberg

Le principe des blocs

Pour la rédaction, la mise en forme et la mise en page des contenus rédactionnels, WordPress propose l’éditeur Gutenberg depuis de nombreuses années. Cet éditeur exploite la notion de bloc. Un bloc est une zone d’affichage dédiée à un type de contenu spécifique. Si vous souhaitez insérer un titre, il faut utiliser un bloc de type Titre. Si vous souhaitez insérer un paragraphe, il faut utiliser un bloc de type Paragraphe. Si vous souhaitez insérer une image, il faut utiliser un bloc de type Image.

L’insertion des blocs

Que vous soyez dans un article ou dans une page, l’utilisation des blocs reste identique.

Créez un nouveau contenu (article ou page). Pour créer un nouvel article, dans le menu Articles, choisissez Ajouter un article.

Dans la barre d’outils supérieure, cliquez sur le bouton Ouvrir/fermer l’outil d’insertion de blocs.

La liste des blocs disponibles s’affiche et les blocs sont classés par catégorie :

Au survol de chaque bloc, un aperçu s’affiche :

Cliquez sur le bloc souhaité pour l’insérer. Dans cet exemple, c’est un bloc Titre qui est inséré :

Puis, saisissez le texte voulu.

Vous avez aussi d’autres possibilités pour insérer...

Les blocs pour le texte

Les titres

Les titres permettent de structurer les contenus rédactionnels et il est judicieux de les libeller avec des mots-clés susceptibles d’être saisis dans les requêtes des internautes.

Comme en HTML, il existe six niveaux de titre pour organiser les blocs Titre de WordPress. Le niveau 1 est usuellement réservé au titre principal du contenu et les niveaux 4, 5 et 6 n’ont que très peu d’influence sur le référencement naturel (SEO - Search Engine Optimization).

La barre d’outils des titres permet d’appliquer plusieurs mises en forme.

Le bouton Alignement permet de modifier la largeur du bloc dans la largeur disponible de la page.

Le bouton Aligner le texte permet de modifier l’alignement du texte.

Les trois boutons suivants, Gras, Italique et Lien, permettent de mettre en gras, en italique et d’insérer un lien sur une sélection de texte.

Du point de vue de l’accessibilité, les titres générés respectent bien le standard HTML et sont donc parfaitement conformes. À titre d’exemple, le titre de niveau 2 Florence, une ville d’art est vocalisé « Florence, une ville d’art - titre niveau 2 » par le lecteur d’écran NVDA.

La vocalisation des titres d’autres niveaux est similaire. Il n’y a pas de différence de vocalisation entre les niveaux de titre.

Il est important de structurer correctement la page en y ajoutant des titres et en les organisant selon une hiérarchie cohérente. Notez que le saut d’un niveau, même s’il n’est pas souhaitable ni conseillé, n’est pas inenvisageable, pas plus que l’absence de titre de niveau 1, à condition que la structure soit logique. Mais avec WordPress, le titre des articles et des pages sera toujours placé dans un titre de niveau 1. Cela est important, car les internautes utilisant des lecteurs d’écran se servent de cette hiérarchie pour se repérer...

Les tableaux

Les tableaux permettent de manière très classique d’afficher des données tabulaires. Voici un exemple :

Afin que la première ligne soit identifiée en tant qu’en-tête de colonne, il est nécessaire d’activer l’option Section d’entête qui se trouve dans la colonne latérale droite Réglages.

Lorsque le tableau a des en-têtes de ligne, il n’y a malheureusement pas d’actions possibles pour les insérer, à moins de passer par une extension ou de modifier le code HTML.

Pour modifier le code HTML du tableau, cliquez sur le menu des options (trois points verticaux) et choisissez Modifier en HTML.

Le code généré par WordPress pour ce tableau s’affiche :

Il est alors nécessaire, pour les cellules d’en-tête de ligne, de transformer la balise <td> en une balise <th scope="row">. Pour les cellules d’en-tête de colonne, il est souhaitable d’ajouter l’attribut scope="col".

Voici un exemple de code travaillé pour l’accessibilité :

Voici ce même code avec une mise en forme pour faciliter sa lecture :

<figure class="wp-block-table"> 
  <table class="has-fixed-layout"> 
    <thead> 
      <tr> ...

La mise en forme commune des blocs de texte

Où appliquer les mises en forme sur le texte ?

Il est possible de personnaliser la mise en forme des textes au niveau de chaque page ou article, mais il est préférable de paramétrer la mise en forme de vos contenus en paramétrant le style du thème, comme indiqué au chapitre La conception d’un site. Ainsi, votre site sera plus homogène et plus léger.

Dans les thèmes réputés accessibles, les valeurs par défaut des paramètres ont été définies afin de respecter des règles d’accessibilité. Attention, si vous modifiez ces valeurs, lesdites règles pourraient ne plus être respectées.

Les mises en forme des blocs

Tous les blocs de texte partagent dans leur barre d’outils des boutons de mise en forme qui s’appliquent sur une sélection de texte.

Mais les blocs Gutenberg proposent aussi des mises en forme qui s’appliquent sur la totalité du bloc. Ces mises en forme se trouvent dans la colonne latérale droite nommée Réglages.

Ensuite, lorsqu’un bloc est sélectionné, dans la colonne latérale Réglages, l’onglet Bloc affiche le type de bloc et donne accès à ses mises en forme.

Voici les mises en forme accessibles pour un bloc Paragraphe :

Voici les mises en forme accessibles pour un bloc Titre :

Il existe des mises en forme communes pour les blocs de texte. Ce sont les volets Couleur et Typographie.

Les couleurs du texte

Le volet Couleur permet de personnaliser la couleur du texte et de l’arrière-plan de tout le bloc.

Cliquez sur le menu Options de Couleur :

Dans le menu qui s’affiche, les éléments Texte et Arrière-plan sont déjà cochés, les couleurs du texte et de l’arrière-plan sont donc déjà affichées dans le volet Couleur.

Pour pouvoir personnaliser la couleur des liens, cliquez sur l’élément Lien dans le menu Options de Couleur : toutes les personnalisations de couleurs s’affichent dans le volet Couleur.