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 aquellos que 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 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 la visualización de 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 una entrada/página

Después de iniciar sesión con éxito en WordPress, vaya al panel de control de WordPress. A continuación, puede optar por crear una nuevaescritoso editar un artículo existente. Dependiendo de sus necesidades, puede elegir uno de los siguientes caminos:

• Para crear un nuevo artículo, vaya aescritos > A?adir un nuevo artículo.

• Para editar una entrada o página existente, vaya a la secciónescritos > Todos los artículosBusque el artículo que desea editar y haga clic en el botón "Editar".
• Si desea crear o editarpágina webSeleccione una opciónpágina webque funciona de forma similar a la creación o edición de un artículo.

?Por qué a?adir un lightbox a una entrada o página?

El efecto lightbox es especialmente adecuado para mostrar fotos, 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 con 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 la imagen adecuada

Asegúrate 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 claridad cuando se amplían en el lightbox.

Paso 4: A?ade un efecto lightbox a la imagen

Este paso es el núcleo de la creación de un lightbox 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, tu imagen estará configurada para expandirse cuando se haga clic a través del efecto lightbox. El lightbox 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 utilizaversió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, previsualiza la página para asegurarte 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, haz clic en la imagen que has a?adido para comprobar si el efecto lightbox funciona correctamente.

Si todo va bien, existe la opción deescriba apágina o artículo. Si necesita más edición, puede seleccionarGuardar borradoresContinuar editando más tarde.

Optimización y advertencias

1. Optimización de imágenes

Aunque la función lightbox es útil, asegúrate de que las imágenes que subas estén optimizadas para que no afecten al rendimiento de tu sitio web. Los archivos de imagen excesivamente grandes pueden provocar que las páginas se carguen con lentitud, lo que puede afectar a la experiencia del usuario y al rendimiento SEO. Para ello puedes utilizar herramientas comoSmushpara comprimir y optimizar el tama?o de la imagen.

2. Dise?o adaptable

La funcionalidad de lightbox es igual de importante en dispositivos móviles, y la configuración por defecto de lightbox en WordPress es responsive para garantizar que las imágenes se muestran bien en diferentes 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 lightbox puede crearse fácilmente sin plug-ins, proporcionando una mejor experiencia de usuario para las imágenes. Esto no solo 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.

Contacte con nosotros
?No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de peque?as empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨詢：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres