Du setter opp et innlegg i WordPress. Mellom to linjer trenger du et lite avbrekk, ikke et nytt avsnitt, men en lett separasjon. Du legger til to <br>-tagger på rad, bytter til visuell redigering og tilbake, én forsvant. Du setter inn en blank linje, WordPress gjør den om til et nytt avsnitt med fullt innrykk. Ikke det du ønsker.

Det er ikke temaet eller innstillingene. Bak kulissene jobber wpautop, et innebygd WordPress-filter som automatisk formaterer tekst og fjerner «ekstra» HTML-tagger. Logikken er nyttig: den sparer deg for å manuelt pakke avsnitt inn i <p>. Men når du setter opp poesi, bildetekster for en bildeserie eller trinnvise instruksjoner med mikropauser, kommer wpautop i veien.

Nedenfor finner du tre måter å kontrollere linjeskift på i enhver WordPress-editor. Fra en rask innebygd metode til fullstendig manuell kontroll via CSS. Hver av dem er testet på WordPress 6.4+, uten utvidelser.

💡 Rask oversikt:

• Registrer en [br]-shortcode i functions.php, et universelt verktøy for et hvilket som helst antall linjeskift som ikke rører editoren
• Bruk Shift+Enter når du skriver tekst, en innebygd metode for et enkelt linjeskift, uten en eneste linje kode
• Angi presis avstand via innebygd CSS når du trenger en spesifikk pikselavstand for markant separasjon mellom blokker

Video: slik lager du WordPress-shortcoder fra bunnen av

Se hele prosessen, fra registrering i functions.php til visning på frontsiden. Det samme prinsippet gjelder for alle egendefinerte shortcoder, ikke bare [br].

Metode 1: [br]-shortcode, full kontroll over linjeskift

En shortcode løser problemet én gang for alle. Legg til koden én gang, og sett inn [br] hvor som helst: i innleggstekst, i et widgetområde, til og med i en overskrift via do_shortcode. Editoren rører ikke innhold inni hakeparenteser, wpautop-filteret ignorerer det, linjeskift overlever uansett antall bytter mellom faner.

Legg til følgende kode i barnetemaets functions.php. Hvis du ikke har et barnetema ennå, opprett ett ved hjelp av vår guide først. Ønsker du ikke å røre temafiler, installer utvidelsen Code Snippets og lim inn koden der, samme 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' );

Funksjonen sdstudio_line_break_shortcode returnerer en HTML <br />-tagg, og add_shortcode registrerer [br]-shortcoden, WordPress erstatter den med denne taggen når siden rendres. sdstudio_-prefikset i funksjonsnavnet beskytter mot konflikter: hvis en annen utvidelse registrerer en funksjon med samme navn, vil ikke nettstedet krasje.

Etter at du har lagt til koden, skriver du i editoren slik:

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ørste og andre teksten er adskilt av et enkelt linjeskift, den tredje er adskilt av et dobbelt linjeskift. WordPress behandler shortcoder etter wpautop-filteret, så autoformatering påvirker dem ikke.

Navnet br er valgt for korthets skyld, men teknisk sett er det en risiko: en annen utvidelse eller et annet tema kan registrere sin egen [br]. I praksis støter man nesten aldri på konflikter. Hvis du oppdager merkelig oppførsel, gi den et nytt navn, for eksempel til [sd_br].

Før du redigerer functions.php, ta en sikkerhetskopi av filen via FTP eller filbehandleren til din hostingleverandør. Hvis nettstedet slutter å åpne etter endringer, last opp den lagrede originalen tilbake, så vil alt fungere.

Metode 2: Shift+Enter, innebygd metode uten kode

Hvis du trenger et enkelt linjeskift og ikke vil styre med kode, hold nede Shift og trykk Enter i den visuelle editoren.

Markøren flyttes til neste linje innenfor samme avsnitt. I HTML er dette den samme <br>, bare at WordPress setter den inn automatisk. Vanlig Enter oppretter et nytt avsnitt (<p>), mens Shift+Enter oppretter et linjeskift uten mellomrom.

Ulempe med metoden: fungerer bare for ett linjeskift. To Shift+Enter på rad vil WordPress slå sammen til én <br>, og tre vil bli gjort om til et nytt avsnitt. Hvis du trenger merkbar vertikal avstand mellom linjer, gå videre til metode 3.

Metode 3: innebygd CSS for presis avstand i piksler

Når verken shortcode eller Shift+Enter gir den nødvendige avstanden, angir du avstanden direkte via style-attributtet.

Bytt til «Tekst»-fanen øverst til høyre i den klassiske editoren:

