Jak Wyróżnić Się Z Tłumu Za Pomocą Papieru.js z WordPress

Czy chcesz rysować, malować i animować swoją stronę WordPress, aby stworzyć coś wyjątkowego i legalnie fajnego? Czy nie zawsze potajemnie chciał meduzy pływanie na swojej stronie, na przykład?

A kto nie!

Cóż-dziś jest twój szczęśliwy dzień, ponieważ będziemy przykrywać Papier.js, genialna biblioteka javascript, która sprawia, że strony takie jak patatap i paperoids możliwe.

Jeśli używasz Papieru.js przed i tylko chce się dowiedzieć jak zintegrować Papier.js z WordPress, zapraszam do pominięcia intro!

Spis treści:

• Czym jest Papier.js?
• Co mogę zrobić z papierem.js a dla kogo?
• Jak zainstalować Papier.js na mojej stronie?
• Jak skonfigurować Papier.js dla WordPressa?

Czym jest Papier.js?

Papier.js jest framework javascript, który pozwala robić niesamowite rzeczy z skryptów graficznych. Jest to samozwańczy szwajcarski scyzoryk grafiki wektorowej, uwielbiany zarówno przez projektantów, jak i programistów.

• Papier.js to otwarty framework do skryptów grafiki wektorowej, który działa na kanwie HTML5. Oferuje czysty Model obiektu wykresu sceny / dokumentu i wiele potężnych funkcji do tworzenia i pracy z grafiką wektorową i krzywymi Beziera, wszystkie starannie opakowane w dobrze zaprojektowany, spójny i czysty interfejs programowania.
• Papier.js jest oparty i w dużej mierze kompatybilny ze Scriptographer, środowiskiem skryptowym dla Adobe Illustrator z aktywną społecznością skrypterów i ponad 10 lat rozwoju.
• Papier.js jest łatwy do nauczenia się dla początkujących i ma wiele do opanowania dla średnio zaawansowanych i zaawansowanych użytkowników.
• To łatwy sposób, aby Twoja strona była bardziej zabawna i zabawny sposób, aby Twoja strona była łatwiejsza dla oczu.

Ujmijmy to w ten sposób: jeśli jQuery jest javascript na sterydach, Papier.js to javascript na grzyby – stąd bierze się cała kreatywność.

Podstawowe pojęcia: Canvas i Paperscript

Canvas to element HTML5, który dosłownie działa jak canvas. Wiem, racja! Jest to kontener dla Grafiki. Musisz użyć skryptu, aby narysować na nim grafikę. Domyślnie element < canvas > nie ma ani zawartości, ani ramek.

Jeśli przyjrzysz się bliżej Gazecie.Pliki js lub na poniższym przykładzie zobaczysz, że zamiast ” text / javascript „mamy”text/paperscript”.

Paperscript to język specyficzny dla domeny stworzony specjalnie dla papieru.js, więc nie zadziała, chyba że papier.js jest włączone.

Co mogę zrobić z papierem.js a dla kogo?

W Papierze.js możesz łatwo rysować ścieżki i kształty w dowolnym kolorze i rozmiarze. Można tworzyć elementy, obiekty, rastry, narzędzia interaktywne i warstwy. Możesz animować przedmioty, dodawać operacje matematyczne, a nawet tworzyć własne gry. Krótko mówiąc, co można zrobić w papierze.js jest naprawdę ograniczony tylko przez Twoją kreatywność i wyobraźnię.

Podstawowe cechy papieru.js:

• Moduł Obiektu Dokumentu
• Tworzenie ścieżek i segmentów
• Animacja
• Interakcja myszy i klawiatury
• Import i eksport SVG
• Obrazy rastrowe i uśrednianie kolorów
• Geometria wektorowa
• Operacje matematyczne
• Konwersja obiektów

Zauważ, że w tym tutorialu I niet mają na celu wyjaśnienie każdej właściwości i cechy papieru.js. Skupię się na przygotowaniu papieru.js w WordPress. Jeśli chcesz dowiedzieć się więcej o funkcjonalności i specyficznych cechach Paper.js, możesz znaleźć świetne samouczki na ich oficjalnej stronie.

Pamiętajcie też o tym papierze.js jest frameworkiem javascript. Technicznie można zrobić wszystkie te same rzeczy w vanilla javascript, ale to zajmie ci linie i linie kodu.

Osoby zaznajomione z aplikacjami do rysowania wektorowego i javascript, takimi jak Adobe Illustrator, znajdą Paper.js bardzo intuicyjne i najprawdopodobniej najbardziej na tym skorzystają. Ścieżki można tworzyć w formie papierowej.js podobne do tego, jak narysowałbyś je w programie Illustrator. Oczywiście wymagana jest podstawowa znajomość javascript.

