Tutorial: Flecha Ir Arriba para Wordpress

nuay dijo:

Mientras leemos un articulo o navegamos un sitio, siempre será importante tener un icono en la parte inferior derecha para regresar al top de este.

O sea, creo que todo sitio deberia de tenerlo.

Creo que tambien existen plugins que lo instalan, pero hice este pequeño codigo que pueden agregar a su archivo de functions. Esto usa Dashicons forzados por si acaso WP no lo quiere cargar.

Insertar CODE, HTML o PHP:

/**
 * Botón "Volver Arriba" con Dashicons forzados
 */
function sp_scroll_top_script() {
    // Esto asegura que los iconos de WordPress carguen para todo el mundo
    wp_enqueue_style('dashicons');

    ?>
    <div id="scroll-to-top" title="Subir"></div>

    <style>
        #scroll-to-top {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 50px;
            height: 50px;
            background-color: rgba(0, 0, 0, 0.4);
            color: #ffffff;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            z-index: 99999;
            opacity: 0;
            visibility: hidden;
            border: none;
        }

        /* Forzamos que el icono use la fuente Dashicons */
        #scroll-to-top::before {
            content: "\f342"; /* Código de la flecha */
            font-family: "dashicons" !important;
            font-size: 30px;
            line-height: 1;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        #scroll-to-top:hover {
            background-color: rgba(0, 0, 0, 0.8);
            transform: translateY(-5px);
        }

        #scroll-to-top.visible {
            opacity: 1;
            visibility: visible;
        }
    </style>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const btn = document.getElementById("scroll-to-top");
            window.addEventListener("scroll", function() {
                if (window.pageYOffset > 400) {
                    btn.classList.add("visible");
                } else {
                    btn.classList.remove("visible");
                }
            });
            btn.addEventListener("click", function() {
                window.scrollTo({ top: 0, behavior: "smooth" });
            });
        });
    </script>
    <?php
}
add_action('wp_footer', 'sp_scroll_top_script');

Demo en el blog de mi firma. Saludos!

Hacer clic para expandir...

WebowAgency dijo:

Gracias por el script. Muchos temas no tienen esta opción o no podemos personalizarla.

Hacer clic para expandir...