W tej lekcji samouczka motywu WordPress dla początkujących dowiemy się o szablonach stron, czym one są, jak je tworzyć i najlepszych praktykach. Jako przykład stworzymy szablon o pełnej szerokości. Po drodze dodajemy również klasę do treści, pytając, czy strona używa określonego szablonu strony.
Czym są szablony stron
Szablony stron są przydatne w przypadkach, gdy chcesz mieć inny układ lub konfigurację dla określonej strony. Typowymi przykładami użycia szablonów stron są listy postów w niestandardowym typie postów (np. portfolio, książki lub usługi), mające zupełnie inną treść lub układ (np. wewnątrz kolumn), a nawet po prostu tworzenie strony o pełnej szerokości (bez paska bocznego).
Użyteczność szablonów stron spadła po WordPressie w wersji 5.x (Gutenberg). Nowy edytor Gutenberga pozwala na dużą elastyczność w budowaniu takich stron bez potrzeby stosowania szablonów stron. Niezależnie od tego dowiemy się, jak dodać niestandardowy szablon strony do naszego motywu.
W metapolu „Atrybuty strony" dla stron pojawia się wybór szablonu strony. Ale opcja szablonu pojawi się tylko wtedy, gdy aktywny motyw ma co najmniej jeden szablon strony.
Szablony stron mogą być również używane do postów i niestandardowych typów postów. Po WordPress 4.7 i nowszych możesz zdefiniować typy postów, dla których szablon ma być dostępny. WordPress automatycznie doda wymagane metabox „Atrybuty strony” do tych typów postów.
Nazewnictwo i umieszczenie szablonu strony
Na początek zwykle tworzysz kopię dowolnego pliku szablonu, który jest najbliższy temu, co chcesz osiągnąć za pomocą szablonu strony. W większości przypadków jest to page.php. Jeśli chodzi o nazewnictwo szablonu strony, to zależy od Ciebie. Ale są pewne zasady i zdrowy rozsądek.
Kuszące jest po prostu nazwanie szablonu strony, np page-books.php. dla szablonu z listą niestandardowych książek typu post. Nigdy nie poprzedź szablonu strony przedrostkiem „ page-„! Jeśli pamiętasz z hierarchii szablonów WordPressa, WordPress będzie szukał, page-<slug>.phpzanim spróbuje page.php, a użytkownicy Twojego motywu mogą napotkać nieoczekiwane zachowanie.
Dobrą praktyką jest poprzedzenie szablonu strony czymś, co nie jest częścią nazw szablonów stron WordPress. Na przykład ’ pagetemplate-', ’ pt-’ lub po prostu pełna nazwa ’ fullwidth-template.php’. Dobrą praktyką jest również trzymanie ich w podfolderze; /page-templates/jednak nie jest to dobre, jeśli chcesz, aby Twój motyw był dostępny do rozszerzenia o motyw potomny. Motyw potomny nie może zastępować szablonów stron umieszczonych w podfolderze motywu nadrzędnego.
Gdy już zdecydujesz się na wzór nazewnictwa, stwórzmy szablon strony.
Tworzenie szablonu strony
Utwórz kopię page.phpi zmień jej nazwę na pagetemplate-fullwidth.php. Aby zrobić z niego szablon strony, wystarczy dodać komentarz na samym początku, który powie WordPressowi, że to jest szablon strony:
<?php
/*
Template Name: Fullwidth
*/
get_header(); ?>
<?php
if (have_posts()) {
...Wszystko, czego potrzebujesz, to komentarz na samym początku pliku, z „Nazwa szablonu:” i nazwą szablonu po nim. Otóż to! Przejdź do administratora, edytuj stronę i powinieneś zobaczyć opcję wyboru „Pełnej szerokości” jako szablonu.
Wspomniałem, że w WordPress 4.7 możesz określić, dla jakich typów postów chcesz, aby szablon strony był dostępny. Obecnie jest dostępny tylko dla stron, ale czy chcesz mieć również opcję tworzenia postów o pełnej szerokości? W takim przypadku dodaj „Typ postu szablonu:” w tym samym bloku komentarzy i zdefiniuj typy postów oddzielone przecinkami. Na przykład, aby udostępnić go zarówno dla postów, jak i stron;
<?php
/*
Template Name: Fullwidth
Template Post Type: post, page
*/
get_header(); ?>
<?php
if (have_posts()) {
...Edytuj post i powinieneś zobaczyć nowe metabox „Atrybuty postu”, w którym możesz wybrać szablon o pełnej szerokości. Miły!
Zmiana kodu w naszym szablonie strony
Teraz edytujmy szablon strony, aby faktycznie robił coś innego niż widok pojedynczej strony. Usuńmy prośbę o szablon paska bocznego: (skomentowałem to, aby było bardziej widoczne, ale możesz po prostu usunąć linię).
...
?><p><?php _e('No posts, sorry.', 'wptutorial'); ?></p><?php
}
//get_sidebar();
get_footer(); ?>Zróbmy jeszcze jedną rzecz, aby nasz szablon strony był łatwiejszy w stylizacji. Kiedy dodajesz CSS, często musisz wiedzieć, czy strona ma pasek boczny, czy nie, aby dostosować kolumny/układ. Pamiętasz body_class, który element ciała dostarcza całą masę przydatnych klas? Co się stanie, jeśli dodamy do treści niestandardową klasę, która powie nam, czy bieżąca strona ma pasek boczny, czy nie?
Filtruj nabody_class
Uwaga: być może zauważyłeś, że każda strona lub post korzystający z szablonu strony otrzymuje już określoną klasę treści; „page-template-” – w naszym przykładzie "page-template-pagetemplate-fullwidth". To dość długa klasa, a poza tym chcemy uczynić nasz motyw bardziej elastycznym – i zezwolić na pełną szerokość w innych szablonach poza tymi, które używają szablonu strony. Na przykład zazwyczaj nie chcesz mieć paska bocznego na pierwszej stronie, prawda?
Uwaga: to tylko dodaje klasę do ciała, dzięki czemu stylizacja staje się łatwiejsza, ale w rzeczywistości nie wyłącza wyjścia paska bocznego. Musisz pamiętać, aby usunąć to get_sidebar(), gdzie nie chcesz.
Dodajmy filtr do body_classdodawania niestandardowej klasy paska bocznego w naszym functions.php, aby później móc dodać do niej więcej w innych przypadkach, gdy nie chcesz tego paska bocznego. WordPress ma ładny tag warunkowy do sprawdzania, czy szablon strony jest w użyciu; is_page_template()gdzie umieszczasz nazwę szablonu strony jako parametr. Chcemy dodać klasę, jeśli to nieprawda, więc dodajemy odwrotność z „!”:
add_filter('body_class', 'wptutorial_body_class_filter');
function wptutorial_body_class_filter($classes) {
if (!is_page_template('pagetemplate-fullwidth.php')) {
$classes[] = 'has-sidebar';
}
return $classes;
}Najprawdopodobniej podczas tworzenia szablonów od czasu do czasu natkniesz się na szablony, do których nie chcesz dodawać klasy paska bocznego, a w miarę postępu dodaj te przypadki wewnątrz tego if. Na przykład, jeśli nie chcesz, aby klasa paska bocznego znajdowała się na stronie głównej, możesz dodać !is_front_page(). Spowoduje to dodanie klasy „has-sidebar” do wszystkich stron z wyjątkiem strony głównej i szablonu strony:
if (!is_front_page() && !is_page_template('pagetemplate-fullwidth.php'))Od Ciebie zależy, ile szablonów stron chcesz i co powinny zawierać. To był tylko prosty wstęp. Jeśli interesuje Cię, jak wysyłać zapytania do innych postów w szablonach stron, spójrz na następny krok.