Je\u015bli jeste\u015b programist\u0105 WordPress, s\u0142ysza\u0142e\u015b o s\u0142owach takich jak wp_enqueue_script, wp_enqueue_style i wp_enqueue_scripts. Oto metody, kt\u00f3rych powinni\u015bmy u\u017cy\u0107, aby w\u0142\u0105czy\u0107 JavaScript i CSS do WordPressa.<\/p>\n
Je\u015bli chodzi o WordPress, nie nale\u017cy u\u017cywa\u0107 tag\u00f3w skrypt\u00f3w i link\u00f3w do dodawania plik\u00f3w JavaScript i CSS.<\/p>\n
W przypadku witryny internetowej cz\u0119sto stosuje si\u0119 r\u00f3\u017cnego rodzaju efekty, animacje, aby poprawi\u0107 wra\u017cenia u\u017cytkownika. W internecie dost\u0119pnych jest wiele gotowych wtyczek, kt\u00f3re pozwalaj\u0105 nam dodawa\u0107 slidery, formularze kontaktowe, karuzel\u0119 itp. na Twojej stronie. Kiedy korzystamy z tych zewn\u0119trznych zasob\u00f3w, musimy korzysta\u0107 z dostarczonych przez nie plik\u00f3w JS i CSS. Korzystaj\u0105c z metod dostarczonych przez WordPress, mo\u017cemy kontrolowa\u0107 strony, na kt\u00f3rych tylko takie wtyczki mog\u0105 korzysta\u0107. Na przyk\u0142ad, je\u015bli wy\u015bwietlamy slider na stronie g\u0142\u00f3wnej, nie ma potrzeby umieszczania plik\u00f3w JS i CSS slidera na innej stronie. Dobr\u0105 praktyk\u0105 jest zawsze do\u0142\u0105czanie JS i CSS tylko wtedy, gdy jest to konieczne. Jest to dobra praktyka, kt\u00f3ra s\u0142u\u017cy\u0142a do poprawy wydajno\u015bci witryny i przyspieszenia jej \u0142adowania.<\/p>\n
Za\u0142\u00f3\u017cmy, \u017ce mamy pliki custom.js i custom.css, kt\u00f3re nale\u017cy doda\u0107 na naszej stronie. W tym celu musimy umie\u015bci\u0107 poni\u017cej kod.<\/p>\n
add_action('wp_enqueue_scripts', 'include_js_css');\nfunction include_js_css() {\n\u00a0\u00a0\u00a0\u00a0wp_register_script('my-custom-script', get_stylesheet_directory_uri(). '\/js\/custom.js', array('jquery'), false, true);\n\u00a0\u00a0\u00a0\u00a0wp_enqueue_script('my-custom-script');\n\u00a0\n\u00a0\u00a0\u00a0\u00a0wp_register_style( \"my-custom-style\", get_stylesheet_directory_uri(). \"\/css\/custom.css\", array(), false, \"all\" );\n\u00a0\u00a0\u00a0\u00a0wp_enqueue_style( \"my-custom-style\" );\n}<\/code><\/pre>\nUwaga<\/strong>: Trzeci parametr w funkcji wp_register_script. Przekazali\u015bmy array(’jquery’), co oznacza, \u017ce \u200b\u200bnasz custom.js jest zale\u017cny od pliku jquery.js. Mo\u017cesz tutaj tablic\u0119 emapy, je\u015bli tw\u00f3j skrypt nie ma zale\u017cno\u015bci.<\/p>\nOstatni parametr ma warto\u015b\u0107 true, co oznacza do\u0142\u0105czenie pliku custom.js w stopce (przed ko\u0144cem tagu body).<\/p>\n
Wyja\u015bnienie parametr\u00f3w funkcji wp_register_script()<\/h3>\n
$handle<\/strong> (wymagane): Nazwa skryptu. Powinien by\u0107 wyj\u0105tkowy.
\n$src<\/strong> (Wymagane): Pe\u0142ny adres URL skryptu lub \u015bcie\u017cka skryptu wzgl\u0119dem katalogu g\u0142\u00f3wnego WordPress.
\n$deps<\/strong> (Opcjonalnie): Tablica zarejestrowanych skrypt\u00f3w, od kt\u00f3rych zale\u017cy ten skrypt.
\nWarto\u015b\u0107 domy\u015blna: array()
\n$ver<\/strong> (Opcjonalnie): Ci\u0105g okre\u015blaj\u0105cy numer wersji skryptu, je\u015bli taki istnieje, kt\u00f3ry jest dodawany do adresu URL jako ci\u0105g zapytania w celu pomijania pami\u0119ci podr\u0119cznej. Je\u015bli wersja jest ustawiona na fa\u0142sz, automatycznie dodawany jest numer wersji r\u00f3wny aktualnie zainstalowanej wersji WordPress. Je\u015bli ustawiono na null, \u017cadna wersja nie zostanie dodana. Warto\u015b\u0107 domy\u015blna to false
\n$in_footer<\/strong> (opcjonalnie): okre\u015bla,<\/strong> czy umie\u015bci\u0107 skrypt w kolejce przed zamkni\u0119ciem tagu body zamiast w nag\u0142\u00f3wku. Domy\u015blnie \u201efa\u0142sz".<\/p>\nWyja\u015bnienie parametr\u00f3w funkcji wp_register_style()<\/h3>\n
$handle<\/strong> (Wymagane): Nazwa arkusza styl\u00f3w. Powinien by\u0107 wyj\u0105tkowy.
\n$src<\/strong> (Wymagane): Pe\u0142ny adres URL arkusza styl\u00f3w lub \u015bcie\u017cka arkusza styl\u00f3w wzgl\u0119dem katalogu g\u0142\u00f3wnego WordPress.
\n$deps<\/strong> (Opcjonalnie): Tablica zarejestrowanych arkuszy styl\u00f3w obs\u0142uguje ten arkusz styl\u00f3w.
\nWarto\u015b\u0107 domy\u015blna: array()
\n$ver<\/strong> (Opcjonalnie): Ci\u0105g okre\u015blaj\u0105cy numer wersji arkusza styl\u00f3w, je\u015bli taki istnieje, kt\u00f3ry jest dodawany do adresu URL jako ci\u0105g zapytania w celu pomijania pami\u0119ci podr\u0119cznej. Je\u015bli wersja jest ustawiona na fa\u0142sz, automatycznie dodawany jest numer wersji r\u00f3wny aktualnie zainstalowanej wersji WordPress. Je\u015bli ustawiono na null, \u017cadna wersja nie zostanie dodana. Warto\u015b\u0107 domy\u015blna: false
\n$media<\/strong>(Opcjonalnie): no\u015bnik, dla kt\u00f3rego zdefiniowano ten arkusz styl\u00f3w. Akceptuje typy medi\u00f3w, takie jak \u201ewszystkie”, \u201edruk” i \u201eekran”, lub zapytania o media, takie jak \u201e(orientacja: pionowa)” i \u201e(maks. szeroko\u015b\u0107: 640px)”. Warto\u015b\u0107 domy\u015blna: \u201ewszystkie”.<\/p>\nChodzi o to, jak w\u0142\u0105czy\u0107 JavaScript i CSS do WordPressa. Je\u015bli masz jakie\u015b pytania lub sugestie, zostaw komentarz poni\u017cej.<\/p>\n