Kako da dodam “back to top” dugme u temi?

Dodavanje „Back to Top“ dugmeta u WordPress temu

„Back to top“ dugme poboljšava UX korisnika na WordPress sajtu, omogućavajući brzi povratak na vrh stranice. Evo koraka za dodavanje u WordPress temu koristeći klasični pristup (preporučuje se korišćenje child teme da biste izbegli gubitak izmena pri ažuriranjima).

  1. Kreirajte child temu: U folderu vaše teme napravite podfolder (npr. „parent-theme-child“), dodajte style.css sa podacima o child temi i functions.php za učitavanje parent stilova.
  2. Dodajte HTML dugme: Otvorite footer.php child teme i dodajte pre zatvaranja </body> taga: 
    <a href="#top" id="back-to-top" title="Povratak na vrh"><i class="fa fa-arrow-up"></i></a>
  3. Dodajte CSS stil: U style.css child teme: 
    #back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #007cba;
    color: white;
    padding: 10px;
    border-radius: 50%;
    display: none;
    z-index: 999;
}
#back-to-top:hover { background: #005a87; }
  4. Dodajte JavaScript: U functions.php child teme enqueue skriptu: 
    function add_back_to_top() {
    wp_enqueue_script('back-to-top', get_stylesheet_directory_uri() . '/js/back-to-top.js', array('jquery'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'add_back_to_top');

    Kreirajte js/back-to-top.js:

    jQuery(document).ready(function($) {
    $(window).scroll(function() {
        if ($(this).scrollTop() > 100) $('#back-to-top').fadeIn();
        else $('#back-to-top').fadeOut();
    });
    $('#back-to-top').click(function() {
        $('html, body').animate({scrollTop: 0}, 800);
        return false;
    });
});

Napomena: Mnoge premium WordPress teme (kao Astra Pro, Ocean WP ili Divi) već imaju ugrađenu opciju za „back to top“ dugme. WP Host nudi preko 350 premium tema i pluginova besplatno uz svaki WordPress hosting paket – proverite u vašoj temi ili pošaljite tiket podršci za aktivaciju.

← Nazad na: Wordpress