¿Como implementar el plugin de jquery slick slider en wordpress?

Hola de nuevo acá estamos explicando un poco como va esto del slick slider en wordpress, el único requisito indispensable para el correcto funcionamiento del plugin seria tener acceso a la instalación del wordpress o conexión FTP.

Primero

Descargarnos los ficheros necesarios para la instalación del plugin que te facilitaremos la vida descargándolos desde el siguiente enlace: Descargar Slick Slider.

Segundo

Ubicar la instalación de nuestro tema de wordpress que normalmente está en la siguiente ruta: /wp-content/themes/tu-tema/ Luego con mucho cuidado ubica la carpeta “js o script” uno de los dos archivos .js el que prefieras uno de ellos es la versión minificada.

También ubicas la carpeta de css, donde tu tema guarda los estilos y pegas allí estos dos archivos, slick.css y slick-theme.css. Este ultimo en particular es para los estilos del slider pero quieres personalizarlo omites subirlo y desde el css de tu tema apariencia>editor de temas, seleccionas el archivo de estilos que termine en .css y editas allí el slider a tu gusto (con las clases correspondientes claro).

Continuando con la instalación solo queda hacer el llamamiento a los archivos que acabamos de subir desde nuestros functions.php allí pondremos la siguientes lineas:

wp_enqueue_style( 'slick-css', get_template_directory_uri() . '/dist/css/slick.css' );
wp_enqueue_script ('slick-js', get_template_directory_uri() . '/dist/js/slick.min.js', array('jquery'), '', true);

Si desde el FTP no encuentras el archivo también lo puedes encontrar aquí desde tu wordpress: apariencia>editor de temas. Ahora desde tu wordpress siguiendo la misma linea apariencia>editor de temas> ubicas el archivo de .js por defecto del tema o en algún lugar donde puedas añadir código JS y dentro escribes el siguiente código:

$('.slider-prueba').slick({        
infinite: true,        
speed: 300,        
slidesToScroll: 1,        
slidesToShow: 1,        
arrows: false,        
dots: true,        
autoplay: true,        
autoplaySpeed: 3500,    
});

Luego haremos lo siguiente; nos vamos a la página que queremos hacer el slider. Buscamos el bloque clásico.

slick slider en wordpress

Desde el bloque clásico añadimos todas las imágenes que queramos.

slick slider en wordpress

Seguidamente nos vamos a los tres puntitos en la esquina superior izquierda y le damos a “Editar como HTML”

slick slider en wordpress

Luego después de la etiqueta añadimos un con nuestra clase sin olvidarnos de cerrarla antes del cierre de la Nos saldrá este aviso le damos a convertir a HTML y listo nuestro slick slider en wordpress está terminado!!

slick slider en wordpress
slick slider en wordpress

Obviamente que si tienes un tema personalizado sera todo mucho más sencillo, por que se haría con plantillas para el tema y campos personalizados. Pero como la mayoría usa plantillas pre-diseñadas esta es su mejor opción también porque es mucho más liviana. Cualquier duda no tengas problemas en escribirme. Chao!

Comparte para enseñar a otros

Deja una respuesta

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.