Finn avsnittet du trenger avstand etter. Pakk det inn i <p>-tagger og legg til 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>

Erstatt verdien 100px med din egen. Jo større tall, desto bredere mellomrom. For avstand fra toppen, bruk margin-top. Du kan kombinere dem: <p style="margin-top: 50px; margin-bottom: 80px;">.

Metoden er praktisk for enkelttilfeller, markant separasjon av semantiske blokker innenfor et spesifikt innlegg. Men å sette inn slik kode i hvert avsnitt er upraktisk. For systematisk bruk, gå tilbake til shortcoden fra metode 1.

⁉️🤔 Vanlige spørsmål

Hvorfor fjerner WordPress min <br> når jeg bytter mellom redigeringsfaner?

Den visuelle TinyMCE-editoren reprosesserer HTML når du bytter til «Visuelt»-fanen og fjerner tagger den anser som unødvendige. [br]-shortcoden påvirkes ikke av denne oppryddingen: den dekodes til <br> først ved visning på frontsiden, og i editoren forblir den vanlig tekst i hakeparenteser. Derfor er shortcoden mer pålitelig enn direkte HTML, dine linjeskift vil overleve uansett antall bytter mellom faner.

Kan jeg bruke for vertikal avstand?

Teknisk sett ja, men det er dårlig praksis. Flere på rad ser rotete ut, forvirrer skjermlesere og faller fra hverandre på mobilskjermer. For tomrom, bruk CSS-avstand (metode 3), og la være for å binde sammen ord som ikke kan brytes av et linjeskift, for eksempel «WordPress 6.4». Hardt mellomrom er ikke ment for vertikale mellomrom.

Fungerer [br] i Gutenberg-editoren?

Ja, [br]-shortcoden fungerer i enhver WordPress-editor: både i den klassiske og i den blokkbaserte Gutenberg. I Gutenberg setter du inn en «Shortcode»-blokk og skriver [br]. Blokken ligger i kategorien «Widgeter», hvis du ikke ser den, klikk «Bla gjennom alle» og finn den via søk. Merk: i Gutenberg fungerer Shift+Enter også, så for enkle enkeltlinjeskift er shortcoden kanskje ikke nødvendig.

Hva gjør jeg hvis shortcoden vises som tekst og ikke som et linjeskift?

To typiske årsaker. For det første: koden er satt inn i feil fil. Sjekk at funksjonen er lagt til i functions.php for det aktive temaet eller barnetemaet, ikke i wp-config.php eller en utvidelsesfil. For det andre: shortcoden er inne i en kodeblokk eller HTML-kommentar, WordPress behandler ikke shortcoder inni <pre>, <code> og <!-- -->. Rask sjekk: legg til [br] helt i begynnelsen av et innlegg på frontsiden og se resultatet.

Må jeg deaktivere wpautop for at shortcoden skal fungere?

Nei, å deaktivere wpautop er ikke nødvendig og til og med skadelig: du mister automatisk avsnittsformatering over hele nettstedet. [br]-shortcoden fungerer uavhengig av wpautop takket være behandlingsrekkefølgen: WordPress bruker shortcoder etter autoformateringsfilteret. Vanlige avsnitt vil fortsette å formateres automatisk, og du kontrollerer linjeskift manuelt, nøyaktig der det trengs. Kommandoen remove_filter('the_content', 'wpautop') er et radikalt tiltak, etter dette må du manuelt plassere <p>-tagger over hele nettstedet. Vi anbefaler å unngå dette.

Hvilken metode for linjeskift som passer for deg

Valget avhenger av oppgaven. Det finnes ingen universell løsning, men det er en klar logikk:

Hvis du trenger det raskt og uten kode, Shift+Enter. Ett enkelt linjeskift er nok i de fleste tilfeller: skille en bildetekst fra et bilde, bryte opp en lang overskrift, lage en mikropause i et avsnitt.

Hvis det er mange linjeskift og de gjentar seg, [br]-shortcode. Sett det opp én gang og glem det: skriv [br] når det trengs, til og med ti ganger på rad. Koden i functions.php tar ikke engang ti linjer.

Hvis du trenger presis avstand i piksler for markant separasjon, innebygd CSS. Et par margin-bottom: 80px vil gi nøyaktig så mye luft som designet på en spesifikk side krever. Ikke overdriv: for regelmessig bruk, gå tilbake til shortcoden.

Disse tre metodene dekker alle scenarioer med linjeskift i WordPress. Velg i henhold til oppgaven, og ikke la editoren bestemme for deg hvor det skal være et mellomrom og hvor det ikke skal være det.