Botón para volver arriba en wordpress con código o con plugin

Botón para volver arriba en wordpress con código o con plugin

En los blogs con post largos y si tienen barra lateral con una tipografía algo grande cuando llegamos a la parte inferior de la entrada es muy incómodo volver a subir a la parte superior del post para acceder a la barra de menus o buscar otras categorías, por eso hay una manera de insertar un elemento que te hace llegar a la parte superior del blog.

Si tu blog es de blogger no te preocupes he realizado otro tutorial para blogger:

Como poner un botón para volver arriba en blogger

A lo mejor piensas «vaya tontería» pues estas cosas son las que marcan la diferencia, este botón es el equivalente de subir andando o en el ascensor, por motivos de UX use experience y de UI user interaction es conveniente poner los menos obstáculos al visitante y hacerle la visita fácil y entretenida provocando que interaccione con nuestra interfaz.
Si quieres colocar el botón para «subir para arriba» mediante plugin, la manera mas fácil y rápida te ofrezco este que es muy conocido y específico para esta función su nombre es Scroll back to top.
https://wordpress.org/plugins/scroll-back-to-top/
Como puedes ver tiene muchas opciones tanto para el tamaño, tipo de letra elegir si va a ser un símbolo o una imagen quién se ocupe de llevar a tu lector a la parte superior del blog, en definitiva es un gran plugin y por ello consume recursos, pero te ahorrar pasar un rato editando y puedes elegir mas opciones, de las que puedes hacer a mano como muestro a continuación.

 
Bueno como has visto dudo que a no ser de que tenga una incompatibilidad enorme con tu plantilla te pongas a hacer el botón a mano, pero conviene ver que no todo en wordpress son plugins y que si tu instalación está ya muy cargada debes plantearte aligerar esas pequeñas tareas por scripts mas sencillos..
De todas maneras te recuerdo este post sobre la cantidad de plugins fantásticos que tenemos para wordpress:

Vamos a hacer el Botón para volver arriba en wordpress con código

Antes de nada quiero recordarte que trabajes con copia, aun funcionando en una gran mayoría de plantillas puede ser que la tuya no lo permita o a lo mejor interfiere con otros elementos o simplemente que da espantoso, por ello te recuerdo los dos post sobre trabajar con código:

Vamos a crear el link que irá en el footer para nuestro boton de subir a la parte superior del blog.

Vamos a crear el link que puede ir en el header o en el footer en este caso lo voy a hacer con el footer si lo queréis hacer en el header podéis cambiar las palabras y listo. Estas líneas de código son «hooks» ganchos, en realidad pequeñas funciones.
Debes colocar este código en el archivo functions.php (no en header ni footer).
[php]add_action( ‘wp_footer’, ‘back_to_top’ );
function back_to_top() {
echo ‘<a id="totop" href="#">Back to Top</a>’;
}[/php]

Como va a estar horrible vamos a añadir estilos css para que se mantenga en la parte inferior a la derecha de la página, este archivo lo vamos a colocar en la cabecera de worpdpress insertando en el archivo functions y usando wp_head para llamar a la cabecera.

add_action( 'wp_head', 'back_to_top_style' );
function back_to_top_style() {
    echo '<style type="text/css">
        #totop {
            position: fixed;
            right: 30px;
            bottom: 30px;
            display: none;
            outline: none;
        }
    </style>';
}

Vamos a introducir un poco de jquery para que haga un efecto de scroll mas agradable, así no se comprta tan brusco si no hay nada con jquery en el tema (lo dudo mucho) debes incluir en el archivo header.php de tu plantilla esta línea de código:

<?php wp_enqueue_script('jquery');?>

El efecto es que el botón se muestre a los 500px de la cabecera y que cuando llegue a la parte superior se esconda, como ya sabes puedes cambiar los parámetros a tu gusto.

add_action( 'wp_footer', 'back_to_top_script' );
function back_to_top_script() {
    echo '<script type="text/javascript">
        jQuery(document).ready(function($){
            $(window).scroll(function () {
                if ( $(this).scrollTop() > 400 )
                    $("#totop").fadeIn();
                else
                    $("#totop").fadeOut();
            });
            $("#totop").click(function () {
                $("body,html").animate({ scrollTop: 0 }, 800 );
                return false;
            });
        });
    </script>';
}

 
Con este sencillo tutorial conseguirás tu botón para subir a la parte superior de un post sin necesidad de usar plugins de terceros, gracias a este efecto aumentarás la experiencia de usuario y la usabilidad de tu blog, porque uno de los mayores fallos es el largo scroll, que muchas veces es inevitable.
Yo no tengo el botón porque soy muy victima de todo lo clicable y por clicar que exista podía pasar horas subiendo y bajando…