Mise en forme des paragraphes et sauts de ligne

Paragraphes et sauts de lignes avec WordPress

Lors de l’édition d’un article, WordPress crée automatiquement des paragraphes.
Ce comportement peut avoir des effets déroutants, mais avec quelques explications, on apprend vite à le maîtriser
.

Il est possible de supprimer cette création automatique de paragraphes, mais alors le rédacteur doit insérer les balises HTML pour marquer sauts de pages et paragraphes.

Un peu de HTML

Comme l’indique Wikipedia : « L’Hypertext Markup Language, généralement abrégé HTML, est le format de données conçu pour représenter les pages web.« .

Voici un texte saisi dans l’éditeur de texte de WordPress (TinyMCE) après sélection de l’onglet « Visuel » :

Texte en gras apparaissant dans l'éditeur visuel de WordPress
Texte en gras apparaissant dans l’éditeur visuel

Une partie du texte apparaît en caractères gras.
Sélectionner l’onglet « Texte » en haut et à droite de la zone d’édition :

Affichage du code HTML d'un texte en caractères gras (balise <strong>)
Code HTML d’un texte en caractères gras

L’option « Texte » fait apparaître une partie du code HTML que le serveur envoie au navigateur (Internet Explorer, Chrome, Firefox…) pour afficher la page sur un ordinateur.

La partie qui s’affichait en caractères gras apparaît entourée par des « balises HTML » :

  • « <strong> » est une balise ouvrante,
  • « </strong> » sa balise fermante.

En HTML, les balises permettent de définir le comportement à l’affichage de ce qu’elles encadrent : italique, souligné, titre…

Exemples de balises HTML pour italique, souligné et titre 2 affichés dans l'onglet Texte
Exemples de balises HTML pour italique, souligné et titre 2

Saisir trois lignes séparées par des retours à la ligne (« ↵ », « CR »…) dans l’éditeur avec l’onglet « Texte » :

Affichage d'un texte avec des sauts de ligne en fin de ligne
Saisie d’un texte avec des sauts de ligne en fin de ligne

Afficher l’aperçu en cliquant sur le bouton « Aperçu » (en haut à droite ou sous la zone de saisie à droite en fonction de la largeur de l’écran)  :

Demander l'aperçu des trois lignes saisies dans l'éditeur WordPress
Demander l’aperçu du texte saisi

L’affichage montre que la mise en forme des lignes a été respectée.
Demander l’affichage du code source en faisant un clic droit à côté du texte :

Demander l'affichage du "code source"
Demander l’affichage du « code source »

Quand le code source apparaît, faire une recherche (<CTRL> F) sur le mot « Première » afin d’atteindre le texte saisi :

Affichage du code source correspondant à la saisie dans l'éditeur WordPress
Affichage du code source correspondant à la saisie dans l’éditeur WordPress

On voit apparaître des balises qui ont été ajoutées par WordPress :

  • pour créer des paragraphes : <p> et </p>,
  • pour créer des sauts de ligne : <br />.

Si WordPress n’avait pas ajouté ces balises, l’ensemble de ce qui a été saisi apparaîtrait sur une même ligne, ne passant à la ligne suivante que quand le texte atteint le bord droit de la fenêtre.

C’est pour éviter ce comportement, hérité du HTML mais peu naturel notamment pour les débutants, que WordPress insère automatiquement des balises HTML.

Haut de page

Insérer un saut de ligne

Sélectionner l’onglet « Visuel« , saisir une ligne de texte puis cliquer avec le bouton gauche de la souris à l’intérieur :

Affichage d'une ligne de texte et cliquer gauche à n'importe quel endroit
Cliquer au milieu d’une ligne de texte

Appuyer sur la touche de retour à la ligne (« ↵ » ou « CR »…). On constate que l’espace dans le texte correspond à un saut de paragraphe et non à un simple saut de ligne :

WordPress a inséré automatiquement un saut de paragraphe
Insertion automatique d’un saut de paragraphe

Pour insérer un saut de ligne, il faut appuyer conjointement sur les touches « Majuscule » et « retour à la ligne »(<SHIFT><CR> ») :

En appuyant sur Majuscule et retour chariot, WordPress insère un simple saut de ligne
Forcer un saut de ligne en tapant en même temps sur les touches Majuscule et retour chariot

On constate que WordPress a bien créé un simple saut de ligne et non un paragraphe. On peut le vérifier en demandant un « Aperçu » et en affichant le source :

Affichage du source avec la balise <br /> pour aller à la ligne
Insertion de la balise <br /> dans le HTML de la page

Pour résumer, le comportement de WordPress est le suivant :

  • avec l’option « Visuel » :
    • la touche « Retour chariot » (« ↵ » ou « CR ») crée un paragraphe (HTML : « <p> … </p> »),
    • les touches « Majuscule » et « Retour chariot » appuyées conjointement créent un saut de ligne (HTML : « <br /> »),
  • avec l’option « Texte » :
    • une frappe de la touche « Retour chariot » crée un saut de ligne,
    • deux frappes successives de la touche « Retour chariot » crée un paragraphe.


Haut de page

Bloquer la création automatique de paragraphes

WordPress permet de bloquer la création automatique de paragraphes.

Pour se faire, il suffit d’insérer le code ci-dessous :

remove_filter( 'the_content', 'wpautop' );
remove_filter( 'the_excerpt', 'wpautop' );

Saisir trois lignes dans un article en les séparant par des sauts de ligne :

Trois lignes séparées par un retour chariot
Saisir trois lignes séparées par un saut de ligne

Apparemment, WordPress continue à insérer des sauts de paragraphe, mais si on demande l’aperçu de l’article, les trois lignes n’en font plus qu’une à l’affichage :

A l'affichage de l'article, les sauts de page n'apparaissent pas.
A l’affichage de l’article, les sauts de page n’apparaissent pas.

L’affichage du code source permet de constater que les sauts de ligne sont présents, mais comme la balise « <p>…</p> n’est plus créée par WordPress, le navigateur considère que les lignes se suivent :

Les sauts de ligne sont présents dans le code source mais sont ignorés à l'affichage
Les sauts de ligne existent dans le source mais sont ignorés à l’affichage

Pour remettre en forme, il faut insérer des balises de paragraphes dans l’onglet « Texte » :

L’aperçu montre que  les balises de paragraphes sont prises en compte lors de l’affichage par le navigateur :

Affichage des paragraphes dans l'aperçu
Affichage des paragraphes

Ceci est confirmé par la visualisation du code source :

Affichage des paragraphes dans le code source
Affichage des paragraphes dans le code source

Attention : dès que l’option « Visuel » est sélectionnée, TinyMce retire les balises « <p> », ce qui fait perdre la mise en page.

En pratique, quand on sait que <SHFT><CR> crée un simple saut de ligne et que <CR> crée un paragraphe, il n’est pas difficile de maîtriser la mise en forme des nouveaux articles (ou pages WordPress).

Là où la difficulté peut apparaître, c’est lorsqu’on a importé du texte d’un site créé avec un autre outil que WordPress. Généralement, après importation, les articles s’affichent correctement. Mais dès qu’on ouvre un article dans l’éditeur, la mise en forme est perdue.

À noter que WordPress signale l’existence d’une extension permettant de modifier le comportement de WordPress article par article.

La solution que je conseille est de ne pas modifier le comportement standard de WordPress, mais de remettre en forme les articles lorsqu’on les modifie.

Haut de page

Associer du css à un paragraphe

Le css (Cascading Style Sheets ou feuille de style en cascade) permet de mettre en forme les pages HTML.
On peut ainsi décider une mise en forme pour les paragraphes en intégrant dans la balise « <p> » :

  • la définition d’un  style ,
  • une « class » : tous les paragraphes de la classe seront impactés,
  • un « id » : seul le paragraphe de la page ayant cet « id » est impacté.

Inclure du styles css dans des paragraphes

Dans l’éditeur visuel, saisir trois lignes et utiliser les icônes d’alignement :

Affichage de trois paragraphes, alignés à gauche, au centre et à droite.
L’utilisation de styles permet de choisir l’alignement des paragraphes

Sélectionner l’onglet Texte pour voir le code HTML généré :

Le style css apparaît dans la balise <p>
Code HTML pour un paragraphe stylé

On constate que :

  • rien n’a été ajouté au paragraphe aligné à gauche : en fait, par défaut, les paragraphes sont alignés à gauche, inutile de le « redire »,
  • pour les autres alignements, le mot « style » est ajouté à la balise <p …> : cela indique qu’un style doit être appliqué au paragraphe au moment de l’affichage,
  • le mot « text-align » est associé au style : cela indique que le type de style à appliquer concerne l’alignement du paragraphe; il existe bien d’autres types de style qui peuvent être appliqués à un paragraphe (ajout de marges ,de bordures…) ou appliqués au texte contenu dans le paragraphe (police de caractères, couleur…),
  • enfin, text-align est suivi du type d’alignement : « center » (centré) et « right » (droite) dans notre exemple.

La description du css va bien au delà de cet article et du propos de ce site. Je vous laisse consulter l’abondante littérature, que ce soit les livres ou sur internet, pour découvrir la richesse de mise en page qu’il permet.
L’important, ici, est de montrer qu’il est possible d’associer du code css dans le contenu d’un article WordPress  en utilisant les boutons mis à disposition dans l’éditeur, ou en l’insérant à partir de l’onglet « Texte ».

Associer du css à un paragraphe par « class » ou « id »

Lorsqu’une classe et/ou un id est associé à un paragraphe, le code HTML apparaît dans l’onglet « Texte ». Il ne disparaît pas si on passe par l’affichage « Visuel ».

Sélectionner l’onglet « Texte » puis saisir un paragraphe en lui associant une classe et une « id » :

Affichage d'un paragraphe saisie dans l'index Texte avec class et id
Saisie d’un paragraphe avec class et id

Afficher l’onglet « Visuel ». Le paragraphe saisi est visible mais sans que le code HTML apparaisse :

Affichage dans l'onglet visuel : les balises HTML n'apparaissent pas
Affichage dans l’onglet visuel : les balises HTML n’apparaissent pas

Afficher l’onglet « Texte »; le paragraphe saisi a été remis en forme mais avec une totale équivalence du HTML car les sauts de ligne dans le source HTML sont ignorés lors de l’affichage :

L'onglet Texte montre des modifications sans conséquence pour l’affichage de la page sur le site
Modification du texte sans conséquence pour le HTML

Afficher l’aperçu et regarder le code source généré :

Dans le code source, class et id associés au paragraphe apparaissent
Code source généré

La « class » et « l’id » apparaissent dans la balise de paragraphe.
L’affichage du paragraphe va ainsi dépendre des règles css associées à la « class » et à « l’id ». Avec WordPress, les règles css se trouvent dans le fichier « style.css » du thème.

Par exemple, si les règles css sont les suivantes :

p#mon_id {
 border-color: blue;
 border-style: dashed;
 border-width: medium;
}
p.ma_classe{
background-color: yellow;
font-style: italic;
}

L’affichage obtenu sera le suivant :

Styler les sauts de ligne

Il est aussi possible d’associer du css à un saut de ligne (« <br/> ») :

Insertion d'un id et d'une classe à l'intérieur d'une balise <br/>
Association d’un id et d’une classe à un saut de ligne

Ceci n’est néanmoins pas recommandé car cela ne correspond pas à la norme HTML et l’effet n’est pas garanti pour tous les navigateurs.

Le style d’un saut de ligne est le style hérité du paragraphe. Par exemple, la hauteur de ligne est celle des lignes du paragraphe.

Haut de page

Laisser un commentaire

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

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.