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)
  • 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’ );

    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);

    }

    });

    });

    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)
  • The topic ‘Pytanie child theme i podpinanie plików js’ is closed to new replies.