Una guía para desarrolladores Agregue un efecto de desplazamiento suave hacia arriba en WordPress usando JQuery

Publicado: 2022-06-03

A todos nos encanta WordPress por su fluidez y por el hecho de que facilita mucho las cosas cuando se trata de utilizar un sistema de gestión de contenido eficiente.

No es una exageración, pero el desarrollo web fácil y accesible es una bendición para los nuevos webmasters. WordPress tiene docenas de funciones que permiten que varios propietarios de sitios web brinden a sus usuarios una interfaz súper fluida e interactiva.

Aquellos que son nuevos en WordPress, pueden consultar los tutoriales de WordPress en recursos como The Blog Starter, que tiene una guía paso a paso sobre cómo iniciar su blog y administrarlo.

Si solo se enfoca en el contenido de su sitio web, nos gustaría decirle que un sitio web receptivo y visualmente atractivo es tan importante como el contenido.

Si tiene un sitio web existente y no sabe por dónde empezar, tómese un tiempo e invierta 30 minutos todos los días para pensar en la apariencia y la interfaz de su sitio web. Confía en nosotros que poco a poco irás encontrando los elementos que necesitas arreglar. Una vez que supercargue su sitio web con grandes esfuerzos visuales, las tasas de conversación aumentarán.

Y si usted es alguien que ya ha invertido en proporcionar a los usuarios una experiencia de visita fluida para su sitio web, ¡Felicitaciones a usted! Bueno, tenemos un gran tutorial preparado para todos los que quieran proporcionar un cambio vanguardista a su sitio web y mejorar el rendimiento visual general de su sitio web.

En esta publicación de blog, permítanos guiarlo sobre cómo agregar un desplazamiento suave al efecto superior en WordPress con la ayuda de jQuery.

¿Por qué usar el desplazamiento suave?

Por lo general, cuando los sitios web tienen artículos extensos y el usuario los está leyendo, puede que le resulte frustrante llegar al final de la página web.

Por lo tanto, si su sitio web puede proporcionar un desplazamiento suave hacia la parte superior con un solo clic, el lector encontrará su sitio web perfecto y súper fluido.

Por lo tanto, si es propietario de un sitio web o comercializador digital, debe ser un oportunista y asegurarse de hacer todo lo necesario para atraer una audiencia adicional y orgánica a su sitio web.

Formas de agregar el efecto de desplazamiento suave hacia arriba en WordPress

Para poder agregar un desplazamiento suave a To Effect en WordPress, puede usar cualquiera de las siguientes formas:

1. Usando algún código escrito en jQuery

2. Usar un complemento

Por lo general, preferimos la codificación a los complementos porque eso no deja espacio para contratiempos si se hace de la manera correcta. Los complementos a veces pueden reducir la velocidad de carga del sitio web, pero la codificación puede ayudarlo a agregar algo de personalización sin afectar la velocidad en primer lugar. Particularmente, en este tutorial, explicaremos el proceso de codificación.

¿Cómo agregar el efecto Desplazamiento suave hacia arriba en WordPress con codificación?

Para agregar un efecto de desplazamiento suave hacia arriba en su sitio web de WordPress usando codificación, debe seguir estos cuatro pasos:

  1. Cree un archivo "Smoothscrolleffect.js".
  2. Adjunte la función "Smoothscrolleffect.js" a su tema.
  3. Agregar el ícono en el tema
  4. Vincular el efecto con las páginas web

Una vez que haya terminado con estos 4 pasos, estará listo para obtener más lectores. Si es programador, puede crear sus propios scripts según sus requisitos.

Para los que no son programadores, hemos explicado detalladamente cada paso y agregado el código requerido. Entonces, solo tiene que leer los pasos y ejecutarlos en consecuencia.

Paso 1: Cree un archivo "Smoothscrolleffect.js"

Este es el archivo más importante que creará para este paso. Si no implementa este paso de manera efectiva, es posible que no logre un desplazamiento suave por completo.

