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

20 de mayo - 2017

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.

Suscríbete:

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.

destacar párrafo en WordPress. Cita

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".

Destacar un texto o párrafo en WordPress. Blockquote

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.

Destacar un texto o párrafo en WordPress. Blockquote2

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:

Destacar un texto o párrafo en WordPress. Div

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.

Destacar un texto o párrafo en WordPress. Div2

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

cssmatic

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.

VISITA MI CANAL DE YOUTUBE

Juan

Juan

Juan Martín es el autor del blog Ingresos Vía Web, una persona como tú que intenta ganarse la vida en internet. Trabajo en mi blog para convertir mi sueño de generar autoempleo en realidad y poder ayudar a quien quiera, a conseguir su sueño a través de mis contenidos. Si te parece interesante apúntate a mi newsletter.

4 Comentarios

  1. Jesus

    Hola, veo siempre en web de viajes, al final de cada post un cuadro con color y dentro iconos y textos con enlaces,
    ¿como se pone eso? es un plugin o un witchet?
    Por poner un ejemplo, al final de este post de un blog de viajes viene el cuadro en naranja con los iconos de avión, hotel, coche, seguro,etc y luego un texto con cada uno y un enlace.
    https://www.perderseporelmundo.com/fortaleza-suomenlinna-helsinki-que-ver-como-llegar/¿como se hace?

    Responder
    • Juan

      Hola Jesús

      En ese caso concreto se trata de un tema premium llamado Extra que permite insertar módulos personalizados.

      Se puede recrear en una plantilla normal utilizando CSS para simular el aspecto, pero para añdirlo a todos los post habría que hacerlo uno a uno o utilizar algún tipo de script que lo automatice.

      Con Gutemberg (el editor por defecto de WordPress), puedes crear un bloque reutilizable y añadirlo al final de cada post manualmente.

      Responder
  2. SALVA

    Excelente articulo, estaba buscando como puedo poner por ejemplo con el editor de wordpress que ciertos h2 y h3 el fondo del texto tuviera color. Puedo hacerlo sin editar con el css?
    Gracias de antemano

    Responder

Enviar un comentario

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Al dejar un comentario se solicitan datos como tu email y nombre que se almacenan en una cookie para que no tengas que volver a completarlos en próximas visitas. Para enviar un comentario debes aceptar nuestra política de privacidad. Responsable de los datos: Juan Martín Pascual. | Finalidad: Controlar spam, gestión y moderación de comentarios. | Legitimación: Tu consentimiento expreso. |Comunicación de los datos: No se comunicarán a terceros salvo por obligación legal. | Destinatario: Base de datos alojada en SiteGround Spain S.L. dentro de la UE. Ver política de privacidad de Siteground. | Derechos: Acceso, rectificación, supresión, limitación, portabilidad y olvido de sus datos.

Mi canal de Youtube

Categorías

Recomendado para Afiliados de Amazon

AAWP Amazon Affiliate for WordPress
Azon Press

Esta web funciona gracias a:

Anuncio - WordPress Gestionado de SiteGround - Potente pero simple de usar. Haz clic para aprender más. Descuento directo DIVI -  10 por ciento