Kiedy po raz pierwszy zaczęliśmy pracować z WordPress, dodawanie JavaScript i CSS wydawało się wystarczająco proste. Po prostu wklejałeś kod bezpośrednio do swojego motywu lub wtyczki i przechodziłeś dalej.
Ale przez lata my (i wielu naszych czytelników) nauczyliśmy się na własnej skórze, że to obejście może stworzyć poważne problemy. Od konfliktów skryptów między sobą po całkowite awarie witryn po aktualizacji – widzieliśmy już wszystko.
Dobra wiadomość jest taka, że WordPress ma właściwy sposób ładowania skryptów i stylów — a gdy go poznasz, zaoszczędzisz sobie wielu problemów w przyszłości.
W tym przewodniku pokażemy Ci, jak prawidłowo dodawać JavaScript i CSS w WordPress. Niezależnie od tego, czy tworzysz niestandardowy motyw, czy swój pierwszy wtyczkę, te kroki pomogą Ci zrobić to w bezpieczny i niezawodny sposób.
Powszechny błąd podczas dodawania skryptów i arkuszy stylów w WordPress
Wielu nowych programistów wtyczek i motywów WordPressa popełnia błąd, bezpośrednio dodając swoje skrypty lub wbudowany CSS do swoich wtyczek i motywów.
Niektórzy błędnie używają funkcji wp_head do ładowania swoich skryptów i arkuszy stylów.
<?php
add_action('wp_head', 'wpb_bad_script');
function wpb_bad_script() {
echo 'jQuery goes here';
}
?>
Chociaż powyższy kod może wydawać się łatwiejszy, jest to niewłaściwy sposób dodawania skryptów w WordPress i prowadzi do większej liczby konfliktów w przyszłości.
Na przykład, jeśli załadujesz jQuery ręcznie, a inna wtyczka załaduje jQuery za pomocą właściwej metody, to jQuery zostanie załadowane dwukrotnie. Jeśli jest ładowane na każdej stronie, negatywnie wpłynie to na szybkość i wydajność WordPress.
Jest również możliwe, że te dwa są różnymi wersjami, co również może powodować konflikty.
Biorąc to pod uwagę, przyjrzyjmy się właściwemu sposobowi dodawania skryptów i arkuszy stylów.
Dlaczego kolejkowanie skryptów i stylów w WordPress?
WordPress ma silną społeczność deweloperów. Tysiące ludzi z całego świata tworzy motywy i wtyczki dla WordPress.
Aby upewnić się, że wszystko działa poprawnie i nikt nie przeszkadza innym, WordPress posiada system kolejkowania. Ten system zapewnia programowalny sposób ładowania JavaScript i arkuszy stylów CSS.
Używając funkcji wp_enqueue_script i wp_enqueue_style, informujesz WordPress, kiedy załadować plik, gdzie go załadować i jakie są jego zależności.
System ten pozwala również programistom na wykorzystanie wbudowanych bibliotek JavaScript, które są dostarczane z WordPress, zamiast ładowania tego samego skryptu strony trzeciej wielokrotnie. Zmniejsza to czas ładowania strony i pomaga uniknąć konfliktów z innymi wtyczkami i motywami.
Jak prawidłowo dodawać skrypty w WordPressie?
Prawidłowe ładowanie skryptów w WordPress jest bardzo łatwe. Poniżej znajduje się przykładowy kod, który można wkleić do pliku wtyczki, do pliku functions.php motywu lub do wtyczki do fragmentów kodu, aby prawidłowo ładować skrypty w WordPress.
?php
function wpb_adding_scripts() {
wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
?>
Wyjaśnienie:
Zaczęliśmy od zarejestrowania naszego skryptu za pomocą funkcji wp_register_script(). Ta funkcja przyjmuje 5 parametrów:
- $handle – Handle to unikalna nazwa Twojego skryptu. Nasz nazywa się „my_amazing_script”
- $src – src to lokalizacja twojego skryptu. Używamy funkcji plugins_url, aby uzyskać prawidłowy adres URL naszego folderu wtyczek. Gdy WordPress to znajdzie, będzie szukał naszego pliku amazing_script.js w tym folderze.
- $deps – deps oznacza zależności. Ponieważ nasz skrypt używa jQuery, dodaliśmy jQuery w obszarze zależności. WordPress automatycznie załaduje jQuery, jeśli nie jest ono już ładowane na stronie.
- $ver – Jest to numer wersji naszego skryptu. Ten parametr nie jest wymagany.
- $in_footer – Chcemy załadować nasz skrypt w stopce, więc ustawiliśmy wartość na true. Jeśli chcesz załadować skrypt w nagłówku, ustawisz ją na false.
Po podaniu wszystkich parametrów w wp_register_script, możemy po prostu wywołać skrypt w wp_enqueue_script(), co sprawia, że wszystko działa.
Ostatnim krokiem jest użycie haka akcji wp_enqueue_scripts, aby faktycznie załadować skrypt. Ponieważ jest to przykładowy kod, dodaliśmy go tuż pod wszystkim innym.
Jeśli dodawałeś to do swojego motywu lub wtyczki, możesz umieścić ten hook akcji tam, gdzie skrypt jest faktycznie wymagany. Pozwala to zmniejszyć zużycie pamięci przez wtyczkę.
Teraz niektórzy mogą się zastanawiać, dlaczego robimy dodatkowy krok, aby najpierw zarejestrować skrypt, a następnie go dodać? Cóż, pozwala to innym właścicielom witryn na usunięcie twojego skryptu bez modyfikowania kodu rdzenia twojej wtyczki.
Poprawne dodawanie stylów w WordPress
Podobnie jak skrypty, możesz również dodawać swoje arkusze stylów. Spójrz na poniższy przykład:
<?php
function wpb_adding_styles() {
wp_register_style('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));
wp_enqueue_style('my_stylesheet');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_styles' );
?>
Zamiast używać wp_enqueue_script, teraz używamy wp_enqueue_style do dodania naszego arkusza stylów.
Zauważ, że użyliśmy haka akcji wp_enqueue_scripts zarówno dla stylów, jak i skryptów. Pomimo nazwy, ta funkcja działa dla obu.
W powyższych przykładach użyliśmy funkcji plugins_url, aby wskazać lokalizację skryptu lub stylu, który chcieliśmy dodać.
Jednakże, jeśli używasz funkcji enqueue scripts w swoim motywie, po prostu użyj get_template_directory_uri() zamiast tego. Jeśli pracujesz z motywem potomnym, użyj get_stylesheet_directory_uri().
Poniżej znajduje się przykładowy kod:
<?php
function wpb_adding_scripts() {
wp_register_script('my_amazing_script', get_template_directory_uri() . '/js/amazing_script.js', array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
?>
Mamy nadzieję, że ten artykuł pomógł Ci nauczyć się, jak prawidłowo dodawać JavaScript i style w WordPress. Możesz również przestudiować kod źródłowy najlepszych wtyczek WordPress, aby zobaczyć przykłady kodu w praktyce, lub zapoznać się z naszym przewodnikiem na temat jak łatwo dodawać JavaScript do stron lub wpisów w WordPress.
Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.
Mrteesurez
Ten post jest trochę techniczny, ale uwielbiam go, ponieważ zajmuję się tworzeniem stron w WordPress. Dzięki niemu nauczyłem się więcej o używaniu PHP i dodawaniu arkuszy stylów oraz skryptów we właściwy sposób. Najlepsze praktyki są podane w tym artykule, aby w przyszłości nie było konfliktów między kodami.
Kot Schrödingera
Pozdrawiam, dzięki za udostępnienie! Świetne wyjaśnienie.
Wsparcie WPBeginner
You’re welcome
Admin
Jean-Michel
Cześć,
Zrobiłem to, co jest tutaj napisane, ale teraz na mojej stronie internetowej pojawia się pusta biała strona. Czy ktoś mógłby mi podpowiedzieć?
Dzięki
Wsparcie WPBeginner
Wygląda na to, że albo skopiowałeś kod niepoprawnie, albo miał on problem z czymś na Twojej stronie. Możesz usunąć kod za pomocą: https://www.wpbeginner.com/beginners-guide/how-to-use-ftp-to-upload-files-to-wordpress-for-beginners/
Jeśli dodałeś go ręcznie, w przeciwnym razie możesz użyć:
https://www.wpbeginner.com/wp-tutorials/how-to-fix-the-wordpress-white-screen-of-death/
Admin
Orhan
Ten artykuł był dla mnie bardzo pomocny. Dziękuję.
Mark
Typowy artykuł, który po przeczytaniu pozostawia więcej pytań niż odpowiedzi…
Zaved Hossain
To jest miłe, chociaż moja zwykła praktyka to dodawanie wp_enqueue_script/style w jednej linii bez rejestracji. Koderzy muszą uważać na parametry, być może przydałoby się trochę wyjaśnień na ten temat. Na przykład, różne wersje jQuery (Twój skrypt jQuery może wymagać innej wersji niż WordPress) i gdzie go dodać (nagłówek czy stopka, co jest określone przez parametr true/false). Skrypt jQuery musi być dodany w nagłówku (stąd 'false' musi być przekazane jako wartość parametru), w przeciwnym razie może nie działać.
Hansjörg Leichsenring
Często jest wiele plików style.css.
Jak mogę zapewnić prawidłową kolejność ładowania za pomocą enque i upewnić się, że CSS motywu potomnego jest ładowany jako ostatni?
Pozdrowienia z Niemiec
Hansjörg
Carlos Araya
Jak przekazać pusty parametr do register_script? Chcę się upewnić, że skrypt jest ładowany na dole strony, ale nie mogę znaleźć informacji, czy jest to domyślne zachowanie, czy nie.
Kerry Beeher
Bonjour,
Dziękuję za Twój doskonały zasób. Merci !!!
Jestem trochę nowicjuszem i dopiero zaczynam swoją podróż z nauką PHP i tego, jak WordPress używa wp_enqueue_script i wp_register_script do dodawania JavaScript i CSS.
Używam tego darmowego pluginu o nazwie Easy Code Manager, aby pomóc w przejściu przez twoje przykłady:
jednak nie jestem pewien, czy to właściwy plugin do użycia.
Czytałem wcześniej, że modyfikowanie kodu w functions.php nie jest najlepszym pomysłem, więc zastanawiam się, czy można to zrobić?
Czy nie zmieni się to po aktualizacji motywu?
Przepraszam za pytanie, wciąż uczę się WordPressa.
Dziękuję,
Kerry
Vaibhav Bansal
Chcę dodać reklamę Amazon
Próbowałem dodać ją w widżecie tekstowym, ale wyświetla się pusta.
Poniżej znajduje się kod-
To jest moja strona-
Pomóż mi. Jak dodać js na moją stronę?
Wsparcie WPBeginner
Cześć Vaibhav,
Sprawdź naszą listę wtyczek do zarządzania reklamami dla WordPressa. Możesz użyć tych wtyczek do wyświetlania reklam na swojej stronie WordPress bez edycji plików motywu.
Admin
pradyumna
włożyłem javascript za pomocą tej wtyczki, ale teraz muszę go usunąć, próbowałem odinstalować i dezaktywować wtyczkę, ale javascript nadal się wykonuje
Vijay.Rajpal
Dzień dobry Panie,
Używam motywu esteem i chciałem dodać do mojej strony internetowej funkcjonalność javascript, taką jak lightbox. Stworzyłem motyw potomny, a kod wygląda następująco. w pliku functions.php.
and I am getting an error:-Parse error: syntax error, unexpected '{' in E:\InstantWP_4.5\iwpserver\htdocs\wordpress\wp-content\themes\esteem-child\functions.php on line 18
Please Help I am using sublime as my text editor.
Please Help!!!!!
Wsparcie WPBeginner
W kodzie jest nieoczekiwany { . Przejdź do linii 18 pliku functions i dokładnie przestudiuj kod. Mogłeś zapomnieć o jakimś drobnym kodzie, jak brakujący ;
Admin
Pramod
witam…..
dodaję plik .js do katalogu js w wordpress i podaję jego odniesienie w funcation.php
ale to nie działa
wp_enqueue_script( ‘any-navigation’, get_template_directory_uri() . ‘/js/menu.js’);
Bobbie
Dzięki wielkie! Próbowałem dodać niestandardowy plik .js, ale to pierwsza instrukcja, która mówi, że potrzebny jest register_script.
colkav
Hej, świetny tutorial. Mam problem z dodaniem javascriptu związanego z Google Analytics, tak jak opisano tutaj:
Umieściłem skrypt w folderze 'js' mojego motywu potomnego (po wcześniejszym usunięciu html z kodu).
Kiedy ładuję stronę, ciągle otrzymuję błąd:
ReferenceError: Nie można znaleźć zmiennej: ga
(funkcja anonimowa)myscript.js:6
...i właśnie uświadomiłem sobie, że być może muszę dodać 'analytics.js' jako zależność!
Does that sounds right? And if so, how would I add analytics as a dependency for my script? I’ve tried experimenting here to no avail
Shoaib
Czy istnieje jakaś wtyczka do tego samego… jestem nowicjuszem i nie potrafię bawić się kodem… Proszę o pomoc, Panie
xavi
Cześć.
Dzięki za ten niesamowity post z tutorialem! Ale kiedy mówisz „gdzie przesłać skrypt”, możesz po prostu zdefiniować nagłówek lub stopkę (na wszystkich stronach internetowych!)? Czy możesz zdefiniować konkretną stronę, aby go załadować? Potrzebuję go tylko na jednej. Z góry dziękuję i trzymaj się pracy! Pozdrawiam.
technofranchise
Chcę używać JavaScript lub JQuery na mojej stronie WordPress. Jakieś pomysły?
Skye Barcus
Jestem totalnym nowicjuszem w JS, ale znam HTML. Chcę umieścić to na stronie WordPress:
W zasadzie jest to widżet do dołączenia do GoToMeeting. Działa, jeśli po prostu wrzucisz go do ciała strony HTML, ale w WordPressie jest tłumiony.
Czy możesz mi podać wersję "dla opornych" jak to zrobić, żeby działało?
Tyler Longren
W kwestii ładowania stylów, w linii 6, wp_register_script, powinno być moim zdaniem wp_register_style.
Wsparcie WPBeginner
Tyler, no this will work too.
Admin
Pedro de Carvalho
dlaczego wybrałeś użycie _script zamiast?
Pali Madra
Chciałbym również dowiedzieć się, dlaczego używać _script, a nie _style? Czy są jakieś korzyści, czy oba będą działać, więc można użyć dowolnego z nich?
Dejan
Naprawdę podoba mi się Twoja strona, jest pełna przydatnych wskazówek, jednak wygląda na to, że nie robisz tego „prawidłowo” dla CSS enqueue, mimo że Twój tytuł tak mówi :=) Właściwy sposób byłby taki:
wp_register_style( ‘my-css-style’, get_template_directory_uri() . ‘/css/style.css’, array(), ‘1.0’, ‘all’ );
wp_enqueue_style( ‘my-css-style’ );
Keep up the good work… Cheers!
Adrian Zumbrunnen
Dzięki za włożony wysiłek. Po prostu czuję, że to nie jest właściwe używanie wp_enque_script do ładowania arkuszy stylów. WordPress mógłby w przyszłości wypluć skrypt zamiast składni arkusza stylów dla niego.
Czy naprawdę osadzasz w ten sposób?
Wsparcie WPBeginner
Ten tutorial pokazuje, jak ładować pliki JavaScript i arkusze stylów dla Twoich motywów lub wtyczek w WordPress. Jeśli przez „Osadź” miałeś na myśli sposób, w jaki wyświetlamy kod w artykułach, to używamy do tego wtyczki Syntax Highlighter.
Admin
oiveros
Cześć, jestem trochę nowy w tworzeniu motywów WordPress i czytając o tych tematach, chciałem Cię zapytać o coś związanego z tym. Jeśli chcę zaktualizować link do biblioteki jQuery, jak to zrobić lub gdzie znaleźć link, próbowałem to zrobić, ale nie mogę go znaleźć. Z góry dziękuję za pomoc.
Wsparcie WPBeginner
Jeśli przez aktualizację linku do biblioteki jQuery masz na myśli dodanie jQuery z biblioteki Google. WordPress jest wyposażony w jQuery, a aby załadować go w swoim motywie, użyj tej linii w swoim motywie:
<?php wp_enqueue_script('jquery'); ?>Admin
oiveros
okej, więc jeśli chcę mieć najnowsze jquery, po prostu używam tej linii?, ponieważ ktoś powiedział mi, żebym użył wtyczki tylko do tego, ale chciałem nauczyć się, jak to zrobić bez wtyczki
oliveros
Dziękuję za Twoją odpowiedź, znalazłem post związany z tym problemem tutaj na Twojej stronie.
Mark
Dzięki wielkie za ten tut.
Elliott Richmond
Przydatny Syed, dzięki.
Niedawno miałem problem z wczytywaniem pliku css przy użyciu _underscore jako frameworka, chociaż arkusz stylów nazywał się mycustomstyles.css, motyw wywoływał mycustomstyles.css?ver=xx, a motyw nie wczytywał pliku z powodu nazwy pliku, dodając ?ver=xx na końcu nazwy.
Czy to ma coś wspólnego z domyślną wartością $ver?