Tabla de contenidos:<\/p>
- \u00bfQu\u00e9 es el efecto lightbox en WordPress?<\/a><\/li>
- No es lo mismo lightbox que enlazar una imagen a un archivo de medios<\/a><\/li>
- \u00bfCu\u00e1ndo es buena idea usar un lightbox (y cu\u00e1ndo no)?<\/a>
- \u2705 Cu\u00e1ndo S\u00cd usar un lightbox:<\/a><\/li>
- \u274c Cu\u00e1ndo NO usar un lightbox:<\/a><\/li><\/ul><\/li><\/ul><\/li>
- 5 plugins de lightbox para WordPress<\/a>
- 1. Firelight Lightbox<\/a><\/li>
- 2. WP Video Lightbox<\/a><\/li>
- 3. Simple Lightbox<\/a><\/li>
- 4. Responsive Lightbox & Gallery<\/a><\/li>
- 5. Meow Lightbox<\/a><\/li><\/ul><\/li>
- Reflexiones finales sobre el uso de lightbox en WordPress<\/a><\/li><\/ul><\/div>\n\n
\u00bfQu\u00e9 es el efecto lightbox en WordPress?<\/span><\/h2>\n
El efecto lightbox en WordPress consiste en agrandar una imagen haciendo clic sobre ella. Adem\u00e1s de ampliarse la imagen o el v\u00eddeo, tambi\u00e9n se oscurece el fondo de modo que conseguimos que resalte totalmente sobre el resto del contenido.<\/p>\n
Esta funcionalidad nos permite mejorar la experiencia de usuario<\/a><\/strong> de nuestras visitas. No se dejar\u00e1n la vista intentando captar todos los detalles de nuestras im\u00e1genes y tampoco necesitar\u00e1n abrirlas en una ventana nueva para verlas a tama\u00f1o real o m\u00e1s grandes y total calidad. Simplemente hacen clic sobre ellas y ver\u00e1n algo como lo que te muestro a continuaci\u00f3n. Seguro que te suena, \u00bfverdad?<\/p>\n
![\"Efecto](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/05\/efecto-lightbox-wordpress.jpg\" "\\"\\"")
<\/p>\nNo es lo mismo lightbox que enlazar una imagen a un archivo de medios<\/span><\/h2>\n
Ojo, esto es muy importante y tienes que tenerlo en cuenta. No puedes confundir la funcionalidad lightbox con enlazar una imagen a un archivo de medios.<\/p>\n
Si no utilizas un plugin espec\u00edfico para conseguir este efecto y solamente editas tus im\u00e1genes para enlazarlas a un archivo de medios, lo que est\u00e1s consiguiendo es que, cada vez que un usuario haga clic en tus fotos, se le abra una nueva URL del tipo www.tudominio.com\/wp-content\/uploads\/2020\/05\/nombre.png<\/strong>.<\/p>\n
\u00bfQu\u00e9 quiere decir esto? Que el usuario sale de la p\u00e1gina que estaba visitando y accede directamente a la ruta de la imagen. Una vez vista la imagen, tendr\u00eda que darle al bot\u00f3n de \u00abatr\u00e1s\u00bb del navegador para volver a la p\u00e1gina en la que estaba o volver a buscarla.<\/p>\n
A nivel de SEO esto no es lo m\u00e1s recomendable. No solo porque afecta a la experiencia de usuario, sino tambi\u00e9n porque salen de la p\u00e1gina en la que estaban, disminuyendo el promedio de tiempo en p\u00e1gina. As\u00ed que, mucho cuidado con eso, sobre todo si tienes muchas im\u00e1genes enlazadas de esta manera en tu blog.<\/p>\n
Y dicho esto…<\/p>\n
\u00bfCu\u00e1ndo es buena idea usar un lightbox (y cu\u00e1ndo no)?<\/span><\/h2>\n
Aunque el efecto lightbox puede ser muy atractivo visualmente, no siempre es la mejor opci\u00f3n. Aqu\u00ed te dejo algunas recomendaciones para saber cu\u00e1ndo utilizarlo (y cu\u00e1ndo no):<\/p>\n
\u2705 Cu\u00e1ndo S\u00cd usar un lightbox:<\/strong><\/span><\/h4>\n
- \n
- \n
Tienes im\u00e1genes en alta calidad:<\/strong> Ideal para fotograf\u00edas, infograf\u00edas, capturas de pantalla o cualquier contenido visual que tenga que verse en detalle.<\/p>\n<\/li>\n
- \n
Para evitar que el usuario abandone la p\u00e1gina:<\/strong> El lightbox mantiene a los usuarios en el mismo sitio, sin abrir nuevas pesta\u00f1as o URLs (como te dec\u00eda en la secci\u00f3n anterior).<\/p>\n<\/li>\n
- \n
En galer\u00edas de im\u00e1genes o portfolios:<\/strong> El efecto lightbox es muy \u00fatil en sitios de fotograf\u00eda, dise\u00f1o gr\u00e1fico, arquitectura, arte, etc.<\/p>\n<\/li>\n
- \n
Tu web tiene un dise\u00f1o limpio y centrado en la experiencia visual:<\/strong> El lightbox resalta la imagen y oscurece el fondo, dando protagonismo al contenido.<\/p>\n<\/li>\n<\/ul>\n
\u274c Cu\u00e1ndo NO usar un lightbox:<\/strong><\/span><\/h4>\n
- \n
- \n
Con im\u00e1genes puramente decorativas:<\/strong> Si las im\u00e1genes no aportan valor informativo o visual, el efecto lightbox va a resultar innecesario e incluso molesto.<\/p>\n<\/li>\n
- \n
Tu sitio tiene que cargar muy r\u00e1pido:<\/strong> Aunque muchos plugins son ligeros, a\u00f1adir efectos visuales siempre puede afectar (aunque sea un poco) al rendimiento.<\/p>\n<\/li>\n
- \n
Ya usas otros scripts pesados o animaciones:<\/strong> No satures la experiencia de usuario de forma innecesaria.<\/p>\n<\/li>\n
- \n
Tu audiencia usa dispositivos antiguos o muy lentos:<\/strong> En estos casos, lo m\u00e1s sencillo va a ser lo m\u00e1s eficaz.<\/p>\n<\/li>\n<\/ul>\n
5 plugins de lightbox para WordPress<\/span><\/h2>\n
El efecto lightbox no est\u00e1 disponible de manera nativa en WordPress, sino que es necesario a\u00f1adir esta funcionalidad a trav\u00e9s de un plugin o manualmente, modificando el archivo functions.php de tu aplicaci\u00f3n a\u00f1adiendo una librer\u00eda de JavaScript.<\/p>\n
La opci\u00f3n m\u00e1s f\u00e1cil y r\u00e1pida es instalar un plugin de lightbox en WordPress, adem\u00e1s estos complementos son muy ligeros y casi no consumen recursos. Si no sabes muy bien cu\u00e1l instalar, aqu\u00ed te dejo algunas opciones gratuitas y bastante buenas que tienes disponibles en el repositorio oficial de WordPress.<\/p>\n
1. Firelight Lightbox<\/span><\/h3>\n
![\"Firelight](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/05\/Firelight-Lightbox-300x99.jpg\" "\\"\\"")
<\/p>\nSi llevas tiempo en el mundo WordPress, puede que te suene Easy Fancybox. Pues bien, ese plugin ha evolucionado y ahora se llama Firelight Lightbox<\/strong><\/a>.<\/p>\n
Y, si quieres a\u00f1adir el efecto lightbox en WordPress, Firelight Lightbox es una de las mejores opciones y no soy la \u00fanica que lo piensa\u2026 Este plugin tiene muy buenas valoraciones en el repositorio oficial de WordPress, \u00a14,8 puntos de 5, que no es poco! Y est\u00e1 activo en m\u00e1s de 200.000 instalaciones.<\/p>\n
Vas a poder mostrar im\u00e1genes, galer\u00edas, v\u00eddeos, archivos PDF, mapas… Un poco lo que se te ocurra, y todo dentro de una lightbox ligera, r\u00e1pida y totalmente responsive.<\/p>\n
Una vez instalado y activado, el plugin detecta autom\u00e1ticamente los enlaces a im\u00e1genes o medios incrustados y los abre en un lightbox. Adem\u00e1s, a\u00f1ade un nuevo apartado de configuraci\u00f3n llamado \u201cLightbox\u201d directamente en el men\u00fa principal de administraci\u00f3n de WordPress, para que te sea todo m\u00e1s c\u00f3modo.<\/p>\n
Tambi\u00e9n tiene una versi\u00f3n de pago con m\u00e1s opciones de personalizaci\u00f3n y soporte profesional, pero la verdad es que la versi\u00f3n gratuita ya es complet\u00edsima, as\u00ed que te recomiendo que la pruebes primero para ver si te gusta tanto como a m\u00ed.<\/p>\n
2. WP Video Lightbox<\/span><\/h3>\n
![\"WP](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/05\/WP-Video-Lightbox-300x97.png\" "\\"\\"")
<\/p>\nVamos con algo un poco distinto.<\/p>\n
Si lo tuyo son los v\u00eddeos y necesitas mostrarlos de forma elegante en una ventana emergente<\/a> estilo lightbox, puede venirte bien conocer WP Video Lightbox<\/strong><\/a>. Es un plugin ligero, funcional y compatible con muchos formatos, por lo que te vendr\u00e1 como anillo al dedo si lo que buscas es m\u00e1s control sobre la incrustaci\u00f3n de v\u00eddeos.<\/p>\n
Te va a permitir abrir lightboxes usando v\u00eddeos de YouTube o Vimeo, im\u00e1genes, Flash, iFrames o incluso contenido HTML. Solo tienes que pegar el shortcode con el ID del v\u00eddeo y listo, ya aparece en una caja flotante sobre la p\u00e1gina sin que el visitante tenga que irse a otra pesta\u00f1a. Adem\u00e1s, funciona sin problemas en dispositivos m\u00f3viles.<\/p>\n
Si te interesa personalizar el aspecto del lightbox, este plugin tiene un panel de ajustes con bastantes opciones: puedes cambiar el tama\u00f1o del reproductor, la opacidad del fondo, la velocidad de animaci\u00f3n, e incluso el tema visual de la caja (claro, oscuro, estilo Facebook\u2026).<\/p>\n
Tambi\u00e9n tiene detalles que a m\u00ed me gustan mucho, como evitar que se muestren v\u00eddeos sugeridos al final o activar el modo de privacidad mejorada en YouTube.<\/p>\n
3. Simple Lightbox<\/span><\/h3>\n
![\"Plugin](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/05\/plugin-wordpress-simple-lightbox.jpg\" "\\"\\"")
<\/p>\nAunque lo he puesto en tercera posici\u00f3n, para m\u00ed Simple Lightbox<\/a><\/strong> es el mejor de todos. Igual de f\u00e1cil y r\u00e1pido de configurar que los dos anteriores, pero con opciones de configuraci\u00f3n extra para que se adapte completamente a tu web.<\/p>\n
Para conseguir la funcionalidad lightbox en tus im\u00e1genes simplemente tienes que instalar y activar el plugin y enlazar tus im\u00e1genes a \u00abArchivos de medios\u00bb, \u00a1as\u00ed de f\u00e1cil! Pero esto no es todo\u2026<\/p>\n
Desde la secci\u00f3n \u00abApariencia\u00bb – \u00abCaja de luz\u00bb de WordPress podr\u00e1s establecer algunas configuraciones necesarias para casi cualquier tipo de web<\/strong>, por ejemplo:<\/p>\n
- \n
- D\u00f3nde quieres activar la opci\u00f3n de lightbox (\u00fanicamente en entradas, p\u00e1gina principal, p\u00e1ginas de categor\u00edas<\/a><\/strong>\u2026)<\/li>\n
- Activar o desactivar el efecto lightbox en widgets y men\u00fas<\/li>\n
- Posibilidad de agrupar elementos para crear una galer\u00eda de im\u00e1genes<\/li>\n
- Elegir un tema para el fondo (claro u oscuro)<\/li>\n
- Cambio de imagen autom\u00e1ticamente<\/li>\n
- Duraci\u00f3n de cada imagen<\/li>\n
- Configurar los botones para que los usuarios puedan pasar de un elemento a otro<\/li>\n<\/ul>\n
![\"Configuraci\u00f3n](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/05\/ajustes-simple-lightbox.png\" "\\"\\"")
<\/p>\n4. Responsive Lightbox & Gallery<\/span><\/h3>\n
![\"Plugin](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/05\/plugin-wordpress-responsive-lightbox.jpg\" "\\"\\"")
<\/p>\nResponsive Lightbox & Gallery<\/a><\/strong> es un plugin bastante m\u00e1s completo que los que acabamos de ver. Adem\u00e1s de a\u00f1adir el efecto lightbox a tus im\u00e1genes de WordPress, puedes mostrar las im\u00e1genes de tus posts como una galer\u00eda<\/strong>, configurar totalmente su apariencia, configurar las cajas de luz, ajustar el tama\u00f1o de tus videos, establecer ajustes de cach\u00e9 para tus bibliotecas de im\u00e1genes\u2026 \u00a1Eso s\u00ed, totalmente responsive y sin tocar una l\u00ednea de c\u00f3digo en tu web!<\/p>\n
Una vez instalado y activado en tu web, autom\u00e1ticamente a\u00f1ade el efecto lightbox a tus entradas, siempre y cuando enlaces tus im\u00e1genes a un archivo de medios. De todas formas, puedes activar o desactivar el efecto desde los ajustes del plugin.<\/p>\n
![\"Ajustes](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/05\/ajustes-plugin-responsive-lightbox-gallery.png\" "\\"\\"")
<\/p>\nTambi\u00e9n puedes activar la caja de luz o lightbox para los comentarios, widgets o productos de tu tienda online si utilizas WooCommerce<\/a><\/strong>.<\/p>\n
5. Meow Lightbox<\/span><\/h3>\n
![\"Plugin](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/05\/plugin-wordpress-meow-lightbox.jpg\" "\\"\\"")
<\/p>\n
- \n
- \n
- 2. WP Video Lightbox<\/a><\/li>
- \u274c Cu\u00e1ndo NO usar un lightbox:<\/a><\/li><\/ul><\/li><\/ul><\/li>
- \u2705 Cu\u00e1ndo S\u00cd usar un lightbox:<\/a><\/li>
- No es lo mismo lightbox que enlazar una imagen a un archivo de medios<\/a><\/li>
![\"Ajustes](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/05\/configuracion-plugin-meow-apps.png\" "\\"\\"")
<\/p>\n