Ta lekcja samouczka motywu WordPress dla początkujących jest kontynuowana, dodając podstawowy, wymagany kod do konfiguracji motywu. Uczymy się dodawać wsparcie dla motywów, w wyniku czego funkcja polecanych obrazów WordPressa zostaje aktywowana. W tej lekcji naprawimy również tytuł strony głównej, stosując nasz pierwszy filtr.
Będziemy pracować głównie w functions.phppliku, który dodaliśmy w poprzedniej lekcji. Na koniec dodamy kod do wyświetlania polecanych obrazów w naszych szablonach.
Konfiguracja motywu
Wszystkie motywy wymagają kodu, aby go skonfigurować, mówiąc WordPressowi, aby aktywował określoną funkcjonalność. Obejmuje to aktywację menu, widżetów, tłumaczenia i tak dalej. Zwykle robi się to w „funkcji motywu konfiguracji", zwykle podpiętej pod wygodną nazwą hooka after_setup_theme. W przypadku niektórych konkretnych rzeczy musimy użyć inicjującego hooka WordPressa o nazwie init.
Pisanie niezbędnego kodu konfiguracji motywu dlaafter_setup_theme
Skonfigurujmy taką „funkcję motywu konfiguracji” w naszym functions.php, podpiętym do after_setup_theme:
add_action('after_setup_theme', 'wptutorial_setup_theme');
function wptutorial_setup_theme() {
}Wewnątrz tej funkcji dodamy kilka popularnych i przydatnych funkcji konfiguracyjnych dla motywów WordPress. Umieść wszystkie poniższe fragmenty kodu w swojej funkcji konfiguracji.
Najpierw musimy zdefiniować maksymalną szerokość obrazów i embedów (takich jak filmy). Dzięki temu autorzy wstawiają do postów duże obrazy, które mają określoną szerokość. Ustawiłem go na 840 pikseli (ponieważ chcę mieć miejsce na pasek boczny), ale możesz to dostosować do własnych upodobań.
$GLOBALS['content_width'] = 840;Powinniśmy również poinformować WordPressa, że motyw można przetłumaczyć i gdzie może szukać plików do tłumaczenia. Szczegółowo omówię tłumaczenie motywu WordPress w następnym kroku w tej serii samouczków tematycznych.
load_theme_textdomain('wptutorial', get_stylesheet_directory(). '/lang');Zwróć uwagę na użycie nowej funkcji, aby uzyskać katalog motywu, get_stylesheet_directory(). Jest to bardzo podobne do tego, z get_stylesheet_directory_uri()którym spotkaliśmy się w poprzednim kroku, ale tutaj potrzebujemy ścieżki względnej, a nie adresu URL.
Następnie musimy dodać kilka „obsług motywów”, które aktywują funkcjonalność WordPress, która nie jest domyślnie aktywowana.
To była cała masa add_theme_supporttelefonów! Jak sama nazwa wskazuje, add_theme_supportmówi WordPressowi, aby aktywował funkcje, które nie są domyślnie aktywowane. Na przykład polecane obrazy („post-miniaturki”), obsługa tagów HTML5 i funkcja niestandardowego logo WordPress w Customizer (dostosuj żądany obraz logo, jeśli chcesz!).
Istnieje wiele innych fajnych funkcji, więc zachęcam do przejrzenia dokumentacji add_theme_support. Na przykład istnieje całkiem nowy, title-tag, który obsługuje tag title. Pominąłem to w tym samouczku, ponieważ dodaliśmy już header.phpręcznie tag tytułu.
Pamiętaj, że jeśli dodasz obsługę title-tag, powinieneś usunąć tag tytułu z pliku nagłówka, aby uniknąć zduplikowanych tagów tytułu.
Na koniec dodajemy kilka add_theme_supportdla nowego Gutenberga w WordPress. Dodamy obsługę szerokich sekcji, aktywując funkcjonalność stylów blokowych i obsługę responsywnych osadzeń:
add_theme_support('wp-block-styles');
add_theme_support('align-wide');
add_theme_support('responsive-embeds');Wynik końcowy
Oto ostateczna funkcja konfiguracji w naszym functions.php:
Po zapisaniu powinieneś teraz móc dodawać polecane obrazy do postów w admin! Dodajmy jeszcze jedną poprawkę motywu w naszym functions.php, zanim dodamy polecane obrazy do naszych szablonów; pamiętasz, że wp_titlew naszym header.phpdomyślnie nie możesz wybić niczego na pierwszej stronie? Naprawmy to.
Dodawanie filtra dowp_title
Dodajmy naszą pierwszą właściwą funkcję modyfikującą filtr, używając add_filter(). Filtr, do którego się podłączymy, ma taką samą nazwę jak funkcja, której użyliśmy w WordPressie do dynamicznego pobierania tytułu strony; wp_title. To, co naprawimy, to upewnienie się, że tytuł nie jest pusty na stronie głównej – co jest domyślne w WordPressie. Gdy na stronie głównej chcemy, aby była wypełniona nazwą witryny WordPress.
Pamiętaj, aby zawsze zwracać przefiltrowaną zmienną w funkcjach filtrujących! Wszystkie filtry modyfikują zmienną, a jeśli nic nie zwrócisz, zmienna staje się niezdefiniowana. Może to powodować wiele problemów. Aby uzyskać więcej informacji na temat filtrów, spójrz na mój post wyjaśniający wszystko o haczykach i filtrach.
Wiedząc, kiedy dostosować tytuł
Chcemy dostosować zmienną title tylko wtedy, gdy jesteśmy na pierwszej stronie. W przypadku wszystkich innych stron chcemy zostawić go w spokoju (po prostu zwróć go bez zmian). Ale skąd wiemy, kiedy jesteśmy na pierwszej stronie?
Możemy skorzystać z tagów warunkowych WordPressa, czyli całej gamy przydatnych funkcji, które zwracają prawdę lub fałsz na podstawie warunku. Są one najczęściej używane, aby zapytać, czy jesteśmy na określonej stronie lub szablonie. Możemy po prostu zapytać „Czy jesteśmy na pierwszej stronie?”. Jeśli ta metoda zwróci true, dopiero wtedy zmodyfikujemy zmienną tytułową.
Warto zauważyć, że istnieją dwa tagi warunkowe dla strony głównej, a mianowicie is_home()i is_front_page().Te różnią się w zależności od ustawienia „Czytanie” – niezależnie od tego, czy Twoja strona główna wyświetla najnowsze posty, czy jest ustawiona na stałą stronę. Jeśli postępujesz zgodnie z tym samouczkiem z zupełnie nową instalacją WordPress z ustawieniami domyślnymi, użyjesz is_front_page().
Uzyskiwanie nazwy witryny WordPress
Teraz wiemy, jakiego filtra użyć i jak upewnić się, że zmienimy tytuł tylko wtedy, gdy jesteśmy we właściwym miejscu. Ale jaki powinien być tytuł? Zwykle tytułem strony głównej będzie nazwa Twojej witryny WordPress. Ale jak otrzymujemy te informacje?
Do pobierania informacji o aktualnej instalacji WordPressa korzystamy z bloginfo()funkcji. Jako parametr prosimy o zwrócenie nazwy strony, co odbywa się poprzez ustawienie parametru na ‘ name‘. A ponieważ jest to filtr i musimy go zwrócić, a nie powtarzać, używamy jego siostrzanej metody get_bloginfo(). Wywołanie bloginfo()zawsze spowoduje wyjście echa.
add_filter('wp_title', 'wptutorial_title_filter');
function wptutorial_title_filter($title) {
if (is_front_page()) {
return get_bloginfo('name');
}
return $title;
}Jeśli odświeżysz swoją stronę główną, powinieneś zobaczyć, że nazwa Twojej witryny pojawia się w <title>tagu (i w zakładce przeglądarki)! Nasz filtr ma wpływ tylko na stronę główną, więc wszelkie inne strony, takie jak pojedynczy post, powinny nadal zwracać to samo, co poprzednio; tytuł posta.
Wyprowadzanie polecanych obrazów w plikach szablonów
Wcześniej, gdy konfigurujemy obsługę motywów, dodaliśmy obsługę polecanych obrazów. Po aktywacji możemy teraz wyświetlać te obrazy w naszych szablonach. Zróbmy to teraz!
Otwórz się index.phpi znajdź dla nich miejsce w pętli. Zdecydowałem się umieścić go po tytule, ale od Ciebie zależy, gdzie chcesz. Używasz tej funkcji the_post_thumbnail()do wyprowadzania obrazu. Zaleca się najpierw sprawdzić, czy post ma w ogóle wyróżniony obraz, co robimy za pomocą has_post_thumbnail().
Jeśli Twój post nie zawiera polecanego obrazu, po tytule nic nie będzie wyświetlane. Jeśli jednak ustawisz polecany obraz na jednym ze swoich postów, the_post_thumbnail()wyświetli <img>tag z wybranym obrazem. Ta funkcja akceptuje dodatkowe parametry. Na przykład możesz zdefiniować rozmiar obrazu, którego chcesz użyć, i kontrolować atrybuty dodawane do obrazu. Jak zwykle zachęcam do szybkiego zapoznania się z dokumentacją i dostosowania się do własnych upodobań.
Dokumentacja dotycząca zastosowanych metod
- add_action
- load_theme_textdomain
- get_stylesheet_directory
- add_theme_support
- dodaj_filtr
- is_front_page
- get_bloginfo
- has_post_thumbnail
- miniatura_postu