Cómo crear una vista previa de enlaces visuales en WordPress
Enriquecer tus páginas y entradas de WordPress con contenidos como recursos útiles, productos relacionados, Llamadas a la Acción (CTAs) promocionales o divertidas piezas curadas puede ayudarte a ti o a tu marca a proporcionar más valor a tu audiencia. En este articulo/tutorial vamos aprender Cómo crear una vista previa de enlaces visuales en WordPress.
Sin embargo, un simple enlace no siempre es suficiente: si el texto de anclaje y la sensación que lo rodea no son lo suficientemente convincentes, estos enlaces pueden ser fácilmente borrados.
¿Porque Visual Link Preview?
Si crea enlaces visuales en tu sitio, como los enlaces mejorados que se ven en Facebook, puedes añadir un contenido atractivo e interactivo al que sus visitantes prestarán más atención. El plugin Visual Link Preview para WordPress es una manera fácil de dar a sus enlaces aún más fuerza.
El plugin Visual Link Preview, en su forma más simple, es una forma más atractiva de enlazar a entradas relacionadas y mantener a la gente en su sitio por más tiempo.
El plugin le permite crear una vista previa visual para cualquier enlace interno o externo, y también puede crear una plantilla personalizada en un estilo que se adapte a su marca o sitio web. A continuación, coloque un cuadro de vista previa simplificado en cualquier lugar de su publicación o página. Vamos a ver cómo añadir un cuadro de vista previa en WordPress tanto en Gutenberg como en el editor clásico.
Buscar e instalar el plugin Visual Link Preview
Probablemente ya sepas cómo hacerlo, pero por si acaso, aquí tienes un repaso súper rápido de cómo instalar un nuevo plugin de WordPress:
- Inicia sesión en su panel de control de WordPress.
- Selecciona la opción Plugins en la barra lateral izquierda.
- En el submenú que aparece bajo Plugins, seleccione Añadir nuevo.
- Escribe “Visual Link Preview” en la barra de búsqueda situada en la parte superior derecha de la página.
- Haz clic en Instalar ahora en la esquina superior derecha del cuadro de vista previa del plugin.
- Una vez instalado, haz clic sobre el botón Activar.
Una vez que hayas activado el plugin, serás redirigido a la página del plugin y verás esta notificación en la parte superior (la documentación de inicio te llevará a esta página).
Ajustes y personalizaciones
Una vez activada la extensión, desplácese por la lista de extensiones para encontrarla. Debajo del nombre de la extensión, haga clic en el enlace Configuración, que le llevará a esta página:
Por defecto, la opción Usar Estilo Personalizado estará desactivada. Si lo activas, aparecerán un montón de opciones.
Visual Link Preview te permitirá personalizar para lo siguiente:
- Ancho del contenedor, color de fondo y relleno.
- Radio, anchura, estilo (sólido, discontinuo, punteado, guiado, etc.) y color del borde.
- Posición de la imagen (izquierda, derecha, arriba o abajo), tamaño y radio del borde.
- Tamaño y color de las fuentes del título y del resumen.
La mayoría de ellas se explican por sí mismas, pero hay que saber algunas cosas sobre el tamaño de la imagen. Puede establecer un tamaño de miniatura o un tamaño personalizado. Para una imagen en miniatura, los tamaños estándar son “miniatura”, “mediano” y “grande”, así que simplemente escribe lo que quieras en el campo.
También puede introducir un tamaño personalizado en el formato ancho x alto (por ejemplo, 150×150).
Por ahora, dejaré todo como está para ver cómo es el campo de enlace por defecto. Luego lo retocararemos
Uso del plugin con el editor de bloques Gutenberg
Entra en el borrador de una entrada del blog y añadí un bloque bajo un párrafo. Puedes encontrar el bloque Visual Link Preview en Widgets, o simplemente puedes buscarlo en la parte superior del selector de bloques.
Este es el aspecto del bloque Visual Link Preview:
Cuando hagas clic en el cuadro de selección de una publicación o página, no verás una lista desplegable de tu contenido; tendrás que buscar lo que quieres. También puedes añadir un enlace a una URL externa (lo revisaré en un momento).
Hemos elegido una entrada de blog publicada. Se ve así sin ninguna personalización del estilo:
Si hace clic en la pila de tres puntos de la parte superior del bloque, aparece un menú desplegable. Seleccione Mostrar configuración de bloques para que aparezca una barra lateral derecha con la configuración. A partir de aquí, puedes hacer varios cambios:
Modificar el enlace. Tenga en cuenta que si hace clic en el botón Modificar enlace, el enlace existente se eliminará inmediatamente, así que tenga cuidado de no hacer clic en él por error.
Puede cambiar o eliminar la imagen mostrada. Si se elimina la imagen de visualización, este es el aspecto del enlace visual:
Si no le gusta la visualización sin imagen, puede volver a añadir una haciendo clic en el botón Seleccionar imagen. Sin embargo, para hacer esto tendrá que navegar por su biblioteca de medios o subir una imagen – no tendrá la opción de volver a agregar automáticamente la imagen resaltada como lo hizo cuando agregó el enlace por primera vez.
Por supuesto, puedes buscar la imagen destacada en tu biblioteca multimedia, pero puede estar enterrada. También puedes simplemente añadir el enlace de nuevo, para que se añada automáticamente el contenido original.
Activa y desactiva la configuración de los enlaces. Puede elegir abrir el enlace en una nueva pestaña, y también puede cambiar el enlace a un enlace nofollow.
Añadir un enlace externo con Gutenberg
Esta vez añado un enlace externo. Lo he copiado y pegado en el campo correspondiente:
Si hace clic para utilizar la URL, ocurre lo mismo que cuando añade un enlace interno. La imagen, el título y el resumen se rellenarán automáticamente y podrá editarlos en la barra lateral derecha. También puede hacer clic en Guardar imagen localmente en la sección Contenido, y la imagen de visualización que el plugin ha capturado de la fuente URL se añadirá a su biblioteca multimedia de WordPress.
Guardar bloques reutilizables
Si tienes una página, una entrada de blog o un enlace externo que vas a utilizar con frecuencia, puedes crearlo una vez y luego guardarlo como un bloque reutilizable para añadirlo fácilmente en el futuro. Esto solamente funciona con el editor Gutenberg, para que lo sepas.
Cuando hayas terminado de crear tu bloque, haz clic en el icono de los tres puntos de la parte superior, el mismo que utilizaste para acceder a la barra lateral de ajustes. A continuación, seleccione Añadir a bloques reutilizables. Puedes darle un título al bloque y se añadirá a tu biblioteca de bloques para su uso futuro.
Personalizar la plantilla y el cuadro de vista previa del enlace visual
Esta barra de personalización de bloques también contiene una sección de Estilo en la parte inferior, donde puede elegir entre utilizar la plantilla por defecto en Opciones o la plantilla Simple. Sin embargo, esto es confuso porque en realidad son lo mismo. Lo explicaré más en un momento. En primer lugar, veamos cómo personalizar el campo de vista previa de los enlaces.
Desde la sección de Estilo mencionada anteriormente, haga clic en el enlace Cambiar el estilo de la plantilla. Esto abrirá una nueva página en la que puedes crear una plantilla personalizada (también puedes llegar aquí a través de la configuración del plugin). De nuevo, las personalizaciones son simples, explicativas y directas, por lo que podrás adaptarte fácilmente. Este es el aspecto de la plantilla después de jugar con algunas personalizaciones:
No es genial. Parte del problema es que el texto de la vista previa es demasiado largo. Volviendo a tu post o página, si haces clic en el bloque, el editor debería aparecer en la barra lateral derecha. A continuación, puede ir a la sección Contenido y hacer clic en los campos Título y Extracto para realizar cambios.
En lugar de utilizar una imagen en miniatura, volví a la página de personalización de la plantilla e introduje un tamaño personalizado para la imagen, que la hizo cuadrada (y afortunadamente perfectamente recortada). He jugado un poco más con la copia del título y el extracto para escalarlo mejor en el bloque y junto a la imagen. Así está mejor:
Puedes dedicar mucho tiempo a averiguar las personalizaciones adecuadas, y merece la pena, sobre todo porque sólo puedes crear una plantilla personalizada.
Sólo es cuestión de crear una plantilla personalizada, y es fácil crear una plantilla personalizada
No se puede ver una vista previa en vivo mientras se personaliza una plantilla. Tendrás que abrir el post o la página en una nueva ventana, hacer los cambios en la página de personalización de la plantilla y luego volver a hacer clic en el post o la página. Cambie entre los dos ajustes de la plantilla desplegable (recuerde, no son realmente diferentes) – esto refrescará el campo para que pueda ver sus últimos cambios.
Cómo restablecer el estilo por defecto
Digamos que haces un montón de cambios y luego te das cuenta de que te gusta más el estilo por defecto. Si dejas activado el interruptor de Usar Estilo Personalizado en la Configuración de la Plantilla, tus ajustes personalizados se aplicarán cuando vuelvas a tu página o publicación, tanto si usas Predeterminado desde la Configuración como si eliges Simple en el menú desplegable de la Plantilla (como he dicho, confuso).
Si quieres volver a la configuración por defecto del plugin, ve a la página de Configuración de Plantillas y desactiva el botón de Usar Estilo Personalizado. Mantendrás todas tus personalizaciones si eventualmente quieres volver a cambiarlo, pero puedes usar la configuración por defecto del plugin de esta manera si prefieres su aspecto.
Desventajas del plugin Visual Link Preview
El plugin Visual Link Preview es un plugin simple y directo que hace lo que dice y es súper fácil de aprender a usar. Sin embargo, al ser tan básico, hay algunas áreas en las que se queda corto y que podrían mejorarse.
No hay un menú desplegable con todo su contenido. Me hubiera encantado esta opción en lugar de tener que recordar el nombre de una entrada del blog o página para añadirla como enlace.
No se ve la vista previa en vivo de la plantilla personalizada. Es bastante engorroso ir de un lado a otro entre el post y la página de configuración de la plantilla cada vez que quieres ver si es la cantidad perfecta de relleno, o qué tipo de borde usar.
Sólo puede crear una plantilla personalizada. Este es el mayor inconveniente del plugin. No es posible crear varias plantillas y luego elegir cuál utilizar para una página específica, una entrada de blog o un tipo de enlace. Tampoco puedes configurarlo para que use tu plantilla personalizada en algunos campos de vista previa y las plantillas por defecto del plugin en otros – una u otra.
Conclusiones
En definitiva, a pesar de sus inconvenientes, me ha gustado el plugin Visual Link Preview. Es completamente fácil de configurar y utilizar, independientemente del editor con el que prefieras trabajar: Gutenberg o el editor clásico. Y definitivamente es una forma más estética y llamativa de añadir enlaces, lo que puede ser muy útil si te dedicas al marketing de afiliación o quieres enlazar con tus páginas de destino. Por el momento, como no se puede crear más de una plantilla, es mejor para los sitios que tienen un aspecto coherente en todas las entradas y páginas. Por lo tanto, si tiene varios estilos diferentes de páginas de destino, será difícil crear una plantilla de caja de vista previa que se adapte a todos ellos. Por lo demás, sin embargo, se trata de un plugin ligero que hace bien su único trabajo.
