Sie arbeiten an einem Beitrag in WordPress. Zwischen zwei Zeilen benötigen Sie eine kleine Unterbrechung, keinen neuen Absatz, sondern eine leichte Trennung. Sie fügen zwei <br>-Tags hintereinander ein, wechseln zum visuellen Editor und zurück, einer ist verschwunden. Sie setzen eine Leerzeile, WordPress macht daraus einen neuen Absatz mit vollem Einzug. Nicht das, was Sie wollen.

Es liegt nicht am Theme oder den Einstellungen. Im Hintergrund arbeitet wpautop, ein eingebauter WordPress-Filter, der Text automatisch formatiert und „überflüssige" HTML-Tags entfernt. Die Logik ist nützlich: Sie erspart es Ihnen, Absätze manuell in <p> zu verpacken. Aber wenn Sie Lyrik, Bildunterschriften für eine Bildserie oder Schritt-für-Schritt-Anleitungen mit Mikropausen gestalten, steht wpautop im Weg.

Nachfolgend drei Wege, um Zeilenumbrüche in jedem WordPress-Editor zu kontrollieren. Von einer schnellen eingebauten Methode bis hin zur vollständig manuellen Steuerung per CSS. Jede wurde auf WordPress 6.4+ ohne Plugins getestet.

💡 Kurzer Überblick:

• Registrieren Sie einen [br]-Shortcode in functions.php, ein universelles Werkzeug für beliebig viele Umbrüche, das den Editor nicht antastet
• Nutzen Sie Shift+Enter beim Tippen, eine eingebaute Methode für einen einzelnen Umbruch, ganz ohne eine Zeile Code
• Setzen Sie präzise Abstände per Inline-CSS, wenn Sie einen bestimmten Pixelabstand zur akzentuierten Trennung zwischen Blöcken benötigen

Video: So erstellen Sie WordPress-Shortcodes von Grund auf

Sehen Sie den vollständigen Prozess, von der Registrierung in functions.php bis zur Ausgabe im Frontend. Das gleiche Prinzip gilt für alle benutzerdefinierten Shortcodes, nicht nur für [br].

Methode 1: [br]-Shortcode, volle Kontrolle über Umbrüche

Ein Shortcode löst das Problem ein für alle Mal. Fügen Sie den Code einmal hinzu und setzen Sie [br] überall ein: im Beitragstext, in einem Widget, sogar in einer Überschrift mittels do_shortcode. Der Editor fasst Inhalte in eckigen Klammern nicht an, der wpautop-Filter ignoriert sie, Umbrüche überstehen beliebig viele Wechsel zwischen den Tabs.

Fügen Sie den folgenden Code in die functions.php Ihres Child-Themes ein. Falls Sie noch kein Child-Theme haben, erstellen Sie zuerst eines mit unserer Anleitung. Wenn Sie keine Theme-Dateien anfassen möchten, installieren Sie das Plugin Code Snippets und fügen Sie den Code dort ein, das Ergebnis ist dasselbe.

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' );

Die Funktion sdstudio_line_break_shortcode gibt ein HTML-<br />-Tag zurück, und add_shortcode registriert den [br]-Shortcode, WordPress ersetzt ihn beim Rendern der Seite durch dieses Tag. Das Präfix sdstudio_ im Funktionsnamen schützt vor Konflikten: Sollte ein anderes Plugin eine Funktion mit demselben Namen registrieren, stürzt die Seite nicht ab.

Schreiben Sie nach dem Hinzufügen des Codes wie folgt im Editor:

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.

Ergebnis: Der erste und der zweite Text sind durch einen einfachen Umbruch getrennt, der dritte durch einen doppelten Umbruch. WordPress verarbeitet Shortcodes nach dem wpautop-Filter, daher beeinflusst die automatische Formatierung sie nicht.

Der Name br ist der Kürze halber gewählt, aber technisch birgt er ein Risiko: Ein anderes Plugin oder Theme könnte sein eigenes [br] registrieren. In der Praxis kommt es so gut wie nie zu Konflikten. Wenn Sie ein seltsames Verhalten bemerken, benennen Sie ihn um, zum Beispiel in [sd_br].

Erstellen Sie vor der Bearbeitung der functions.php eine Sicherungskopie der Datei per FTP oder über den Dateimanager Ihres Hostings. Sollte die Seite nach den Änderungen nicht mehr erreichbar sein, laden Sie das gespeicherte Original wieder hoch, dann funktioniert alles wieder.

Methode 2: Shift+Enter, eingebaute Methode ohne Code

Wenn Sie einen einzelnen Umbruch benötigen und nicht mit Code hantieren möchten, halten Sie im visuellen Editor die Shift-Taste gedrückt und drücken Sie Enter.

Der Cursor springt in die nächste Zeile innerhalb desselben Absatzes. In HTML ist das derselbe <br>, nur dass WordPress ihn automatisch einfügt. Ein normales Enter erzeugt einen neuen Absatz (<p>), während Shift+Enter einen Zeilenumbruch ohne Abstand erzeugt.

Nachteil der Methode: Sie funktioniert nur für einen Umbruch. Zwei Shift+Enter hintereinander fasst WordPress zu einem <br> zusammen, und drei werden zu einem neuen Absatz. Wenn Sie einen deutlichen vertikalen Abstand zwischen Zeilen benötigen, fahren Sie mit Methode 3 fort.

Methode 3: Inline-CSS für präzise Abstände in Pixeln

Wenn weder Shortcode noch Shift+Enter den gewünschten Abstand liefern, setzen Sie den Abstand direkt über das style-Attribut.

Wechseln Sie im klassischen Editor oben rechts auf den Tab „Text":

Suchen Sie den Absatz, nach dem Sie einen Abstand benötigen. Umschließen Sie ihn mit <p>-Tags und fügen Sie margin-bottom hinzu:

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>

Ersetzen Sie den Wert 100px durch Ihren eigenen. Je größer die Zahl, desto breiter die Lücke. Für einen Abstand von oben nutzen Sie margin-top. Sie können sie kombinieren: <p style="margin-top: 50px; margin-bottom: 80px;">.

Die Methode eignet sich für Einzelfälle, zur akzentuierten Trennung semantischer Blöcke innerhalb eines bestimmten Beitrags. Aber solchen Code in jeden Absatz einzufügen, ist umständlich. Für den systematischen Einsatz kehren Sie zum Shortcode aus Methode 1 zurück.

⁉️🤔 Häufige Fragen

Warum entfernt WordPress mein <br> beim Wechseln zwischen den Editor-Tabs?

Der visuelle TinyMCE-Editor verarbeitet beim Wechsel in den Tab „Visuell" das HTML neu und entfernt Tags, die er für überflüssig hält. Der [br]-Shortcode ist von dieser Bereinigung nicht betroffen: Er wird erst bei der Ausgabe im Frontend in <br> umgewandelt und bleibt im Editor normaler Text in eckigen Klammern. Deshalb ist der Shortcode zuverlässiger als direktes HTML, Ihre Umbrüche überstehen beliebig viele Wechsel zwischen den Tabs.

Kann ich für vertikale Abstände nutzen?

Technisch ja, aber es ist schlechte Praxis. Mehrere hintereinander sehen unordentlich aus, verwirren Screenreader und fallen auf mobilen Bildschirmen auseinander. Für Leerräume nutzen Sie CSS-Abstände (Methode 3), und bleibt für Wörter, die nicht durch einen Zeilenumbruch getrennt werden dürfen, zum Beispiel „WordPress 6.4". Geschützte Leerzeichen sind nicht für vertikale Lücken gedacht.

Funktioniert [br] im Gutenberg-Editor?

Ja, der [br]-Shortcode funktioniert in jedem WordPress-Editor: sowohl im klassischen als auch im blockbasierten Gutenberg. Fügen Sie in Gutenberg einen „Shortcode"-Block ein und schreiben Sie [br]. Der Block befindet sich in der Kategorie „Widgets", wenn Sie ihn nicht sehen, klicken Sie auf „Alle durchsuchen" und finden Sie ihn über die Suche. Hinweis: In Gutenberg funktioniert Shift+Enter ebenfalls, daher ist der Shortcode für einfache einzelne Umbrüche möglicherweise nicht nötig.

Was tun, wenn der Shortcode als Text und nicht als Umbruch angezeigt wird?

Zwei typische Gründe. Erstens: Der Code ist in der falschen Datei eingefügt. Prüfen Sie, ob die Funktion in der functions.php des aktiven Themes oder Child-Themes hinzugefügt wurde, nicht in wp-config.php oder einer Plugin-Datei. Zweitens: Der Shortcode befindet sich innerhalb eines Code-Blocks oder HTML-Kommentars, WordPress verarbeitet Shortcodes nicht innerhalb von <pre>, <code> und <!-- -->. Schnellcheck: Fügen Sie [br] ganz am Anfang eines Beitrags im Frontend ein und sehen Sie sich das Ergebnis an.

Muss ich wpautop deaktivieren, damit der Shortcode funktioniert?

Nein, das Deaktivieren von wpautop ist weder nötig noch empfehlenswert: Sie verlieren die automatische Absatzformatierung auf der gesamten Seite. Der [br]-Shortcode funktioniert unabhängig von wpautop dank der Verarbeitungsreihenfolge: WordPress wendet Shortcodes nach dem Autoformatierungs-Filter an. Normale Absätze werden weiterhin automatisch formatiert, und Sie steuern Zeilenumbrüche manuell, genau dort, wo Sie benötigt werden. Der Befehl remove_filter('the_content', 'wpautop') ist eine radikale Maßnahme, nach der Sie <p>-Tags manuell auf der gesamten Seite setzen müssten. Wir raten davon ab.

Welche Methode für Zeilenumbrüche die richtige für Sie ist

Die Wahl hängt von der Aufgabe ab. Es gibt keine universelle Lösung, aber eine klare Logik:

Wenn es schnell und ohne Code gehen soll, Shift+Enter. Ein einzelner Umbruch reicht in den meisten Fällen: eine Bildunterschrift vom Bild trennen, eine lange Überschrift auflockern, eine Mikropause innerhalb eines Absatzes setzen.

Wenn es viele Umbrüche sind und sie sich wiederholen, [br]-Shortcode. Einmal einrichten und vergessen: Schreiben Sie [br], wann immer nötig, auch zehnmal hintereinander. Der Code in functions.php umfasst nicht einmal zehn Zeilen.

Wenn Sie präzise Abstände in Pixeln zur akzentuierten Trennung benötigen, Inline-CSS. Ein Paar margin-bottom: 80px gibt genau so viel Luft, wie das Design einer bestimmten Seite erfordert. Übertreiben Sie es nicht: Für den regelmäßigen Einsatz kehren Sie zum Shortcode zurück.

Diese drei Methoden decken alle Szenarien mit Zeilenumbrüchen in WordPress ab. Wählen Sie je nach Aufgabe und lassen Sie den Editor nicht für Sie entscheiden, wo eine Lücke sein soll und wo nicht.