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.



  • Marc Coiduras

    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
    Tagged: , , , ,
    Artículos relacionados
    Hola amigos, ¿qué tal el día? Esta tarde os traigo una mini guía de WordPress
    Hola amigos, en el artículo de hoy vamos a ver cómo solucionar la vulnerabilidad reverse
    Saludos amigos, que tal estos días? Yo he estoy ocupado, creando un plugin para añadir
    Muy buenos días amigos, entre ayer y hoy he estado añadiendo una hoja de estilo

    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.