Du lägger upp ett inlägg i WordPress. Mellan två rader behöver du ett litet mellanrum, inte ett nytt stycke utan en lätt separation. Du lägger till två <br>-taggar i rad, växlar till den visuella redigeraren och tillbaka, en försvann. Du lägger in en tom rad, WordPress gör om den till ett nytt stycke med full indragning. Inte vad du vill.

Det är inte temat eller inställningarna. Bakom kulisserna arbetar wpautop, ett inbyggt WordPress-filter som automatiskt formaterar text och tar bort "extra" HTML-taggar. Logiken är användbar: den besparar dig att manuellt slå in stycken i <p>. Men när du formger poesi, bildtexter till en bildserie eller steg-för-steg-instruktioner med mikropauser, ställer wpautop till det.

Nedan följer tre sätt att kontrollera radbrytningar i valfri WordPress-redigerare. Från en snabb inbyggd metod till helt manuell via CSS. Var och en är testad på WordPress 6.4+, utan tillägg.

💡 Snabb översikt:

• Registrera en [br]-shortcode i functions.php, ett universellt verktyg för valfritt antal radbrytningar som inte rör redigeraren
• Använd Skift+Enter när du skriver text, en inbyggd metod för en enstaka radbrytning, utan en enda rad kod
• Sätt exakt avstånd via inline-CSS när du behöver ett specifikt pixelavstånd för accentseparation mellan block

Video: så skapar du WordPress-shortcodes från grunden

Se hela processen, från registrering i functions.php till utmatning på frontend. Samma princip gäller för alla anpassade shortcodes, inte bara [br].

Metod 1: [br]-shortcode, full kontroll över radbrytningar

En shortcode löser problemet en gång för alla. Lägg till koden en gång, och infoga [br] var som helst: i inläggstext, i en widget, till och med i en rubrik via do_shortcode. Redigeraren rör inte innehåll inom hakparenteser, wpautop-filtret ignorerar det, radbrytningar överlever oavsett hur många gånger du växlar mellan flikar.

Lägg till följande kod i ditt barntemas functions.php. Om du inte har ett barntema än, skapa ett med vår guide först. Vill du inte röra temafiler, installera tillägget Code Snippets och klistra in koden där, samma resultat.

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

Funktionen sdstudio_line_break_shortcode returnerar en HTML <br />-tagg, och add_shortcode registrerar shortcoden [br], WordPress ersätter den med denna tagg när sidan renderas. Prefixet sdstudio_ i funktionsnamnet skyddar mot konflikter: om ett annat tillägg registrerar en funktion med samma namn kraschar inte sajten.

Efter att du lagt till koden, skriv i redigeraren så här:

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.

Resultat: den första och andra texten separeras av en enkel radbrytning, den tredje separeras av en dubbel radbrytning. WordPress bearbetar shortcodes efter wpautop-filtret, så autoformateringen påverkar dem inte.

Namnet br är valt för korthetens skull, men tekniskt sett är det en risk: ett annat tillägg eller tema kan registrera sin egen [br]. I praktiken stöter man nästan aldrig på konflikter. Om du märker konstigt beteende, byt namn på den, till exempel till [sd_br].

Innan du redigerar functions.php, gör en säkerhetskopia av filen via FTP eller filhanteraren hos ditt webbhotell. Om sajten slutar öppnas efter ändringar, ladda upp den sparade originalfilen igen, så fungerar allt igen.

Metod 2: Skift+Enter, inbyggd metod utan kod

Om du behöver en enstaka radbrytning och inte vill krångla med kod, håll ner Skift och tryck på Enter i den visuella redigeraren.

Markören flyttas till nästa rad inom samma stycke. I HTML är detta samma <br>, bara det att WordPress infogar den automatiskt. Vanlig Enter skapar ett nytt stycke (<p>), medan Skift+Enter skapar en radbrytning utan mellanrum.

Nackdel med metoden: fungerar bara för en radbrytning. Två Skift+Enter i rad slår WordPress ihop till en <br>, och tre blir till ett nytt stycke. Om du behöver märkbart vertikalt avstånd mellan rader, gå vidare till metod 3.

Metod 3: inline-CSS för exakt avstånd i pixlar

När varken shortcode eller Skift+Enter ger det avstånd som behövs, sätt avståndet direkt via attributet style.

Växla till fliken "Text" i det övre högra hörnet av den klassiska redigeraren:

