![🛠 Cómo crear un shortcode [br] para saltos de línea en WordPress](/wp-content/uploads/2021/04/9ff1fa565871d9f8e51f953d4dabd0ef-1.avif)
🛠 Cómo crear un shortcode [br] para saltos de línea en WordPress
Está maquetando una entrada en WordPress. Entre dos líneas necesita un pequeño salto, no un párrafo nuevo sino una separación ligera. Añade dos etiquetas <br> seguidas, cambia al editor visual y al volver, una ha desaparecido. Pone una línea en blanco, WordPress la convierte en un nuevo párrafo con sangría completa. No es lo que usted quiere.
No es el tema ni los ajustes. Entre bastidores, está trabajando wpautop, un filtro integrado de WordPress que formatea el texto automáticamente y elimina etiquetas HTML «sobrantes». La lógica es útil: le evita tener que envolver manualmente los párrafos en <p>. Pero cuando está maquetando poesía, pies de foto para una serie de imágenes o instrucciones paso a paso con micropausas, wpautop se interpone.
A continuación, tres maneras de controlar los saltos de línea en cualquier editor de WordPress. Desde un método rápido integrado hasta el control totalmente manual mediante CSS. Cada uno se ha probado en WordPress 6.4+, sin plugins.
💡 Resumen rápido:
- Registre un shortcode
[br]enfunctions.php, una herramienta universal para cualquier cantidad de saltos que no afecta al editor - Use Mayús+Intro al escribir texto, un método integrado para un solo salto, sin una sola línea de código
- Establezca un espaciado preciso mediante CSS en línea cuando necesite una distancia exacta en píxeles para una separación destacada entre bloques
Vídeo: cómo crear shortcodes de WordPress desde cero
Vea el proceso completo, desde el registro en functions.php hasta la salida en el frontend. El mismo principio se aplica a cualquier shortcode personalizado, no solo a [br].
Método 1: shortcode [br], control total sobre los saltos
Un shortcode resuelve el problema de una vez por todas. Añada el código una vez e inserte [br] en cualquier lugar: en el texto de una entrada, en un widget, incluso en un encabezado mediante do_shortcode. El editor no modifica el contenido dentro de los corchetes, el filtro wpautop lo ignora y los saltos sobreviven tras cualquier número de cambios entre pestañas.
Añada el siguiente código al archivo functions.php de su tema hijo. Si aún no tiene un tema hijo, primero cree uno siguiendo nuestra guía. Si no quiere modificar archivos del tema, instale el plugin Code Snippets y pegue el código allí, el resultado es el mismo.
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 función sdstudio_line_break_shortcode devuelve una etiqueta HTML <br />, y add_shortcode registra el shortcode [br]; WordPress lo sustituye por esta etiqueta al renderizar la página. El prefijo sdstudio_ en el nombre de la función protege contra conflictos: si otro plugin registra una función con el mismo nombre, el sitio no se romperá.
Después de añadir el código, escriba en el editor así:
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: el primer y el segundo texto quedan separados por un solo salto, el tercero queda separado por un salto doble. WordPress procesa los shortcodes después del filtro wpautop, por lo que el autoformateo no les afecta.
El nombre br se elige por brevedad, pero técnicamente es un riesgo: otro plugin o tema podría registrar su propio [br]. En la práctica, los conflictos casi nunca se encuentran. Si observa un comportamiento extraño, renómbrelo, por ejemplo, a [sd_br].
Antes de editar functions.php, haga una copia de seguridad del archivo por FTP o mediante el gestor de archivos de su alojamiento. Si el sitio deja de abrirse tras los cambios, vuelva a subir el original guardado y todo funcionará.
Método 2: Mayús+Intro, método integrado sin código
Si necesita un solo salto y no quiere complicarse con código, mantenga pulsada Mayús y pulse Intro en el editor visual.
El cursor se moverá a la siguiente línea dentro del mismo párrafo. En HTML esto es el mismo <br>, solo que WordPress lo inserta automáticamente. Un Intro normal crea un nuevo párrafo (<p>), mientras que Mayús+Intro crea un salto de línea sin espaciado.
Inconveniente del método: solo funciona para un salto. Dos Mayús+Intro seguidos WordPress los fusionará en un solo <br>, y tres se convertirán en un nuevo párrafo. Si necesita un espaciado vertical notable entre líneas, pase al método 3.
Método 3: CSS en línea para un espaciado preciso en píxeles
Cuando ni el shortcode ni Mayús+Intro proporcionan la distancia necesaria, establezca el espaciado directamente mediante el atributo style.
Cambie a la pestaña «Texto» en la esquina superior derecha del editor clásico:

