Wsparcie » Rozmaitości » Pytanie child theme i podpinanie plików js

  • Witam,

    Jestem początkujący i dlatego poszukuję odpowiedzi w internecie i między innymi na tym forum.

    Chcę zaimplementować efekt pojawiających się bloków kolejnych sekcji w miarę przewijania strony w dół. Stworzyłem plik javascript, który wykorzystuje zewnętrzną bibliotekę jquery-3.2.1.min.js.
    Testowałem scrypt na zwykłej stronie i wszystko ładnie działa. Mam problem żeby teraz to przenieść na WordPress`a, coś robię nie tak…

    Pracuję na child theme i w szablonie dziecka w pliku functions.php, stworzyłem funckje która podpina bibliotekę jquery i plik javascript, który znajduje się lokalnie w katalogu dziecka '/js/script.js’.

    plik skryptu wykonuje funkcję, która odwołuje się do konkretnej klasy, którą podpinam do sekcji, która ma się pokazać (początkowo sekcja ma atrybut opacity:0;)

    odwołanie do plików w functions.php wygląda tak:

    function scroll_show(){
    wp_enqueue_script(’library’, 'https://code.jquery.com/jquery-3.2.1.min.js’, '3.2.1′, null, false );
    wp_enqueue_script(’show’, get_template_directory_uri() . '/js/hide-sections.js’, '1.0.0′, null, false);
    }
    add_action( 'wp_enqueue_script’, 'scroll_show’ );

    Teraz moje pytanie brzmi. Jak mam odwołać się do tej funkcji w szablonie aby efekt pojawienia się ukrytych sekcji zadziałał? Być może odpowiedź jest banalnie prosta, a ja drepczę w kółko 🙁

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter luknijdwarazy

    (@luknijdwarazy)

    No mam z tym problem 🙁 próbuję wczytać bibliotekę jquery na poziomie funkcji wp_head, a funkcje scroll_show wywołuje po funkcji wp_head przez do_action(’scroll_show_init’);

    function library(){
    wp_deregister_script(’jquery’);
    wp_register_script(’jquery’, 'https://code.jquery.com/jquery-3.2.1.min.js’);
    wp_enqueue_script(’jquery’);
    }
    add_action( 'wp_head’, 'library’ );

    function scroll_show(){
    wp_register_script(’show’, get_template_directory_uri() . '/js/hide-sections.js’);
    wp_enqueue_script(’show’);
    }
    add_action( 'scroll_show_init’, 'scroll_show’ );

    Thread Starter luknijdwarazy

    (@luknijdwarazy)

    kod js:

    /* Every time the window is scrolled … */
    $(window).scroll( function(){

    /* Check the location of each desired element */
    $(’.hidediv’).each( function(i){

    var bottom_of_object = $(this).offset().top + $(this).outerHeight();
    var bottom_of_window = $(window).scrollTop() + $(window).height();

    /* If the object is completely visible in the window, fade it in */
    if( bottom_of_window > bottom_of_object ){

    $(this).animate({’opacity’:’1′},500);

    }

    });

    });

    Thread Starter luknijdwarazy

    (@luknijdwarazy)

    Trochę to trwało ale udało się! 🙂

    1. Zrezygnowałem z ładowania biblioteki jQurey, ponieważ WordPress ma już podpięte biblioteki.

    2. W functions.php podpiąłem plik hide-section.js z moim skryptem, jak poniżej.

    add_action( 'wp_enqueue_scripts’, 'scroll_show’);
    function scroll_show() {
    wp_enqueue_script(’scroll_show’, get_stylesheet_directory_uri() . '/js/hide-sections.js’, array(’jquery’), '1.0′, true);
    }

    3. Skrypt musiał być napisany w 'noconflict mode’, ponieważ WordPress domyślnie pracuje w tym trybie. Dlatego wszystkie znaki $ w skrypcie zamieniłem na jQuery.

    Wszystko działa jak należy, dzięki!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Temat ‘Pytanie child theme i podpinanie plików js’ jest zamknięty na nowe odpowiedzi.