Vous mettez en page un article dans WordPress. Entre deux lignes, vous avez besoin d’une petite coupure, pas d’un nouveau paragraphe mais d’une séparation légère. Vous ajoutez deux balises <br> à la suite, vous basculez vers l’éditeur visuel et revenez, l’une a disparu. Vous insérez une ligne vide, WordPress la transforme en nouveau paragraphe avec un retrait complet. Pas ce que vous vouliez.

Ce n’est ni le thème ni les réglages. En coulisses, wpautop est à l’œuvre, un filtre WordPress intégré qui formate automatiquement le texte et supprime les balises HTML «en trop». La logique est utile: elle vous évite d’envelopper manuellement les paragraphes dans des <p>. Mais quand vous mettez en page de la poésie, des légendes pour une série d’images ou des instructions pas à pas avec des micro-pauses, wpautop devient gênant.

Voici trois façons de contrôler les sauts de ligne dans n’importe quel éditeur WordPress. D’une méthode intégrée rapide à une approche entièrement manuelle via CSS. Chacune a été testée sur WordPress 6.4+, sans extension.

💡 Aperçu rapide:

• Enregistrez un shortcode [br] dans functions.php, un outil universel pour n’importe quel nombre de sauts, qui ne touche pas à l’éditeur
• Utilisez Maj+Entrée quand vous saisissez du texte, une méthode intégrée pour un saut simple, sans une seule ligne de code
• Définissez un espacement précis via du CSS en ligne quand vous avez besoin d’une distance en pixels spécifique pour une séparation forte entre des blocs

Vidéo: comment créer des shortcodes WordPress de A à Z

Regardez le processus complet, de l’enregistrement dans functions.php jusqu’à l’affichage sur le frontend. Le même principe s’applique à tous les shortcodes personnalisés, pas seulement [br].

Méthode 1: le shortcode [br], un contrôle total sur les sauts

Un shortcode règle le problème une fois pour toutes. Ajoutez le code une seule fois, puis insérez [br] n’importe où: dans le texte d’un article, dans un widget, voire dans un titre via do_shortcode. L’éditeur ne touche pas au contenu entre crochets, le filtre wpautop l’ignore, les sauts survivent quel que soit le nombre de bascules entre les onglets.

Ajoutez le code suivant au fichier functions.php de votre thème enfant. Si vous n’avez pas encore de thème enfant, commencez par en créer un avec notre guide. Si vous ne voulez pas toucher aux fichiers du thème, installez l’extension Code Snippets et collez-y le code, le résultat est le même.

1
/**
2
 * Shortcode for manual line breaks in the visual editor.
3
 * Usage: [br] for single break, [br][br] for double.
4
 */
5
function sdstudio_line_break_shortcode() {
6
    return '<br />';
7
}
8
add_shortcode( 'br', 'sdstudio_line_break_shortcode' );

La fonction sdstudio_line_break_shortcode renvoie une balise HTML <br />, et add_shortcode enregistre le shortcode [br]: WordPress le remplace par cette balise lors du rendu de la page. Le préfixe sdstudio_ dans le nom de la fonction protège contre les conflits: si une autre extension enregistre une fonction portant le même nom, le site ne plantera pas.

Après avoir ajouté le code, écrivez dans l’éditeur comme ceci:

1
This is the first paragraph.
2
[br]
3
This is the second line right below the first.
4
[br][br]
5
And this is with a double break.

Résultat: le premier et le deuxième texte sont séparés par un saut simple, le troisième est séparé par un double saut. WordPress traite les shortcodes après le filtre wpautop, le formatage automatique ne les affecte donc pas.

Le nom br est choisi pour sa brièveté, mais techniquement c’est un risque: une autre extension ou un autre thème pourrait enregistrer son propre [br]. En pratique, les conflits ne se rencontrent presque jamais. Si vous constatez un comportement étrange, renommez-le, par exemple en [sd_br].

Avant de modifier functions.php, faites une copie de sauvegarde du fichier via FTP ou le gestionnaire de fichiers de votre hébergement. Si le site ne s’ouvre plus après les modifications, renvoyez l’original sauvegardé, tout refonctionnera.

Méthode 2: Maj+Entrée, la méthode intégrée sans code

Si vous avez besoin d’un saut simple et ne voulez pas toucher au code, maintenez la touche Maj enfoncée et appuyez sur Entrée dans l’éditeur visuel.

Le curseur passe à la ligne suivante au sein du même paragraphe. En HTML, c’est le même <br>, sauf que WordPress l’insère automatiquement. Un simple Entrée crée un nouveau paragraphe (<p>), tandis que Maj+Entrée crée un saut de ligne sans espacement.

Inconvénient de la méthode: elle ne fonctionne que pour un seul saut. Deux Maj+Entrée à la suite seront fusionnés par WordPress en un seul <br>, et trois seront transformés en nouveau paragraphe. Si vous avez besoin d’un espacement vertical notable entre les lignes, passez à la méthode 3.

Méthode 3: du CSS en ligne pour un espacement précis en pixels

Quand ni le shortcode ni Maj+Entrée ne donnent la distance voulue, définissez l’espacement directement via l’attribut style.