Busque el párrafo tras el cual necesita el espaciado. Envuélvalo en etiquetas <p> y añada 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>
Sustituya el valor 100px por el suyo. Cuanto mayor sea el número, más amplio será el espacio. Para espaciado desde la parte superior, use margin-top. Puede combinarlos: <p style="margin-top: 50px; margin-bottom: 80px;">.
El método es conveniente para casos puntuales, separación destacada de bloques semánticos dentro de una entrada concreta. Pero insertar este código en cada párrafo es incómodo. Para un uso sistemático, vuelva al shortcode del método 1.
⁉️🤔 Preguntas frecuentes
¿Por qué WordPress elimina mi <br> al cambiar entre pestañas del editor?
El editor visual TinyMCE, al cambiar a la pestaña «Visual», reprocesa el HTML y elimina las etiquetas que considera innecesarias. El shortcode
[br]no se ve afectado por esta limpieza: se decodifica en<br>solo al mostrarse en el frontend, y en el editor permanece como texto normal entre corchetes. Por eso el shortcode es más fiable que el HTML directo, sus saltos sobrevivirán a cualquier número de cambios entre pestañas.
¿Puedo usar para el espaciado vertical?
Técnicamente sí, pero es una mala práctica. Varios
seguidos tienen un aspecto desordenado, confunden a los lectores de pantalla y se descomponen en pantallas móviles. Para el espacio vacío, use espaciado CSS (método 3), y dejepara unir palabras que no deban separarse por un salto de línea, por ejemplo, «WordPress 6.4». El espacio de no separación no está pensado para huecos verticales.
¿Funciona [br] en el editor Gutenberg?
Sí, el shortcode
[br]funciona en cualquier editor de WordPress: tanto en el clásico como en el de bloques Gutenberg. En Gutenberg, inserte un bloque «Shortcode» y escriba[br]. El bloque está en la categoría «Widgets»; si no lo ve, haga clic en «Examinar todos» y búsquelo. Nota: en Gutenberg Mayús+Intro también funciona, así que para saltos simples individuales puede que no necesite el shortcode.
¿Qué hacer si el shortcode se muestra como texto y no como un salto?
Dos razones típicas. Primera: el código está insertado en el archivo equivocado. Compruebe que la función se ha añadido a
functions.phpdel tema activo o del tema hijo, no enwp-config.phpni en un archivo de plugin. Segunda: el shortcode está dentro de un bloque de código o un comentario HTML; WordPress no procesa shortcodes dentro de<pre>,<code>y<!-- -->. Comprobación rápida: añada[br]al principio de una entrada en el frontend y vea el resultado.
¿Necesito desactivar wpautop para que funcione el shortcode?
No, desactivar
wpautopno es necesario e incluso es perjudicial: perderá el formateo automático de párrafos en todo el sitio. El shortcode[br]funciona independientemente dewpautopgracias al orden de procesamiento: WordPress aplica los shortcodes después del filtro de autoformateo. Los párrafos normales seguirán formateándose automáticamente, y usted controla los saltos de línea manualmente, exactamente donde los necesita. La ordenremove_filter('the_content', 'wpautop')es una medida radical, tras la cual tendrá que colocar manualmente etiquetas<p>por todo el sitio. Le aconsejamos evitar esto.
Qué método de salto de línea es el adecuado para usted
La elección depende de la tarea. No hay una solución universal única, pero sí una lógica clara:
Si lo necesita rápido y sin código, Mayús+Intro. Un solo salto es suficiente en la mayoría de los casos: separar un pie de foto de una imagen, dividir un encabezado largo, hacer una micropausa dentro de un párrafo.
Si hay muchos saltos y se repiten, shortcode [br]. Configúrelo una vez y olvídese: escriba [br] cuando lo necesite, incluso diez veces seguidas. El código en functions.php no ocupa ni diez líneas.
Si necesita un espaciado preciso en píxeles para una separación destacada, CSS en línea. Un par margin-bottom: 80px dará exactamente el aire que requiere el diseño de una página específica. No abuse: para una aplicación regular, vuelva al shortcode.
Estos tres métodos cubren todos los escenarios con saltos de línea en WordPress. Elija según la tarea y no deje que el editor decida por usted dónde debe haber un espacio y dónde no.



