Seleccionar página

Crear Galerías con LightBox en WordPress

Crear Galerías con LightBox en WordPress

Muy buenas Gente! Aquí un nuevo capítulo del curso de maquetación gratis! ésta vez de manera muy simple conseguir un efecto llamativo en nuestras galerías para tener un plus extra de calidad.

Se añadirán dos ficheros de manera súper sencilla y a continuación os dejo los códigos de las dos funciones que debéis añadir en Code Snippets:

1. Códigos para funciones

Seguid el vídeo y añadid éstas dos funciones de manera separada y tal y como lo hago en el vídeo:

add_action( 'wp_head', function () { ?>
<script>

	jQuery(document).ready(function () {
	jQuery(".wp-block-gallery figure a").each(function() { jQuery(this).attr('data-lightbox', 'lightbox')});
})

</script>
<?php } );
add_action( 'wp_head', function () { ?>
<script>
function bps_scripts_lightbox () {
    wp_enqueue_script('lightbox-js', '//cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/js/lightbox.min.js', array('jquery'));
    wp_enqueue_style('lightbox-css', '//cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/css/lightbox.min.css');
    wp_enqueue_script('lightbox-init', get_stylesheet_directory_uri() . 'lightbox-init.js', array('jquery'));
}

add_action('wp_enqueue_scripts', 'bps_scripts_lightbox');

Si eres avanzado y sabes como entrar por FTP o acceder mediante cPanel al administrador de archivos, tienes la siguiente opción, además de recordarte que debes modificar el código de arriba de la función efectos Lightbox

2. Descarga Librerías JS y CSS Lightbox a subir

Sobre el Autor

FernanTEC

💻Apasionado del mundo tecnológico así como de la ingeniería y en general, de todo tipo de herramientas y/o gadgets que nos faciliten la vida. Intento transmitir de manera práctica cómo poder sacarle provecho! espero que te sirva de ayuda! 😉

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

PROMOCIÓN FERNANTEC

APROVECHA ÉSTA OFERTA CON SERED:
🚀 2 MESES GRATIS 🚀
Código de DESCUENTO: FernanTEC
CLICK EN LA OFERTA:

sered oferta 2 meses gratis

O UN 10% ANUAL
🚀10% DESCUENTO🚀
Código de DESCUENTO: AnualTEC
CLICK EN LA OFERTA:

sered oferta DESCUENTO ANUAL

TEMAS WORDPRESS

orbital theme oferta orbital theme oferta