✅Botón Scroll to Top en WordPress (Sin Plugins)

Este código PHP y JavaScript se presenta como una solución ingeniosa para la integración de un botón «Ir arriba» en un sitio WordPress, enriqueciendo la experiencia de los usuarios al proporcionar una forma sencilla y elegante de regresar al inicio de la página.

La función add_scroll_to_top_button() juega un papel central al imprimir dinámicamente el botón «Ir arriba» en el pie de página del sitio. Este componente visual se presenta de manera discreta pero efectiva, añadiendo una capa adicional de funcionalidad que mejora la navegación.

El script jQuery incorporado en la función se encarga de gestionar el comportamiento del botón, permitiendo que este se muestre u oculte de manera fluida según el desplazamiento de la página. Además, la inclusión de estilos CSS personalizados mediante la función custom_scroll_to_top_styles() asegura una presentación visual coherente con la estética global del sitio.

La seguridad y la integración efectiva con WordPress no se pasan por alto. El código utiliza hooks como ‘wp_footer’ y ‘wp_head’, facilitando la incorporación sin problemas en el flujo del sistema. Además, se aplican precauciones, como el uso de z-index y la gestión cuidadosa de estilos, para garantizar la coexistencia armoniosa con otros elementos de la página.

Este conjunto de funciones no es simplemente un código; es una herramienta que potencia la experiencia de usuario en un sitio WordPress. El botón «Ir arriba» no solo simplifica la navegación, sino que también contribuye a una experiencia de usuario más fluida y agradable. En última instancia, este código demuestra la versatilidad y la capacidad de WordPress cuando se combina con soluciones creativas respaldadas por sólidos conocimientos de desarrollo.

El siguiente código tienes que agregarlo en el functions.php de tu tema hijo o utilizar un plugin como CODE SNIPPETS.

<?php
// Añadir botón "Ir arriba"
function add_scroll_to_top_button() {
    // Se imprime el botón "Ir arriba" con una flecha hacia arriba como contenido del enlace.
    echo '<div id="scroll-to-top">
            <a href="#" title="Ir arriba">&#9650;</a>
          </div>';

    // Se agrega un script jQuery que controla el comportamiento del botón.
    echo '<script>
            jQuery(document).ready(function($) {
                // Se activa cuando se realiza un desplazamiento en la página.
                $(window).scroll(function() {
                    // Si el desplazamiento es mayor a 100 píxeles desde la parte superior, se muestra el botón.
                    if ($(this).scrollTop() > 100) {
                        $("#scroll-to-top").fadeIn();
                    } else {
                        // De lo contrario, se oculta el botón.
                        $("#scroll-to-top").fadeOut();
                    }
                });

                // Se activa cuando se hace clic en el botón.
                $("#scroll-to-top a").click(function() {
                    // Se realiza una animación de desplazamiento suave hacia la parte superior de la página.
                    $("body,html").animate({
                        scrollTop: 0
                    }, 600);
                    return false; // Se evita la acción predeterminada del enlace.
                });
            });
          </script>';
}

// Se agrega la función add_scroll_to_top_button a la acción wp_footer, que insertará el botón en el pie de página.
add_action('wp_footer', 'add_scroll_to_top_button');

// Estilos adicionales (opcional)
function custom_scroll_to_top_styles() {
    // Se imprime un bloque de estilos CSS para personalizar el aspecto del botón.
    echo '<style>
            #scroll-to-top {
                position: fixed; /* Posición fija en la ventana del navegador. */
                bottom: 20px; /* Distancia desde la parte inferior. */
                right: 20px; /* Distancia desde la derecha. */
                display: none; /* Inicialmente oculto. */
                background-color: black; /* Color de fondo del botón. */
                color: #fff; /* Color del texto. */
                border: none; /* Sin borde. */
                border-radius: 50px; /* Bordes redondeados para un aspecto más suave. */
                padding: 10px 15px; /* Relleno interior del botón. */
                cursor: pointer; /* Cursor de puntero al pasar el ratón. */
				z-index:999; /* Capa z para asegurarse de que esté encima de otros elementos. */
            }

            #scroll-to-top a {
                font-size: 24px; /* Tamaño de la fuente de la flecha. */
                color: #fff; /* Color de la flecha. */
                text-decoration: none; /* Sin subrayado del enlace. */
            }

            #scroll-to-top:hover {
                background-color: #0056b3; /* Color de fondo al pasar el ratón por encima. */
            }
          </style>';
}

