Está a compor uma publicação no WordPress. Entre duas linhas, precisa de uma pequena pausa, não um novo parágrafo, mas uma separação ligeira. Adiciona dois <br> seguidos, muda para o editor visual e volta, um desapareceu. Coloca uma linha em branco, o WordPress transforma-a num novo parágrafo com um recuo completo. Não é o que pretende.

Não é do tema nem das definições. Nos bastidores, o wpautop está a trabalhar, um filtro incorporado do WordPress que formata automaticamente o texto e remove etiquetas HTML «extra». A lógica é útil: evita ter de envolver parágrafos manualmente em <p>. Mas quando está a compor poesia, legendas para uma série de imagens ou instruções passo a passo com micropausas, o wpautop atrapalha.

A seguir, três formas de controlar as quebras de linha em qualquer editor do WordPress. Desde um método rápido incorporado até ao controlo totalmente manual através de CSS. Cada um foi testado no WordPress 6.4+, sem plugins.

💡 Resumo rápido:

• Registe um shortcode [br] no functions.php, uma ferramenta universal para qualquer número de quebras que não mexe no editor
• Use Shift+Enter ao escrever texto, um método incorporado para uma única quebra, sem uma única linha de código
• Defina um espaçamento preciso através de CSS inline quando precisa de uma distância específica em píxeis para uma separação de destaque entre blocos

Vídeo: como criar shortcodes do WordPress de raiz

Veja o processo completo, desde o registo no functions.php até à saída no frontend. O mesmo princípio aplica-se a quaisquer shortcodes personalizados, não apenas ao [br].

Método 1: shortcode [br], controlo total sobre as quebras

Um shortcode resolve o problema de uma vez por todas. Adicione o código uma vez e insira [br] em qualquer lugar: no texto da publicação, num widget, até num cabeçalho através de do_shortcode. O editor não toca no conteúdo dentro de parênteses retos, o filtro wpautop ignora-o, as quebras sobrevivem após qualquer número de mudanças entre separadores.

Adicione o seguinte código ao functions.php do seu tema filho. Se ainda não tem um tema filho, primeiro crie um usando o nosso guia. Se não quiser mexer nos ficheiros do tema, instale o plugin Code Snippets e cole o código lá, o resultado é o mesmo.

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

A função sdstudio_line_break_shortcode devolve uma etiqueta HTML <br />, e o add_shortcode regista o shortcode [br], o WordPress substitui-o por esta etiqueta ao renderizar a página. O prefixo sdstudio_ no nome da função protege contra conflitos: se outro plugin registar uma função com o mesmo nome, o site não vai abaixo.

Depois de adicionar o código, escreva no editor assim:

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.

Resultado: o primeiro e o segundo textos são separados por uma única quebra, o terceiro é separado por uma quebra dupla. O WordPress processa os shortcodes depois do filtro wpautop, por isso a formatação automática não os afeta.

O nome br é escolhido por brevidade, mas tecnicamente é um risco: outro plugin ou tema pode registar o seu próprio [br]. Na prática, quase nunca se encontram conflitos. Se notar um comportamento estranho, mude o nome, por exemplo, para [sd_br].

Antes de editar o functions.php, faça uma cópia de segurança do ficheiro via FTP ou pelo gestor de ficheiros do seu alojamento. Se o site deixar de abrir após as alterações, carregue o original guardado de volta, tudo voltará a funcionar.

Método 2: Shift+Enter, método incorporado sem código

Se precisa de uma única quebra e não quer mexer em código, mantenha premida a tecla Shift e pressione Enter no editor visual.

O cursor passará para a linha seguinte dentro do mesmo parágrafo. Em HTML, isto é o mesmo <br>, só que o WordPress insere-o automaticamente. O Enter normal cria um novo parágrafo (<p>), enquanto Shift+Enter cria uma quebra de linha sem espaçamento.

Desvantagem do método: funciona apenas para uma quebra. Dois Shift+Enter seguidos, o WordPress junta num único <br>, e três transformam-se num novo parágrafo. Se precisa de um espaçamento vertical notório entre linhas, avance para o método 3.

Método 3: CSS inline para espaçamento preciso em píxeis

Quando nem o shortcode nem o Shift+Enter dão a distância necessária, defina o espaçamento diretamente através do atributo style.

