Una de las preguntas habituales entre los WPrincipiantes es cómo conseguir cambiar el tamaño de letra de sus entradas. Lo cual es completamente normal, si tenemos en cuenta que el editor por defecto de entradas tiene esta pinta:
que, como vemos, no ofrece demasiadas opciones al respecto. Hoy te explicaré tres métodos sencillos para conseguir cambiar el tamaño de fuente de tus entradas en WordPress.
Método 1. Pasa al modo Texto
La primera opción que tienes para conseguir modificar el tamaño de letra de alguna parte de tu entrada es editar directamente el código HTML. Para ello, no tienes más que saltar a la pestaña Texto (en la esquina superior derecha del editor):
Una vez allí, puedes añadir las etiquetas HTML que quieras. En nuestro ejemplo hemos añadido una etiqueta h2 a la frase «Fusce eu nibh odio» para conseguir el siguiente efecto:
Evidentemente, cuando te pones a editar código HTML tienes acceso a absolutamente todos los detalles de tu entrada. Puedes añadir un atributo style a cualquier etiqueta y añadirle estilos CSS embebidos. Por ejemplo,
<span style="font-size: 2em; color:#ff6c00;">¡WPrincipiante mola!</span>
se convierte en:
¡WPrincipiante mola!
o puedes añadir una clase con el atributo class al nodo HTML:
<span class="texto-grande">¡WPrincipiante mola!</span>
y modificarla a través del archivo style.css de tu tema:
span.texto-grande {
font-size: 2em;
color: #ff6c00;
}consiguiendo el mismo efecto que acabamos de ver.
No obstante, esta solución tiene un par de problemas más o menos graves:
- Hay que estar familiarizado con HTML. Aunque es obvio, no está de más recordar que necesitarás conocer la sintaxis de HTML y cómo funcionan los estilos CSS para poder modificar los tamaños de letra de esta forma. Aunque no es excesivamente complicado adquirir los conocimientos básicos, es algo que se aleja un poco de la «facilidad de uso» que tanto pregonamos de WordPress.
- Puedes generar dependencias que en el futuro te complicarán la vida. Es normal que cada cierto tiempo decidas actualizar la apariencia de tu web. Cuando ese día llegue, querrás que el código HTML de tus entradas sea lo más sencillo posible. Si te has dedicado a llenarlo de estilos y clases para que las cosas «se vean bien» en tu diseño actual, cuando pases a un tema nuevo todo eso puede convertirse en un quebradero de cabeza.
Entonces, ¿no podemos usar el modo HTML? Sí, sí puedes. Pero, a ver, no nos vamos a engañar: la mayoría de las veces queremos ampliar el tamaño de letra de nuestro texto para destacar un título o una sección de nuestra entrada. Con lo cual, mejor no te compliques la vida con las clases y estilos HTML y céntrate en usar únicamente las etiquetas h1, h2, h3… de HTML. Además, ¿sabías que puedes insertarlas desde el editor visual?
Método 2. Crea títulos con el editor visual
Si te he convencido de la necesidad de usar un código HTML sencillo y de la utilidad de las etiquetas de título, este segundo método te va a encantar. Para poder crear títulos desde el editor visual, simplemente tienes que activar la barra secundaria de herramientas pulsando en el siguiente botón:
Una vez activada, el editor te mostrará un selector de formatos que nos permitirá añadir o eliminar diferentes títulos en tu entrada, sin tener que alternar entre el modo visual y el modo texto:
Selector de títulos visualSencillo, ¿no? ¡Pero es que las cosas pueden ser aún mejores!
Nelio Popups
¡Un plugin fantástico! Es muy fácil crear ventanas emergentes con el editor que ya conoces y las opciones que ofrece están muy bien diseñadas.
Juan Hernando
Método 2.1. Usa los atajos de teclado
Si te fijas en la barra secundaria que acabas de habilitar, verás que aparece un icono al final con un símbolo de interrogación. Si le das, te aparecerá un diálogo emergente con una lista de atajos de teclado como esta:
Para convertir una línea/párrafo en un título, basta con poner el cursor encima de esa línea y pulsar la combinación de teclas Shift + Alt + 2 y el editor convertirá esa línea en un h2 (puedes cambiar el número por el que quieras y el título también será otro). Además de este atajo en concreto, el editor incluye muchos más: negritas, subrayados, cortar, pegar, convertir a formato código… ¡Me encanta! 😀
Método 3. Activa las opciones «avanzadas» del editor visual
El último método que te voy a explicar consiste en instalar un plugin llamado TinyMCE Advanced. Una vez activado, dirígete a Ajustes » TinyMCE Advanced para configurar el editor visual de WordPress. En concreto, en la página de configuración del plugin verás las barras de herramientas del editor junto con cada una de las acciones que contiene, así como una lista de acciones (Unused buttons) que pueden usarse pero que están, por defecto, desactivadas:
Lo único que tienes que hacer es arrastrar aquellas opciones que eches de menos (como, por ejemplo, «Tamaños de fuente»), pulsar en Save changes para guardar los cambios y, cuando vayas a editar una entrada de nuevo, verás la opción que acabas de añadir:
Mi opinión
Personalmente, recomiendo el segundo método por encima de todos los demás. En primer lugar, porque se trata de una solución asequible para todos los usuarios: basta con activar una casilla del editor por defecto y ya puedes cambiar los tamaños de letra con un par de clics. Pero lo que realmente me gusta de esta opción es que simplemente puedes modificar esos tamaños a través de la inserción de títulos en la entrada, lo cual añade «semántica» a nuestra entrada (y eso siempre es bueno para el SEO) y mantiene un código limpio y sencillo. 😉
¿Usas alguno de estos métodos para mejorar visualmente tus entradas? ¡Cuéntanos tu experiencia!
Imagen destacada de Jeremy Keith.
Deja una respuesta