// Se agrega la función custom_scroll_to_top_styles a la acción wp_head, que insertará los estilos en la sección head del documento.
add_action('wp_head', 'custom_scroll_to_top_styles');
Lenguaje del código: HTML, XML (xml)

Entendiendo el Código

Función add_scroll_to_top_button()

Esta función se encarga de generar el marcado HTML y el script JavaScript necesarios para el botón «Ir arriba».

1. Creación del Botón HTML:
   • Se utiliza la función echo para imprimir el código HTML del botón dentro de un contenedor <div> con el id «scroll-to-top».
   • El contenido del enlace es una flecha hacia arriba representada por el carácter Unicode ▲.
2. Script jQuery:
   • Se imprime un script jQuery dentro del mismo echo.
   • El script controla el comportamiento del botón, mostrándolo u ocultándolo según el desplazamiento de la página.
   • Se define una animación de desplazamiento suave cuando se hace clic en el botón.

Función add_action('wp_footer', 'add_scroll_to_top_button');

Esta línea de código añade la función add_scroll_to_top_button a la acción wp_footer de WordPress. De este modo, el botón se insertará en el pie de página del sitio web.

Función custom_scroll_to_top_styles()

Esta función se encarga de imprimir estilos CSS personalizados para darle un aspecto específico al botón «Ir arriba».

1. Estilos CSS:
   • Se utiliza la función echo para imprimir un bloque de estilos CSS.
   • Estos estilos definen la posición, colores, tamaño, y otros aspectos visuales del botón.
   • El botón tiene una posición fija en la esquina inferior derecha, con un fondo negro, texto blanco, bordes redondeados, y otros estilos estéticos.

Función add_action('wp_head', 'custom_scroll_to_top_styles');

Esta línea de código añade la función custom_scroll_to_top_styles a la acción wp_head de WordPress. Esto asegura que los estilos personalizados se inserten en la sección <head> del documento.

Con estas funciones y acciones, se logra implementar un botón de «Ir arriba» en un sitio WordPress con estilos personalizados, mejorando la experiencia del usuario al facilitar la navegación dentro de la página.

En resumen, el código proporcionado para agregar un botón «Ir arriba» en WordPress ofrece una solución efectiva para mejorar la experiencia de navegación de los usuarios, permitiéndoles regresar rápidamente al inicio de la página con un simple clic. Este añadido no solo incrementa la usabilidad del sitio, sino que también aporta un toque estético mediante estilos personalizados.

Posibles Usos:

1. Mejora de Navegación: Facilita a los usuarios la navegación en páginas extensas al proporcionar un acceso rápido hacia la parte superior.
2. Diseño Personalizado: Permite la adaptación de estilos para integrar armoniosamente el botón con la apariencia general del sitio, contribuyendo a una experiencia visual agradable.

Ejemplos Prácticos:

1. Páginas Extensas o de Contenido Continuo: Ideal para sitios con contenido largo, como blogs extensos, donde los usuarios pueden desear regresar al inicio sin desplazarse manualmente.
2. Portafolios y Páginas Creativas: Útil en sitios que presentan portafolios o proyectos creativos, donde se valora la atención a los detalles de la navegación.

Si necesitas adaptar el código a las necesidades de tu proyecto o agregar una funcionalidad específica a tu página web no dudes en contactar conmigo.

Nos vemos en el siguiente tutorial.

Un saludo.