W tej lekcji samouczka motywu WordPress dla początkujących zagłębimy się w szablony. Dowiemy się o częściach szablonu i zaimplementujemy go do ponownego użycia. Do naszego motywu dodamy więcej domyślnych szablonów WordPressa.
Ale zanim zaczniemy dodawać więcej plików szablonów, musimy wiedzieć, dlaczego powinniśmy zawracać sobie głowę częściami szablonów.
Części szablonu: bardziej elastyczne bloki konstrukcyjne
Części szablonu działają dokładnie tak, jak get_header()i o get_footer()których dowiedzieliśmy się w części 2, ale nie ograniczają się do tych plików. Możesz użyć części szablonu dla dowolnego pliku!
Motywy zwykle używają części szablonu dla postów w pętli. Zazwyczaj wiele szablonów, takich jak kategoria, archiwum i wyniki wyszukiwania, zwykle wyświetla każdy post w pętli w ten sam sposób. Dlatego bardzo dobrym pomysłem jest rozdzielenie wyjścia post-pętli w jeden plik. W ten sposób nie musisz powtarzać tego w każdym szablonie.
Zamieńmy część naszego istniejącego kodu na części szablonu, zanim zaczniemy tworzyć więcej szablonów!
Tworzenie części szablonu pętli post
Utwórz nowy pusty plik w naszym folderze motywu; o nazwie content-loop.php. Możesz dowolnie nazwać części szablonu. Ale nie możesz nazwać ich tak samo, jak żaden z szablonów zdefiniowanych przez WordPress. W naszym index.phpzlokalizuj wszystko, co masz w pętli, wytnij i wklej do środka content-loop.php.
Wewnątrz pustej pętli w index.php, użyj wywołania funkcji get_template_part()i zdefiniuj plik części szablonu jako parametr (bez .phprozszerzenia). Tak powinno wyglądać w obu plikach:
...
while (have_posts()): the_post();
get_template_part('content-loop');
endwhile;
the_posts_pagination();
...Jeśli odświeżysz swoją stronę główną, nie powinieneś zobaczyć absolutnie żadnej różnicy.
Świetny! Teraz, gdy nasz index.phpjest ładny i czysty, możemy użyć go jako podstawy do powielenia w większej liczbie szablonów. Poniżej omówię, jak dodać szablon kategorii i szablon wyników wyszukiwania, ale zachęcam do tworzenia większej liczby szablonów, aby mieć większą kontrolę nad projektem swojego motywu.
Dodawanie szablonu kategorii
Jeśli odwołasz się do hierarchii szablonów WordPressa, zobaczysz, że dla kategorii postów WordPress będzie szukać szablonu o nazwie category.php. Najpierw to stworzymy.
W folderze motywu utwórz kopię index.phppliku i zmień nazwę kopii category.php.
I to wszystko. W zasadzie gotowe…!
Dodamy jednak jeden szczegół; chcemy pokazać tytuł, który mówi nam, że jesteśmy na stronie kategorii dla postów w kategorii o nazwie X. WordPress ma do tego funkcję, której możesz użyć we wszystkich szablonach archiwów (kategoria, tagi, archiwa dat), the_archive_title. Dodajmy to przed pętlą, wewnątrz <h1>tagu.
Jeśli przeglądasz stronę kategorii postów, powinieneś zobaczyć coś takiego, z tytułem archiwum „Kategoria:". PS: Jeśli chcesz zmienić dane wyjściowe tytułu archiwum (na przykład nie wyświetlając „Kategoria:”), możesz dodać filtr do get_the_archive_title. Strona dokumentacji pokazuje świetny przykład, jak to zrobić.
Cóż, to było łatwe! Zajmijmy się następnym szablonem wyników wyszukiwania.
Dodawanie szablonu wyników wyszukiwania
Procedura jest dokładnie taka sama, jak w przypadku szablonów kategorii. Tym razem utwórz kopię category.phpi zmień nazwę kopii na search.php.
Wszystko, co musimy naprawić, to tytuł. Funkcja tytułu archiwum, której użyliśmy w szablonie kategorii, niestety nie działa zbyt dobrze dla szablonu wyników wyszukiwania. W rzeczywistości w WordPressie nie ma prostej funkcji, która wyświetla dla nas tytuł.
Ale możemy łatwo zrobić to sami, a jednocześnie pokażę, jak wyprowadzić zmienną dynamiczną i nadal zachować możliwość tłumaczenia tekstu.
PHP ma dwie przydatne funkcje printf()i sprintf(). Robią to samo, z wyjątkiem tego, że printfwyprowadza je (jak echo) i sprintfzwraca, więc możemy je przechowywać w zmiennej. Po umieszczeniu tekstu jako pierwszych parametrów, możemy dodać zmienne dynamiczne jako argumenty, które są następnie wstrzykiwane do tekstu. W ich wnętrzu możemy użyć funkcji tłumaczenia tekstu __()oraz _e(). Polecam przeczytać trochę o tym, jak działa printf lub sprintf, ponieważ nie będę tu wchodzić w szczegóły.
WordPress oferuje prostą funkcję, aby uzyskać wyszukiwany ciąg; get_search_query(). Powiedziawszy to, zastąpmy tą funkcją tytuł archiwum;
To, co robi powyższy kod, jest od środka; zdefiniowanie możliwego do przetłumaczenia tekstu „Szukaj: %s”, który jest umieszczany wewnątrz a printf, który odzwierciedla ciąg i zastępuje stałą ciągu (%s) drugim argumentem; czyli get_search_query().
W rezultacie, wyszukując „er”, otrzymujemy taki tytuł:
Miły! Zrobiono kolejny szablon. Jeśli chodzi o ostatnią część tej lekcji, przejdziemy do naszego szablonu pojedynczego posta i dodamy coś bardzo powszechnego w WordPress; szablon komentarzy.
Dodawanie szablonu komentarzy do pojedynczego posta
W naszym single.php, po wpisie, chcemy pokazać komentarze. Komentarze powinny zawierać listę poprzednich komentarzy oraz formularz dodawania nowego komentarza.
Szablon komentarzy to plik szablonu, który możesz dodać do swojego motywu, ale WordPress ma własne domyślne wyjście szablonu komentarzy. Jeśli nie masz comments.phpw swoim motywie, żądanie szablonu komentarzy zwróci dla niego domyślne dane wyjściowe WordPressa. Oto, co zrobimy w tym samouczku.
Chcemy wywołać szablon komentarzy tylko wtedy, gdy wpis ma aktywowane komentarze (jest to ustawienie dla każdego wpisu i globalne ustawienie witryny). Dodajemy więc check if, aby sprawdzić, czy komentarze są dozwolone za pomocą comments_open(), a jeśli zwraca true, prosimy o szablon komentarzy za pomocą comments_template(). Pamiętaj, że wszystko to musi się wydarzyć w pętli. Dodałem go po zakończeniu </article>, tuż przed zamknięciem pętli.
Jeśli odwiedzasz pojedynczy post, który zezwala na komentarze (dodałem komentarz tylko po to, aby pokazać ci również listę komentarzy); otrzymasz ten piękny (ahem) domyślny szablon komentarzy:
Teraz możesz (i często się do tego zachęca) stworzyć własny comments.phpmotyw, który nadpisze domyślne wyjście WordPressa. Nie zamierzam jednak tworzyć szablonu komentarzy w tym samouczku, ponieważ domyślne dane wyjściowe WordPressa działają dobrze, o ile odpowiednio je stylizujesz. Jeśli sprawdzisz kod HTML, dostępnych jest wiele opakowań i klas.