En este paso, crearemos un archivo ".js" (jQuery) que contiene una función que agregará un desplazamiento suave al efecto Superior. Siga los pasos para crear un archivo “.js” y cárguelo en el directorio del sitio web.

  1. Cree un nuevo archivo de bloc de notas en su sistema.
  2. Copie el siguiente código:

jQuery(documento).ready(función($){

$(ventana).scroll(función(){

si ($(esto).scrollTop() < 200) {

$('#suavizar') .fadeOut();

} más {

$('#suavizar') .fadeIn();

}

});

$('#suavizar').on('clic', función(){

$('html, cuerpo').animate({scrollTop:0}, 'rápido');

falso retorno;

});

});

  1. Pegue el código en el archivo del bloc de notas.
  2. Guárdelo con cualquier nombre, pero asegúrese de que la extensión sea ".js".
  3. Inicie sesión en el cPanel de su sitio web.
  4. Navegue al directorio del sitio web “/js/”

Nota: si su sitio web no tiene un directorio js, ​​debe crear uno.

  1. Cargue el archivo “.js” que ha creado en su sistema en el directorio.

Paso 2: adjunte el desplazamiento suave al tema

En el paso anterior, hemos creado un archivo (con función de desplazamiento suave) en el directorio del sitio web y, en este paso, vincularemos la función de desplazamiento suave a nuestro tema. Para hacerlo, sigue los pasos:

Navegue a su editor de temas en el panel de administración de WordPress. Abra function.php para editar. y pegue el siguiente código en él.

wp_enqueue_script( 'smoothup', get_template_directory_uri() . '/js/smoothscroll.js', array( 'jquery' ), ”, true );

Presiona "Guardar cambios".

Paso 3. Agregar icono al tema

Obviamente, desea agregar un ícono a su sitio web a través del cual pueda ofrecer al lector que se desplace a la parte superior. Además de eso, debe hacerlo más interactivo y receptivo. Puede hacerlo con la ayuda de CSS de la siguiente manera:

  1. Navegue hasta el archivo stylesheet.css de su tema en el Editor de temas.
  2. Copie el siguiente código.

#suavizar {

altura: 40px;

ancho: 40px;

Posición: fija;

Abajo: 50px;

Derecha: 100px;

Texto-guión:-9999px;

Pantalla: ninguna;

Antecedentes:url(“http://www.example.com/wp-content/uploads/2013/07/top_icon.png”);

-webkit-transición-duración: 0.4s;

-moz-transición-duración: 0.4s; transición-duración: 0,4 s;

}

#suavizar: pasar el cursor {

-webkit-transformar: rotar (360 grados)}

fondo: url() sin repetición;

}

  1. Pégalo en la hoja de estilo de tu tema.
  2. Presiona "Guardar cambios".

Aquí puede cambiar el ícono según sus requisitos; hemos utilizado una referencia. Para cambiar la imagen, puede cargarla en su sitio web y pegarla en el campo Fondo: URL en el código anterior.

Paso 4: vincular el desplazamiento suave con páginas web.

Ahora que hemos creado un archivo ".js" y lo subimos al directorio del sitio web, lo adjuntamos con el tema y creamos un ícono para el efecto, es hora del paso final. Ahora vincularemos el efecto de desplazamiento suave a todas las páginas web del sitio web. Sigue los pasos:

  1. Abra footer.php en el Editor de temas.
  2. Copie el siguiente código:
    1. <a href=”#top” id=”smoothup” title=”Volver arriba”></a>
  3. Pégalo en la página footer.php.
  4. Presiona "Guardar cambios".

¡Felicitaciones! Ha agregado con éxito el efecto superior de desplazamiento suave a su sitio web de WordPress usando jQuery.

Conclusión

Esperamos que el tutorial anterior lo ayude de manera efectiva a agregar el efecto 'desplazamiento suave hacia arriba' en WordPress usando JQuery y atraiga a sus usuarios con una excelente experiencia de navegación en el sitio web.

Si tiene algún problema para implementar los pasos mencionados anteriormente, háganoslo saber dejando un comentario a continuación.