Basculez vers l’onglet «Texte» dans le coin supérieur droit de l’éditeur classique:

Repérez le paragraphe après lequel vous avez besoin d’un espacement. Enveloppez-le dans des balises <p> et ajoutez margin-bottom:

1
<p style="margin-bottom: 100px;">
2
This is a paragraph after which there will be 100 pixels of spacing.
3
</p>
4
<p>And this is the next paragraph, with a noticeable gap.</p>

Remplacez la valeur 100px par la vôtre. Plus le nombre est grand, plus l’écart est large. Pour un espacement depuis le haut, utilisez margin-top. Vous pouvez les combiner: <p style="margin-top: 50px; margin-bottom: 80px;">.

La méthode est pratique pour des cas ponctuels, une séparation forte de blocs sémantiques au sein d’un article spécifique. Mais insérer ce code dans chaque paragraphe n’est pas commode. Pour un usage systématique, revenez au shortcode de la méthode 1.

⁉️🤔 Questions fréquentes

Pourquoi WordPress supprime-t-il mes <br> quand je bascule entre les onglets de l’éditeur?

L’éditeur visuel TinyMCE, lors du passage à l’onglet «Visuel», retraite le HTML et supprime les balises qu’il juge superflues. Le shortcode [br] n’est pas concerné par ce nettoyage: il n’est décodé en <br> qu’au moment de l’affichage sur le frontend, et dans l’éditeur il reste un simple texte entre crochets. C’est pourquoi le shortcode est plus fiable que le HTML direct, vos sauts survivront à n’importe quel nombre de bascules entre les onglets.

Puis-je utiliser pour un espacement vertical?

Techniquement oui, mais c’est une mauvaise pratique. Plusieurs à la suite donnent un aspect brouillon, perturbent les lecteurs d’écran et se désagrègent sur les écrans mobiles. Pour un espace vide, utilisez un espacement CSS (méthode 3), et réservez pour lier des mots qu’un saut de ligne ne doit pas séparer, par exemple «WordPress 6.4». L’espace insécable n’est pas conçu pour les écarts verticaux.

Est-ce que [br] fonctionne dans l’éditeur Gutenberg?

Oui, le shortcode [br] fonctionne dans n’importe quel éditeur WordPress: aussi bien dans l’éditeur classique que dans l’éditeur par blocs Gutenberg. Dans Gutenberg, insérez un bloc «Shortcode» et écrivez [br]. Le bloc se trouve dans la catégorie «Widgets»; si vous ne le voyez pas, cliquez sur «Tout parcourir» et trouvez-le via la recherche. À noter: dans Gutenberg, Maj+Entrée fonctionne également, donc pour de simples sauts uniques le shortcode peut ne pas être nécessaire.

Que faire si le shortcode s’affiche sous forme de texte et non comme un saut?

Deux raisons classiques. Premièrement: le code est inséré dans le mauvais fichier. Vérifiez que la fonction est bien ajoutée au functions.php du thème actif ou du thème enfant, pas dans wp-config.php ni dans un fichier d’extension. Deuxièmement: le shortcode se trouve à l’intérieur d’un bloc de code ou d’un commentaire HTML, WordPress ne traite pas les shortcodes à l’intérieur de <pre>, <code> et <!-- -->. Vérification rapide: ajoutez [br] tout au début d’un article sur le frontend et observez le résultat.

Dois-je désactiver wpautop pour que le shortcode fonctionne?

Non, désactiver wpautop n’est pas nécessaire et même nuisible: vous perdriez le formatage automatique des paragraphes sur l’ensemble du site. Le shortcode [br] fonctionne indépendamment de wpautop grâce à l’ordre de traitement: WordPress applique les shortcodes après le filtre de formatage automatique. Les paragraphes classiques continueront à se formater automatiquement, et vous contrôlez les sauts de ligne manuellement, exactement là où il le faut. La commande remove_filter('the_content', 'wpautop') est une mesure radicale, après laquelle vous devrez placer manuellement les balises <p> dans tout le site. Nous vous conseillons d’éviter cela.

Quelle méthode de saut de ligne est faite pour vous

Le choix dépend de la tâche. Il n’y a pas une solution universelle, mais il y a une logique claire:

Si vous avez besoin de rapidité et sans code, Maj+Entrée. Un saut simple suffit dans la plupart des cas: détacher une légende d’une image, aérer un titre long, faire une micro-pause dans un paragraphe.

Si les sauts sont nombreux et se répètent, le shortcode [br]. Configurez-le une fois et oubliez: écrivez [br] quand c’est nécessaire, même dix fois de suite. Le code dans functions.php ne prend même pas dix lignes.

Si vous avez besoin d’un espacement précis en pixels pour une séparation forte, le CSS en ligne. Un couple margin-bottom: 80px donnera exactement l’aération que le design d’une page spécifique exige. N’en abusez pas: pour une application régulière, revenez au shortcode.

Ces trois méthodes couvrent tous les scénarios de sauts de ligne dans WordPress. Choisissez en fonction de la tâche, et ne laissez pas l’éditeur décider à votre place où il doit y avoir un écart et où il ne doit pas y en avoir.