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.
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>";
}
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 );
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;
}
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.
Artículos Relacionados
(1 votos, promedio: 5,00 de 5)
Cargando...
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.
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/
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.