Skocz do zawartości

Dodawanie skryptu (AOS - Animate on scroll) do szablonu WordPress


Zevcore
 Udostępnij

Rekomendowane odpowiedzi

Witam przepisuję sobie stworzony przezemnie layout pod Wordpressa i utknąłem na JS :|

Chodzi o to, że mam ten dodatek AOS do animacji i próbuję go załączać w ten sposób

<script src="<?php echo get_stylesheet_directory_uri(); ?>/aos.js"></script>

w Headzie oraz w Body wywołanie

<script src="<?php echo get_stylesheet_directory_uri(); ?>/start.js"></script>

Gdzie start.js przechowuje wywołanie tego dodatku tzn.


      AOS.init({
        easing: 'ease-in-out-sine'
      });
      setInterval(addItem, 300);
      var itemsCounter = 1;
      var container = document.getElementById('aos-demo');
      function addItem () {
        if (itemsCounter > 42) return;
        var item = document.createElement('div');
        item.classList.add('aos-item');
        item.setAttribute('data-aos', 'fade-up');
        item.innerHTML = '<div class="aos-item__inner"><h3>' + itemsCounter + '</h3></div>';
        container.appendChild(item);
        itemsCounter++;
      }

No i niestety to nie działa, wcześniej dodane animacje nie działają, coś źle robię, a no i te pliki są w głównym folderze tam gdzie index itp więc taka ścieżka

Odnośnik do komentarza
Udostępnij na innych stronach

  • Założyciel

Musiałbym zobaczyć jak to wygląda na żywo. Spróbuj zainicjować skrypt bezpośrednio z innego serwera

https://cdnjs.cloudflare.com/ajax/libs/aos/2.2.0/aos.js

Masz jakieś błędy w konsoli? Jesteś pewny że skrypt poprawnie się wczytuje? 

Wywołanie dodaj w ten sposób bez umieszczania tego w start.js

<script> 
        AOS.init({
        easing: 'ease-in-out-sine'
      });
      setInterval(addItem, 300);
      var itemsCounter = 1;
      var container = document.getElementById('aos-demo');
      function addItem () {
        if (itemsCounter > 42) return;
        var item = document.createElement('div');
        item.classList.add('aos-item');
        item.setAttribute('data-aos', 'fade-up');
        item.innerHTML = '<div class="aos-item__inner"><h3>' + itemsCounter + '</h3></div>';
        container.appendChild(item);
        itemsCounter++;
      }
</script>
Odnośnik do komentarza
Udostępnij na innych stronach

function themeslug_enqueue_script() {
    wp_enqueue_script( 'my-js', 'aos.js', false );
    wp_enqueue_script( 'my-js', 'start.js', false );
}


add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_script' );

Dodałem to w function.php i nic mi to nie dało, oczywiście tamto wyrzuciłem.

Odnośnik do komentarza
Udostępnij na innych stronach

  • Ekspert

Pierwsza wartość z funkcji, to wartość unikalna. Nie możesz mieć dwóch takich samych nazw.

Druga wartość, to ścieżka. Jeżeli pliki masz na tym samym poziomie co functions.php, to tak możesz to zostawić. Jednak lepiej dodać jeszcze get_template_directory_uri()

get_template_directory_uri() | Function | WordPress Developer Resources

I tak powinna wyglądać linijka 'wstrzykająca' skrypty:

<?php
wp_enqueue_script('aos', get_template_directory_uri() . '/aos.js', ['jquery'], false, true);
Odnośnik do komentarza
Udostępnij na innych stronach

Przestałem to już rozumieć, czyli powinienem to zrobić w ten sposób że oddzielić je od siebie i wywołać czyli

function aos() {
    wp_enqueue_script('aos', get_template_directory_uri() . '/aos.js', ['jquery'], false, true);
}
function start() {
    wp_enqueue_script('start', get_template_directory_uri() . '/start.js', ['jquery'], false, true);
}
add_action( 'wp_enqueue_scripts', 'aos' );
add_action( 'wp_enqueue_scripts', 'start' );

Ale to nadal nie działa

Odnośnik do komentarza
Udostępnij na innych stronach

Jest na tym samym poziomie
image.png.6ef26e58a216d76a358ac3326ecd3c6b.png 

function aos() {
    wp_enqueue_script('aos', get_template_directory_uri() . '/aos.js', ['jquery'], false, true);
     wp_enqueue_script('start', get_template_directory_uri() . '/start.js', ['jquery'], false, true);
}

