16 de febrero de 2017 Marc Coiduras

Cómo añadir una sugerencia en los enlaces de tu página de WordPress

Muy buenas amigos, hoy he estado haciendo unas modificaciones para añadir una sugerencia en los enlaces de mi web.

Y como no, he decidido compartirlo con vosotros.

A forma de review y mini tutorial vamos a aprender a añadir una sugerencia en los enlaces de nuestra web.

Como siempre vamos hacer todo esto sin necesidad de utilizar ningún plugin.

Añadir una sugerencia en los enlaces

¿Peró que es una sugerencia? Pues una sugerencia de enlace, es el texto que aparece cuando pasamos el puntero del ratón por encima de un enlace.

Lo que vamos a conseguir en este tutorial, es a crear una sugerencia elegante en los enlaces de nuestra web.

También vamos a poder elegir que tipo de sugerencia mostrar en cada enlace así como su posición.

Conociendo Hint.css

Hint.css es una biblioteca de sugerencias en CSS que te ayuda a agregar información sobre cualquier enlace de tu página.

La principal diferencia entre Hint.css y otros complementos de tooltip es que Hint.css utiliza data- * atributo, pseudo elementos, propiedad de contenido y transiciones CSS3 de modo que sólo es compatible con los navegadores modernos que soportan completamente HTML5 y CSS3.

Preparando archivo CSS

Bien amigos, para empezar, lo primero que vamos a hacer es descargarnos el archivo de estilos CSS de Hint.css.

Ahora, una vez descargado, deberemos descomprimir el archivo zip y subir el archivo Hint.css a nuestro alojamiento web vía FTP.

Una vez subido el archivo, abrimos una pestaña en nuestro navegador con la URL del archivo Hint.css.

Ejemplo: https://www.tupaginaweb.com/carpeta/hint.css

Preparando archivo header.php

Una vez llegados a este punto, deberemos añadir en nuestro archivo header.php la nueva hoja de estilos.

Hacemos clic en Apariencia>Editor y buscamos el archivo header.php en la parte derecha para hacer clic en él y poder editarlo.

Vamos a añadir la siguiente línea antes de la etiqueta </head>:

<link rel="stylesheet" href="https://www.tupaginaweb.com/carpeta/hint.css">

Trabajando con los enlaces

Ya que tenemos el archivo subido y añadido en nuestro archivo header.php ya podemos trabajar con los enlaces de nuestras páginas o posts.

Para ello, deberemos editar la página o artículo donde aparezcan los enlaces que queramos añadir una sugerencia.

A continuación voy a colocar un ejemplo de sugerencia de enlace y las opciones de clase con las que podemos trabajar.

ENLACE DE EJEMPLO

Código del enlace de ejemplo

<a class="hint hint--bottom hint--info" href="#" data-hint="AQUÍ VA LA SUGERENCIA">ENLACE DE EJEMPLO</a>

Opciones de posición

class="hint hint--top"
class="hint hint--bottom" 
class="hint hint--left" 
class="hint hint--right"

Además, puedes utilizar estos modificadores para diseñar tus sugerencias

hint--error
hint--info
hint--warning
hint--success
hint--always

Conclusión

Llegados a este punto ya podemos añadir la clase a cualquier enlace de nuestra página web con tan solo añadir class="hint hint--POSICIÓN hint--MODIFICADOR" y data-hint="texto sugerencia".

Ahora solo queda ponerse a trabajar, espero que este artículo te haya ayudado.

Tagged: , , , , descripción de la firma
Si te ha gustado el artículo puedes compartirlo usando los siguientes botones:
Zona Web
Google+
Reddit
Si te ha gustado el artículo puedes compartirlo usando los siguientes botones:
Zona movil

About the Author

Marc Coiduras Hola, mi nombre es Marc Coiduras y soy diseñador web, localizado en Valencia, España.

Deja un comentario

CONTACTA CONMIGO PARA CUALQUIER COSA

Te doy la bienvenida a ponerte en contacto conmigo para obtener más información
sobre cualquiera de mis productos o servicios.