Mude para o separador «Texto» no canto superior direito do editor clássico:

Encontre o parágrafo após o qual precisa do espaçamento. Envolva-o em etiquetas <p> e adicione 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>

Substitua o valor 100px pelo seu. Quanto maior o número, maior o intervalo. Para espaçamento a partir do topo, use margin-top. Pode combiná-los: <p style="margin-top: 50px; margin-bottom: 80px;">.

O método é conveniente para casos pontuais, separação de destaque de blocos semânticos dentro de uma publicação específica. Mas inserir este código em cada parágrafo é inconveniente. Para uso sistemático, volte ao shortcode do método 1.

⁉️🤔 Perguntas frequentes

Porque é que o WordPress remove o meu <br> quando mudo entre separadores do editor?

O editor visual TinyMCE, ao mudar para o separador «Visual», reprocessa o HTML e remove etiquetas que considera desnecessárias. O shortcode [br] não é afetado por esta limpeza: é descodificado em <br> apenas na saída no frontend, e no editor permanece como texto normal entre parênteses retos. É por isso que o shortcode é mais fiável do que o HTML direto, as suas quebras sobreviverão a qualquer número de mudanças entre separadores.

Posso usar para espaçamento vertical?

Tecnicamente sim, mas é uma má prática. Vários seguidos têm um aspeto desorganizado, confundem os leitores de ecrã e desconfiguram-se em ecrãs de telemóvel. Para espaço vazio, use espaçamento CSS (método 3) e deixe o para ligar palavras que não podem ser quebradas por uma quebra de linha, por exemplo, «WordPress 6.4». O espaço não quebrável não se destina a intervalos verticais.

O [br] funciona no editor Gutenberg?

Sim, o shortcode [br] funciona em qualquer editor do WordPress: tanto no clássico como no Gutenberg baseado em blocos. No Gutenberg, insira um bloco «Shortcode» e escreva [br]. O bloco está na categoria «Widgets», se não o vir, clique em «Ver todos» e encontre-o através da pesquisa. Nota: no Gutenberg, o Shift+Enter também funciona, por isso, para quebras simples e únicas, o shortcode pode não ser necessário.

O que fazer se o shortcode aparecer como texto e não como uma quebra?

Duas razões típicas. Primeira: o código está inserido no ficheiro errado. Verifique se a função foi adicionada ao functions.php do tema ativo ou tema filho, e não no wp-config.php ou num ficheiro de plugin. Segunda: o shortcode está dentro de um bloco de código ou comentário HTML, o WordPress não processa shortcodes dentro de <pre>, <code> e <!-- -->. Verificação rápida: adicione [br] mesmo no início de uma publicação no frontend e veja o resultado.

Preciso de desativar o wpautop para o shortcode funcionar?

Não, desativar o wpautop não é necessário e é até prejudicial: perderá a formatação automática de parágrafos em todo o site. O shortcode [br] funciona independentemente do wpautop graças à ordem de processamento: o WordPress aplica os shortcodes depois do filtro de formatação automática. Os parágrafos normais continuarão a formatar-se automaticamente e você controla as quebras de linha manualmente, exatamente onde precisa. O comando remove_filter('the_content', 'wpautop') é uma medida radical, após a qual terá de colocar manualmente etiquetas <p> em todo o site. Aconselhamos a evitar isto.

Qual o método de quebra de linha certo para si

A escolha depende da tarefa. Não há uma solução universal única, mas há uma lógica clara:

Se precisa de algo rápido e sem código, Shift+Enter. Uma única quebra é suficiente na maioria dos casos: separar uma legenda de uma imagem, dividir um cabeçalho longo, fazer uma micropausa dentro de um parágrafo.

Se há muitas quebras e elas se repetem, shortcode [br]. Configure uma vez e esqueça: escreva [br] quando necessário, até dez vezes seguidas. O código no functions.php não ocupa nem dez linhas.

Se precisa de espaçamento preciso em píxeis para separação de destaque, CSS inline. Um par margin-bottom: 80px dará exatamente o ar que o design de uma página específica exige. Não abuse: para aplicação regular, volte ao shortcode.

Estes três métodos cobrem todos os cenários com quebras de linha no WordPress. Escolha de acordo com a tarefa e não deixe o editor decidir por si onde deve haver um intervalo e onde não deve.