Skocz do zawartości
  • Przeglądający   0 użytkowników

    Brak zarejestrowanych użytkowników, przeglądających tę stronę.

Zevcore

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

Promowane 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

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

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>

 

 

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

Umieściłem w tagach skryptu i w konsoli mi wywala

bład w tej linijce


        container.appendChild(item);

image.png.c5390e17395b7d25e09950e0020029ab.png

 

Mam ten kod w body , jak dodam do head'a błedy znikają ale pojawia sie nowy
image.png.e93eaa227d146e5b82225639697d74ab.png

Edytowane przez Zevcore

Udostępnij tego posta


Odnośnik do posta
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.

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

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

 

Udostępnij tego posta


Odnośnik do posta
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

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

Nie trzeba tego rozdzielać.

 

Pytałem, czy aos.js jest na tym samym poziomie co functions.php ... Bo problem może być właśnie w ścieżce. Sprawdzałeś konsolę przeglądarki co pokazuje?

Udostępnij tego posta


Odnośnik do posta
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

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

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...

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

Tylko zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Utwórz konto

Utwórz konto. To darmowe i bardzo proste!

Zarejestruj nowe konto

Zaloguj się

Posiadasz już konto? Zaloguj się tutaj.

Zaloguj się teraz


  • Podobna zawartość

    • Przez best_software
      Nowoczesny skrypt filmów i seriali online, wzorowany na najpopularniejszym serwisie z filmami.
      Demo znajduje się pod adresem: Welcome | FilmX
      Przedmiotem sprzedaży jest nowoczesny skrypt filmów i seriali online, do prowadzenia tego typu serwisu nie jest wymagana żadna znajomość programowania.
       
      Funkcje jakie zawiera skrypt:
      - Automat do pobierania i aktualizowania filmów i seriali, obsługa popularnych hostingów filmów w tym min: openload, vidoza, streamango, clipwatching, anyfiles, rapidvideo, vshareeu, speedvid, vshare, vidto,   streamcherry, youtube, vidzi, dailymotion, 
        streamplaym, reseton, freedisc
      - Konto trial dla każdego zarejestrowanego konta na 30 dni
      - Gotowa aktualna baza 34 000 filmów oraz 2100 seriali, w tym ok 850 000 linków do źródeł. Obsługa wielu źródeł dla jednego odcinka/filmu.
      - Rejestracja, konta użytkowników, obsługa płatności (Paypal i Stripe), subskrypcje, lista ulubionych, historia płatności, wybór profilu (4 na jedno konto), limit logowania - 4 aktywne sesje. Gdy użytkownik będzie      próbował zalogować się w jednym 
        czasie z większej liczby urządzeń zostanie automatycznie wylogowany, do tego celu jest wykorzystywane zaawansowany system autoryzacji.
      - Strona jest w pełni responsywna, dostosowana do urządzeń mobilnych: tabletów, telefonów. Okno playera jest dostosowywane automatycznie do wielkości ekranu używanego urządzenia.
      - Możliwość przypisania wielu kategorii dla jednego filmu/serialu, filtrowanie po kategorii i roku, obsada aktorska, moduł podobnych filmów/seriali do aktualnie oglądanego opierający się na aktorach oraz             gatunku
      - Opisy oraz zdjęcia do poszczególnych odcinków seriali - prawdopodobnie żaden inny serwis z filmami w Polsce nie posiada tej funkcji
      - Autosuggest - moduł podpowiedzi w polu wyszukiwania znany min. z wyszukiwarki Google - po wpisaniu min. 3 znaków w pole wyszukiwania rozwija się lista z tytułami filmów i seriali zawierających wpisaną   frazę
      - Filmy prezentowane na stronie głównej w formie slidera znanego z najpopularniejszego serwisu z filmami
      - Oceny filmów/seriali pobrane z serwisu Filmweb
      - Zwiastuny do filmów/seriali
      - Wszystkie zdjęcia i teksty są pobierane bezpośrednio na serwer
      - Moduł polecanych filmów, które będą wyświetlały się w wersji desktopowej w formie slidera na stronie głównej
      - Strona jest zoptymalizowana pod SEO, w pełni przystosowana do SSL, napisana według wytycznych W3C.
      - Tam gdzie to możliwe zastosowaliśmy moduł blokowania wyskakujących okienek popup w oknie odtwarzacza
       
      Panel admina:
      - Zarządzanie użytkownikami, subskrypcjami, historia płatności
      - Dodawanie/modyfikowanie/usuwanie filmów, seriali: sezonów i odcinków, a także poszczególnych źródeł dla każdej produkcji.
      - Statystyki filmów i seriali, aktywnych subskrypcji, sprzedaży
      - Zarządzanie kategoriami
      - Możliwość włączenia konta gościa, czyli korzystania ze strony bez potrzeby logowania
      - Moduł polecanych filmów
      - Edycja FAQ, polityki prywatności, loga, ustawień witryny
      Panel admina jest prosty i przejrzysty, posiada wszystkie funkcje niezbędne do zarządzania witryną
       
      Player premium:
      Do skryptu jest dołączony moduł playera premium FilmX. Są to wtyczki do przeglądarek, których demo można zobaczyć tutaj:
      Chrome: https://chrome.googl...gckglglbj?hl=pl
      Firefox: https://addons.mozil...es-without-ads/
      Wtyczka do przeglądarki Firefox jest kompatybilna z mobilną wersją przeglądarki - można ją zainstalować także na telefonie, czy tablecie. Po zakupie skryptu udostępnimy kod źródłowy wtyczek. 
      Funkcje playera premium:
      - własny player, który obsługuje wszystkie dotępne hostingi
      - wracanie do momentu, w którym był przerwany ostatnio film
      - brak reklam z oryginalnych playerów
      - możliwość wybierania jakości (1080p, 720p, 480p)
      - możliwość pobrania filmu - możliwość dodania własnych napisów
      - omijanie blokad regionalnych (proxy w playerze)
      - omijanie limitów playerów/blokowania przy wykryciu adblocka
       
      Wymagania:
      - Baza MySQL w wersji min 5.6
      - PHP 7.0,
      - dysk HDD/SSD min 10 GB
      - obsługa Cron
      - Transfer min 10 GB/msc
      Skrypt jest oparty na autorskim CMS stworzonym na bazie bardzo wydajnego frameworka CodeIgniter
      Po zakupie bezpłatnie pomożemy w instalacji skryptu na serwerze. Możliwość zmiany wyglądu, czy funkcjonalności za dodatkową opłatą. Zajmujemy się także pozycjonowaniem stron.
      Cena: 10 000 zł +VAT (faktura)
      Kontakt: contact.best.software@gmail.com
      Aukcja na Allegro: wpisz "Filmx"
      https://allegro.pl/u...oftware?order=m

    • Przez damson
      OFERTA AKTUALNA! ZAMKNĄŁEM TEMAT PRZEZ SPAM.
       
      Opis:   Ciemno-pomarańczowy szablon pod najnowszą wersję IPS 4.3.x o tematyce gamingowej. W pełni konfigurowalny przez panel administratora i responsywny.
      Cena:   160 zł brutto /szt ARMY 1.0.0/I – Szablonet.pl – Szablony na każdy skrypt i na każdą ki...
      Płatność:  PayPal, Przelewy24, przelew tradycyjny.
      Kontakt:  Kontakt – Szablonet.pl – Szablony na każdy skrypt i na każdą kieszeń
      Allegro (nie wymagane):  
      Zdjęcia:  
       








×