Jak poprawnie dodać JavaScript i style w WordPress

Chcesz dowiedzieć się, jak poprawnie dodawać skrypty JavaScript i arkusze stylów CSS w WordPress? Wielu użytkowników DIY często popełnia błąd, wywołując bezpośrednio swoje skrypty i arkusze stylów w wtyczkach i motywach. W tym artykule pokażemy, jak poprawnie dodać skrypty JavaScript i arkusz stylów w WordPress. Będzie to szczególnie przydatne dla tych, którzy dopiero zaczynają uczyć się motywu WordPress i rozwoju wtyczek.

Częsty błąd podczas dodawania skryptów i arkuszy stylów w WordPress

Wiele nowych wtyczek WordPress i programistów motywów popełnia błąd bezpośredniego dodawania swoich skryptów lub wbudowanego CSS do swoich wtyczek i motywów.

Niektórzy błędnie używają wp_head funkcja ładowania ich skryptów i arkuszy stylów.

<?php
add_action ('wp_head', 'wpb_bad_script');
function wpb_bad_script () {
echo "jQuery idzie tutaj";
}
?>

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 ładuje jQuery za pomocą odpowiedniej metody, to masz jQuery ładowane dwa razy. Jeśli zostanie załadowany na każdej stronie, wpłynie to negatywnie na szybkość i wydajność WordPress.

Możliwe jest również, że te dwie wersje są różne, co może również powodować konflikty.

Mając to na uwadze, przyjrzyjmy się odpowiedniemu sposobowi dodawania skryptów i arkuszy stylów.

Dlaczego Enqueue skrypty i style w WordPress?

WordPress ma silną społeczność programistów. Tysiące ludzi z całego świata opracowuje motywy i wtyczki do WordPress.

Aby upewnić się, że wszystko działa poprawnie, a nikt nie nadepnie na cudze palce, WordPress ma system zapytań. System ten zapewnia programowalny sposób ładowania skryptów JavaScript i arkuszy stylów CSS.

Korzystając z funkcji wp_enqueue_script i wp_enqueue_style, mówisz WordPressowi, kiedy załadować plik, gdzie go załadować i jakie są jego zależności.

System ten pozwala również programistom korzystać z wbudowanych bibliotek JavaScript, które są dołączone do WordPressa, zamiast wielokrotnie ładować ten sam skrypt innej firmy. Skraca to czas ładowania strony i pomaga uniknąć konfliktów z innymi motywami i wtyczkami.

Jak poprawnie wyszukiwać Skrypty w WordPress?

Prawidłowe ładowanie skryptów w WordPress jest bardzo łatwe. Poniżej znajduje się przykładowy kod, który należy wkleić do pliku wtyczek lub funkcji motywu.plik php, aby poprawnie zał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 rejestracji naszego skryptu poprzez wp_register_script() funkcja. Ta funkcja akceptuje 5 parametrów:

• $ uchwyt – Uchwyt to unikalna nazwa Twojego skryptu. Nasz nazywa się „my_amazing_script”
• $src – src to lokalizacja Twojego skryptu. Używamy funkcji plugins_url, aby uzyskać właściwy adres URL naszego folderu wtyczek. Gdy WordPress znajdzie to, wtedy będzie szukać naszej nazwy pliku amazing_script.js w tym folderze.
• $deps – deps jest dla 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 już ładowany na stronie.
• $ver – 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, to uczynisz go fałszywym.

Po podaniu wszystkich parametrów w wp_register_script, możemy po prostu wywołać skrypt w wp_enqueue_script() co sprawia, że wszystko się dzieje.

Ostatnim krokiem jest użycie Hooka 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 w miejscu, w którym skrypt jest rzeczywiście wymagany. Pozwala to zmniejszyć zużycie pamięci wtyczki.

Teraz niektórzy mogą się zastanawiać, dlaczego robimy dodatkowy krok, aby najpierw zarejestrować skrypt, a następnie go zapytać? Cóż, pozwala to innym właścicielom witryn wyrejestrować skrypt bez modyfikowania kodu rdzenia wtyczki.

Prawidłowo pytaj style w WordPress

Podobnie jak skrypty, możesz również zapytać o 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, obecnie używamy wp_enqueue_style aby dodać nasz arkusz stylów.

Zauważ, że użyliśmy wp_enqueue_scripts hook akcji dla stylów i skryptów. Pomimo nazwy, Ta funkcja działa dla obu.

W powyższych przykładach wykorzystaliśmy plugins_url funkcja wskazująca lokalizację skryptu lub stylu, o który chcieliśmy zapytać.

Jeśli jednak korzystasz z funkcji skryptów enqueue 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 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ę poprawnie dodawać jacvascript i style w WordPress. Możesz także zapoznać się z kodem źródłowym najlepszych wtyczek WordPress, aby uzyskać przykłady kodu z prawdziwego życia.

Jeśli podoba Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Znajdziesz nas również na Twitterze i Facebooku.