Jak zainstalować Papier.js na mojej stronie?

Jeśli masz Node od Bower, możesz użyć npm install paper lub papier instalacyjny bower komendy. W przeciwnym razie, aby dołączyć Papier.js na swojej stronie musisz najpierw pobrać ją z ich oficjalnej strony na http://paperjs.org/download/

Rozpakuj pobrany plik wewnątrz folderu projektu (np. w majątku).

Dodaj następujące Skrypty wewnątrz nagłówka pliku HTML:

Nie zapomnij dodać elementu canvas do swojego ciała – wszystko, co zrobiłeś w paperscript, będzie widoczne tylko na płótnie.

Nie musisz pisać skryptu w nagłówku kodu HTML – możesz również utworzyć osobny plik paperscript i dodać go do kodu HTML w ten sposób:
https://gist.github.com/crogroo/5d790bc192817b42f0b64495c8cf7de6.js

Jak dodać papier.js do WordPress?

Aby ukończyć ten samouczek i dodać niesamowitą funkcjonalność papieru.js do swojej witryny WordPress, musisz mieć dostęp do swojego cpanel i menedżera plików. OK? Super, idziemy!

Krok 1: Utwórz motyw potomny

Motyw potomny można utworzyć ręcznie. Jestem leniwy, więc używam wtyczki generatora motywów potomnych (możesz usunąć wtyczkę zaraz po utworzeniu motywu potomnego). W tym samouczku będę używał motywu Astra jako rodzica dla mojego motywu dziecka.

Krok 2: Pobierz najnowszą wersję Paper.js

Pobierz najnowszą wersję tutaj http://paperjs.org/download/
Rozpakuj pobrany plik i otwórz folder „dist”. Znajdziesz tam pliki paper-core i paper-full javascript. Będę używał papier-pełny-min.js ponieważ jest nieco lżejszy niż papier-pełny.js.

Krok 3: Prześlij pełny papier./ min.plik js do folderu motywu podrzędnego za pomocą Menedżera plików

Mam nadzieję, że to całkiem proste. Lokalizacja mojego motywu dziecka to / wp-content / themes / astra-child/

KROK 4: zapytaj o pełny papier./ min.skrypt js na Twoją stronę

Dodajmy javascript do naszej witryny WordPress we właściwy sposób, z zapytaniem.

Wciąż jesteśmy w menedżerze plików. Przejdź do motywu dziecka i otwórz funkcje.php plik. Zachęcamy do tworzenia kopii zapasowych funkcje.php przed zmianą. Skopiuj następujący kod do funkcji.php.plik.

Ten skrypt prosi o pracę.biblioteka js. „enqueue_paper” to tylko nazwa, którą nadałem tej funkcji. Może to być cokolwiek, ale musisz zadzwonić do niego później tą samą dokładną nazwą (uchwyt).

Zauważ, że ten kod zapyta o papier-pełny./ min.js skrypt do całej witryny WordPress. Sprawdź konsolę-jeśli nie pokazuje błędu, jest poprawnie sprawdzana. Możesz nawet dodać konsolę.log („connected”) lub alert („connected”) w papier-pełny./ min.js plik, aby upewnić się, że wszystko działa płynnie.

Chciałem dodać papier.skrypt js do konkretnej strony, więc musiałem dodać tagi warunkowe do mojej funkcji.

O tak.:

W tym przypadku, 148 to identyfikator mojej strony. Twój prawdopodobnie będzie inny. Najszybszym sposobem na wyświetlenie identyfikatora posta lub strony jest sprawdzenie jego adresu URL podczas edytowania go w zapleczu. Na przykład moja strona miała ten adres URL:

mydomain.com/wp-admin/post.php?post=148& action=edytuj

Liczby po post= są identyfikatorem Twojej strony.

The Theory Behind Enqueuing

Jeśli nie sprawdziłeś tego postu, oto jak działa zapytanie. Zamiast dodawać skrypt w nagłówku lub stopce pliku HTML, w WordPress musisz użyć wp_enqueue_script. Ma to na celu zapewnienie, że różne skrypty nie mieszają się i nie psują witryny.

Tak więc funkcja wp_enqueue_script rejestruje i pyta Skrypty. Zbadajmy to.:

wp_enqueue_script ($handle, $source, $dependencies, $version, $in_footer );

• $handle to tylko nazwa-unikalny identyfikator, za pomocą którego można ponownie wywołać funkcję.
• $source-Wstaw źródło URL pliku lub ścieżkę do skryptu względem katalogu głównego WordPress. Src musi znajdować się wewnątrz pojedynczych cudzysłowów, jak w powyższych przykładach. ($src=””)
• $dependencies-Wstaw uchwyt wcześniej zarejestrowanego skryptu, od którego zależy działanie nowego skryptu. Zazwyczaj jest to biblioteka.
• $version – dość oczywiste, prawda? Wartością domyślną jest false.
• $in_footer-wartość domyślna to false-co oznacza, że umieszczasz skrypt w nagłówku kodu HTML. Prawda postawiłaby to przed < / body>.

