W tej lekcji samouczka motywu WordPress dla początkujących dowiemy się o haczykach w WordPressie i dodamy kilka haczyków w naszym motywie, które są wymagane, aby motyw działał poprawnie z WordPress i wtyczkami. W naszym nagłówku zaczniemy również uzyskiwać dostęp do dynamicznych treści z WordPressa, takich jak automatyczne pobieranie aktualnego tytułu strony.
Najpierw musimy dowiedzieć się trochę o hookach w WordPressie. Hooki to podstawowa funkcjonalność, z którą musisz się zapoznać. Nie jestem fanem pokazywania całej masy kodu, w którym trzeba skopiować i wkleić, nie wiedząc, co naprawdę robi. Jeśli śledzisz ten samouczek, chcesz się tego właściwie nauczyć, prawda?
Nie martw się, na razie streszczę. Dowiemy się o nich więcej w dalszej części tego samouczka.
Haki w WordPressie
W skrócie; ponieważ WordPress wykonuje cały kod w celu załadowania i renderowania strony, istnieją pewne „punkty kontrolne" – które nazywamy hakami. W tych punktach WordPress pozwala programistom modyfikować lub dodawać własny kod. WordPress zdefiniował całą masę „punktów kontrolnych”, w których, każda z unikatową nazwą. Jeśli znasz jej nazwę, możesz dodać własny kod w tych punktach kontrolnych. W ten sposób łatwo powiedz WordPressowi, aby uruchomił Twój kod, gdy dotrze do tego punktu kontrolnego w ramach swojego procesu.
Istnieją dwa rodzaje haczyków; działania i filtry. Akcje to punkty w kodzie, w których możesz dodać niestandardowy kod, na przykład wyprowadzanie czegoś lub robienie czegoś do własnych celów. Filtry to punkty w kodzie, w których można zmodyfikować określoną zmienną przed jej użyciem lub wyprowadzeniem. Są bardzo podobne, ale filtry są przypisane do jednej konkretnej zmiennej, a akcje nie.
Wtyczki, motywy i sam WordPress mogą „zahaczyć” swój kod za pomocą add_action()akcji i add_filter()filtrów. Te dwie funkcje informują WordPress, aby uruchamiał przechwycony kod za każdym razem, gdy wykonanie dotrze do tych przechwytujących.
W celu zdefiniowania hooków, których używasz do_action()do akcji i apply_filters()filtrów.
Dla każdego, kto chce dowiedzieć się więcej, mam kolejny post, który szczegółowo omawia hooki w WordPressie.
Motyw WordPress musi zawierać określone ważne haki (akcje). Te haki pozwalają WordPressowi, wtyczkom i samemu motywowi na podpięcie się i wykonywanie krytycznych rzeczy. Spójrzmy na te krytyczne haki, które musimy dodać.
Haki nagłówka i stopki motywu
Wszystkie motywy WordPress muszą mieć w szablonach dwa haki. Jedną akcję należy umieścić w nagłówku (wewnątrz <head>tagu), a drugą w stopce (tuż przed zamknięciem </body>tagu). Te dwa haki są absolutnie niezbędne, aby WordPress, Twój motyw i dowolna wtyczka mogły dodać swoje skrypty i kod stylów do Twojego motywu.
Haki, których potrzebujemy, to wp_headodpowiednio wp_footerdla nagłówka i stopki.
Normalnie, gdy chcemy uruchomić hak, wywołamy do_action(<hook name>). Ale ponieważ te dwa zaczepy są tak ważne, WordPress uprościł je dla nas, umieszczając je w prostym wywołaniu funkcji. Więc dla tych dwóch haczyków możesz po prostu użyć wp_head()i wp_footer(). W tle te dwa uruchamiają do_action().
Dodajmy te dwa zaczepy (wywołania funkcji) do naszych szablonów nagłówka i stopki i zobaczmy, co się stanie.
Hit odświeżania na swoim interfejsie. Jeśli jesteś zalogowany, powinieneś teraz zobaczyć pasek administratora WordPressa! Oznacza to, że WordPress może teraz z powodzeniem dodawać swoje skrypty i style do Twojego motywu.
Możesz sprawdzić źródło HTML i zobaczyć, że nagłówek zawiera teraz sporo kodu. To jest kod, którego nie dodałeś do swojego motywu. Jak widać, sam WordPress używa haczyków, które dodaliśmy, aby robić własne rzeczy.
Przejdźmy od hooków i zacznijmy zastanawiać się, jak możemy dynamicznie pobierać treści z WordPressa i wyświetlać je w naszym nagłówku.
Treść dynamiczna w nagłówku
Powiedzmy WordPressowi, aby dynamicznie ustawiał tytuł dokumentu (dla <title>tagu). W tym celu użyjemy funkcji (która nawiasem mówiąc ma filtr) o nazwie wp_title(). Jak dowiedzieliśmy się powyżej, ponieważ wp_title()jest to filtr, Ty, WordPress lub wtyczki możesz modyfikować dane wyjściowe. Dodamy do tego filtr w dalszej części tego samouczka.
Funkcja wp_title()przyjmuje kilka argumentów, które możesz dostosować do własnych upodobań, ale na razie dodam pusty ciąg, aby wyświetlał tylko tytuł dowolnej strony, na której się znajdujemy.
Zmień swój <title>tag header.phpna to:
Zapewne zauważyłeś, że strona główna nie wygeneruje tytułu. Jest to standardowe zachowanie WordPressa, które naprawimy w dalszej części tego samouczka (zrobimy to za pomocą filtra). Jeśli odwiedzasz pojedynczy post lub stronę, powinieneś otrzymać tytuł posta.
WordPress ma fajną funkcję, która dynamicznie generuje kilka klas dla <body>tagu w zależności od tego, na której stronie się znajdujemy; o nazwie body_class. Zaktualizuj <body>tag w header.phpnastępujący sposób:
Odśwież i spójrz na wszystkie klasy dodane do <body>tagu. Zajrzyj na różne strony (strona tytułowa, single, kategoria). Wszystkie te klasy są bardzo przydatne do stylizacji i różnicowania różnych podobnych części. Najprawdopodobniej użyjesz kilku z nich w swoim CSS.
Aby postępować zgodnie z dobrymi praktykami HTML, powinniśmy również poinformować o języku witryny w HTML. W tym celu używamy funkcji WordPress, aby pobrać język z Ustawień; atrybuty_językowe.
I na koniec chciałbym dodać kilka metatagów i takich, które nie są specyficzne dla WordPressa, ale stosują typowe praktyki projektowania stron internetowych. header.phpTak wygląda pełny plik:
W następnym kroku w tym samouczku wyjdziemy header.phpi zagłębimy się index.php, aby dowiedzieć się, jak pobierać bardziej dynamiczną zawartość, taką jak posty.