Cómo mostrar una vista previa en vivo de los enlaces en WordPress

¿Has visto alguna vez sitios que muestran una vista previa en vivo de los enlaces cuando pasas el ratón por encima? Eso es mediante una ventana emergente jQuery que muestra una captura de pantalla de una página enlazada cuando los usuarios pasan el ratón por encima del enlace. En este artículo te mostraremos cómo mostrar una vista previa en vivo de los enlaces en WordPress

Video Tutorial

Si no te gusta el vídeo o necesitas más instrucciones, sigue leyendo.

Lo primero que tienes que hacer es instalar y activar el WP Live Preview Links plugin. Tras la activación, aparecerá un nuevo elemento de menú llamado Enlaces de Vista Previa en Directo en tu barra de administración de WordPress. Al hacer clic en él, accederás a la página de configuración del plugin

Con este plugin, puedes tener vistas previas en vivo para enlaces externos, internos, todos o selectivos. Dependiendo de lo que quieras conseguir, muchos sitios utilizan las vistas previas en vivo para los sitios externos. Algunos sitios de comercio electrónico utilizan las vistas previas en vivo para mostrar un vistazo a las páginas de productos. Ten en cuenta que demasiadas vistas previas en vivo pueden distraer y molestar a tus usuarios

Elegir class="wp-live-preview" te permitirá mostrar manualmente vistas previas en vivo de los enlaces a medida que los añades. Sólo tienes que añadir la clase a tus enlaces de esta manera

<a href="http://www.example.com" class="wp-live-preview">Example Link</a>

Entre otros ajustes, puedes elegir el tamaño de la ventana emergente de la vista previa en vivo, la posición y la ventana de visualización del sitio del enlace previsualizado. La configuración por defecto servirá para la mayoría de los sitios. Sólo tienes que hacer clic en el botón de guardar los cambios para almacenar tus ajustes

Ahora puedes visitar tu sitio web para ver la vista previa en vivo de los enlaces en acción

Esperamos que este artículo te haya ayudado a aprender cómo mostrar la vista previa en vivo de los enlaces en WordPress. Quizás también quieras echar un vistazo a nuestra guía sobre cómo arreglar enlaces rotos en WordPress con el comprobador de enlaces rotos

Si te ha gustado este artículo, suscríbete a nuestro Canal de YouTube para los videotutoriales de WordPress. También puedes encontrarnos en Twitter y Google+.