Poświęciłeś czas, aby nauczyć się używać JavaScript w WordPress. Po drodze zebrałeś również wiele przydatnych bibliotek i zasobów JavaScript, aby usprawnić kodowanie. Ale co teraz zrobisz z umiejętnościami, które zdobyłeś?
Istnieje wiele powodów, dla których możesz dodać niestandardowy JavaScript do swojej witryny WordPress, a także istnieje wiele sposobów, w jakie możesz go wdrożyć. Ale musicie być bardzo ostrożni, jak to robicie. Niewłaściwa implementacja JavaScript może wyrządzić więcej szkody niż pożytku.
W dzisiejszym krótkim przewodniku po samouczku JavaScript, zamierzam porozmawiać o tym, dlaczego warto dodać niestandardowy JavaScript do swojej witryny i jak to zrobić w bezpieczny i właściwy sposób (w tym za pomocą wtyczek WordPress).
Dlaczego warto dodać niestandardowy JavaScript do WordPress
Podczas kodowania witryny WordPress potrzebne są trzy elementy:
- HTML
- CSS
- JavaScript
HTML i CSS są świetne. Stanowią solidne podstawy dla Twojej witryny WordPress. Jednak nie mogą wiele pomóc, jeśli chcesz zmienić “zachowanie” swojej witryny. Na przykład, prawdopodobnie będziesz musiał użyć JavaScript, aby wykonać następujące czynności:
- Zmieniaj, ukrywaj lub wyświetlaj elementy HTML.
- Dodawaj wartości do zmiennych CSS i wykonuj na nich złożone operacje, takie jak scalanie zmiennych lub dostarczanie odpowiedzi po podjęciu akcji (jak kliknięcie).
- Zmień układ i wygląd swojego motywu WordPress (jeśli nie możesz kontrolować niektórych elementów).
- Zmienić lub zwiększyć funkcjonalność wtyczki WordPress.
- Wzbogać swoją witrynę o dynamiczne treści, takie jak suwaki, animacje, odtwarzacze wideo, efekty rozwijane lub najeżdżające, kalkulatory i inne elementy interaktywne.
- Podłącz zewnętrzne źródło lub element do swojej witryny, takie jak Google Analytics lub interfejs API innych firm.
Tutaj JavaScript może pomóc.
To powiedziawszy, JavaScript nie jest tak prosty do wdrożenia jak HTML i CSS. Nie tylko musisz uważać na to, jak piszesz kod, ale także musisz uważać na to, jak i gdzie go dodajesz do WordPressa.
Jak dodać niestandardowy JavaScript do WordPress
Po opanowaniu HTML i CSS i naprawdę chcesz puścić swoją witrynę WordPress, nadszedł czas, aby dodać do niej Niestandardowy JavaScript. Ale jak to zrobić i gdzie to umieścić? A co ważniejsze, czy to w ogóle ma znaczenie?
Co do zasady, JavaScript należy do jednej z dwóch lokalizacji:
- W głowie Twojego motywu do zastosowań w całej witrynie skryptu.
- W treści strony internetowej dla aplikacji specyficznych dla stron.
I nie zawsze musisz umieszczać pełny tag w tych miejscach. Jeśli chcesz, aby Twoje strony internetowe działały szybciej, a kod był łatwiejszy do odczytania, możesz utworzyć oddzielne pliki JavaScript (.js) i wywołaj je używając referencji takiej jak ta:
http://filename.js
Brzmi prosto, prawda? W pewnym sensie tak, ale musisz pamiętać, że JavaScript jest językiem programowania. Nie jest to coś, co można łatwo wstrzyknąć do swoich stron internetowych, tak jak HTML lub CSS. Oto kilka zasad, których należy przestrzegać podczas dodawania niestandardowego JavaScript do witryny WordPress:
Zasada # 1 :nie używaj edytora WordPress
Chyba, że dodajesz bardzo mały skrypt do jednej strony lub wywołujesz z niego plik, teedytor xt dla Twoich stron i postów WordPress jest nie miejsce do wypisywania swojego JavaScript. Spowolni to ładowanie strony internetowej i może spowodować bałagan w kodzie.
Zasada # 2: nie modyfikuj plików bezpośrednio
Ta reguła odnosi się do plików motywu i wtyczki. Podczas gdy JavaScript pomoże Ci dodać lub zmienić funkcjonalność do integracji WordPress, złą praktyką jest Dodawanie niestandardowego JavaScript do tych plików nagłówkowych.
Na początek chodzi o to, że Twoje Skrypty zapychają dobrze napisany kod od programisty. Jednym ze sposobów na utrzymanie prawidłowego działania witryny jest poleganie na czystych praktykach kodowania. A błędny JavaScript może to zakłócić.
Po drugie, stracisz niestandardowe dyrektywy JavaScript, gdy tylko zaktualizujesz pliki motywu lub wtyczki. Podczas gdy JavaScript należy do nagłówka Twojego motywu i jest nagłówek.plik php, który można edytować, nie rób tego tutaj.
Na koniec, jeśli myślisz o obejściu tego problemu, tworząc motyw potomny i stosując tam Niestandardowy JavaScript, nie rób tego. podczas aktualizacji nagłówka.php lub stopka.Pliki php z JavaScript, może nieumyślnie stworzyć konflikt z wtyczek uruchomionych w witrynie. Może to spowolnić dużo możesz też całkowicie wyłączyć serwer w trybie offline, ponieważ Twoja witryna nie ma pojęcia, jak obsługiwać te jednoczesne żądania.
Uwaga: Ta zasada dotyczy tylko programistów WordPress korzystających z motywów lub wtyczek innych firm. Jeśli piszesz własne motywy i wtyczki, możesz dodać JavaScript bezpośrednio do pliku nagłówka; jednak będziesz chciał użyć systemu zapytań, jak opisano tutaj.
Reguła # 3: Utwórz oddzielne pliki dla JavaScript
Jeśli mówię ci, aby nie dodawać kodu JavaScript bezpośrednio do plików lub stron w WordPress, to jak do cholery masz go tam umieścić? Można to zrobić na dwa sposoby. Jednym z nich jest utworzenie oddzielnego pliku JavaScript, a drugi, który szczegółowo omówię w regule # 4, jest użycie wtyczki WordPress, aby dodać niestandardowy JavaScript.
Jak już wspomniałem, dodanie niestandardowego JavaScript bezpośrednio do WordPressa może spowodować prawdziwy bałagan i potencjalnie spowodować poważne problemy, takie jak biały ekran śmierci. Ale jeśli chcesz zastosować skrypt tylko na jednej stronie, potrzebujesz sposobu na wstrzyknięcie kodu tam, gdzie należy, zamiast go dodawać i ugrzęzać w pozostałej części witryny niepotrzebnymi żądaniami HTTPS.
Dlatego powinieneś utworzyć osobny plik JavaScript.
Kodeks WordPress zawiera kilka kroków dotyczących tego, co dalej zrobić z plikiem. Dla łatwego odniesienia, oto, co jest zalecane:
Niezależnie od tego, czy masz jeden skrypt, czy wiele skryptów, upewnij się, że zdefiniowałeś funkcję dla każdego z nich w pliku. Na przykład:
Następnie wywołaj Plik z nagłówka swojej witryny za pomocą skryptu takiego jak ten (możesz dodać to do nagłówka za pomocą wtyczki):
Na koniec musisz wywołać rzeczywistą funkcję JavaScript zdefiniowaną w pliku. Nawet jeśli jest tam tylko jeden skrypt, musi on zostać zdefiniowany w kodzie.
Jeśli JavaScript dotyczy całego page lub site, możesz dodać następujące wywołanie JavaScript do nagłówka. Jeśli JavaScript musi zostać uruchomiony gdzieś na stronie, musi przejść do treści witryny:
Zasada # 4: użyj wtyczki WordPress
Dzięki Bogu za wtyczki WordPress. Jeśli chodzi o JavaScript, następujące wtyczki pomogą Ci ominąć problemy, które pojawiają się, gdy JavaScript jest umieszczany bezpośrednio w plikach WordPress. Zamiast tego te wtyczki informują serwer o wywołaniu skryptu tylko wtedy, gdy akcja jest “wypalona”, co pomaga ominąć aktualizacje motywu WordPress i wtyczek, które usuną wszelkie zmiany, które zastosujesz bezpośrednio do nich.
Wtyczka Wstaw nagłówki i stopki
Ta wtyczka WordPress została opracowana przez początkującego WP, aby pomóc programistom łatwiej wstawić niestandardowy kod do nagłówków i stopek ich motywów. Zasadniczo to, co robi, to daje wygodne narzędzie-poza nagłówkiem.plik php – gdzie można dodać wszystkie własne skrypty. Pamiętaj tylko, że ta wtyczka jest idealna tylko wtedy, gdy próbujesz wprowadzić zmiany w całej witrynie za pomocą JavaScript.
Chociaż istnieje kilka innych wtyczek nagłówków i stopek dostępnych w repozytorium WordPress, ten od początkującego WP jest zdecydowanie najbardziej popularny i zaufany z całej grupy.
Więcej Informacji
Wtyczka Shortcoder
Dla tych z was, którzy chcą dodać niestandardowy JavaScript do poszczególnych stron lub postów, wspomniałem o wielu sposobach, w których można to zrobić powyżej. Możesz dodać go bezpośrednio do HTML, jeśli jest to mały skrypt. Możesz również wywołać plik JavaScript, który zawiera cały Twój kod. Obie te metody jednak nadal dodają wiele linii kodu do twojej witryny, co może sprawić, że rzeczy będą brudniejsze i trudniejsze do odczytania. Jeśli chcesz to wyczyścić, możesz użyć wtyczki Shortcoder.
Dodatkową zaletą stosowania Shortcodera jest oszczędność czasu. Załóżmy, że masz określoną funkcję JavaScript, którą chcesz zastosować do około kilkunastu stron. Nie ma więc potrzeby kopiowania skryptu na każdy z nich. Zamiast tego możesz utworzyć jeden shortcode reprezentujący tę funkcję i wstawić go w dowolnym momencie.
Więcej Informacji
Wrapping Up
Zrozumienie, jak używać JavaScript, aby wzmocnić moc motywów, wtyczek i treści WordPress, jest niezwykle potężnym narzędziem, które można mieć w arsenale rozwoju WordPress. Musisz jednak zachować ostrożność, aby nie zakłócać wydajności witryny ani nie powodować problemów z innymi integracjami, które próbujesz uruchomić w witrynie. Trzymaj się powyższych zasad, a powinieneś zrobić to dobrze.
Nota wydawcy: Ten post został zaktualizowany pod kątem dokładności i trafności. [Pierwotnie Opublikowany: Luty 2018 / Zmieniony: Luty 2022]
Tagi:
- javascript
- Tutoriale WordPress
