{"id":233632,"date":"2023-02-18T13:32:00","date_gmt":"2023-02-18T10:32:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233632"},"modified":"2022-11-11T00:44:58","modified_gmt":"2022-11-10T21:44:58","slug":"samouczek-motywu-wordpress-dla-poczatkujacych-czesc-3-dynamiczna-zawartosc","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pl\/samouczek-motywu-wordpress-dla-poczatkujacych-czesc-3-dynamiczna-zawartosc\/","title":{"rendered":"Samouczek motywu WordPress dla pocz\u0105tkuj\u0105cych \u2013 cz\u0119\u015b\u0107 3: Dynamiczna zawarto\u015b\u0107"},"content":{"rendered":"\n

W tej lekcji samouczka motywu WordPress dla pocz\u0105tkuj\u0105cych dowiemy si\u0119 o haczykach w WordPressie i dodamy kilka haczyk\u00f3w w naszym motywie, kt\u00f3re s\u0105 wymagane, aby motyw dzia\u0142a\u0142 poprawnie z WordPress i wtyczkami. W naszym nag\u0142\u00f3wku zaczniemy r\u00f3wnie\u017c uzyskiwa\u0107 dost\u0119p do dynamicznych tre\u015bci z WordPressa, takich jak automatyczne pobieranie aktualnego tytu\u0142u strony.<\/p>\n

Najpierw musimy dowiedzie\u0107 si\u0119 troch\u0119 o hookach w WordPressie. Hooki to podstawowa funkcjonalno\u015b\u0107, z kt\u00f3r\u0105 musisz si\u0119 zapozna\u0107. Nie jestem fanem pokazywania ca\u0142ej masy kodu, w kt\u00f3rym trzeba skopiowa\u0107 i wklei\u0107, nie wiedz\u0105c, co naprawd\u0119 robi. Je\u015bli \u015bledzisz ten samouczek, chcesz si\u0119 tego w\u0142a\u015bciwie nauczy\u0107, prawda?<\/p>\n

Nie martw si\u0119, na razie streszcz\u0119. Dowiemy si\u0119 o nich wi\u0119cej w dalszej cz\u0119\u015bci tego samouczka.<\/p>\n

Haki w WordPressie<\/h2>\n

W skr\u00f3cie; poniewa\u017c WordPress wykonuje ca\u0142y kod w celu za\u0142adowania i renderowania strony, istniej\u0105 pewne \u201epunkty kontrolne" \u2013 kt\u00f3re nazywamy hakami. W tych punktach WordPress pozwala programistom modyfikowa\u0107 lub dodawa\u0107 w\u0142asny kod. WordPress zdefiniowa\u0142 ca\u0142\u0105 mas\u0119 \u201epunkt\u00f3w kontrolnych”, w kt\u00f3rych, ka\u017cda z unikatow\u0105 nazw\u0105. Je\u015bli znasz jej nazw\u0119, mo\u017cesz doda\u0107 w\u0142asny kod w tych punktach kontrolnych. W ten spos\u00f3b \u0142atwo powiedz WordPressowi, aby uruchomi\u0142 Tw\u00f3j kod, gdy dotrze do tego punktu kontrolnego w ramach swojego procesu.<\/p>\n

Istniej\u0105 dwa rodzaje haczyk\u00f3w; dzia\u0142ania i filtry. Akcje<\/strong> to punkty w kodzie, w kt\u00f3rych mo\u017cesz doda\u0107 niestandardowy kod, na przyk\u0142ad wyprowadzanie czego\u015b lub robienie czego\u015b do w\u0142asnych cel\u00f3w. Filtry<\/strong> to punkty w kodzie, w kt\u00f3rych mo\u017cna zmodyfikowa\u0107 okre\u015blon\u0105 zmienn\u0105 przed jej u\u017cyciem lub wyprowadzeniem. S\u0105 bardzo podobne, ale filtry s\u0105 przypisane do jednej konkretnej zmiennej, a akcje nie.<\/p>\n

Wtyczki, motywy i sam WordPress mog\u0105 \u201ezahaczy\u0107” sw\u00f3j kod za pomoc\u0105 add_action()<\/code>akcji i add_filter()<\/code>filtr\u00f3w. Te dwie funkcje informuj\u0105 WordPress, aby uruchamia\u0142 przechwycony kod za ka\u017cdym razem, gdy wykonanie dotrze do tych przechwytuj\u0105cych.<\/p>\n

W celu zdefiniowania hook\u00f3w, kt\u00f3rych u\u017cywasz do_action()<\/code>do akcji i apply_filters()<\/code>filtr\u00f3w.<\/p>\n

Dla ka\u017cdego, kto chce dowiedzie\u0107 si\u0119 wi\u0119cej, mam kolejny post, kt\u00f3ry szczeg\u00f3\u0142owo omawia hooki<\/a> w WordPressie.<\/p>\n

Motyw WordPress musi zawiera\u0107 okre\u015blone wa\u017cne haki (akcje). Te haki pozwalaj\u0105 WordPressowi, wtyczkom i samemu motywowi na podpi\u0119cie si\u0119 i wykonywanie krytycznych rzeczy. Sp\u00f3jrzmy na te krytyczne haki, kt\u00f3re musimy doda\u0107.<\/p>\n

Haki nag\u0142\u00f3wka i stopki motywu<\/h2>\n

Wszystkie motywy WordPress musz\u0105 mie\u0107 w szablonach dwa haki. Jedn\u0105 akcj\u0119 nale\u017cy umie\u015bci\u0107 w nag\u0142\u00f3wku (wewn\u0105trz <head><\/code>tagu), a drug\u0105 w stopce (tu\u017c przed zamkni\u0119ciem <\/body><\/code>tagu). Te dwa haki s\u0105 absolutnie niezb\u0119dne, aby WordPress, Tw\u00f3j motyw i dowolna wtyczka mog\u0142y doda\u0107 swoje skrypty i kod styl\u00f3w do Twojego motywu.<\/p>\n

Haki, kt\u00f3rych potrzebujemy, to wp_head<\/code>odpowiednio wp_footer<\/code>dla nag\u0142\u00f3wka i stopki.<\/p>\n

Normalnie, gdy chcemy uruchomi\u0107 hak, wywo\u0142amy do_action(<hook name>)<\/code>. Ale poniewa\u017c te dwa zaczepy s\u0105 tak wa\u017cne, WordPress upro\u015bci\u0142 je dla nas, umieszczaj\u0105c je w prostym wywo\u0142aniu funkcji. Wi\u0119c dla tych dw\u00f3ch haczyk\u00f3w mo\u017cesz po prostu u\u017cy\u0107 wp_head()<\/code>i wp_footer()<\/code>. W tle te dwa uruchamiaj\u0105 do_action()<\/code>.<\/p>\n

Dodajmy te dwa zaczepy (wywo\u0142ania funkcji) do naszych szablon\u00f3w nag\u0142\u00f3wka i stopki i zobaczmy, co si\u0119 stanie.<\/p>\n

<!DOCTYPE html>\n<html>\n    <head>\n        <meta charset=\"utf-8\">\n        <title>A White Pixel Theme<\/title>\n\u00a0\n        <?php wp_head(); ?>\n    <\/head>\n<body><\/code><\/pre>\n
        <?php wp_footer(); ?>\n    <\/body>\n<\/html><\/code><\/pre>\n
Hit od\u015bwie\u017cania na swoim interfejsie. Je\u015bli jeste\u015b zalogowany, powiniene\u015b teraz zobaczy\u0107 pasek administratora WordPressa! Oznacza to, \u017ce WordPress mo\u017ce teraz z powodzeniem dodawa\u0107 swoje skrypty i style do Twojego motywu.<\/p>\n
\"Samouczek<\/a><\/p>\n
Mo\u017cesz sprawdzi\u0107 \u017ar\u00f3d\u0142o HTML i zobaczy\u0107, \u017ce nag\u0142\u00f3wek zawiera teraz sporo kodu. To jest kod, kt\u00f3rego nie doda\u0142e\u015b do swojego motywu. Jak wida\u0107, sam WordPress u\u017cywa haczyk\u00f3w, kt\u00f3re dodali\u015bmy, aby robi\u0107 w\u0142asne rzeczy.<\/p>\n
Przejd\u017amy od hook\u00f3w i zacznijmy zastanawia\u0107 si\u0119, jak mo\u017cemy dynamicznie pobiera\u0107 tre\u015bci z WordPressa i wy\u015bwietla\u0107 je w naszym nag\u0142\u00f3wku.<\/p>\n
Tre\u015b\u0107 dynamiczna w nag\u0142\u00f3wku<\/h2>\n
Powiedzmy WordPressowi, aby dynamicznie ustawia\u0142 tytu\u0142 dokumentu (dla <title><\/code>tagu). W tym celu u\u017cyjemy funkcji (kt\u00f3ra nawiasem m\u00f3wi\u0105c ma filtr) o nazwie wp_title()<\/code>. Jak dowiedzieli\u015bmy si\u0119 powy\u017cej, poniewa\u017c wp_title()<\/code>jest to filtr, Ty, WordPress lub wtyczki mo\u017cesz modyfikowa\u0107 dane wyj\u015bciowe. Dodamy do tego filtr w dalszej cz\u0119\u015bci tego samouczka.<\/p>\n
Funkcja wp_title()<\/code>przyjmuje kilka argument\u00f3w<\/a>, kt\u00f3re mo\u017cesz dostosowa\u0107 do w\u0142asnych upodoba\u0144, ale na razie dodam pusty ci\u0105g, aby wy\u015bwietla\u0142 tylko tytu\u0142 dowolnej strony, na kt\u00f3rej si\u0119 znajdujemy.<\/p>\n
Zmie\u0144 sw\u00f3j <title><\/code>tag header.php<\/code>na to:<\/p>\n
<title><?php wp_title(''); ?><\/title><\/code><\/pre>\n
Zapewne zauwa\u017cy\u0142e\u015b, \u017ce strona g\u0142\u00f3wna nie wygeneruje tytu\u0142u. Jest to standardowe zachowanie WordPressa, kt\u00f3re naprawimy w dalszej cz\u0119\u015bci tego samouczka (zrobimy to za pomoc\u0105 filtra). Je\u015bli odwiedzasz pojedynczy post lub stron\u0119, powiniene\u015b otrzyma\u0107 tytu\u0142 posta.<\/p>\n
WordPress ma fajn\u0105 funkcj\u0119, kt\u00f3ra dynamicznie generuje kilka klas dla <body><\/code>tagu w zale\u017cno\u015bci od tego, na kt\u00f3rej stronie si\u0119 znajdujemy; o nazwie body_class<\/a>. Zaktualizuj <body><\/code>tag w header.php<\/code>nast\u0119puj\u0105cy spos\u00f3b:<\/p>\n
<body <?php body_class(); ?>><\/code><\/pre>\n
Od\u015bwie\u017c i sp\u00f3jrz na wszystkie klasy dodane do <body><\/code>tagu. Zajrzyj na r\u00f3\u017cne strony (strona tytu\u0142owa, single, kategoria). Wszystkie te klasy s\u0105 bardzo przydatne do stylizacji i r\u00f3\u017cnicowania r\u00f3\u017cnych podobnych cz\u0119\u015bci. Najprawdopodobniej u\u017cyjesz kilku z nich w swoim CSS.<\/p>\n
Aby post\u0119powa\u0107 zgodnie z dobrymi praktykami HTML, powinni\u015bmy r\u00f3wnie\u017c poinformowa\u0107 o j\u0119zyku witryny w HTML. W tym celu u\u017cywamy funkcji WordPress, aby pobra\u0107 j\u0119zyk z Ustawie\u0144; atrybuty_j\u0119zykowe<\/a>.<\/p>\n
<html <?php language_attributes(); ?>><\/code><\/pre>\n
I na koniec chcia\u0142bym doda\u0107 kilka metatag\u00f3w i takich, kt\u00f3re nie s\u0105 specyficzne dla WordPressa, ale stosuj\u0105 typowe praktyki projektowania stron internetowych. header.php<\/code>Tak wygl\u0105da pe\u0142ny plik:<\/p>\n
<!DOCTYPE html>\n<html class=\"no-js\" <?php language_attributes(); ?>>\n<head>\n    <meta charset=\"utf-8\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n\u00a0\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title><?php wp_title(''); ?><\/title>\n\u00a0\n    <?php wp_head(); ?>\n<\/head>\n<body <?php body_class(); ?>><\/code><\/pre>\n
W nast\u0119pnym kroku w tym samouczku wyjdziemy header.php<\/code>i zag\u0142\u0119bimy si\u0119 index.php<\/code>, aby dowiedzie\u0107 si\u0119, jak pobiera\u0107 bardziej dynamiczn\u0105 zawarto\u015b\u0107, tak\u0105 jak posty.<\/p>\n
Dokumentacja dotycz\u0105ca zastosowanych metod<\/h2>\n