Hitta stycket efter vilket du behöver mellanrum. Slå in det i <p>-taggar och lägg till 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>

Ersätt värdet 100px med ditt eget. Ju större siffra, desto bredare lucka. För avstånd uppifrån, använd margin-top. Du kan kombinera dem: <p style="margin-top: 50px; margin-bottom: 80px;">.

Metoden är praktisk för enstaka fall, accentseparation av semantiska block inom ett specifikt inlägg. Men att infoga sådan kod i varje stycke är opraktiskt. För systematisk användning, återgå till shortcoden från metod 1.

⁉️🤔 Vanliga frågor

Varför tar WordPress bort min <br> när jag växlar mellan redigeringsflikar?

Den visuella redigeraren TinyMCE bearbetar HTML på nytt när du växlar till fliken "Visuell" och tar bort taggar den anser onödiga. Shortcoden [br] påverkas inte av denna rensning: den avkodas till <br> först vid utmatning på frontend, och i redigeraren förblir den vanlig text inom hakparenteser. Därför är shortcoden mer tillförlitlig än direkt HTML, dina radbrytningar överlever oavsett antal växlingar mellan flikar.

Kan jag använda för vertikalt avstånd?

Tekniskt sett ja, men det är dålig praxis. Flera i rad ser rörigt ut, förvirrar skärmläsare och fallerar på mobila skärmar. För tomt utrymme, använd CSS-avstånd (metod 3), och spara för att binda ihop ord som inte får brytas av en radbrytning, till exempel "WordPress 6.4". Hårt mellanslag är inte avsett för vertikala luckor.

Fungerar [br] i Gutenberg-redigeraren?

Ja, shortcoden [br] fungerar i alla WordPress-redigerare: både i den klassiska och i blockbaserade Gutenberg. I Gutenberg infogar du ett "Shortcode"-block och skriver [br]. Blocket finns i kategorin "Widgets", om du inte ser det, klicka på "Bläddra bland alla" och hitta det via sökning. Notera: i Gutenberg fungerar Skift+Enter också, så för enkla enstaka radbrytningar kanske shortcoden inte behövs.

Vad gör jag om shortcoden visas som text och inte som en radbrytning?

Två typiska orsaker. Första: koden är infogad i fel fil. Kontrollera att funktionen är tillagd i functions.php för det aktiva temat eller barntemat, inte i wp-config.php eller en tilläggsfil. Andra: shortcoden är inuti ett kodblock eller en HTML-kommentar, WordPress bearbetar inte shortcodes inuti <pre>, <code> och <!-- -->. Snabbkontroll: lägg till [br] allra först i ett inlägg på frontend och se resultatet.

Behöver jag inaktivera wpautop för att shortcoden ska fungera?

Nej, att inaktivera wpautop är inte nödvändigt och till och med skadligt: du förlorar automatisk styckeformatering över hela sajten. Shortcoden [br] fungerar oberoende av wpautop tack vare bearbetningsordningen: WordPress tillämpar shortcodes efter autoformateringsfiltret. Vanliga stycken fortsätter att formateras automatiskt, och du styr radbrytningar manuellt, precis där det behövs. Kommandot remove_filter('the_content', 'wpautop') är en drastisk åtgärd, efter vilken du måste placera <p>-taggar manuellt över hela sajten. Vi avråder från detta.

Vilken radbrytningsmetod passar dig

Valet beror på uppgiften. Det finns ingen universallösning, men det finns en tydlig logik:

Om du behöver det snabbt och utan kod, Skift+Enter. En enkel radbrytning räcker i de flesta fall: separera en bildtext från en bild, bryt upp en lång rubrik, gör en mikropaus inom ett stycke.

Om det är många radbrytningar och de upprepas, [br]-shortcode. Ställ in den en gång och glöm: skriv [br] när det behövs, även tio gånger i rad. Koden i functions.php tar inte ens tio rader.

Om du behöver exakt avstånd i pixlar för accentseparation, inline-CSS. Ett par margin-bottom: 80px ger precis så mycket luft som designen för en specifik sida kräver. Överanvänd inte: för regelbunden tillämpning, återgå till shortcoden.

Dessa tre metoder täcker alla scenarier med radbrytningar i WordPress. Välj efter uppgift, och låt inte redigeraren bestämma åt dig var det ska finnas en lucka och var det inte ska det.