Timber by EMSIEN-3 LTD
Tags Posts tagged with "nuestras"

nuestras

0 346

Una de las preguntas habituales entre los WPrincipiantes es cómo lograr mudar el tamaño de letra de sus entradas. Lo que es absolutamente normal, si tomamos 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. El día de hoy te voy a explicar 3 métodos fáciles para lograr 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 lograr alterar el tamaño de letra de alguna una parte de tu entrada es editar directamente el código HTML. Para esto, no tienes más que saltar a la pestañita Texto (en el rincón superior derecha del editor):

Editor HTML de entradas
Editor HTML de entradas

Una vez allá, puedes agregar las etiquetas en código HTML que desees. En nuestro ejemplo hemos añadido una etiqueta h2 a la frase Fusce eu nibh odio” para conseguir el próximo 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 completamente todos y cada uno de los detalles de tu entrada. Puedes añadir un atributo style a cualquier etiqueta y agregarle estilos CSS embebidos. Por ejemplo,

¡WPrincipiante mola!

se transforma en:

¡WPrincipiante mola!

o puedes agregar una clase con el atributo class al nodo HTML:

¡WPrincipiante mola!

y alterarla a través del fichero style.css de tu tema:

span.texto-grande  font-size: 2em; color: #ff6c00;

consiguiendo exactamente el mismo efecto que terminamos de ver.

No obstante, esta solución tiene un par de inconvenientes 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 de qué manera marchan los estilos CSS para poder modificar los tamaños de letra de esta manera. Aunque no es excesivamente complicado adquirir los conocimientos básicos, es algo que se distancia un tanto de la facilidad de uso” que tanto pregonamos de WordPress.
  2. Puedes producir dependencias que en el futuro te complicarán la vida. Es normal que cada cierto tiempo decidas actualizar la apariencia de tu página web. Cuando ese día llegue, deseará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 a fin de que las cosas se vean bien” en tu diseño actual, cuando pases a un tema nuevo todo eso puede transformarse en un quebradero de cabeza.

Entonces, ¿no podemos utilizar el modo perfecto HTML? Sí, sí puedes. Mas, a ver, no nos marchamos 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 bien 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 solamente las etiquetas h1, h2, h3… de HTML. Además, ¿sabías que puedes introducirlas desde el editor visual?

Método 2. Crea títulos con el editor visual

Si te he persuadido de la necesidad de emplear un código HTML sencillo y de la utilidad de las etiquetas de título, este segundo procedimiento 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 próximo botón:

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

Una vez activada, el editor te mostrará un selector de formatos que nos permitirá añadir o quitar diferentes títulos en tu entrada, sin tener que alternar entre el modo visual y el modo texto:

Selector de títulos visual
Selector de títulos visual

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

Método dos.1. Utiliza los grupúsculos de teclado

Si te fijas en la barra secundaria que acabas de habilitar, vas a ver 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 grupúsculos 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 transformará esa línea en un h2 (puedes cambiar el número por el que desees y el título asimismo va a ser otro). Además de este hatajo específicamente, el editor incluye muchos más: negritas, subrayados, cortar, pegar, transformar a formato código… ¡Me chifla!

Método tres. Activa las opciones avanzadas” del editor visual

El último procedimiento 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. Concretamente, 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 utilizarse mas que están, por defecto, desactivadas:

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

Lo único que tienes que hacer es arrastrar aquellas opciones que eches de menos (como, por servirnos de un ejemplo, Tamaños de fuente”), pulsar en Save changes para guardar los cambios y, cuando vayas a editar una entrada nuevamente, vas a ver 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, aconsejo el segundo método sobre todos los demás. En primer lugar, por el hecho de que se trata de una solución asequible para todos los usuarios: basta con activar una casilla del editor por defecto y ya puedes mudar los tamaños de letra con dos clics. Mas lo que realmente me agrada de esta opción es que simplemente puedes alterar esos tamaños a través de la inserción de títulos en la entrada, lo que añade semántica” a nuestra entrada (y eso siempre y en todo momento es bueno para el posicionamiento web) y mantiene un código limpio y sencillo.

¿Empleas alguno de estos métodos para progresar visualmente tus entradas? ¡Cuéntanos tu experiencia!

Imagen destacada de Jeremy Keith.

ARTÍCULOS ALEATORIOS

0 829
WordPress es conocido por su facilidad de instalación. Sin embargo, siempre va bien recordar los pasos a seguir a fin de evitar posibles inconvenientes....