{"id":233411,"date":"2023-02-13T17:20:00","date_gmt":"2023-02-13T14:20:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233411"},"modified":"2022-11-10T23:32:49","modified_gmt":"2022-11-10T20:32:49","slug":"samouczek-motywu-wordpress-dla-poczatkujacych-czesc-6-funkcje-motywu-php","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pl\/samouczek-motywu-wordpress-dla-poczatkujacych-czesc-6-funkcje-motywu-php\/","title":{"rendered":"Samouczek motywu WordPress dla pocz\u0105tkuj\u0105cych \u2013 cz\u0119\u015b\u0107 6: Funkcje motywu.php"},"content":{"rendered":"\n

Dzi\u015b dowiemy si\u0119, gdzie i jak doda\u0107 kod poza szablonami w naszym motywie. Robimy to dodaj\u0105c functions.php<\/code>plik motywu. Po drodze nauczymy si\u0119 r\u00f3wnie\u017c, jak prawid\u0142owo dodawa\u0107 arkusze styl\u00f3w i skrypty.<\/p>\n

Plik functions.php motywu<\/h2>\n

Motyw musi gdzie\u015b umie\u015bci\u0107 kod, kt\u00f3ry nie jest cz\u0119\u015bci\u0105 szablon\u00f3w. Zawsze jest mn\u00f3stwo kodu, kt\u00f3ry trzeba doda\u0107 do wszystkich motyw\u00f3w, aby obs\u0142u\u017cy\u0107 funkcjonalno\u015b\u0107. Na przyk\u0142ad w\u0142\u0105czenie funkcji polecanych obraz\u00f3w WordPress (zauwa\u017cy\u0142e\u015b, \u017ce jej brakowa\u0142o?), obs\u0142ug\u0119 menu, wid\u017cet\u00f3w, dodawanie arkuszy styl\u00f3w i skrypt\u00f3w (w odpowiedni spos\u00f3b) i wiele innych.<\/p>\n

Ten plik to functions.php<\/code>. WordPress automatycznie i zawsze \u0142aduje ten plik, je\u015bli istnieje w twoim motywie. Jest zawsze \u0142adowany zar\u00f3wno w adminie, jak i we frontendzie.<\/p>\n

Dodanie pliku functions.php do naszego motywu<\/h2>\n

Utw\u00f3rzmy nowy, pusty plik w naszym g\u0142\u00f3wnym folderze motywu i nazwijmy go functions.php<\/code>.<\/p>\n

W tym pliku natychmiast zacznij od otwieraj\u0105cego tagu PHP (<?php<\/code>) i nie do\u0142\u0105czaj tagu zamykaj\u0105cego<\/strong>. Plik functions.php<\/code>jest przeznaczony dla kodu PHP, a nie HTML. Tw\u00f3j motyw mo\u017ce si\u0119 zepsu\u0107 (lub nawet zachowywa\u0107 si\u0119 dziwnie), je\u015bli w tym pliku znajduj\u0105 si\u0119 znaki lub znaki nowej linii poza znacznikami PHP. Mo\u017cesz oczywi\u015bcie wyrwa\u0107 si\u0119 ze znacznik\u00f3w PHP, aby wyprowadzi\u0107 HTML, ale musi to by\u0107 zrobione wewn\u0105trz funkcji lub hook\u00f3w. Pozw\u00f3lcie, \u017ce wyja\u015bni\u0119 to za pomoc\u0105 eksperymentu.<\/p>\n

Przetestujmy ten plik, aby zobaczy\u0107, jak to dzia\u0142a. Wewn\u0105trz functions.php<\/code>napisz echo jakiego\u015b fikcyjnego tekstu:<\/p>\n

<?php\necho 'This is an experiment';<\/code><\/pre>\n
Od\u015bwie\u017c sw\u00f3j frontend. Pojawia si\u0119 fikcyjny tekst. Je\u015bli jednak sprawdzisz lub wy\u015bwietlisz \u017ar\u00f3d\u0142o HTML, zobaczysz, \u017ce tekst pojawia si\u0119 przed otwarciem <html><\/code>. To sprawia, \u017ce \u200b\u200bkod HTML jest ca\u0142kowicie nieprawid\u0142owy!<\/p>\n
\"Samouczek<\/a><\/p>\n
Przejd\u017a do panelu administracyjnego i naci\u015bnij przycisk od\u015bwie\u017cania. Tam te\u017c robi to samo (mo\u017ce by\u0107 ukryty za paskiem administratora, ale jest tam w kodzie HTML).<\/p>\n
Jak wida\u0107, ka\u017cdy kod w Twoich functions.php<\/code>\u0142aduje si\u0119 przed czymkolwiek innym w naszych szablonach. Dlatego z regu\u0142y wszelkie dane wyj\u015bciowe (HTML poza znacznikami PHP lub echo<\/code>) musz\u0105 znajdowa\u0107 si\u0119 wewn\u0105trz funkcji, kt\u00f3re b\u0119d\u0105 uruchamiane we w\u0142a\u015bciwym czasie, zwykle podpi\u0119tych do akcji lub filtr\u00f3w.<\/p>\n
Przypomnij sobie, kiedy dowiedzieli\u015bmy si\u0119 i dodali\u015bmy haki w cz\u0119\u015bci 3<\/a> samouczka motywu WordPress dla pocz\u0105tkuj\u0105cych. Spos\u00f3b, w jaki uruchamiamy kod na zaczepie, polega na do\u0142\u0105czeniu funkcji do zaczepu za pomoc\u0105 add_action()<\/code>. Przetestujmy co\u015b innego; stw\u00f3rzmy funkcj\u0119 podpi\u0119t\u0105 do haka, kt\u00f3ry ju\u017c zdefiniowali\u015bmy w naszych szablonach; wp_footer<\/code>.<\/p>\n
W functions.php<\/code>remove echo<\/code>dodali\u015bmy w celach testowych i zamiast tego napisz:<\/p>\n
<?php\nadd_action('wp_footer', 'wptutorial_print_footer');\nfunction wptutorial_print_footer() {\n    echo 'This sentence will appear in footer!';\n}<\/code><\/pre>\n
Naci\u015bnij przycisk od\u015bwie\u017cania w interfejsie u\u017cytkownika i zobacz, czy ci\u0105g pojawia si\u0119 \u0142adnie dok\u0142adnie w zdefiniowanym miejscu wp_footer<\/code>, tu\u017c przed zamkni\u0119ciem <\/body><\/code>. Zwr\u00f3\u0107 te\u017c uwag\u0119, \u017ce to nie spowoduje echa w admin. Dzieje si\u0119 tak, poniewa\u017c wp_footer<\/code>jest to hook, kt\u00f3ry jest uruchamiany tylko w interfejsie u\u017cytkownika.<\/p>\n
Zr\u00f3bmy nasze pierwsze w\u0142a\u015bciwe operacje w functions.php<\/code>!<\/p>\n
Uwaga: W PHP nie jest mo\u017cliwe posiadanie dw\u00f3ch funkcji o dok\u0142adnie tej samej nazwie. Obejmuje to nazwy funkcji w WordPressie, motywie i aktywowanej wtyczce! Post\u0119puj zgodnie z najlepszymi praktykami i poprzed\u017a swoje funkcje slug\u0105 motywu, jak w powy\u017cszym przyk\u0142adzie: ” wptutorial_<function_name><\/code>„. To znacznie zmniejsza ryzyko awarii WordPressa z powodu identycznych nazw funkcji.<\/p>\n
Uwaga 2: Nie ma znaczenia, w jakiej kolejno\u015bci dodasz funkcje i hooki w swoim functions.php<\/code>. Pami\u0119taj, \u017ce haki i tak s\u0105 uruchamiane w okre\u015blonych punktach kontrolnych, a nie w kolejno\u015bci, w jakiej si\u0119 znajduj\u0105 functions.php<\/code>. Jedynym wyj\u0105tkiem jest do\u0142\u0105czanie innych plik\u00f3w lub inicjowanie w\u0142asnych klas.<\/p>\n
W\u0142a\u015bciwy spos\u00f3b dodawania styl\u00f3w i skrypt\u00f3w vs niew\u0142a\u015bciwy spos\u00f3b<\/h2>\n
Niekt\u00f3rzy z was mog\u0105 pami\u0119ta\u0107 z cz\u0119\u015bci 3<\/a>, gdzie dodali\u015bmy wp_head<\/code>haczyk w naszym header.php<\/code>. Po wykonaniu tej czynno\u015bci WordPress m\u00f3g\u0142 za\u0142adowa\u0107 swoje style i skrypty, w tym pasek administratora. By\u0107 mo\u017ce my\u015blisz, \u017ce aby doda\u0107 nasze arkusze styl\u00f3w, musimy pod\u0142\u0105czy\u0107 funkcj\u0119 wp_head<\/code>i wypisa\u0107 <link><\/code>dla arkusza styl\u00f3w\u2026 Zwykle mia\u0142by\u015b racj\u0119!<\/p>\n
Jednak w WordPress istnieje specjalny spos\u00f3b na dodawanie skrypt\u00f3w i styl\u00f3w. S\u0142u\u017cy to g\u0142\u00f3wnie zarz\u0105dzaniu kolejno\u015bci\u0105 \u0142adowania i unikaniu \u0142adowania zduplikowanych bibliotek. Na przyk\u0142ad jako autor motywu mo\u017cesz chcie\u0107 doda\u0107 skrypty JavaScript, kt\u00f3re s\u0105 zale\u017cne od jQuery<\/code>biblioteki. Nast\u0119pnie musisz si\u0119 upewni\u0107, \u017ce jQuery<\/code>zostanie za\u0142adowany przed plikami. Ale WordPress i wszelkie wtyczki maj\u0105 t\u0119 sam\u0105 potrzeb\u0119, aby upewni\u0107 si\u0119, \u017ce jQuery<\/code>jest \u0142adowany r\u00f3wnie\u017c przed ich skryptami. Nie mo\u017cesz jQuery<\/code>wielokrotnie \u0142adowa\u0107 biblioteki, poniewa\u017c powoduje to problemy. WordPress ma wi\u0119c spos\u00f3b na zarz\u0105dzanie kolejno\u015bci\u0105<\/strong> \u0142adowania skrypt\u00f3w i arkuszy styl\u00f3w.<\/p>\n
Dodawanie arkuszy styl\u00f3w (w\u0142a\u015bciwy spos\u00f3b)<\/h2>\n
Do dodawania dowolnych styl\u00f3w i dowolnych javascript\u00f3w u\u017cywamy haczyka o nazwie wp_enqueue_scripts<\/code>. Tak, u\u017cywasz tego haczyka r\u00f3wnie\u017c do stylizacji, pomimo jego nazwy. Dodawanie skrypt\u00f3w i styl\u00f3w jest okre\u015blane mianem \u201ew kolejce" \u2013 tak jak w wstawieniu do kolejki. Zakolejkujmy (dodaj) nasz arkusz styl\u00f3w za pomoc\u0105 funkcji wp_enqueue_style<\/a> w naszym functions.php<\/code>:<\/p>\n
<?php\nadd_action('wp_enqueue_scripts', 'wptutorial_enqueue_scripts');\nfunction wptutorial_enqueue_scripts() {\n    wp_enqueue_style('theme-main-style', get_stylesheet_directory_uri().'\/style.css');\n}<\/code><\/pre>\n
Funkcja wp_enqueue_style<\/code>przyjmuje co najmniej dwa parametry. Pierwsza to unikalna nazwa (uchwyt lub \u201eidentyfikator slug”), a druga lokalizacja pliku. Uchwyt musi by\u0107 unikalny, poniewa\u017c jest to identyfikator, kt\u00f3rego WordPress u\u017cywa do okre\u015blenia, czy istniej\u0105 jakie\u015b duplikaty.<\/p>\n
Je\u015bli chodzi o powr\u00f3t \u015bcie\u017cki do twojego motywu, dost\u0119pnych jest wiele funkcji. Powy\u017cej u\u017cy\u0142em funkcji, get_stylesheet_directory_uri()<\/code>kt\u00f3ra zwraca adres URL do folderu motywu, a nast\u0119pnie doda\u0142em reszt\u0119 \u015bcie\u017cki do naszego arkusza styl\u00f3w.<\/p>\n
PS: WordPress oferuje osobn\u0105 funkcj\u0119 zwracania pe\u0142nego adresu URL do motywu style.css<\/code>: get_stylesheet_uri()<\/code>. U\u017cy\u0142em drugiej funkcji powy\u017cej, poniewa\u017c lepiej si\u0119 z ni\u0105 zapozna\u0107. U\u017cyjesz go do wszystkich innych plik\u00f3w, kt\u00f3re chcesz umie\u015bci\u0107 w kolejce.<\/p>\n
Funkcja wp_enqueue_style<\/code>akceptuje bardziej przydatne parametry, takie jak zale\u017cno\u015bci (kt\u00f3re inne pliki css musz\u0105 by\u0107 wcze\u015bniej za\u0142adowane) i numer wersji (przydatne do cel\u00f3w buforowania).<\/p>\n
Od\u015bwie\u017c sw\u00f3j frontend i zobacz, \u017ce arkusz styl\u00f3w jest za\u0142adowany w <head><\/code>tagu!<\/p>\n
Je\u015bli jeste\u015b jednym z tych, kt\u00f3rzy chc\u0105, aby Tw\u00f3j motyw wygl\u0105da\u0142 \u0142adniej podczas kodowania, oto Twoja szansa. Zach\u0119cam do rozpocz\u0119cia definiowania kodu HTML, klas i wrapper\u00f3w oraz dodania stylizacji w style.css<\/code>. W tej serii samouczk\u00f3w dodamy wi\u0119cej tre\u015bci, kt\u00f3re b\u0119d\u0105 wymaga\u0142y stylizacji.<\/p>\n
Dodawanie skrypt\u00f3w (w\u0142a\u015bciwy spos\u00f3b)<\/h2>\n
Przyjrzyjmy si\u0119, jak dodajemy skrypty java do naszego motywu. Odbywa si\u0119 to za pomoc\u0105 tego samego haka (dzi\u0119ki czemu mo\u017cna to wszystko umie\u015bci\u0107 w jednej funkcji). Ale w przypadku skrypt\u00f3w u\u017cywamy nieco innej funkcji.<\/p>\n
Aby umie\u015bci\u0107 skrypt w kolejce, u\u017cyj wp_enqueue_script()<\/code>. Parametry s\u0105 takie same jak wp_enqueue_style()<\/code>. Pierwszy to unikalny uchwyt, a drugi to \u015bcie\u017cka do skryptu. Trzecia (opcjonalnie) to tablica zale\u017cno\u015bci. Jako czwarty (opcjonalny) parametr ustawiasz numer wersji. I wreszcie pi\u0105ty (opcjonalnie) okre\u015blasz, czy skrypt ma by\u0107 za\u0142adowany w <head><\/code>tagu, czy na ko\u0144cu <\/body><\/code>.<\/p>\n
WordPress zawiera wiele bibliotek, kt\u00f3re s\u0105 ju\u017c zawarte. Nie zawsze wszystkie s\u0105 za\u0142adowane, ale dost\u0119pne, je\u015bli ich potrzebujesz. Je\u015bli chcesz doda\u0107 wsp\u00f3lny skrypt biblioteczny, najpierw sprawd\u017a, czy WordPress ju\u017c go ma<\/a>. Przyk\u0142adami s\u0105 jQuery, wszystkie modu\u0142y jQuery UI, Underscore i Backbone.<\/p>\n
Je\u015bli dodasz jeden ze skrypt\u00f3w do\u0142\u0105czonych do WordPressa jako zale\u017cno\u015b\u0107, nie musisz kolejkowa\u0107 tego skryptu! Zr\u00f3bmy to w praktyce.<\/p>\n
Utw\u00f3rz folder, assets<\/code>a w nim podfolder js<\/code>w naszym folderze motywu, a nast\u0119pnie dodaj nowy pusty main.js<\/code>plik. Powiedzmy, \u017ce ten skrypt wymaga jQuery<\/code>biblioteki, wi\u0119c ustawiamy j\u0105 jako zale\u017cno\u015b\u0107. Wiemy, \u017ce WordPress jest dostarczany z jQuery<\/code>pakietami, a uchwytem jest jquery<\/code>. Umie\u015bcimy nasz skrypt w kolejce w nast\u0119puj\u0105cy spos\u00f3b:<\/p>\n
<?php\nadd_action('wp_enqueue_scripts', 'wptutorial_enqueue_scripts');\nfunction wptutorial_enqueue_scripts() {\n    wp_enqueue_style('theme-main-style', get_stylesheet_directory_uri().'\/style.css');\n    wp_enqueue_script('theme-main-script', get_stylesheet_directory_uri().'\/assets\/js\/main.js', ['jquery']);\n}<\/code><\/pre>\n
Je\u015bli od\u015bwie\u017cysz frontend i sprawdzisz kod \u017ar\u00f3d\u0142owy, powiniene\u015b zobaczy\u0107, \u017ce Tw\u00f3j skrypt, main.js<\/code>zosta\u0142 dodany, ale tak\u017ce, \u017ce jQuery<\/code>za\u0142adowana jest biblioteka. I jQuery<\/code>jest \u0142adowany przed twoim plikiem!<\/p>\n
\"Samouczek<\/a><\/p>\n
Nauczy\u0142e\u015b si\u0119 teraz, jak dodawa\u0107 style i skrypty. Aby doda\u0107 wi\u0119cej plik\u00f3w, dodaj wp_enqueue_style()<\/code>lub wp_enqueue_script()<\/code>dla ka\u017cdego nowego pliku.<\/p>\n
Dokumentacja dotycz\u0105ca zastosowanych metod<\/h2>\n