Stai impaginando un articolo su WordPress. Tra due righe ti serve una piccola pausa, non un nuovo paragrafo ma una separazione leggera. Inserisci due tag <br> di fila, passi all'editor visuale e torni indietro: uno è sparito. Metti una riga vuota, WordPress la trasforma in un nuovo paragrafo con rientro completo. Non è quello che volevi.

Non è colpa del tema o delle impostazioni. Dietro le quinte lavora wpautop, un filtro di WordPress che formatta automaticamente il testo e rimuove i tag HTML "di troppo". La logica è utile: ti evita di dover racchiudere manualmente i paragrafi nei tag <p>. Ma quando devi impaginare una poesia, le didascalie di una serie di immagini o istruzioni passo passo con micro-pause, wpautop diventa un ostacolo.

Ecco tre modi per controllare le interruzioni di riga in qualsiasi editor di WordPress. Da un metodo rapido già integrato fino al controllo manuale completo tramite CSS. Ciascuno è stato testato su WordPress 6.4+, senza plugin.

💡 Panoramica rapida:

• Registra uno shortcode [br] in functions.php, uno strumento universale per qualsiasi numero di interruzioni che non tocca l'editor
• Usa Shift+Invio mentre scrivi, un metodo integrato per una singola interruzione, senza scrivere una riga di codice
• Imposta una spaziatura precisa tramite CSS inline quando ti serve una distanza esatta in pixel per separare visivamente dei blocchi

Video: come creare shortcode WordPress da zero

Guarda il processo completo, dalla registrazione in functions.php all'output nel frontend. Lo stesso principio vale per qualsiasi shortcode personalizzato, non solo per [br].

Metodo 1: shortcode [br], controllo totale sulle interruzioni

Uno shortcode risolve il problema una volta per tutte. Aggiungi il codice una volta sola e inserisci [br] ovunque: nel testo di un articolo, in un widget, persino in un titolo tramite do_shortcode. L'editor non tocca il contenuto dentro le parentesi quadre, il filtro wpautop lo ignora, le interruzioni sopravvivono a qualsiasi numero di passaggi tra le schede.

Aggiungi il codice seguente al file functions.php del tuo tema child. Se non hai ancora un tema child, prima creane uno seguendo la nostra guida. Se non vuoi toccare i file del tema, installa il plugin Code Snippets e incolla lì il codice: il risultato è lo stesso.

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 funzione sdstudio_line_break_shortcode restituisce un tag HTML <br /> e add_shortcode registra lo shortcode [br]: WordPress lo sostituisce con questo tag al momento del rendering della pagina. Il prefisso sdstudio_ nel nome della funzione protegge da conflitti: se un altro plugin registrasse una funzione con lo stesso nome, il sito non andrebbe in crash.

Dopo aver aggiunto il codice, scrivi nell'editor in questo modo:

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.

Risultato: il primo e il secondo testo sono separati da un'interruzione singola, il terzo è separato da un'interruzione doppia. WordPress elabora gli shortcode dopo il filtro wpautop, quindi la formattazione automatica non li influenza.

Il nome br è scelto per brevità, ma tecnicamente è un rischio: un altro plugin o tema potrebbe registrare un proprio [br]. In pratica, i conflitti non si incontrano quasi mai. Se noti un comportamento anomalo, rinominalo, per esempio in [sd_br].

Prima di modificare functions.php, fai una copia di backup del file via FTP o dal file manager del tuo hosting. Se dopo le modifiche il sito non si apre più, ricarica l'originale salvato e tutto tornerà a funzionare.

Metodo 2: Shift+Invio, metodo integrato senza codice

Se ti serve una singola interruzione e non vuoi smanettare con il codice, tieni premuto Shift e premi Invio nell'editor visuale.

Il cursore si sposterà alla riga successiva restando all'interno dello stesso paragrafo. In HTML si tratta sempre di <br>, solo che WordPress lo inserisce automaticamente. Il semplice Invio crea un nuovo paragrafo (<p>), mentre Shift+Invio crea un'interruzione di riga senza spaziatura.

Svantaggio del metodo: funziona solo per un'interruzione. Due Shift+Invio di fila WordPress li unisce in un solo <br>, mentre tre diventano un nuovo paragrafo. Se ti serve uno spazio verticale evidente tra le righe, passa al metodo 3.

Metodo 3: CSS inline per una spaziatura precisa in pixel

Quando né lo shortcode né Shift+Invio danno la distanza desiderata, imposta la spaziatura direttamente tramite l'attributo style.

Passa alla scheda "Testo" nell'angolo in alto a destra dell'editor classico:

Trova il paragrafo dopo il quale ti serve la spaziatura. Racchiudilo nei tag <p> e aggiungi 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>

Sostituisci il valore 100px con il tuo. Più alto è il numero, più ampio è lo spazio. Per la spaziatura dall'alto, usa margin-top. Puoi combinarli: <p style="margin-top: 50px; margin-bottom: 80px;">.

Il metodo è comodo per casi singoli, per una separazione visiva di blocchi semantici all'interno di un articolo specifico. Ma inserire questo codice in ogni paragrafo è scomodo. Per un uso sistematico, torna allo shortcode del metodo 1.

⁉️🤔 Domande frequenti

Perché WordPress rimuove i miei <br> quando passo da una scheda all'altra dell'editor?

L'editor visuale TinyMCE, quando si passa alla scheda "Visuale", rielabora l'HTML e rimuove i tag che considera superflui. Lo shortcode [br] non è soggetto a questa pulizia: viene decodificato in <br> solo al momento dell'output nel frontend, mentre nell'editor resta un normale testo tra parentesi quadre. Ecco perché lo shortcode è più affidabile dell'HTML diretto: le tue interruzioni sopravvivranno a qualsiasi numero di passaggi tra le schede.

Posso usare per creare spazio verticale?

Tecnicamente sì, ma è una cattiva pratica. Più di fila hanno un aspetto disordinato, confondono gli screen reader e si rompono sugli schermi dei dispositivi mobili. Per lo spazio vuoto, usa la spaziatura CSS (metodo 3) e lascia per unire parole che non possono essere spezzate da un'interruzione di riga, per esempio "WordPress 6.4". Lo spazio unificatore non è pensato per creare vuoti verticali.

Lo [br] funziona nell'editor Gutenberg?

Sì, lo shortcode [br] funziona in qualsiasi editor di WordPress: sia in quello classico sia in Gutenberg a blocchi. In Gutenberg, inserisci un blocco "Shortcode" e scrivi [br]. Il blocco si trova nella categoria "Widget"; se non lo vedi, clicca su "Sfoglia tutto" e cercalo. Nota: in Gutenberg funziona anche Shift+Invio, quindi per semplici interruzioni singole lo shortcode potrebbe non servire.

Cosa fare se lo shortcode viene visualizzato come testo e non come interruzione?

Due cause tipiche. Prima: il codice è inserito nel file sbagliato. Verifica che la funzione sia stata aggiunta al functions.php del tema attivo o del tema child, non in wp-config.php o nel file di un plugin. Seconda: lo shortcode si trova dentro un blocco di codice o un commento HTML; WordPress non elabora gli shortcode all'interno di <pre>, <code> e <!-- -->. Verifica rapida: aggiungi [br] all'inizio di un articolo nel frontend e guarda il risultato.

Devo disabilitare wpautop perché lo shortcode funzioni?

No, disabilitare wpautop non è necessario ed è persino dannoso: perderesti la formattazione automatica dei paragrafi su tutto il sito. Lo shortcode [br] funziona indipendentemente da wpautop grazie all'ordine di elaborazione: WordPress applica gli shortcode dopo il filtro di formattazione automatica. I paragrafi normali continueranno a formattarsi in automatico e tu controllerai le interruzioni di riga manualmente, solo dove servono. Il comando remove_filter('the_content', 'wpautop') è una misura drastica, dopo la quale dovresti inserire manualmente i tag <p> in tutto il sito. Ti consigliamo di evitarlo.

Quale metodo di interruzione di riga fa per te

La scelta dipende dall'obiettivo. Non esiste un'unica soluzione universale, ma c'è una logica chiara:

Se ti serve subito e senza codice, Shift+Invio. Una singola interruzione basta nella maggior parte dei casi: separare una didascalia da un'immagine, spezzare un titolo lungo, creare una micro-pausa all'interno di un paragrafo.

Se le interruzioni sono tante e si ripetono, shortcode [br]. Si configura una volta e poi si dimentica: scrivi [br] quando serve, anche dieci volte di fila. Il codice in functions.php non occupa nemmeno dieci righe.

Se ti serve una spaziatura precisa in pixel per una separazione visiva, CSS inline. Un margin-bottom: 80px darà esattamente l'aria che richiede il design di una pagina specifica. Non abusarne: per un'applicazione regolare, torna allo shortcode.

Questi tre metodi coprono tutti gli scenari di interruzione di riga in WordPress. Scegli in base all'obiettivo e non lasciare che sia l'editor a decidere al posto tuo dove deve esserci uno spazio e dove no.