Nie będziemy dodawać $version I $in_footer jako domyślnych ustawień, false, odpowiada naszym potrzebom. W naszym przypadku stworzymy papier-przykład.js plik, który zależy od papieru.biblioteka js.

Pamiętaj, że istnieje wiele popularnych bibliotek, takich jak jQuery, które są już zawarte w WordPress. Nie musisz ich pytać, tylko dodawać je jako zależności.

Krok 5: zapytaj o swój papier-przykład.skrypt js i dodaj Paper-full./ min.js jako zależność

Najpierw Utwórz nowy plik w menedżerze plików. Call it papier-przykład.js i zapisz go w tym samym miejscu, w którym zapisałeś pełny papier./ min.js. Dodaj konsolę.log („connected”), jeśli chcesz się upewnić, że plik jest poprawnie wyszukany.

Aby dodać zależność do zapytanego skryptu, po prostu dodamy uchwyt 'paperlibrary’ do tablicy. Gdybyśmy mieli więcej skryptów do dodania jako zależności, moglibyśmy to zrobić w jednej linii, po prostu dodając je do tablicy.

To wszystko powinno być teraz prawidłowo połączone, ale nadal mamy dwie główne rzeczy do zrobienia.

Krok 6: Utwórz Płótno

Musimy stworzyć płótno, na którym papier.zostaną wyświetlone Skrypty js. Tak powinno wyglądać domyślnie:

Canvas jest elementem HTML5 i nie można go dodać za pomocą edytora tekstu WP. Najprostszym sposobem na to jest, jeśli używasz Kreatora Stron lub wtyczki, która obsługuje pisanie niestandardowego kodu. Będziesz mógł umieścić element canvas na swojej stronie, wewnątrz wiersza lub div (testowałem go z Divi i SiteOrigin kreatorów stron).

Canvas można stylizować w CSS tak, jak każdy inny element HTML. Dodałem następujący kod do stylu motywu potomnego.plik css, aby wyróżniać się nieco:

Uwaga: możesz mieć więcej niż jedno płótno na swojej stronie. Tylko nie zapomnij dać im różnych dowodów.

Krok 7: Korzystanie z papieru.js bezpośrednio z Javascript

Jeśli skopiujesz dowolny kod demonstracyjny paperscript do paper-example.js prawdopodobnie będziesz sfrustrowany” niezdefiniowanymi ” błędami. Jestem tu, by ci powiedzieć, że są, niestety, oczekiwani.

Problem polega na tym, że WordPress nie obsługuje paperscript, co oznacza, że będziemy musieli to obejść. Musimy użyć papieru.js bezpośrednio z javascript, jak pokazano w artykule.dokumentacja js: http://paperjs.org/tutorials/getting-started/using-javascript-directly/

Aby to zrobić, musisz utworzyć globalny zakres i zdefiniować w nim zmienne.

Tworzenie globalnego zasięgu

Możemy sprawić, że zakres papieru będzie globalny, wstrzykiwając go do okna, jak pokazano w poniższym kodzie. To ma dostęp do całego papieru.klasy i Obiekty js poprzez obiekt paper. Musimy również zdefiniować zakres papieru za pomocą papier.setup(canvas) funkcja, która automatycznie utworzy dla nas klasy.

Należy pamiętać, że osoby obsługujące takie jak onFrame oraz onResize muszą być ręcznie zainstalowane na odpowiednim obiekcie podczas pracy w JavaScript. Przy odpowiednio skonfigurowanym zakresie papieru, wszystko co musimy zrobić, to zainstalować te manipulatory na istniejącym obiekcie widoku (przykład = widok.onFrame).

Ze względu na ten samouczek stworzyłem prosty skrypt z 2 ścieżkami i jednym narzędziem, abyście mogli zobaczyć, jak umieścić globalny zakres papieru i zdefiniować zmienne w nim. Żółty prostokąt, który kręci głową w prawo przez cały dzień, to zmienna moja path1, a narzędzie do rysowania linii pomarańczowej rysuje drugą ścieżkę. Możesz skopiować mój kod do swojego papier-przykład.js plik (lub cokolwiek nazwałeś plik) i zacznij pracować stamtąd.

Upewnij się, że ścieżki, narzędzia, projekty i widoki definiujesz osobno w ramach zakresu paper. Podczas pracy w paperscript nie musisz tego robić, ale jest to wymagane podczas pracy bezpośrednio w javascript.

Baw się dobrze z papierem.js!

Tagi:

• Skrypty enqueue
• javascript
• papier.js