Cómo sangrar la primera línea de una publicación de WordPress

WordPress facilita la publicación de contenido digital. Sin embargo, hacer que su texto se vea como una impresión tradicional requiere un poco de conocimientos de codificación.

Específicamente, cómo sangrar la primera línea de una publicación de WP, en lugar de un párrafo completo.

De forma predeterminada, cuando utiliza los botones de sangría y anulación de la sangría en la barra de herramientas de WordPress del Editor clásico o del bloque Párrafo clásico en Gutenberg, la sangría se aplica a todo el párrafo.



Para sangrar solo la primera línea de un nuevo párrafo, se debe agregar el código CSS a su hoja de estilo en cascada (stylesheet.css).

 

Cómo sangrar la primera línea de una publicación de WordPress

Use CSS para crear una clase de 'sangría personalizada', luego llámela con HTML agregando

. La sangría solo se crea donde el HTML se agrega al comienzo de un nuevo párrafo. En su lugar, apuntar a la etiqueta 'artículo' en CSS sangra la primera línea de cada párrafo nuevo.

 

Por qué los botones de sangría de WP no funcionan para sangrías de una sola línea

El uso de los botones de sangría y eliminación de sangría en el editor en la página de WP aplica la sangría a todo el párrafo.

Mire en su editor de texto y verá el estilo de relleno izquierdo que se aplica al código HTML.

De forma predeterminada, la alternancia de sangría agrega 40 px de una sangría.

<p style="padding-left: 40px;">

Ese número (40px) se puede aumentar o disminuir.

Si mueve el código final (

), divide el párrafo. No aplica la sangría solo a la primera línea del párrafo.

Lo mismo sucede si usa cualquier

en HTML para modificar la sangría, como

<p style="margin-left:10%">

o similar.

El valor predeterminado para la etiqueta

en HTML es aplicar el elemento de estilo a todo el párrafo.

Para aplicar una sangría a la primera línea de un párrafo, debe agregar una clase de sangría a su CSS personalizado.

Puede agregar esto a su archivo stylesheet.css, o la ruta mucho más simple es usar el CSS adicional dentro de su panel de administración de WP.

 

Agregar una sangría personalizada en CSS (la manera fácil)

Vaya al menú Apariencia en la barra lateral izquierda, seleccione Personalizar, luego seleccione la opción CSS adicional.

 

Inserta el siguiente código:

p.custom-indent {
text-indent:40px;
}

Luego presione publicar.

Hasta que no se publiquen los cambios, no se aplicarán. Una vez aplicado, se aplica en todo el sitio dondequiera que se use el HTML.

Con los cambios agregados, en lugar de agregar el elemento

en el HTML, insertaría el elemento

.

<p class=”custom-indent”>

 

Aplicar una sangría a la primera línea de cada párrafo nuevo

Para aplicar la sangría personalizada a todos los párrafos, sería tedioso insertar el elemento

al comienzo de cada párrafo.

Puede hacer que cada nuevo párrafo tenga un espaciado de sangría igual solo aplicado a la primera línea de cada párrafo sin sangrar todo el párrafo.

El código CSS a usar para eso es similar a...

article p {
text-indent:40px;
}

La razón por la que se menciona que los códigos son similares a los anteriores es que cada tema tiene nombres diferentes para identificar varios elementos en la hoja de estilo.

En este sitio, el elemento 'cuerpo' de las publicaciones de blog está etiquetado con 'contenido de entrada mvt-content'.

En nuestro sitio de prueba, se llama 'blog-post-single-content'.

El elemento depende de la plantilla de su tema. Utilice el inspector de su navegador para identificar la clase.

Usando Chrome, haga clic derecho, luego seleccione la opción 'inspeccionar'.

Al igual que con la sangría personalizada, la cantidad de píxeles que sangra el texto desde el margen izquierdo se puede aumentar o disminuir.