Cómo destacar el texto en WordPress

Hoy vamos con un artículo en ReAplicante de los sencillitos en el que te voy a enseñar a destacar texto en WordPress, es decir, ponerle un fondo amarillo para destacarlo como hacías en los apuntes del instituto, además, de varias formas distintas.

Como el post tiene varias opciones y no te quiero marear con la introducción, ahí vamos:

Métodos para destacar texto

CKEditor for WordPress

CKEditor for WordPress es un plugin de edición que te permite hacer muchas cosas bonitas, y básicamente lo que hace es cambiar la botonera de tu pantalla de edición de entradas por otra que tiene bastantes más opciones e incluso una fila adicional.

Pues bien, dentro de esas opciones adicionales está la de destacar el contenido del color que quieras, siendo una poderosa herramienta para llevar la maquetación de tus artículos a otro nivel.

RAD Text Highlighter

RAD Text Highlighter es un plugin muchísimo más sencillo que el anterior que te permite, gracias a un sencillo shortcode, marcar el inicio y el fin del texto que quieres destacar, pero sin cambiar el editor de tu WordPress, claro está.

Dentro de las opciones y configuraciones puedes elegir el color del texto y el color del fondo para que destaque, lo que es una solución muy funcional.

De forma manual

También puedes pasar de plugins y de historias y hacerlo de forma manual añadiendo una etiqueta en el modo Texto (ya sabes, en código) de tu editor de WordPress, es mucho más sencillo de lo que crees y, si eres un pelín espabilado, te ahorrarás un plugin y, con ello, sobrecarga del servidor.

El código es tan sencillo como este:

<span style="background-color:yellow;"> ... el texto que quieras destacar ... </span>

Y el resultado será algo así: el texto que quieras destacar. Genial, ¿verdad?

Por otro lado, si cambias el yellow por otro color o código de color en hexadecimal, también funcionará.

Vía CSS

La última vía y más profesional es hacer un pequeño child theme o añadir la funcionalidad de destacar texto en el que ya tengas creado, porque claro, la parte negativa de hacerlo de forma manual es que, cuando quieras cambiar el color para destacar, tendrás que ir mano a mano cambiándolo, y eso no es lo que queremos (te lo aseguro).

Esta técnica consta de dos pasos, como te decíamos, primero tienes que poner la función en el child theme (o en tu theme normal), más o menos así:

.hightlight-text { background-color:#FFF00; }

Una vez lo tengas cada vez que quieras destacar un texto tendrás que poner en modo Texto del editor lo siguiente:

<span class="hightlight-text">.. texto que quieras destacar ...</span>

Este método es algo más tedioso, pero lo bueno es que cambiando el color una sola vez en el CSS te cambiará todos los destacados que ya hayas hecho, salvándote un montón de tiempo.

Ahora bien, ¿con qué método te quedas?