Resaltar texto en WordPress

Resaltar texto en WordPress

¡Hola a todos! Hoy traigo el tutorial de un tema que yo misma estuve buscando por mucho tiempo. Trata acerca de resaltar texto en WordPress.

La mejor plataforma para bloggeros tiene muchísimas funcionalidades y permite toda customización posible, pero encuentro que si no tenés nada de conocimiento en HTML es muy difícil lograr cosas básicas como subrayar o resaltar el texto. Todas cuestiones simples y normales que encotramos en Word.

La buena noticia es que también existen bloggeros que se especializan en encontrarle la vuelta a nuestros problemas. Así es como llegué al post de un tal Ben Sibley que explica paso a paso como hacerlo. Aquí te paso mi versión, que incluye la manera de ¡¡cambiar el color del resaltado!!

Cómo resaltar texto en WordPress | paso a paso

Cuando vean lo fácil que es hacer esto van a pensar «¿cómo no aprendí esto antes?!» Bueno, así me pasó a mi.

Para resaltar texto van a tener que usar el comando <mark> en la versión HTML de su posteo. Acceder a dicha versión es un poco diferente en el editor clásico de WordPress y en el editor nuevo (de bloques). A continuación te explico como hacer en cada caso.

En el editor clásico, deberán hacer click en el botón «HTML». Cuando terminen harán click en «Visual» para volver a la edición normal de texto.

como resaltar texto en wordpress, highlight text in wordpress, html

En el editor por bloques (que estoy usando ahora y me gusta mucho más), hay que hacer click sobre el bloque del texto que se desea resaltar y elegir la opción «Edit as HTML». Esta opción aparece al hacer click en el botón de los tres puntitos. Luego de completar la acción podrán volver a la versión normal haciendo click en «Edit visually» que se encuentra en la misma posición donde antes veíamos el botón «Edit as HTML».

Bueno, ya entramos en la versión HTML de nuestro texto! Luce rarísimo, pero se sigue viendo el texto que escribimos y varios comandos -cada uno es una orden-. Nosotros nos concentraremos en el comando <mark> que es universal para resaltar texto, y más adelante te cuento cómo cambiarle el color si no te gusta el amarillo que aparece por defecto.

Elegí el texto que querés resaltar. En mi caso fue «resaltar texto en WordPress.» Al comienzo del texto poné el comando <mark>, y al finalizar el texto poné el comando </mark>. Vas a ver como lo puse en la siguiente imagen.

El comando <mark> da inicio a la acción, y su contrapartida </mark> con la barra diagonal (/) ordena la finalización. Cuando pases a la versión «visual» de tu párrafo ya verás el texto resaltado. Como te decía recién, el color default es amarillo, pero a continuación te enseñaré a cambiarle el color al resaltado para que se ajuste a los requerimientos de diseño y customización de tu sitio.

Cómo cambiar el color del resaltado

Si ya hiciste el resaltado del texto -y medio que te sentís un programador web jeje-, ahora pasemos a la parte más divertida: customizar el color del resaltado a tu gusto.

Para eso vas a tener que descargar un plugin que te facilita la edición simple del CSS de tu blog. Algunos themes ya tienen esta posibilidad, pero no todos, así que te sugiero el plugin que a mi me ayudó.

Dirigite al area administrador de tu sitio WordPress y hacé click en «Plugins»/»Añadir nuevo». Se te abrirá la siguiente página (los plugins que aparecen pueden variar de sitio a sitio).

En el campo que dice «Buscar plugins…» escribir «Simple custom CSS». Aparecerán varios plugins, pero elegí el que te indico en la siguiente imagen. Para descargar clickeá «Instalar ahora» y luego «Activar».

Una vez hecho esto buscá «CSS personalizado» dentro del menú de «Apariencia» y hacele click. Te aparecerá la siguiente pantalla:

En el renglón «1» verás algo anotado. Simplemente borralo.

Copiá y pegá en ese recuadro el siguiente texto:

mark {
  background-color: green;
}

Ese comando indica que tu resaltado sea en verde, pero te recomiendo visitar este sitio web donde podés ver el código del color que te imagines, y sustituir la palabra «green» por el código de tu color elegido.

La web que te mencioné luce como en la siguiente imagen, y es donde podés encontrar el código HTML del color que quieras. Incluso podés cambiar los colores, mezclar y formar tu propio color; ellos te dicen el código correspondiente.

El código de los colores está marcado dentro del recuadro rojo de la siguiente imagen. Cuando tengas el color que te gusta, simplemente copiá el código y sustituilo por la palabra «green» del comando que te pasé.

Andá devuelta a la página «CSS personalizado» y hacé el cambio sin modificar nada más que la palabra green por tu código. Por último, hacé click en «Actualizar el CSS personalizado» para que los cambios se guarden.

Algo importante a tener en cuenta es que el texto resaltado seguirá luciendo amarillo en el editor de texto. En cambio, cuando pre-visualices tu posteo (y una vez publicado) ya podrás apreciar el cambio de color.

¡Listo! ¿Te gustó? Cualquier duda escribime en la sección de comentarios.