Inicio Informática Botón ir arriba, ¿cómo añadirlo a Wordpress sin plugins?

Botón ir arriba, ¿cómo añadirlo a Wordpress sin plugins?

No sobrecargues tu instalación con más Plugins

Publicado por entreunosyceros

AVISO: Esta entrada tiene más de dos años desde su publicación. Es posible que el contenido esté desactualizado.

Una vez más aquí. Hoy vengo a dejar un pequeño artículo sobre algo que me preguntaron estos días. El caso es que un usuario me preguntaba cómo podía añadir el botón «Ir Arriba» a su instalación de Wordpress sin necesidad de añadirlo mediante plugins. Esto es algo muy recomendable para no sobrecargar nuestra instalación con demasiados complementos. Por eso, a continuación vamos a ver cómo añadir el botón para que haga scroll hacia arriba mediante algunas líneas de código, que no son difíciles de entender ni de aplicar.

Ni que decir tiene que si no quiere meter mános en el código, hay multitud de plugins para Wordpress que pueden hacer esto mismo, pero como decía, esto no es lo que se busca en este momento.

Para generar nuestro botón vamos a utilizar algunas líneas de código JQuery, un poco de CSS y algunas líneas más en el archivo functions de nuestro theme de Wordpress.

¿Cómo añadir un botón Ir Arriba a nuestro Wordpress sin necesidad de utilizar plugins?

El archivo .JS

Como decí, lo primero que necesitaremos hacer es crear un fichero, al le podemos dar cualquier nombre, pero para este ejemplo yo opté por utilizar el de ir-arriba.js. A continuación solo es necesario pegar este código dentro y guárdalo:

archivo .js para el botón Ir Arriba
jQuery( document ).ready(function($){   
	var offset = 100,       
	speed = 250,       
	duration = 600,       
	scrollButton = $('#irArriba');      
	
	//función para hacer aparecer y desaparecer el botón
	$( window ).scroll( function() {     
		if ( $( this ).scrollTop() < offset) {       
			scrollButton.fadeOut( duration );     
		} else {       
			scrollButton.fadeIn( duration );     
		}   
	});      
	
	scrollButton.on( 'click', function(e){     
		e.preventDefault();     
		$( 'html, body' ).animate({       
			scrollTop: 0     
		}, speed);   
	}); 
});

Cuando lo tengamos guardado, solo nos queda subirlo a la carpeta «js» que tengamos en nuestro tema (si no la tienes, puedes crearla). Es decir, la ruta en la que tenemos que subir este archivo sería algo como lo siguiente: wp-content/ themes/elnombredetutema/js.

El archivo functions

Ya con el archivo subido, lo siguiente que vamos a hacer es editar el archivo functions.php de nuestro tema actual. Al final de este fichero, solo necesitamos añadir lo siguiente:

código para el archivo functions.php
// botón ir arriba
function boton_ir_arriba() {  
//indicamos el directorio en el que se encuentra el archivo .js               
  wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/ir-arriba.js', array( 'jquery' ) );                    
}       
                
add_action( 'wp_enqueue_scripts', 'boton_ir_arriba' );       
               
function add_boton_ir_arriba() {       
  //Este es el enlace para ir arriba              
  echo '<a href="#" id="irArriba" title="ARRIBA"></a>';       
                
}       
add_action( 'wp_footer', 'add_boton_ir_arriba' );

El código CSS

Para terminar solo queda poner bonito el botón que estamos creando. Solo necesitaremos añadir un poco de CSS. Esto se puede hacer añadiendo el código al archivo style.css (si tienes un tema hijo) o también te puedes dirigir al backoffice de WordPress y abrir el Personalizador. Después dirigirte a Apariencia > Personalizador. En el campo de texto de la sección CSS adicional, no hya más que añadir las siguiente reglas:

reglas css para el botón subir arriba
/*botón subir arriba*/
#irArriba {                  
  position: fixed;                
  display: none;                   
  height: 40px;              
  width: 40px;                
  line-height: 40px;                
  right: 15px;            
  bottom: 15px;       
  z-index: 1;        
  background: #000000;        
  border-radius: 2px;
  text-decoration: none; 
  color: #ffffff;   
  text-align: center;       
}     
                
#irArriba:after { 
/*La flecha con código ASCII*/
  content: "\2303";       
}

En este código es donde se va a definir la posición del botón, su estiilo, su color y el dibujo de la flecha. Este dibujo se puede cambiar utilizando código ASCII (no hay más que buscar un poco en internet).

Y con esto, ya tendremos un botón de scroll hacia arriba completamente funcional en nuestra instalación de Wordpres. Y si necesidad de añadir más complementos a nuestra instalacíón de Wordpress

También te puede interesar ...

Deja un comentario

* Al utilizar este formulario, aceptas que este sitio web almacene y maneje tus datos.

Resumen de privacidad
cookies entreunosyceros

Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible.

La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudarnos a comprender qué secciones de la web encuentras más interesantes y útiles.

Nunca almacenamos información personal de ningún tipo.

Tienes toda la información sobre privacidad, derechos legales y cookies en nuestra página sobre la política de privacidad o en la página sobre nuestra política de cookies.

Cookies necesarias

Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.

Si desactivas esta cookie no podremos guardar tus preferencias. Esto significa que cada vez que visites esta web tendrás que activar o desactivar las cookies de nuevo.

Cookies de terceros

Esta web utiliza las siguientes cookies adicionales:

- Mailchimp: Recordar si ya estás suscrito al boletín de noticias y sino ofrecértelo al salir.

- Accesibilidad: Para saber tus ajustes de accesibilidad en cada visita.

- Comentarios: Saber si has leído y aceptado nuestra política de privacidad a la hora de dejar un comentario en la web.

- Google Analytics: Localización para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares.

- Goggle Adsense: Anuncios personalizados según tu geolocalización y preferencias.

Dejar estas cookies activadas nos permite mejorar nuestra web.

Adblock Detectado!!

Ayúdanos deshabilitando la extensión AdBlocker de tu navegador para visitar esta web.
Si no sabes hacerlo en Chrome, consulta el siguiente enlace. Si utilizas Firefox, puedes consultar este otro enlace.
Esto mejorará tu experiencia en este sitio web.