Los enlaces online sientan las bases de la interactividad sencilla en línea, ya sea enviando a los usuarios a páginas web, documentos descargables u otras aplicaciones.
Lo mejor es que puedes hacer enlaces clicables en muchas aplicaciones, como sistemas de gestión de contenidos, creadores de sitios web, procesadores de texto y clientes de correo electrónico.
Esta guía te explica todo lo que necesitas saber sobre cómo hacer que un enlace sea clicable, al tiempo que explica los fundamentos de un enlace y la terminología que puedes encontrar al crearlo
Conceptos Básicos sobre Hipervínculos
Existen varios términos para referirse a una parte del contenido -como un texto o una imagen- que ofrece la posibilidad de hacer clic, o la opción interactiva de colocar el cursor sobre el contenido y navegar a otra parte.
Algunos de esos términos son:
- Enlace
- Hipervínculo/hiperenlace
- Enlace clicable
Técnicamente, todos ellos tienen sus propias definiciones, pero hoy en día se utilizan indistintamente.
La capacidad de un usuario para interactuar con el contenido en línea se basa en estos hipervínculos, en los que los usuarios pueden desplazarse sobre un trozo de texto, una imagen o un botón y hacer clic en él, enviándoles así a otro contenido (como una página web externa) o a realizar una acción (como llamar a un número de teléfono desde tu smartphone).
Una versión simple codificada en HTML de un hiperenlace tiene este aspecto:
<a href="https://example.com/">the hyperlink text</a>Pero se vuelve más compleja cuando se tienen en cuenta elementos opcionales como los objetivos y los elementos nofollow:
<a href="https://example.com/" target="_blank" rel="noreferrer noopener">the hyperlink text</a>Estos son los elementos que componen un hipervínculo:
- El contenido
- La URL o enlace permanente
- El objetivo
- Nofollow, noreferrer y noopener
Sigue leyendo para conocer cada uno de estos elementos y cómo funcionan.
El contenido
Puedes crear enlaces clicables con dos tipos de contenido:
- Texto
- Gráficos
Esto significa que, siempre que la aplicación que utilices admita hipervínculos, puedes encontrar cualquier línea de texto escrito o imagen dentro de tu contenido y convertirla en un enlace clicable.
Texto con hipervínculos
El texto es una de las opciones de contenido a la hora de hacer enlaces clicables.
Si utilizas un editor como WordPress, puedes resaltar el texto que quieras en la pantalla del editor y, a continuación, selecciona el botón Enlazar.
Esto muestra un enlace en el frontend, normalmente con texto subrayado y coloreado.
Un hipervínculo de texto a veces cambia cuando un usuario pasa el ratón por encima, a menudo cambiando de color u ocultando el subrayado para especificar que es un enlace sobre el que se puede hacer clic.
Además, al pasar el ratón por encima de un enlace de texto, los navegadores suelen mostrar una vista previa de la URL enlazada para que veas a dónde conduce.
Imágenes hipervinculadas
Muchos programas –incluido WordPress– te permiten generar hipervínculos utilizando medios online, como imágenes.
Esto funciona seleccionando una imagen en el backend (en lugar de texto) y añadiendo la URL deseada mediante la función Enlace.
Una vez publicada, la flecha estándar del cursor se convierte en un cursor manual al pasar el ratón por encima de la imagen, y los visitantes verán que el navegador presenta una vista previa de la URL enlazada.
Tanto si se trata de un enlace de imagen como de texto, al hacer clic en él se activará una acción, como enviar al usuario a una URL diferente.
Cómo es la codificación
El contenido de texto o imagen de un hipervínculo está representado por «The Link Text» en el ejemplo siguiente:
<a href="https://example.com/" target="_blank" rel="noreferrer noopener">The Link Text</a>Sin embargo, aprender a hacer un enlace clicable significa que sustituirás ese texto por tu propio contenido.
Para un enlace de texto, el texto sobre el que se puede hacer clic va justo antes del corchete de cierre </a>.
Los enlaces de imagen son un poco diferentes, ya que deben incluir la URL de la imagen (mejor si está subida a la base de datos multimedia de tu sitio web).
Esa URL multimedia va entre las comillas de la sección img src=»».
Hay otros elementos que añadir con los enlaces de imagen, como:
- Una etiqueta alt (alt=»»): Texto que describe la imagen para los rastreadores de los motores de búsqueda y los usuarios con discapacidad visual.
- Una clase (class=»»): Un nombre codificado para utilizar la imagen en otra parte de tu código o de los archivos de tu sitio web.
La URL
Como parte de un hipervínculo, la URL sirve como destino o acción que se produce cuando alguien hace clic en el enlace.
Pero no todos los hiperenlaces tienen URL de página web. Puedes encontrar que algunos hipervínculos tienen la funcionalidad «clic para llamar», que permite a los usuarios llamar a un número de teléfono directamente desde su smartphone con un solo clic.
Otra opción es mostrar un mapa que abra la aplicación de mapas del usuario en su teléfono.
Cómo es la codificación
Las URL de los enlaces clicables se colocan entre las comillas en la parte <a href=»» del hipervínculo.
Por ejemplo, la parte https://www.example.com del siguiente código de hipervínculo es la URL:
<a href="https://www.example.com" target="_blank" rel="noreferrer noopener">View the entire menu.</a> 
Algunas URL llevan a documentos descargables, mientras que otras requieren una codificación especial. Por ejemplo, un enlace «haz clic para llamar» requiere que coloques tel: y un número de teléfono dentro de las comillas href=»».
Ventana de destino
La ventana de destino es una parte opcional de un hiperenlace. Especifica si el contenido se abre en la misma pestaña del navegador o en una nueva pestaña.
En WordPress y en muchas otras aplicaciones, puedes añadir una ventana de destino sin tocar ningún código utilizando el editor visual.
Simplemente desactiva el conmutador «Abrir en una nueva pestaña» si quieres que el enlace se abra en la misma pestaña que está viendo el usuario.
Como alternativa, puedes activar el interruptor «Abrir en una pestaña nueva», que añade automáticamente un atributo _blank a la codificación del hipervínculo y abre la URL en una pestaña nueva al hacer clic.
Aspecto de la codificación
Estas opciones se activan al añadir y editar el elemento target=»» en un hipervínculo.
Aunque el atributo target tiene varios valores, como _blank, _parent, _self y _top, generalmente sólo utilizamos el valor _blank.
Un hipervínculo sin el objetivo _blank tiene el siguiente aspecto:
Verás que no se diferencia de un hipervínculo normal. Esto se debe a que los hipervínculos, por defecto, no se abren en una pestaña nueva. Por tanto, no tienes que hacer nada con el enlace a menos que prefieras que se abra en una pestaña separada del navegador.
Un hipervínculo con el objetivo _blank, que hace que la URL se abra en una pestaña aparte, tiene este aspecto:
<a href="https://www.example.com" target="_blank">View the entire menu.</a>
nofollow, noreferrer y noopener
También puedes añadir elementos adicionales a un enlace clicable, la mayoría de los cuales añaden seguridad o encubrimiento frente a los motores de búsqueda:
- nofollow: Un atributo que bloquea el «SEO link juice» para que no vaya al sitio web enlazado. Esto ayuda a proteger tu sitio web y puede ocultar el enlace a los motores de búsqueda.
- noopener: Es un atributo HTML que se añade automáticamente a los enlaces de WordPress marcados como «Abrir en una pestaña nueva» Se empareja con noreferrer para minimizar ciertos problemas de seguridad al abrir enlaces en pestañas nuevas.
- noreferrer: A menudo emparejado con noopener, el atributo noreferrer bloquea toda la información de referencia que se pasa al sitio de destino, añadiendo seguridad adicional y bloqueando potencialmente los datos de sitios de seguimiento y sitios de ganancias de afiliados.
No puedes identificar ninguno de estos atributos de enlace observando un enlace en el sitio activo. En su lugar, debes acceder al código HTML.
Cómo es la codificación
Todos estos atributos de enlace van entre comillas en la parte rel=»» del enlace sobre el que se puede hacer clic.
Es posible incluirlos todos en un enlace.
Alternativamente, puedes ver que algunos hipervínculos sólo incluyen un atributo noreferrer noopener, o un nofollow sin los otros dos. Todo depende de lo que quiera conseguir el creador del enlace.
Razones por las que podrías querer hacer clic en un enlace
Al aprender cómo hacer que un enlace sea clicable, es importante comprender todas las razones que hay detrás de los hipervínculos. De este modo, serás consciente de las características y podrás aprovecharlas en el futuro.
Éstas son las principales razones por las que puedes hacer que un enlace sea clicable:
- Hiperenlaces generales internos/externos a URLs: Puedes hacer enlaces de texto que lleven fuera de tu sitio web (como para citar fuentes o reforzar un argumento con un estudio de terceros), o a otras páginas de tu sitio (especialmente útiles para enviar a los lectores a contenidos relevantes y mantenerlos en tu sitio durante más tiempo).
- Enlazar imágenes: Puedes añadir hipervínculos a URL, archivos multimedia o páginas adjuntas a cualquier imagen en WordPress, y en muchos otros creadores de sitios web.
- Botones de enlace: Los botones CSS ofrecen opciones para añadir hipervínculos, añadiendo una experiencia visual más atractiva a tu enlace clicable en comparación con el texto plano.
- Números de teléfono: Los hipervínculos que llevan a números de teléfono abren aplicaciones con funciones de llamada, como la propia aplicación de teléfono de tu dispositivo o Skype.
- Direcciones: Los hipervínculos a coordenadas específicas en Google o Apple Maps significan que el usuario que haga clic en el enlace tendrá esa información colocada automáticamente en su aplicación GPS/mapa para la navegación.
- Direcciones de correo electrónico: Esto es similar a los enlaces «haz clic para llamar», pero con direcciones de correo electrónico. Activa la aplicación de correo electrónico en un teléfono u ordenador, junto con una nueva composición de correo electrónico con una dirección de correo electrónico específica añadida en el campo To.
- Crear enlaces de anclaje: Puedes enlazar a contenidos de la misma página utilizando enlaces de anclaje; son muy populares para crear una tabla de contenidos al principio de una entrada larga de un blog. A veces se llaman «hipervínculos marcadores»
- Ofrecer un archivo descargable: WordPress – y otros creadores de sitios web – ofrecen herramientas para subir archivos SVG, PDF, HTML y muchos otros; incluso puedes subir elementos en bloque. Después, es posible crear hipervínculos dentro de las entradas/páginas para que los usuarios descarguen los archivos directamente a sus dispositivos.
Ahora que hemos cubierto los tipos de hipervínculos y las razones por las que puedes querer generar uno, sigue leyendo para aprender todo sobre cómo hacerlo realidad.
Cómo Hacer que un Enlace Sea Clicable
El método que elijas para crear un enlace depende de tu experiencia. Puedes optar por un método visual más sencillo o considerar el uso de código HTML.
Hay cuatro métodos principales para hacer que un enlace sea clicable:
- Usando el Editor Clásico de WordPress
- Usando el Editor de Bloques de WordPress (Gutenberg)
- Usando HTML
- Usando cualquier Interfaz Gráfica de Usuario (GUI)
Ten en cuenta que todos estos métodos funcionan de forma similar para las entradas y páginas de WordPress. Estas guías (en particular el Método 4) son útiles también para otras aplicaciones/constructores de sitios web, pero alguna terminología/funcionalidad puede variar.
Método 1: Usar el editor clásico de WordPress
Si estás trabajando con el Editor Clásico de WordPress, la forma más sencilla de hacer un enlace clicable en una entrada o página es a través de la pestaña Editor visual.
Para ello, ve a la sección Entradas o Páginas de tu panel de control de WordPress, y selecciona una página o entrada individual que quieras editar, utilizando la pestaña Visual.
Paso 1: Resalta el texto en el que quieres hacer clic
Para un enlace de texto, lo mejor es que ya tengas el texto escrito en el editor Visual. A continuación, utiliza el cursor para resaltar la cadena de texto.
Si vas a convertir una imagen en un enlace clicable:
Selecciona la imagen para que puedas ver una barra de herramientas del editor y un contorno alrededor de la imagen.
Paso 2: Haz clic en el botón Insertar/Editar enlace
Con el texto aún resaltado, desplázate sobre el botón Insertar/Editar un enlace de la barra de herramientas del Editor Visual. El icono del botón parece un eslabón.
Si vas a convertir una imagen en un enlace en el que se puede hacer clic:
Con la imagen aún seleccionada, haz clic en el botón Insertar/Editar un enlace (el que parece un eslabón).
Paso 3: Pega una URL
Aparecerá un campo URL vacío. Copia (Comando + C, o Ctrl + C) la URL del enlace deseado en el portapapeles de tu dispositivo. Este enlace puede ser una URL externa que hayas encontrado en otro lugar de Internet o una URL de tu propio sitio web.
Una vez copiado, pégalo (Comando + V, o Ctrl + V) en el campo.
Si vas a convertir una imagen en un enlace clicable:
Pega la URL deseada en el campo revelado y haz clic en el botón Aplicar para activar el enlace.
Paso 4: Aplicar el enlace
Haz clic en el botón Aplicar para activar el enlace y hacer que se pueda hacer clic en el texto.
Ahora deberías ver la parte del hipervínculo de tu texto subrayada, y potencialmente en un color diferente.
Si haces clic en el hipervínculo en tu editor, aparecerá un enlace activo para probar, junto con herramientas de edición por si quieres cambiar el hipervínculo.
Opciones adicionales
Cubriremos enlaces clicables más avanzados en las siguientes secciones, pero vale la pena señalar que cada enlace que crees en el editor clásico de WordPress tiene un botón de Opciones de enlace para ajustes adicionales.
Aquí puedes
- Ajustar la URL
- Cambiar el texto del enlace
- Abrir el enlace en una nueva pestaña
- Buscar y enlazar a contenido existente en tu sitio
Si vas a convertir una imagen en un enlace clicable:
El editor clásico de WordPress proporciona una forma secundaria de hacer que las imágenes sean clicables. Para ello, selecciona la imagen y, a continuación, elige el botón Editar (que parece un lápiz) en la barra de herramientas emergente.
Desplázate hasta el campo Enlazado a, que te permite enlazar con una URL personalizada. Sólo tienes que pegar la URL deseada en el campo situado debajo y hacer clic en Actualizar.
También puedes seleccionar el menú desplegable Enlazado a para hacer un hipervínculo a:
- Archivos multimedia
- Páginas adjuntas
- URL personalizadas
- Ninguno
Método 2: Usar el editor de bloques de WordPress (Gutenberg)
Los hipervínculos funcionan igual tanto en las entradas como en las páginas del Editor de bloques de WordPress.
Para empezar, ve a la sección Entradas o Páginas de tu panel de control de WordPress. Selecciona una entrada o página individual que quieras editar y, a continuación, sigue los pasos que se indican a continuación.
Paso 1: Resalta algún texto
Escribe algo de texto en el editor. Con el cursor, resalta la parte del texto en la que quieras hacer clic. En la barra de herramientas emergente, haz clic en el botón Enlace.
Si vas a convertir una imagen en un enlace clicable:
Para hacer que una imagen sea clicable en el editor de bloques de WordPress hay que añadir una imagen al editor.
Para ello, haz clic en el botón Añadir bloque y selecciona el bloque Imagen. Sube la imagen que quieras enlazar.
- Añadir un bloque de imagen
Haz clic en la imagen para que quede resaltada/seleccionada y, a continuación, selecciona el botón Insertar enlace en la ventana emergente de la barra de herramientas.
Paso 2: Pega la URL y envía el enlace
Verás una ventana emergente con un campo en blanco. Pega la URL a la que quieras enlazar y pulsa Intro en el teclado o el botón Enviar para activar el enlace.
Como resultado, el texto hipervinculado se muestra en un color diferente, y puedes hacer clic en el enlace para revisar una vista previa del contenido y añadir ajustes de enlace más avanzados.
Si vas a convertir una imagen en un enlace clicable:
Existen opciones para hipervincular archivos multimedia y páginas adjuntas si lo deseas.
Si no, pega una URL en el campo de enlace vacío. Pulsa el botón Aplicar para activar el enlace. Tras la publicación, quien haga clic en la imagen será conducido al enlace que hayas especificado.
Para más opciones, haz clic en el Carrot-Button (v):
- Abrir el enlace en una pestaña nueva
- Añadir enlace Rel
- Añadir clase CSS de enlace
Opciones adicionales
Profundizaremos en las estructuras avanzadas de los hipervínculos en las secciones siguientes, pero debes saber que tienes a tu disposición un botón Editar si haces clic con el cursor en el enlace recién creado.
Esa página Editar revela campos para:
- Cambiar el texto del enlace
- Modificar la URL
- Abrir el enlace en una pestaña nueva
Otros enlaces clicables que puedes hacer en el editor de bloques
El editor de bloques de WordPress amplía las opciones habituales de enlace disponibles. De hecho, docenas de bloques incorporados permiten algún tipo de estructura de enlace clicable, incluyendo:
- Botones: Una forma elegante de enlazar contenido en comparación con los simples enlaces de texto.
- Archivos: Sube archivos rápidamente e incluye un botón para que los usuarios hagan clic y los descarguen.
- Iconos sociales: Inserta iconos sociales con enlaces clicables.
- Navegación: Coloca botones de navegación en cualquier parte de tu sitio con enlaces clicables.
- Leer Más: Se puede utilizar para acortar tu contenido y proporcionar un enlace a la versión más ampliada.
- Entrar/Salir: Añade un enlace rápido para que los usuarios inicien sesión en tu sitio.
- Siguiente entrada: Añade un enlace/botón clicable a la siguiente entrada de tu sitio.
- Entrada anterior: Añade un enlace/botón en el que se pueda hacer clic para ir a la entrada anterior del blog de tu sitio.
Método 3: Usando HTML
Hacer que un enlace sea clicable con HTML funciona de la misma manera, independientemente de la interfaz de tu editor.
Puedes editar HTML con:
El panel Texto del Editor clásico de WordPress
El Editor de Código en el Editor de Bloques de WordPress
Un editor HTML/Texto en tu dispositivo
Los editores de texto como Atom, Sublime Text y Coda proporcionan la interfaz necesaria para escribir y editar HTML, especialmente para enlaces clicables. También es posible utilizar editores markdown.
Después de trabajar con el editor de texto, puedes:
- Subir tus archivos para publicarlos en Internet, mediante FTP o SFTP. Recomendamos utilizar FileZilla para un proceso más fluido.
- Subir archivos HTML de forma masiva al directorio de archivos de WordPress.
- Utilizar uno de los muchos otros clientes FTP para subir archivos HTML a WordPress.
Cuando encuentres un editor de texto – y sepas cómo vas a subir el HTML a WordPress – pasa a los pasos siguientes para hacer un enlace clicable con HTML.
Este formato se utiliza para hipervínculos básicos en HTML:
<a href="https://www.example.com">Link Text</a>
- Formato básico de enlace HTML
Notas:
- Sustituye «https://www.example.com» por la URL que desees.
- Sustituye «Texto del enlace» por el texto del enlace que desees.
Una vez que tengas listo el enlace, puedes publicar la entrada/página, o subir el HTML a tu sitio. También es posible obtener una vista previa visual del enlace cambiando a la pestaña Visual de WordPress.
Una versión publicada de ese enlace HTML muestra el enlace subrayado y a veces en un color diferente. Si pasas el ratón por encima de ese enlace, aparecerá su destino en la parte inferior del navegador.
Método 4: Utilizar cualquier Interfaz Gráfica de Usuario (GUI)
Aunque no podemos cubrir todas las GUI imaginables que existen, aprender cómo hacer que un enlace sea clicable en algo que no sea WordPress o HTML suele ser similar a lo que acabamos de cubrir.
En general, cada GUI puede utilizar un nombre de botón o icono ligeramente diferente para crear un hipervínculo.
Tu proceso general debería ser el siguiente
- Resalta el texto que quieras enlazar.
- Haz clic en el icono Enlace (puede tener un nombre diferente) del editor.
- Pega la URL deseada.
- Haz clic en el botón Añadir enlace (también puede tener un nombre diferente).
Como ejemplo básico, un creador de tiendas online como Shopify te permite hacer clic en un enlace en cualquier página o entrada, resaltando el texto y haciendo clic en el botón Añadir enlace.
Entonces pegarías la URL de destino y harías clic en el botón Añadir enlace.
Eso produce un enlace en el que se puede hacer clic.
Cómo Hacer que los Enlaces Se Abran en una Pestaña Nueva
Como hemos comentado antes, WordPress y otras GUI ofrecen opciones adicionales de personalización para los enlaces clicables, como forzar que un enlace se abra en una pestaña diferente.
¿Cómo puedes hacerlo? Echemos un vistazo.
Abrir el enlace en una pestaña nueva con el editor clásico de WordPress
Una vez que tengas un enlace sobre el que se puede hacer clic en el Editor clásico de WordPress, elige el botón Opciones de enlace.
Marca la casilla Abrir enlace en una pestaña nueva.
A continuación, haz clic en el botón Actualizar.
Abrir enlace en una pestaña nueva utilizando el editor de bloques de WordPress
Suponiendo que ya hayas añadido un enlace en el Editor de Bloques de WordPress, al hacer clic en el enlace se abrirá una vista previa emergente del contenido de destino.
El botón Editar proporciona acceso a más ajustes (incluida la opción Abrir en nueva pestaña), pero es más fácil activar el interruptor Abrir en nueva pestaña > justo en la parte inferior de la ventana emergente.
Abrir enlace en nueva pestaña con HTML
En el editor de texto de WordPress, en el editor de código de WordPress o en un editor HTML general, puedes utilizar el siguiente código para hacer que tu enlace clicable se abra en una nueva pestaña:
<a href="https://www.example.com" target="_blank" rel="noreferrer noopener">Link Text</a>- Sustituye «https://www.example.com» por la URL de destino que desees
- Sustituye «Link Text» por el texto que quieras enlazar.
- El atributo target=»_blank » es el segmento de código que realmente abre el enlace en la nueva pestaña. Es la única parte realmente necesaria para esa sencilla función.
- Recomendamos encarecidamente añadir los atributos y valores rel=»noreferrer noopener» para bloquear los problemas de seguridad habituales al abrir enlaces en pestañas nuevas. Sin embargo, es totalmente posible dejarlos fuera del código y que el enlace se abra en una pestaña nueva.
Tras la publicación, el enlace tiene exactamente el mismo aspecto; pero, al hacer clic, la URL de destino se abre en una pestaña nueva.
Cómo Añadir nofollow a un Hipervínculo
El valor HTML nofollow indica a los motores de búsqueda que ignoren un enlace en el que se puede hacer clic, e impide que el crédito de los motores de búsqueda (link juice) pase al sitio web de destino. El objetivo principal de nofollow es reducir los enlaces de spam, pero los creadores de contenido lo utilizan para enlaces de pago, comentarios, contenido generado por el usuario, incrustaciones o en cualquier momento en que prefieras que no se considere que respaldas un sitio al que enlazas.
WordPress no tiene una forma integrada de añadir un enlace nofollow, pero es posible mediante el código HTML.
El siguiente código refleja un enlace básico con un valor nofollow:
<a href="https://www.example.com" rel="nofollow">The Link Text.</a>
Lo que ves
- Sustituye el texto «https://www.example.com» por la URL de destino que desees.
- Sustituye la parte «The Link Text» por el texto del enlace que desees.
- Utiliza el atributo y el valor rel=»nofollow » dentro del HTML del enlace.
Cuando se publica, o en la vista Visual, un enlace nofollow no se ve diferente de un hipervínculo estándar; sin embargo, la funcionalidad nofollow se guarda en el código del backend.
Cómo Enlazar con Contenido Existente
Enlazar a contenido existente es una función exclusiva de WordPress, con la que puedes buscar entradas y páginas de blog creadas anteriormente directamente en el editor de WordPress. Esto elimina la necesidad de abrir sus URL en otra ventana del navegador para copiarlas y pegarlas en un enlace sobre el que se pueda hacer clic.
Enlazar a contenido existente en el editor clásico de WordPress
Crea un enlace resaltando el texto deseado y haciendo clic en el botón Insertar/Editar enlace (enlace en cadena) en el editor. Esto revela un campo emergente, donde puedes hacer clic en el botón Opciones de enlace (icono de engranaje).
- Ve a la sección llamada «O enlazar a contenido existente»
- Escribe una palabra clave en la barra de búsqueda y, a continuación, elige una página o entrada existente de los resultados.
- Observa cómo el enlace al contenido existente se coloca automáticamente en el campo URL.
Asegúrate de hacer clic en el botón Añadir enlace cuando hayas terminado.
Eso produce un enlace inmediato a otro contenido (también conocido como enlace interno) en el editor.
Enlazar a contenido existente en el editor de bloques de WordPress
Resalta el texto/imagen que quieras enlazar y haz clic en el botón Enlazar de la barra de herramientas emergente.
El campo proporcionado tiene dos funciones: puedes pegar una URL o utilizarlo como barra de búsqueda. Por tanto, escribe cualquier palabra clave relacionada con alguno de tus contenidos existentes para que aparezcan resultados relacionados.
Una vez que veas la página o publicación que deseas, haz clic en ella.
Eso crea automáticamente un enlace al contenido existente en el Editor de Bloques de WordPress.
Cómo Hacer Enlaces Clicables de Teléfono, SMS y Correo Electrónico
Hay algunas formas de añadir acciones especiales a los enlaces clicables cambiando la estructura estándar de la URL y enlazando a algo diferente, como por ejemplo
- Un número de teléfono que abra la aplicación Teléfono.
- Un número de teléfono que abra la aplicación de mensajes de texto.
- Una dirección de correo electrónico que abra automáticamente la aplicación de correo electrónico del usuario.
Cómo hacer un enlace telefónico clicable
Un «clic para llamar» o enlace telefónico añade automáticamente un número de teléfono específico a la app Teléfono del usuario, o incluso a una app que admita números de teléfono, como Skype.
En lugar de utilizar una URL, insertarías el código tel: en el HTML, seguido de un número de teléfono, así:
<a href="tel:555-555-5555">Click To Call</a>Notas:
- Sustituye el número de teléfono por el número al que quieras que llamen los usuarios.
- Sustituye el texto «Haz clic para llamar» por lo que quieras que muestre el texto del enlace.
En editores visuales como WordPress Block y WordPress Classic, simplemente escribe tel: 555-555-5555 (con el número de teléfono deseado) en el campo URL para un enlace. Haz clic en Intro para que se genere automáticamente el enlace telefónico por ti.
Cuando alguien haga clic en ese enlace, se le enviará directamente a la aplicación más relevante (la aplicación de teléfono en un smartphone) o verá un mensaje para abrir una aplicación como Skype.
Cómo crear un enlace SMS clicable
Los enlaces SMS clicables funcionan de forma muy parecida a los enlaces telefónicos, pero optan por abrir automáticamente las apps de mensajería en lugar de las apps de llamadas.
Para añadir un enlace SMS, utiliza sms: 555-555-5555 en lugar de una URL.
<a href="sms:555-555-5555">Click To Text</a>Notas:
- Sustituye «555-555-5555» por un número de teléfono diferente.
- Sustituye «Click To Text» por el texto que quieras para el enlace.
Tanto el editor clásico como el de bloqueo de WordPress admiten enlaces SMS cuando pones el valor sms:555-555-5555 dentro del campo URL para los enlaces.
Como se prometió, los usuarios ven las aplicaciones de mensajería al hacer clic en este tipo de enlaces.
Cómo hacer un enlace de correo electrónico clicable
Al hacer clic, los hipervínculos de correo electrónico hacen que el dispositivo del usuario abra automáticamente su aplicación de correo electrónico más relevante, junto con una sección Redactar dirigida a una dirección de correo electrónico específica.
Para éste, añade el código mailto:, seguido de una dirección de correo electrónico, donde normalmente pondrías una URL de destino.
<a href="mailto:[email protected]">Click To Email</a>Notas:
- Sustituye la dirección de correo electrónico «[email protected]» por la dirección de correo electrónico de destino que desees.
- Sustituye el texto «Click To Email» por lo que quieras que muestre el texto del enlace.
Si utilizas los editores clásicos o en bloque de WordPress, simplemente escribe el valor mailto:[email protected] en el campo URL cuando crees un enlace.
Después de publicar el enlace, los usuarios que hagan clic en él serán redirigidos a su aplicación de correo, con la dirección de correo electrónico que hayas especificado incluida en el campo Para:.
Resumen
Añadir enlaces en los que se pueda hacer clic (también conocidos como hipervínculos, o simplemente enlaces) puede mejorar la interactividad de tu sitio web, llevar a la gente a más contenido y hacer referencia a información importante de otros lugares de Internet. Por ello, aprender a hacer un enlace clicable es una de las lecciones fundamentales del diseño de sitios web y la creación de contenidos.
Después de leer este artículo, deberías ser capaz de identificar el aspecto de un enlace clicable y saber exactamente cómo hacer uno, ya sea para añadir un enlace a texto o a imágenes. También es bueno saber que existen varios métodos para hacer que un enlace sea clicable, como a través del Editor Clásico de WordPress, el Editor de Bloques, HTML o cualquier interfaz gráfica de usuario disponible.
Y, por supuesto, te animamos a que explores opciones de enlaces clicables más avanzadas, como enlaces para números de teléfono, direcciones de correo electrónico y aquellos con etiquetas nofollow.
Si aún tienes dudas sobre cómo hacer que un enlace sea clicable, comparte tus preguntas e inquietudes en los comentarios a continuación.
Deja una respuesta