Cómo destacar un texto o párrafo en WordPress sin plugins

Los plugins no son malos si los utilizamos con cabeza, un mal uso de estos puede ralentizar nuestra web o proporcionar un punto débil que deje entredicho su integridad. Pero para cosas sencillas como destacar un texto o párrafo en WordPress, podemos utilizar la cabeza y hacer los cambios de manera sencilla sin la utilización de plugins.

Destacar un texto o párrafo en nuestra web

Hay varias formas de realizar este proceso de destacar un texto o párrafo en WordPress, la más sencilla utilizando la función que trae el propio WordPress, o la menos sencilla, y no por eso difícil, utilizando un poquito de CSS.

Gracias a las aplicaciones y sitios webs que hay en internet que nos ayudan a generar el código CSS que nos guste, no tenemos que tener ningún tipo de conocimiento avanzado sobre programación. Y el que necesitáis, que son dos líneas, os lo doy yo en este artículo para que lo copiéis y peguéis.

Destacar un texto o párrafo desde el editor de texto

Vamos a suponer que tenemos dos situaciones, que nos gusta la forma en la que destaca el texto el tema que hemos elegido y la que no.

Para la primera situación, basta con seleccionar el texto y pinchar en el icono de las comillas del menú del editor en WordPress, da igual que sea una página o una entrada.

Modificar el estilo de la opción "Cita" del editor de texto

El segundo supuesto es que no nos guste como consigue destacar un texto o párrafo la opción por defecto del tema de WordPress. Para eso tenemos que modificar es estilo CSS. No os asustéis que es muy sencillo.

La etiqueta HTML que indica, al texto que hemos elegido, que lo destaque cuando marcamos las comillas de "cita", se llama blockquote. Y a esta etiqueta es la que vamos a decir que se comporte de diferente manera a la que indica el tema.

Gracias a que WordPress tiene una pestaña en el personalizador llamada "CSS adicional", no tendremos que editar ningún archivo ni complicarnos la vida con temas hijos si no los tenemos (aunque es interesante haber creado uno para algunas modificaciones de otro tipo).

El código que tendremos que poner en esta pestaña es el siguiente:

Este código hará que el texto destacado se muestre en una caja negra (indicado por el color #000000) y con el texto blanco (color #ffffff). Estos valores de los colores podemos modificarlos a conveniencia. Los códigos de color podemos conseguirlos en muchas webs haciendo una búsqueda en internet por "colores web".

Añadir más código CSS sin saber programar

Hasta ahora hemos realizado unos pasos muy sencillos, pero que pueden mejorar la forma de como el usuario de nuestro sitio percibe el contenido, y con unas pocas líneas de código y un "corta y pega" del que os dejo arriba, el cambio puede ser enorme.

Si queremos destacar un texto o párrafo aún más dándole más efectos, como un degradado de fondo o una sombra, podemos hacer uso de los recursos que nos ofrece internet.

En esta página, cssmatic, ponen a nuestra disposición unas herramientas de forma muy gráfica que nos proporcionan el código que necesitamos para el efecto que nos guste. Podéis ver cómo se utiliza en este artículo. No voy a colocar el código que he generado yo porque es tan sencillo de conseguir que podéis generarlo vosotros. En el vídeo inicial os muestro el proceso y lo sencillo que es incorporarlo. Hay miles de posibilidades.

Si buscáis en internet "generador de código CSS" podréis optar a más recursos además del que yo os propongo.

Destacar un texto o párrafo sin seleccionarlo como "cita"

Hasta ahora hemos visto cómo cambiar el aspecto del texto que marcamos como "cita", pero puede que queramos conservar la opción de "cita destacada" con las propiedades que trae el tema y buscar otra forma de realizar el cambio.

Para esto sólo tenemos que meter el texto que queremos destacar en una caja y darla las propiedades que nos gusten con código CSS, como hemos hecho con blockquote.

Para crear la caja tenemos que editar el artículo desde la pestaña HTML y colocar delante y detrás del texto unas etiquetas llamadas "div", que abren y cierran la caja. A la etiqueta "div" que irá al principio la asignaremos un nombre, el que queramos y que no coincida con los que pudiera tener el código de WordPress. Yo la voy a dar el nombre de "resaltar". El formato del código sería el siguiente:

Ya lo tenemos todo, sólo falta juntar las piezas. Vamos al personalizador y sustituimos la etiqueta "blockquote" por el nombre que le hemos dado a la etiqueta "div", precedido de un punto (.resaltar). Todos los efectos pasarán a la nueva caja y el formato de "cita" volverá a las propiedades iniciales del tema.

Si queremos aplicar otros efectos, podemos generarlos con cssmatic u otra opción o generador de css que encontréis.

Pros y contras de destacar un texto o párrafo con estos métodos

La conclusión sobre este ejercicio es bastante buena, si pensamos que el motivo de proceder de esta forma es evitar instalar más plugins de los necesarios.

Pero podemos tener algún reparo, por ejemplo, si queremos mantener las propiedades iniciales de "cita destacada", cada vez que queramos destacar un texto o párrafo, tenemos que escribir o pegar manualmente las etiquetas "div". Aunque no lo veo un problema si no abusamos de ello.

¿Te ha ayudado a mejorar el aspecto de tus artículos? Deja un comentario con tu experiencia.