Ta lekcja samouczka motywu WordPress dla początkujących nauczy Cię, jak ustrukturyzować główne bloki konstrukcyjne motywu i rozpocząć tworzenie szablonów. Zaczniemy tworzyć dane wyjściowe HTML i jak dołączyć bloki konstrukcyjne do szablonów naszego motywu. W poprzednim kroku ustawiliśmy minimum motywu WordPress i aktywowaliśmy go. Ale w tej chwili nie robi zbyt wiele i nawet nie zawiera poprawnego kodu HTML dla strony internetowej. Naprawmy to.
Bloki konstrukcyjne nagłówka i stopki (i paska bocznego)
W naszych plikach szablonów potrzebujemy poprawnego kodu HTML. Moglibyśmy napisać całą strukturę HTML (zaczynającą się od <html>i <head>full <body>) w index.php, ale staje się to niepraktyczne w przypadku utrzymywania wielu plików szablonów w motywie. Wyobraź sobie, że stworzyłeś kilka szablonów, a następnie zdaj sobie sprawę, że potrzebujesz niewielkiej zmiany w części nagłówka; będziesz musiał edytować wszystkie szablony, aby pozostały spójne. To nie jest mądre.
Rozwiązaniem jest podzielenie pełnej struktury HTML na sensowne części; cegiełki. Każdy blok znajduje się w swoim własnym pliku i zawsze, gdy potrzebujemy go w szablonie, dołączamy go. Najpopularniejszymi i najrozsądniejszymi blokami są jeden dla nagłówka, jeden dla stopki i jeden dla treści, ale jeśli twój motyw zawiera pasek boczny, pasek boczny powinien być również osobnym budynkiem.
Ci z Was, którzy są bardziej zaznajomieni z PHP, prawdopodobnie znają metody include()lub require(). Właśnie to zrobimy, jednak użyjemy funkcji WordPressa do dołączania innych plików, ponieważ mają one dodatkowe korzyści.
W tej lekcji utworzymy nagłówek, stopkę i pasek boczny jako bloki konstrukcyjne. Jednak paski boczne stają się coraz mniej powszechne na stronach internetowych, ale nadal będziemy zaimplementować prawy pasek boczny w naszym motywie. Te trzy bloki konstrukcyjne są powszechną praktyką we wszystkich motywach WordPress – i tak naprawdę jest tak powszechne, że WordPress oferuje automatyzację tych trzech rzeczy.
Tworzenie szablonów nagłówka, stopki i paska bocznego
Stwórzmy nowy pusty plik o nazwie header.phpw naszym folderze motywu. Na razie dodamy bardzo podstawowy kod HTML (nie martw się, później dodamy bardziej poprawny kod HTML).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A White Pixel Theme</title>
</head>
<body>Utwórz nowy plik o nazwie footer.phpw katalogu motywu. Wszystko czego potrzebujemy (na razie) w tym pliku to zamknięcie naszej struktury HTML.
</body>
</html>Na koniec utwórz nowy pusty plik o nazwie sidebar.php. <aside>W środku dodajemy tylko tag HTML .
<aside class="sidebar">
</aside>W tym klocki
Wróćmy do naszych index.phpakt. Wszystko, co musimy teraz zrobić, to powiedzieć WordPressowi, gdzie chcemy umieścić plik nagłówka i stopki. Oczywiście chcemy załadować nagłówek na samym początku i stopkę na samym końcu tego pliku.
WordPress oferuje proste funkcje włączania tych bloków konstrukcyjnych; get_header()oraz get_footer()odpowiednio dla pliku nagłówka i stopki. Dość intuicyjne, prawda? Dodajmy je do naszego index.php i zobaczmy, co się stanie.
<?php get_header(); ?>
Hello :)
<?php get_footer(); ?>Odśwież swój frontend i sprawdź lub wyświetl źródło HTML, aby zobaczyć, że połączyliśmy wiele bloków konstrukcyjnych w kompletną strukturę HTML.
Teraz możesz swobodnie edytować zawartość index.phpniezależnie od nagłówka i stopki!
Dołączmy również pasek boczny. Pamiętaj, że w swoim motywie możesz wziąć pod uwagę przypadki i szablony, w których pasek boczny nie jest potrzebny, na przykład strona główna.
Dołączenie paska bocznego jest tak samo proste jak nagłówek i stopka; do tego używamy get_sidebar(). Dodajmy to do index.php, tuż przed pobraniem stopki.
<?php get_header(); ?>
Hello :)
<?php get_sidebar(); ?>
<?php get_footer(); ?>Odśwież i powinieneś zobaczyć źródło HTML, w tym nasz <aside>. Nie martw się, w późniejszym kroku dowiemy się, jak przekonwertować go na rzeczywisty obszar paska bocznego, w którym można umieszczać widżety.
Nasz motyw jest teraz dość statyczny. W następnej lekcji z tej serii samouczków dotyczących motywów WordPress w końcu zaczniemy prawidłowo zagłębiać się w funkcje WordPressa, aby dynamicznie ładować treści i informacje z WordPressa do naszych szablonów.