Typography de Jeremy Keith

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:

Editor Visual de Entradas de WordPress
Editor Visual de Entradas de WordPress

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):

Editor HTML de entradas
Editor HTML de entradas

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:

Resultado de añadir etiqueta H2 a una entrada
Resultado de añadir etiqueta H2 a una entrada

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:

  1. 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.
  2. 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:

Activando las opciones adicionales del editor visual
Activando las opciones adicionales del editor visual

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 visual

Sencillo, ¿no? ¡Pero es que las cosas pueden ser aún mejores!

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:

Atajos de teclado del editor visual
Atajos de teclado del editor visual

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 ShiftAlt2 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:

Pantalla de configuración del plugin TinyMCE Advanced
Pantalla de configuración del plugin TinyMCE Advanced

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:

Selector de tamaños con TinyMCE Advanced
Selector de tamaños con TinyMCE Advanced

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.

18 respuestas a «Cómo cambiar el tamaño de fuente en nuestras entradas»

  1. Avatar de jesus
    jesus

    Muy buen aporte me ayudo mucho lo del plugin gracias

  2. Avatar de Jen
    Jen

    Hola!!
    Trato de parametrar el texto de todas las entradas en la option «modelo»>»personlizar»> «avanzado»> «body text» y solo modifica las entradas del blog y una cola de sodas las paginas, sabrais porque?
    Mil gracias de antemano!
    Jen

    1. Avatar de David Aguilera

      Hola Jen,

      La opción que comentas parece específica de tu tema (de hecho, no recuerdo haberla visto nunca en un WordPress por defecto). Es posible que se trate de un parámetro de configuración que sólo afecte a las entradas de tu blog. Te recomiendo que te pongas en contacto con el creador de tu tema y le pidas ayuda a él.

      Un saludo,
      David

  3. Avatar de Mónica
    Mónica

    Muy útil información. Además, he de reconocer que me encanta el diseño de tu blog David! Un saludo y gracias de parte de una estudiante a la que le sirve más de un artículo tuyo para poder realizar mi página web en WordPress en condiciones

    1. Avatar de David Aguilera

      ¡Gracias! Me alegra saber que nuestros artículos te ayudan, Mónica.

  4. Avatar de Mónica
    Mónica

    Por cierto, este plugin tiene también para modificar la fuente del texto?

    1. Avatar de David Aguilera

      Aparentemente, sí puede. Tal y como muestra una de las capturas de pantalla del plugin, existe una opción llamada Font Family.

      De todas formas, no te recomiendo hacer cambios al contenido de tus entradas de esta forma. ¿Un cambio puntual? ¡Por supuesto! Si quieres resaltar algún fragmento concreto por algún motivo específico, adelante. Pero formatear todo el contenido sería un error; si en el futuro cambiaras de tema, la apariencia de las entradas no podría adaptarse al nuevo estilo, porque habrías forzado otro tú.

  5. Avatar de eva
    eva

    Muchas gracias por tu información, tengo una duda, si para el seo en cada página es bueno utilizar sólo una vez h1/ y h2 para que el buscador clasifique bien la página pero al mismo tiempo, a mi me encanta poner texto grandes y utilizo demasiado el h2 .
    La primera pregunta ¿ Puedo poner tantas veces como quiera el h2?
    si no debería¿ mejor utilizar este método? span.texto-grande {
    font-size: 2em;
    color: #ff6c00;
    }
    gracias por todo!

  6. Avatar de Edgar Aguilera
    Edgar Aguilera

    Muchas gracias, me ha sido super útil!

  7. Avatar de Vera

    ¡Muchas gracias! Acabo de conseguirlo con la opción 3 y ha sido realmente fácil.

    1. Avatar de David Aguilera

      ¡Me alegro mucho! Un saludo, Vera.

  8. Avatar de hormiguita

    Hola! Gracias por tu ayuda! Ahora para instalar el pluggin hay q tener plan business… o se puede hacer de otra forma?

    1. Avatar de David Aguilera

      ¡Hola! No me suena que el plugin que comento requiera un plan business, pero si así fuera, todo es cuestión de decidir si te compensa o no 😉

  9. Avatar de Jorge Ferreira
    Jorge Ferreira

    David yo te invoco! Muchas gracias por el post! Pude acomodar la H1 de la página principal de mi blog. El mismo quedaba feo por el tamaño default en el .CSS

    Debo reconocer que hace años trabajo con WordPress, no me gusta añadir muchos plugins, trato de manejarme con lo necesario. Por ende siempre tuve múltiples problemas con los tamaños de las etiquetas H1, H2, H3 etc.

    Me lamento ahora mismo de no haber probado algo así antes.

    Saludos, Jorge Ferreira.

    1. Avatar de David Aguilera

      Me alegro mucho, Jorge. ¡Ánimos y a seguir mejorando entre todos!

  10. Avatar de Vanessa Fernández Trosell
    Vanessa Fernández Trosell

    Muchas gracias por la información, no se me había ocurrido usar el código HTML para hacerlo, fue demasiado fácil, gracias.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leído y acepto la política de privacidad de Nelio Software

Tus datos personales se almacenarán en SiteGround y serán usados por Nelio Software con el único objetivo de publicar tu comentario aquí. Con el envío de este comentario, nos das el consentimiento expreso para ello. Escríbenos para acceder, rectificar, limitar o eliminar tus datos personales.