WordPress: Cómo crear un botón con efecto de desplazamiento
¡Buenos días! En este vídeo vamos a ver cómo crear un botón o un enlace que al clicarlo se haga scroll hacía la parte de la web que nos interese. ¡Vamos allá!
Como vemos el proceso no es muy complicado, pero vamos a repasar los pasos que hemos seguido y de paso os comparto el código que utilicé en el vídeo.
Paso 1: preparamos los botones y los objetos de destino
Técnicamente un botón es un enlace estilizado así que en este caso utilizaré “botón” y “enlace” como sinónimos.
Así que el primer paso es crear un enlace/botón que apunte al ID del objeto donde queremos que se desplace. Lo hacemos con el atributo href=”#id-del-elemento”. Por otra parte, le asignamos una clase o un ID al botón para luego utilizar esa clase o ID en código JavaScript.
Paso 2: añadimos el efecto de desplazamiento del scroll
En este caso he optado por crear un archivo .js aparte y cargarlo como un script aparte. La otra opción sería insertar ese mismo código dentro de un archivo .js ya existente pero prefiero hacerlo aparte y tener el código más ordenado. Aquí te dejo el código del archivo:
jQuery(document).ready(function() {
jQuery('.clase-o-id-del-boton').click(function(){
jQuery('html, body').animate({
scrollTop: jQuery( jQuery(this).attr('href') ).offset().top - 150
} , 500);
return false;
});
});
Paso 3: cargamos el efecto en functions.php
Actualización: en el vídeo no lo hago de esta manera pero te recomiendo hacerlo así si en tu functions.php no hay una función que cargue scripts o simplemente quieres una solución de copiar y pegar.
Para cargar el archivo JS (smooth-scroll.js en este caso) en el functions.php podemos insertar simplemente este código al final del todo:
add_action( 'wp_enqueue_scripts', 'bps_smooth_scroll' );
function bps_smooth_scroll() {
wp_enqueue_script('smooth-scroll', get_stylesheet_directory_uri() . '/js/smooth-scroll.js', array('jquery'));
}
Lo que hace este código es simplemente cargar el archivo que se llame smooth-scroll.js que esté dentro de la carpeta /js/ que a su vez está dentro de la carpeta de nuestro theme. Si le cambias el nombre a ese archivo JS también tendrás que cambiarlo aquí así que si te pierdes un poco en este paso, simplemente usa el mismo nombre de archivo y esta función te servirá a la perfección 🙂
Si te lías con todo esto de cargar scripts desde el functions.php puedes revisar esta entrada de cómo cargar JS y CSS en WordPress donde lo explico con más detalle.
