• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Themes / Botón scroll hacia arriba en WordPress sin plugins

Botón scroll hacia arriba en WordPress sin plugins

Botón scroll hacia arriba en WordPress sin plugins

[ hace 5 meses ] [ Autor: Jhon Marreros Guzmán ][ Themes - Intermedio] [ ]

mejoras

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

En este artículo veremos cómo añadir la funcionalidad de ir hacia arriba a través de un botón en WordPress, lo haremos directamente a través de código evitando el uso de plugins adicionales.

 

Resultado Final

Al final obtendremos algo similar a lo que se muestra en la siguiente imagen.

Scroll Top WordPress resultado final

 

Código PHP para crear la estructura de botón

Usaremos el hook wp_footer para generar código HTML al final de la página, este código HTML creado con PHP define la estructura del botón.

add_action("wp_footer", "dcms_add_arrow_top");
function dcms_add_arrow_top(){
    echo "<a id='scrolltop' class='arrow-top'>🔝</a>";
}
Puedes agregar este código en el archivo function.php de tu tema hijo
Si deseas puedes cambiar el emoji por una imagen, asegúrate de usar la ruta absoluta para hacer referencia a la imagen.

 

Código Javascript para definir el comportamiento

El comportamiento de scroll es responsabilidad del navegador, por lo tanto necesitamos usar código Javascript.


(function( $ ) {
	'use strict';
    
    $('#scrolltop').hide();

    $(window).scroll(function(){
        if ($(this).scrollTop() < 200) {
            $('#scrolltop').fadeOut();
        } else {
            $('#scrolltop').fadeIn();
        }
    });
    
    $('#scrolltop').on('click', function(){
        $('html, body').animate({scrollTop:0}, 'fast');
        return false;
    });

})( jQuery );
Para agregar código Javascript en WordPress puedes revisar Insertar javascript en WordPress de forma correcta.

En el código anterior:

  • Primero ocultamos el botón ya que al cargar no será necesario mostrarlo
  • Definimos un evento scroll que hará aparecer o desaparecer el botón dependiendo de la posición del scroll
  • Definimos un evento de click que moverá el scroll con una animación hacia la parte superior

 

Código CSS para estilizar el botón

Adicionalmente al código PHP y Javascript, será necesario darle un posicionamiento y apariencia al botón creado, esto lo hacemos a través de código CSS.

.arrow-top{
    background-color: orange;
    width: 50px;
    height: 50px;
    font-size: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    cursor:pointer;
    position: fixed;
    right: 20px;
    bottom: 20px;  
    z-index: 99999;
}
Para agregar código CSS en WordPress puedes revisar Agregar CSS en WordPress de manera correcta.

 

Conclusión

Como has podido comprobar, puedes agregar una funcionalidad de botón que realice scroll hacia arriba de la página de manera simple directamente a través de código y evitar el uso de un plugin adicional.

 

¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores.

Suscríbete a DecodeCMS:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Cómo eliminar todos los productos de WooCommerceCómo eliminar todos los productos de WooCommerce
  • Agrupar los resultados de búsqueda en WordPressAgrupar los resultados de búsqueda en WordPress
  • tipos de complementos de WordPress5 tipos de complementos de WordPress
  • Sincronizar WooCommerce y Google SheetsSincronizar WooCommerce y Google Sheets
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (1 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Jose Henao

    21 agosto, 2022

    Saludos profe, soy suscriptor de su curso y quiero por favor saber como haría para que un rol o perfil que yo habilite, le de acceso solo a ese usuario a ver los pedidos listados de mi tienda de woocomerce. No deseo que acceda a editar ni borrar nada. He probado varios plugins pero siempre me listan la opción de editar y borrar.

    Como puedo conseguir eso? hay algún tutorial suyo que me pueda servir de referencia?

    He estado revisando las capabilities de woocomerce y no veo ninguna que se llame algo así como “Listar pedidos” (o algo por el estilo). Estoy confundido en eso.

    Le agradezco me ayude por favor.

    • Jhon Marreros Guzmán

      21 agosto, 2022

      Hola Jose, lo más sencillo sería editar las capabilities de un rol existente como el shop manager, puedes hacerlo con un plugin, lo otro sería crear una capability o rol nuevo y trabajarlo por código. Lo anotaré para evaluar hacer un artículo sobre esto. Ref: https://woocommerce.com/document/roles-capabilities/

  2. Jose Henao

    21 agosto, 2022

    Le agradezco ojala que pueda hacer un articulo sobre lo que necesito en especifico. Créame que he intentado a través de los plugins existentes y no le he encontrado la vuelta (por lo menos para lo que necesito).

    De pronto es que no estoy alcanzando a entender bien como funciona la lógica de las capabilities en woocomerce. Gracias.

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Agregar login y logout en un menú de WordPress

Ordenar alfabéticamente el contenido de WordPress

5 Temas para la Administración de WordPress

Fechas relativas en WordPress a través de código

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados