WordPress AutoVersión 6.5Desde entonces, no es necesario depender de plugins de terceros para crear efectos lightbox. Esta función se ha integrado en el núcleo de WordPress, especialmente para quienes utilizan el editor de bloques de WordPress (Gutenberg). Como resultado, añadir imágenes y habilitar efectos lightbox para ellas es ahora más fácil y eficiente.

En este tutorial, nos sumergiremos en cómo crear un lightbox de WordPress para su sitio web sin un plugin.

¿Qué es un lightbox de WordPress?

Una caja de luz es unMétodo de visualización de imágenes emergentes, cuando el usuario haga clic en una imagen de la página, la imagen se mostrará en un tamaño mayor en la pantalla, mientras que el fondo de la página se oscurecerá para resaltar la imagen. Este efecto se utiliza a menudo para mostrar imágenes o productos, proporcionando una mejor experiencia al usuario.

Ámbito de aplicación

Este tutorial es sólo para aquellos que utilizan el editor de bloques de WordPress. Si utiliza el editor clásico, se recomienda cambiar primero al editor de bloques para experimentar las últimas funciones de WordPress.

Paso 1: Crear o editar un post/página

Tras iniciar sesión con éxito en WordPress, vaya al panel de control de WordPress. A continuación, puede elegir crear un nuevoescritoso editar un artículo existente. En función de sus necesidades, puede elegir una de las siguientes vías:

• Para crear un nuevo artículo, navegue hastaescritos > Añadir nuevo artículo.

• Para editar una entrada o página existente, navegue hasta la secciónescritos > Todos los artículosBusque el artículo que desea editar y pulse el botón "Editar".
• Si desea crear o editarpágina webPor favor, seleccionepágina webque funciona de forma similar a la creación o edición de un artículo.

¿Por qué añadir un lightbox a un post o página?

El efecto de caja de luz es especialmente adecuado para mostrar fotografías, imágenes de productos o galerías. Con las cajas de luz, los usuarios pueden hacer clic en una miniatura para ver una imagen más grande sin tener que saltar a otra página, lo que mejora la experiencia de navegación del usuario.

Paso 3: Añadir imágenes utilizando el editor de bloques

A continuación, añada imágenes a la página. El editor de bloques ofrece una solución muy sencilla para ello.

1. Seleccione el lugar del editor en el que desea insertar la imagen.
2. teclear/imagenEl bloque "Imagen" aparecerá inmediatamente.

3. Seleccione "imágenes", el sistema le pedirá que seleccione una imagen.

Las imágenes existentes pueden seleccionarse de la mediateca o pueden cargarse imágenes nuevas.

Elegir el cuadro adecuado

Asegúrese de elegir el tamaño de la imagenAdecuado para cajas de luzVisualización. Las imágenes demasiado grandes pueden afectar a la velocidad de carga de la página, mientras que las imágenes demasiado pequeñas pueden perder nitidez al ampliarlas en el lightbox.

Paso 4: Añada un efecto de caja de luz a la imagen

Este paso es el núcleo de la creación de un lightbox en WordPress y se puede hacer sin un plugin.

1. hacer clic (con un ratón u otro dispositivo señalador)Recién añadidoal artículo o página en elfotografía.
2. En la barra de herramientas situada encima de la imagen, verá un icono de enlace.

3. Al hacer clic en ese icono de enlace aparecerá un menú desplegable.
4. Seleccione "Expandir al hacer clic"Opciones.

En este punto, su imagen estará configurada para expandirse cuando se haga clic sobre ella a través del efecto lightbox. La caja de luz proporcionará automáticamente una vista ampliada de la imagen en el front-end, permitiendo a los usuarios ver una imagen más grande sin tener que saltar a otra página al hacer clic en la imagen.

Consejo: Si no encuentra la opción "Expandir al hacer clic

Asegúrese de que está utilizando WordPress 6.5 o superior. Si está utilizandoversión inferiorPuede ser necesario pasar elplug-in (componente de software)para implementar la función lightbox, o actualice su versión de WordPress para aprovechar esta nueva función.

Paso 5: Vista previa y publicación de la página

Después de configurar el efecto lightbox para la imagen, previsualice la página para asegurarse de que todo se muestra correctamente.

1. Pulse el botón "Vista previa" en la esquina superior derecha de la página y seleccione "Vista previa de la nueva pestaña".

2. En la página de vista previa, haga clic en la imagen que ha añadido para comprobar si el efecto lightbox funciona correctamente.

Si todo va bien, existe la opción deCorreo electrónico:página o artículo. Si necesita más edición, puede seleccionarGuardar borradores, continúe editando más tarde.

Optimización y advertencias

1. Optimización de imágenes

Aunque la función lightbox es práctica, asegúrese de que las imágenes que cargue estén optimizadas para que no afecten al rendimiento de su sitio web. Los archivos de imagen excesivamente grandes pueden provocar una carga lenta de las páginas, lo que puede afectar a la experiencia del usuario y al rendimiento SEO. Esto puede hacerse utilizando herramientas comoSmushpara comprimir y optimizar el tamaño de la imagen.

2. Diseño adaptable

La funcionalidad de lightbox es igualmente importante en los dispositivos móviles, y la configuración predeterminada de lightbox de WordPress es responsiva para garantizar que las imágenes se muestren bien en distintos tamaños de pantalla. Se recomienda hacer pruebas en dispositivos móviles antes de publicar para asegurarse de que el efecto lightbox es igual de fluido en móviles.

3. Pruebas de compatibilidad

Aunque la función integrada de lightbox de WordPress es potente, puede entrar en conflicto con algunas funciones personalizadas si se utiliza un tema o plugin personalizado. Antes de publicar, se recomienda comprobar la compatibilidad entre dispositivos y navegadores.

resúmenes

Usando WordPress 6.5 y superior, porWP constructor de sitios web autodidactaEl efecto de caja de luz puede crearse fácilmente sin plug-ins, proporcionando una mejor experiencia de usuario para las imágenes. Esto no sólo simplifica el proceso de funcionamiento, sino que también reduce la dependencia de plug-ins de terceros y reduce la complejidad del mantenimiento del sitio web.