add_action( 'wp_enqueue_scripts', 'aos' );

image.png

Odnośnik do komentarza
Udostępnij na innych stronach

  • Ekspert

Niemożliwe, że to nie działa. Ja mam takie coś:

<?php
function my_theme_scripts() {
  wp_enqueue_style('core', get_stylesheet_uri());
  wp_enqueue_style('font-awesome', get_template_directory_uri() . '/css/font-awesome.min.css');
  wp_enqueue_style('bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css');
  wp_enqueue_style('my-style', get_template_directory_uri() . '/css/global.min.css');
  wp_enqueue_script('bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js', ['jquery'], false, true);
  wp_enqueue_script('scripts', get_template_directory_uri() . '/js/scripts.js', ['jquery'], false, true);
  if(is_singular() && comments_open() && get_option('thread_comments')) {
    wp_enqueue_script('comment-reply');
  }
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');

I to działa...

Odnośnik do komentarza
Udostępnij na innych stronach

Problem wciąż nierozwiązany? Dodaj swoją odpowiedź

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto. Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Zarejestruj nowe konto

Załóż nowe konto. To bardzo proste!

Zarejestruj się

Zaloguj się

Posiadasz już konto? Zaloguj się poniżej.

Zaloguj się
 Udostępnij

  • Ostatnio przeglądający

    • Brak zarejestrowanych użytkowników przeglądających tę stronę.
  • Podobna zawartość

    • Witam,
      mam problem ponieważ narazie dzialam na skrypcie randomname, lecz chcialbym podpiac chat pod baze danych. Chat jest oparty o javascript.
      W jaki sposob moglby to zrobic? 
       
      chat znajduje sie tutaj: tibiapot.com / to nie jest reklama.
       
      Co musialbym dodac, lub do czego sie odwolac aby nawiazac polaczenie z baza i pobierac uzytkownikow z niej
       
      Pozdrawiam
    • Witam, mam problem. Wczoraj późnym wieczorem aktywowałem Search Console i Google Analytics, lecz do teraz nie wyświetla mi statystyk strony. Kod, który miałem dodać z GA dodałem przed </head>. Pierwszy raz używam tych dodatków i nie mam pojęcia jak to włączyć (tzn. włączyć chyba włączyłem, ale nie działa).
      URL: pawlikowska.edu.pl
    • Sprzedam Szablon pod silnik 4.1 - FastGamers_v2. Szablon unikatowy wykonany dla mojej własnej osoby. (autorstwa: FiFi.ART & Edyta Seremak & Krasnal) Posiada przerobioną tabele online z serwerami. Screen szablonu na dole.
      Cena: Do negocjacji, ale około 250zł.
      Płatność: Głównie interesuje PayPal, może być przelew bankowy, ale wszystko finalizuje po zaksięgowaniu kwoty.
      Kontakt:  GG: 43690537, Steam: tenstyll4ever, może być PW tutaj na forum.
      Allegro (nie wymagane): Nie
      Zdjęcia: 

    • Autor: @myCreedo
      Wersja MyBB: 1.8.x
      Wersja stylu: 1.0
      Podgląd - więcej zdjęć tutaj.
      OPIS
      Fladmin to darmowy szablon panelu administratora w stylu Flat Design dla MyBB 1.8.x. Jest w pełni responsywny i wielokolorowy - każda sekcja panelu (nawet te niestandardowe!) posiada własny pastelowy kolor! Nie wymaga instalacji dodatkowych wtyczek. 
      INSTALACJA
      1. Otwórz folder upload i prześlij całą zawartość do katalogu głównego swojego forum.
      2. Przejdź do ACP  Konfiguracja  Ustawienia  Preferencje panelu sterowania (globalne).  
      3. Wybierz Fladmin w Styl panelu administratora i naciśnij Zapisz ustawienia.
      WŁĄCZENIE DLA SWOJEGO KONTA
      Przejdź do ACP  Start  Ustawienia ACP Wybierz Fladmin w Styl panelu administratora i naciśnij Zapisz notatki i ustawienia.   
      Pobierz:  Ukryta zawartość
      Zareaguj na post lub odpowiedz w temacie aby zobaczyć ukrytą zawartość.
      Mybb Community: Link
    • Witam. Chciałem na swojej subdomenie zrobić skrypt wymiany bannerów.. jednak każdy który wrzucam to grafika zostaje blokowana przez Adblock'a.. 
      Co może być powodem? 
       
      reklama.gocsgo.pl
  • Najnowsze tematy

  • Ostatnio rozwiązane

×