Espaciado de WordPress entre párrafos: guía completa

Hablar de errático. El espacio de WordPress entre párrafos es demasiado o no es suficiente. No hay término medio. De forma predeterminada, el espaciado entre párrafos utiliza saltos de línea.

Ese es el
en modo de texto sin formato o HTML, o si pegó desde Word, Google Docs u otro procesador de texto, es probable que agregue ' '. por todas partes, haciendo que su HTML sea una pesadilla para desenredar.

WordPress es un software de publicación web. Funciona de manera diferente a cualquier procesador de texto como Google Docs, Microsoft Word, Open Office o cualquier procesador de texto que genere formato de texto enriquecido (archivos .rtf).



Cuando se pega texto enriquecido en WordPress, se agrega código en línea al HTML, lo que ralentiza el sitio.

Durante años, existía la opción de hacer clic en un botón para 'pegar desde Word' directamente en WordPress. Eso se ha ido. La única forma de pegar en WordPress ahora es pegar solo texto sin formato, lo que elimina el formato.

 

WordPress espaciado entre párrafos

El stylesheet.css para su tema de WordPress controla el espacio entre párrafos. Puede establecer reglas CSS usando el personalizador de WP. Establezca los valores de margen superior o inferior en píxeles (#px). Para cambiar el espacio entre líneas dentro de los párrafos, use #em ya que es relativo al tamaño de la fuente. 1em es estándar.

 

La verdad sobre lo que está sucediendo con el espacio entre párrafos

WordPress, al ser un editor de contenido WYSIWYG en línea, no utiliza espacios. Cuando presiona enter, WP está programado para asumir que desea insertar un nuevo párrafo.

Los párrafos nuevos se insertan con un doble salto de línea. Si no quieres el gran espacio, puedes reducirlo a la mitad.

 

Presiona shift y enter simultáneamente para un solo salto de línea

Para cambiar el espacio entre párrafos de un salto de línea doble a un salto de línea simple, presione shift y enter al mismo tiempo. Eso insertará un solo salto de línea, moviendo el cursor (o el contenido ya redactado) una línea hacia abajo.

La creación de dos nuevas líneas usando shift y enter simultáneamente crea dos saltos de línea individuales. Presionando enter una vez se logra el mismo espaciado entre párrafos. Un doble salto de línea.

Esa es la única opción que WP tiene lista para usar para controlar el espacio entre párrafos.

 

Personalización de la hoja de estilo (CSS)

Antes de que pueda modificar elementos en CSS, debe identificar el nombre de la clase div. Puede hacerlo con la herramienta de inspección de su navegador web.

En Google Chrome, se accede haciendo clic derecho en una página o publicación en su sitio, luego haciendo clic en 'inspeccionar'.

Las publicaciones de blog suelen ser '.post' y las páginas pueden ser cualquier cosa, desde '.page' hasta 'blog-post-single-content'. Depende del nombre de la plantilla de página que utilice su tema de WP. Las herramientas del inspector del navegador son cómo encontrarlas.

El menú CSS adicional en la barra lateral izquierda debajo de la configuración es una pestaña para 'CSS adicional'. Entra en eso y es el relleno que necesitas ajustar.

Para hacer eso, inserte un .[punto/punto] seguido del nombre de la clase div que mostró su inspector. El espacio entre párrafos se controla mediante el relleno y se fija con píxeles (px).

.post p{margin-bottom: 20px}

Cambia el número a lo que quieras.

El personalizador muestra actualizaciones en tiempo real, por lo que no tendrá que cambiar de pestaña para ver vistas previas de los cambios antes de publicarlos.

 

Cambiar el espaciado de línea WP dentro de los párrafos

El espacio entre líneas también se puede modificar con el personalizador de WP.

Sin embargo, en lugar de establecer el tamaño del espaciado en píxeles, es el 'em' el que se usa para establecer el espaciado de altura de línea.

La cadena CSS para agregar es:

.post p{line-height: 1.5em;}

Para publicaciones de blog o para páginas, podría ser

.blog-post-single-content .post p{line-height: 1em;}

Use el inspector del navegador (descrito anteriormente) para identificar el elemento de clase div que desea cambiar.

 

Entendiendo el lenguaje CSS

El “em” es la regla CSS más utilizada para todo lo relacionado con la tipografía en WordPress. Se define por el valor del tamaño de fuente. Cuanto mayor sea el tamaño de la fuente, mayor será 1em.

También puede definir la altura de la línea en centímetros (cm), pulgadas (in), píxeles (px), puntos (pt) o pica (pc). Sin embargo, no lo hagas.

Para el espacio entre líneas, em es la opción de estilo preferida. Esto se debe a que siempre está relacionado con el valor del tamaño de fuente y eso se ve afectado por el tamaño de la pantalla con la que el espectador lee una página web. Los píxeles (px) funcionan mejor para las imágenes porque se miden en píxeles.

Las medidas (cm y pulgadas) solo se aplican si necesita que su página web sea fácil de imprimir con las medidas exactas que estableció en la hoja de estilo.

Estos son absolutos en CSS, lo que significa que siguen teniendo un tamaño fijo independientemente del tamaño de la pantalla en la que el espectador lea el texto.

El que rara vez se usa porque es de poca utilidad es ex, (x-altura) que es una medida absoluta de la altura de las letras en minúsculas.

Para las páginas que se leen principalmente en dispositivos digitales (no impresas), em siempre establece los valores relativos al tamaño de fuente. Úselo cuando defina su espacio entre líneas en CSS.

Para lograr un formato similar en las publicaciones y páginas de WordPress a los valores de espacio entre líneas que esperaría de un procesador de textos, 1em es casi idéntico a 12 puntos.

En tipografía, que es la que usan los procesadores de texto, 12 puntos equivalen a un sexto de pulgada.

Para usar un ejemplo de la medida tipográfica más común de Times New Roman en una fuente de 12 puntos, el código CSS se establecería en 0,166666667 pulgadas.

Eso imprimiría la página con esas medidas exactas para el espacio entre líneas.
Sin embargo, sería difícil leer el texto de cerca usando un teléfono inteligente.

Es por eso que se prefiere el 'em', ya que fluctúa según el tamaño de la fuente. La gran mayoría de los visitantes de su sitio web no imprimirán páginas.

Para las páginas o publicaciones que desea que las personas impriman, como calendarios imprimibles, cuadernos, libros de ejercicios o similares, establezca esas publicaciones o páginas solo en una medida absoluta para que se impriman como las planeó.

De lo contrario, haga que el espacio entre líneas de su página web sea relativo al tamaño de fuente usando em. Ni puntos, ni picas, ni pulgadas, ni centímetros.

 

¿Es posible reducir el espacio de WordPress entre bloques?

El editor de bloques no tiene una forma de aumentar el margen de relleno entre los bloques. El archivo stylesheet.css debe tener un margen CSS establecido. Esto puede ser margen inferior o margen superior. Luego, en cualquier lugar donde se inserte el código HTML

en la página, el archivo stylesheet.css define el espacio entre bloques, es decir, 'p{margin-bottom: 20px}'. Sin establecer un margen CSS, WP usará por defecto un salto de línea doble.

 

¿Puede el espacio entre los párrafos de WordPress ser diferente al tamaño del espacio de impresión?

Puede agregar una sección para '@media print' al final de una hoja de estilo para definir las reglas de impresión. En general, el contenido impreso es legible con una fuente de 12 puntos y un espacio entre líneas. También puede hacer que las páginas web sean más fáciles de imprimir usando “display: none; } para secciones como barra lateral, navegación superior y comentarios. Un último consejo: ¡Solo puede agregar contenido a las páginas impresas! Útil para sitios de recetas que animan a los espectadores a imprimir sus recetas. Agregue una 'pantalla: bloque;' 'contenido' y un mensaje de agradecimiento por imprimir desde yoursite.com.

 

¿Cómo aumentar el espacio antes de que comience un nuevo encabezado (h1, h2, h3)?

Tan fácil como suena, no hay una manera fácil de hacerlo.

Dicho esto, si desea tener más espacio antes de que comience un nuevo encabezado (generalmente un encabezado h2 o h3, ya que h1 está reservado para el título del artículo), entonces la mejor manera de hacerlo, en el editor clásico, es agregar   antes de la etiqueta de encabezado (

,

, etc.). Debe agregar esto mientras está en el editor de código, obviamente no en el editor de texto. Este método también funciona en el editor de Gutenberg.