Jak prawidłowo dodawać skrypty JavaScript i style w WordPress

Czy 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 swoje skrypty i arkusze stylów bezpośrednio we wtyczkach i motywach. W tym artykule pokażemy, jak poprawnie dodawać JavaScript i arkusz stylów w WordPress. Będzie to szczególnie przydatne dla tych, którzy dopiero zaczynają uczyć się tworzenia motywów i wtyczek WordPress.


Prawidłowe dodawanie skryptów JavaScript i stylów w WordPress

Typowy błąd podczas dodawania skryptów i arkuszy stylów w WordPress

Wiele nowych wtyczek WordPress i twórców motywów popełnia błąd, dodając bezpośrednio swoje skrypty lub wstawiając 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
działanie dodatkowe („wp_head”, „wpb_bad_script”);
funkcja 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 ładujesz jQuery ręcznie, a inna wtyczka ładuje jQuery za pomocą właściwej metody, oznacza to, że jQuery jest ładowany dwukrotnie. Jeśli zostanie załadowany na każdej stronie, wpłynie to negatywnie na szybkość i wydajność WordPressa.

Możliwe jest również, że oba są różnymi wersjami, które mogą również powodować konflikty.

To powiedziawszy, rzućmy okiem na właściwy sposób dodawania skryptów i arkuszy stylów.

Po co kolejkować 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 i nikt nie nadepnie na palce innych, WordPress ma system kolejkowania. Ten system zapewnia programowalny sposób ładowania skryptów JavaScript i CSS.

Używając 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.

Ten system pozwala również programistom na korzystanie z wbudowanych bibliotek JavaScript dostarczanych w pakiecie z WordPress zamiast wielokrotnego ładowania tego samego skryptu innej firmy. Skraca to czas ładowania strony i pomaga uniknąć konfliktów z innymi motywami i wtyczkami.

Jak poprawnie kolejkować skrypty w WordPress?

Prawidłowe ładowanie skryptów w WordPress jest bardzo łatwe. Poniżej znajduje się przykładowy kod, który wkleiłbyś do pliku wtyczek lub pliku funkcji.php kompozycji, aby poprawnie załadować skrypty w WordPress.

?php
funkcja wpb_adding_scripts () {

wp_register_script (‘my_amazing_script’, plugins_url (‘amazing_script.js’, __FILE__), tablica (‘jquery’), ‘1.1’, true);

wp_enqueue_script (‘my_amazing_script’);
}

add Działalności („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:

  • 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 to znajdzie, będzie szukał naszej nazwy pliku amazing_script.js w tym folderze.
  • $ deps – deps dotyczy zależności. Ponieważ nasz skrypt korzysta z jQuery, dodaliśmy jQuery w obszarze zależności. WordPress automatycznie załaduje jQuery, jeśli nie jest już ładowany na stronie.
  • $ ver – To jest numer wersji naszego skryptu. Ten parametr nie jest wymagany.
  • $ in_footer – Chcemy załadować nasz skrypt w stopce, więc ustawiliśmy wartość true. Jeśli chcesz załadować skrypt do nagłówka, możesz ustawić go jako fałsz.

Po podaniu wszystkich parametrów w skrypcie wp_register_script możemy po prostu wywołać skrypt w wp_enqueue_script (), dzięki czemu wszystko się dzieje.

Ostatnim krokiem jest użycie haka akcji wp_enqueue_scripts do faktycznego załadowania skryptu. Ponieważ jest to przykładowy kod, dodaliśmy go poniżej wszystkiego innego.

Jeśli dodajesz to do motywu lub wtyczki, możesz umieścić ten hak akcji tam, gdzie skrypt jest rzeczywiście 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 kolejkować? Dzięki temu inni właściciele witryn mogą wyrejestrować skrypt bez modyfikowania kodu podstawowego wtyczki.

Poprawnie porządkuj style w WordPress

Podobnie jak skrypty, możesz także porządkować arkusze stylów. Spójrz na poniższy przykład:

<?php
funkcja wpb_adding_styles () {
wp_register_style (‘my_stylesheet’, plugins_url (‘my-stylesheet.css’, __FILE__));
wp_enqueue_style (‘my_stylesheet’);
}
add Działalności („wp_enqueue_scripts”, „wpb_adding_styles”);
?>

Zamiast używać wp_enqueue_script, teraz używamy wp_enqueue_style, aby dodać nasz arkusz stylów.

Zauważ, że użyliśmy haka akcji wp_enqueue_scripts zarówno dla stylów, jak i skryptów. Mimo nazwy ta funkcja działa w obu przypadkach.

W powyższych przykładach użyliśmy funkcji plugins_url, aby wskazać lokalizację skryptu lub stylu, który chcemy umieścić w kolejce.

Jeśli jednak używasz funkcji skryptów kolejkowania w kompozycji, po prostu użyj zamiast tego metody get_template_directory_uri (). Jeśli pracujesz z motywem potomnym, użyj get_stylesheet_directory_uri ().

Poniżej znajduje się przykładowy kod:

<?php

funkcja wpb_adding_scripts () {
wp_register_script (‘my_amazing_script’, get_template_directory_uri (). ‘/js/amazing_script.js’, tablica (‘jquery’), ‘1.1’, true);
wp_enqueue_script (‘my_amazing_script’);
}

add Działalności („wp_enqueue_scripts”, „wpb_adding_scripts”);
?>

Mamy nadzieję, że ten artykuł pomógł ci nauczyć się, jak poprawnie dodawać jacvascript i style w WordPress. Możesz również zapoznać się z kodem źródłowym najpopularniejszych wtyczek WordPress, aby znaleźć przykłady prawdziwych kodów.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map