W tej lekcji zaczniesz uczyć się, jak WordPress ładuje zawartość w zależności od strony, na której jesteś, oraz hierarchii plików szablonów motywów. Dowiesz się również, co jest potrzebne do prawidłowego motywu. A na koniec w końcu stworzymy nasz motyw i go aktywujemy.
Pliki szablonów motywów
Za maską WordPress ustala, który szablon załadować na podstawie adresu URL, pod którym się znajdujesz. Jeśli Twój WordPress jest zainstalowany w domenie „example.com/wordpress/", powinieneś zobaczyć szablon strony głównej. Przejście do „example.com/wordpress/category/news/” domyślnie wyświetli listę postów przypisanych do kategorii Wiadomości za pomocą szablonu kategorii.
WordPress podąża za hierarchią tego, który szablon ma zostać załadowany, a wybór zależy od tego, jakie szablony są dostępne w Twoim motywie. Na przykład „example.com/wordpress/category/news” WordPress najpierw wyszuka szablon specyficzny dla kategorii „news”. Jeśli nie zostanie znaleziony, WordPress poszuka szablonu specyficznego dla identyfikatora kategorii. Ponownie, jeśli nie został znaleziony, WordPress szuka szablonu kategorii ogólnej. Jeśli nie zostanie znaleziony, WordPress poszuka jeszcze bardziej ogólnego szablonu dla archiwów. I tak dalej i tak dalej.
WordPress Codex, który jest witryną z dokumentacją WordPressa, zawiera użyteczny i zaktualizowany obraz ilustrujący hierarchię plików szablonów motywów; https://codex.wordpress.org/File:Template_Hierarchy.png#file
Nie martw się, jeśli obraz na początku wygląda zbyt zagmatwany! W miarę postępów w samouczku będziesz odwoływać się do tego obrazu, aby znaleźć szablony, które chcesz zaimplementować w swoim motywie.
Sposób, w jaki czytasz obraz, to chodzenie od lewej do prawej. W zależności od tego, na jakiej stronie jesteś, szablony są bardzo specyficzne, a im bardziej postępujesz w prawo, tym bardziej ogólne stają się szablony. Ostatnia rezerwa jest najbardziej prawą; index.php, który zostanie załadowany, jeśli nie zostaną znalezione żadne inne szablony dopasowania.
Wszystkie pliki szablonów wymienione na powyższym obrazku muszą znajdować się w folderze głównym motywu i być nazwane dokładnie tak, jak podano. Nie możesz umieszczać swoich szablonów w podfolderach dla celów organizacyjnych, ponieważ wtedy WordPress nie będzie mógł ich znaleźć!
Zaczniemy prosto! Dzisiaj utworzymy tylko kilka plików potrzebnych WordPressowi do rozpoznania go jako motywu, a następnie rozwiniemy stamtąd.
Anatomia motywu WordPress
Potrzebujesz tylko dwóch plików, aby stworzyć prawidłowy motyw WordPress.
Czy na ilustracji hierarchii szablonów zauważyłeś tę bardzo słuszną; o nazwie index.php? To jest ostateczny szablon awaryjny, jeśli WordPress nie znajdzie żadnego szablonu. To jeden z wymaganych plików. Drugi plik to plik arkusza stylów (.css). Nie musi zawierać żadnego kodu CSS, ale musi zawierać blok komentarzy, który dostarcza informacje WordPress na temat twojego motywu. Te dwie rzeczy to wszystko, czego potrzebujesz do prawidłowego motywu WordPress.
Stwórzmy nasz motyw, tworząc te dwa pliki!
Tworzę swój pierwszy motyw
Wszystkie motywy muszą znajdować się w osobnych folderach w podfolderze /wp-content/themes/. Jeśli przejdziesz do tego folderu w nawigatorze plików, prawdopodobnie zobaczysz tutaj kilka folderów tematycznych; dwadzieścia dziewiętnaście, dwadzieścia siedemnaście itd. Są to motywy, które są domyślnie dołączone do WordPressa.
W /wp-content/themes/programie utwórz nowy folder. Nazwij go odpowiednio (małe litery, bez spacji, nie tak samo jak każdy inny folder). Zwykle nazwa folderu jest wersją slugową nazwy motywu. W tym samouczku nazwę mojego folderu motywu „ wptutorial“.
Wprowadź folder motywu i utwórz nowy, pusty plik o nazwie index.php. Edytowałem plik i po prostu dodałem losowy tekst, abyśmy mogli łatwiej zobaczyć, kiedy jest w użyciu:
Jesteśmy już w połowie drogi! Utwórzmy drugi wymagany plik. Wewnątrz folderu motywu utwórz nowy, pusty plik o nazwie style.css.
Otwórz style.cssplik i natychmiast uruchom blok komentarza (/*i zamknij go za pomocą */). Wewnątrz tego bloku komentarzy musimy przestrzegać pewnych zasad WordPressa dotyczących definiowania naszego motywu. Jako minimum musimy zdefiniować nazwę naszego motywu. Ale możemy również dodać informacje o autorze, stronę główną, numer wersji, informacje o licencji i wiele więcej. Zobacz dokumentację WordPress, aby dowiedzieć się, co możesz dodać.
W tym samouczku zachowamy prostotę; dodamy nazwę motywu i napiszesz swoje imię jako autor. Możesz śmiało używać dowolnych nazw, które chcesz, oto co wpisałem w moim style.css:
/*
Theme Name: A White Pixel Theme
Author: Alex White
*/Zapisz i zamknij plik (ten samouczek nie dotknie go ponownie), chyba że chcesz pisać CSS dla swojego motywu w miarę postępów.
Gratulacje! Utworzyłeś prawidłowy motyw WordPress!
Aktywacja motywu
Przejdźmy do panelu administracyjnego WordPressa i przejdź do „Wygląd > Motywy” i zobaczmy, czy możemy tam znaleźć nasz motyw.
Kliknij przycisk Aktywuj i odwiedź swoją witrynę. Powinieneś zobaczyć to, co napisałeś index.php!
Ten index.phpszablon będzie używany niezależnie od tego, na której stronie jesteś. Spróbuj wyświetlić jeden post, a zobaczysz to samo. Motyw powinien mieć co najmniej 5-10 szablonów do obsługi różnych treści. Nie martw się, dotrzemy tam.
Świetnie, mamy motyw! W następnej lekcji zaczniemy w nim kodować i sprawić, by robił różne rzeczy.