O autorze

Nick Schäferhoff jest przedsiębiorcą, sprzedawcą online i profesjonalnym blogerem z Niemiec. Kiedy nie tworzysz stron internetowych, nie tworzysz treści ani nie pomagasz swoim klientom… Więcej o Nick↬

Lubię myśleć o WordPressie jako o bramce do tworzenia stron internetowych. Wiele osób, które zaczynają korzystać z platformy, początkowo szuka jedynie wygodnego (i darmowego) sposobu na stworzenie prostej witryny internetowej, często z pomocą strony WordPress builder plugin. Coś w stylu „Spróbuję tylko raz”.

Jednak duża część użytkowników nie poprzestaje na tym. Zamiast tego są uzależnieni. Wymyśl więcej pomysłów. Eksperyment. Wypróbuj nowe wtyczki. Odkryj Firebug. Bum. Wkrótce nie ma już odwrotu. Czy to brzmi jak twoja historia? Jako użytkownik WordPressa naturalne jest, że chcesz mieć coraz większą kontrolę nad swoją witryną. Aby pragnąć niestandardowego projektu, niestandardowej funkcjonalności, niestandardowego wszystkiego.

Więcej informacji na temat SmashingMag:

• Jak utworzyć i dostosować motyw potomny WordPress
• Budynek Niestandardowa strona archiwum dla WordPressa
• Dostosowywanie archiwów WordPressa

Na szczęście WordPress jest stworzony właśnie do tego. Jego elastyczna struktura i podzielona architektura pozwala każdemu zmienić praktycznie wszystko w swojej witrynie.

Do najważniejszych narzędzi w dążeniu do pełnej kontroli nad witryną należą szablony stron. Pozwalają użytkownikom radykalnie zmienić projekt i funkcjonalność swojej witryny. Chcesz mieć niestandardowy nagłówek na swoją stronę główną? Gotowy. Dodatkowy pasek boczny tylko dla Twojej strony bloga? Nie ma problemu. Unikalna strona błędu 404? Być. Mój. Gość.

Jeśli chcesz wiedzieć, jak szablony stron WordPress mogą Ci w tym pomóc, czytaj dalej. Ale najpierw trochę informacji ogólnych.

Pliki szablonów w WordPress

O czym mówimy, gdy mówimy o szablonach w kontekście WordPress? Krótka wersja jest taka, że szablony to pliki, które mówią WordPressowi, jak wyświetlać różne typy treści.

Nieco dłuższa wersja: za każdym razem, gdy ktoś wyśle prośbę o wyświetlenie części Twojej witryny, platforma WordPress zorientuje się jaką treść chcą zobaczyć i jak powinna być renderowana ta konkretna część Twojej witryny.

W tym drugim przypadku WordPress spróbuje użyć najbardziej odpowiedniego pliku szablonu znalezionego w Twoim motywie. Który z nich jest ustalany na podstawie ustalonej kolejności, hierarchii szablonów WordPress. Możesz zobaczyć, jak to wygląda na poniższym zrzucie ekranu lub w tej interaktywnej wersji.

Hierarchia szablonów to lista plików szablonów znanych WordPressowi, które są uszeregowane w celu określenia, które plik ma pierwszeństwo przed innym.

Możesz myśleć o nim jak o drzewie decyzyjnym. Kiedy WordPress próbuje zdecydować, jak wyświetlić daną stronę, przechodzi w dół hierarchii szablonów, aż znajdzie pierwszy plik szablonu, który pasuje do żądanej strony. Na przykład, gdyby ktoś próbował uzyskać dostęp do adresu http://yoursite.com/category/news, WordPress szukałby odpowiedniego pliku szablonu w następującej kolejności:

Na dole hierarchii znajduje się indeks .php. Będzie używany do wyświetlania treści, które nie mają dołączonego bardziej szczegółowego pliku szablonu do swojej nazwy. Jeśli plik szablonu zajmuje wyższą pozycję w hierarchii, WordPress automatycznie użyje tego pliku w celu wyświetlenia danej treści.

Szablony stron i ich zastosowanie

W przypadku stron standardowy szablon jest zwykle trafnie nazwaną page.php. O ile nie jest dostępny bardziej szczegółowy plik szablonu (taki jak archive.php dla strony archiwum), WordPress użyje page.php do renderowania zawartości wszystkich stron w Twojej witrynie.

Jednak w wielu przypadkach może być konieczna zmiana projektu, wyglądu, stylu lub funkcjonalności poszczególnych części Twojej witryny. Tutaj do gry wchodzą szablony stron.Niestandardowe szablony stron pozwalają na indywidualizację dowolnej części witryny WordPress bez wpływu na resztę.

Być może już widziałeś to w działaniu. Na przykład wiele dzisiejszych motywów WordPress zawiera opcję zmiany strony do pełnej szerokości, dodania drugiego paska bocznego lub zmiany lokalizacji paska bocznego. Jeśli tak jest w twoim przypadku, prawdopodobnie zostało to zrobione za pomocą plików szablonów. Jest na to kilka sposobów i omówimy je później.

Najpierw jednak uwaga: ponieważ praca z szablonami wiąże się z edycją i zmianą plików w aktywnym motywie, zawsze warto pomysł, aby zastosować motyw potomny podczas dokonywania tego rodzaju dostosowań. W ten sposób nie ryzykujesz, że zmiany zostaną nadpisane po zaktualizowaniu motywu nadrzędnego.

Jak dostosować dowolną stronę w WordPressie

Istnieją trzy podstawowe sposoby korzystania z niestandardowego szablony stron w WordPress: dodawanie instrukcji warunkowych do istniejącego szablonu; tworzenie określonych szablonów stron, które zajmują wyższe pozycje w hierarchii; oraz bezpośrednie przypisywanie szablonów do określonych stron. Przyjrzymy się każdemu z nich po kolei.

Używanie tagów warunkowych w domyślnych szablonach

Łatwym sposobem wprowadzania zmian specyficznych dla strony jest dodanie wielu tagów warunkowych WordPress do szablon jest już używany. Jak sama nazwa wskazuje, znaczniki te służą do tworzenia funkcji, które są wykonywane tylko wtedy, gdy zostanie spełniony określony warunek. W kontekście szablonów stron byłoby to coś w rodzaju „Wykonuj tylko akcję X na stronie Y”.

Zwykle dodajesz tagi warunkowe do pliku page.php swojego motywu (chyba że oczywiście chcesz dostosować inną część witryny). Umożliwiają one wprowadzanie zmian ograniczonych do strony głównej, strony głównej, strony bloga lub dowolnej innej strony witryny.

Oto niektóre często używane tagi warunkowe:

Na przykład, po dodaniu do twojego page.php zamiast standardowego tagu get_header();, poniższy kod załaduje niestandardowy plik nagłówkowy o nazwie header -shop.php podczas wyświetlania strony http://yoursite.com/products.

Dobrym przykładem użycia w tym przypadku byłoby masz sklep w swojej witrynie i musisz wyświetlić inny obraz nagłówka lub dostosowane menu na stronie sklepu. Możesz następnie dodać te dostosowanie w header-shop.php, a pojawi się w odpowiednim miejscu.

Jednak tagi warunkowe nie są li cytowany na jednej stronie. Możesz podać kilka instrukcji pod rząd, na przykład:

W tym drugim przykładzie dwa warunki zmienią zachowanie różnych stron w Twojej witrynie. Oprócz ładowania wspomnianego wcześniej pliku nagłówkowego specyficznego dla sklepu, ładowałby teraz również header-about.php na stronie o identyfikatorze 42. Dla wszystkich innych stron obowiązuje standardowy plik nagłówkowy.

Aby dowiedzieć się więcej jeśli chodzi o stosowanie tagów warunkowych, zdecydowanie zalecamy następujące zasoby:

• Kodeks WordPress: tagi warunkowe
• ThemeLab: kompletny przewodnik po tagach warunkowych WordPress

Tworzenie plików specyficznych dla strony w hierarchii WordPress

Tagi warunkowe to świetny sposób na wprowadzenie mniejszych zmian w szablonach stron. Oczywiście można również tworzyć większe dostosowania, używając wielu instrukcji warunkowych jedna po drugiej. Uważam to jednak za bardzo kłopotliwe rozwiązanie i zamiast tego wybrałbym wyznaczone pliki szablonów.

Jednym ze sposobów na to jest wykorzystanie hierarchii szablonów WordPress. Jak widzieliśmy, hierarchia przejdzie przez listę możliwych plików szablonów i wybierze pierwszy, który będzie pasował. W przypadku stron hierarchia wygląda następująco:

• Niestandardowy szablon strony
• page- {slug} .php
• page- {id} .php
• page.php
• index.php

Na pierwszym miejscu są niestandardowe szablony stron, które zostały bezpośrednio przypisane do konkretnej strony. Jeśli taki istnieje, WordPress użyje go bez względu na to, jakie inne pliki szablonów są obecne. Za chwilę porozmawiamy o niestandardowych szablonach stron.

Następnie WordPress będzie szukał szablonu strony, który zawiera informacje o danej stronie. Na przykład, jeśli umieścisz plik o nazwie page-about.php w swoich plikach motywu, WordPress użyje tego pliku do wyświetlenia strony „Informacje” lub dowolnej strony, którą można znaleźć pod http://www.yoursite.com/about .

Alternatywnie możesz osiągnąć to samo, kierując identyfikator swojej strony. Więc jeśli ta sama strona ma identyfikator 5, WordPress użyje pliku szablonu page-5.php przed page.php, jeśli istnieje; to znaczy tylko wtedy, gdy nie jest dostępny szablon strony o wyższej randze.

(BTW, możesz znaleźć identyfikator każdej strony, najeżdżając kursorem myszy na jej tytuł w sekcji „Wszystkie strony” w Twoim WordPress -end. Identyfikator pojawi się w linku wyświetlanym przez Twoją przeglądarkę.)

Przypisywanie niestandardowych szablonów stron

Oprócz dostarczania szablonów w formie, której WordPress będzie używał automatycznie, jest to również możliwość ręcznego przypisywania niestandardowych szablonów do określonych stron.Jak widać z hierarchii szablonów, będą one nadrzędne w stosunku do każdego innego pliku szablonu obecnego w folderze motywu.

Podobnie jak w przypadku tworzenia szablonów specyficznych dla strony dla hierarchii WordPress, wymaga to dostarczenia pliku szablonu i następnie połącz go z dowolną stroną, na której chcesz go użyć. To drugie można zrobić na dwa różne sposoby, które być może już znasz. Jeśli tak nie jest, oto jak to zrobić.

1. Przypisywanie niestandardowych szablonów stron z edytora WordPress

W edytorze WordPress znajduje się pole opcji o nazwie „Atrybuty strony” z menu rozwijanym pod nagłówkiem „Szablon”.

Kliknięcie go spowoduje wyświetlenie listy dostępnych szablonów stron w Twojej witrynie WordPress. Wybierz żądaną stronę, zapisz lub zaktualizuj swoją stronę i gotowe.

2. Ustawianie niestandardowego szablonu za pomocą szybkiej edycji

To samo można osiągnąć bez wchodzenia do edytora WordPress. Przejdź do „Wszystkie strony” i najedź na dowolny element na liście. Pojawi się menu zawierające element „Szybka edycja”.

Kliknij je, aby edytować ustawienia strony bezpośrednio z listy. Zobaczysz to samo menu rozwijane, aby wybrać inny szablon strony. Wybierz jedną, zaktualizuj stronę i gotowe.

W końcu nie jest to takie trudne, prawda? Ale co, jeśli nie masz jeszcze niestandardowego szablonu strony? Jak to zrobić, aby Twoja witryna wyglądała dokładnie tak, jak chcesz? Nie martw się, o to właśnie chodzi w następnej części.

Przewodnik krok po kroku dotyczący tworzenia niestandardowych szablonów stron

Łączenie niestandardowych plików szablonów stron nie jest to trudne, ale oto kilka szczegółów, na które musisz zwrócić uwagę. Dlatego przejdźmy do tego procesu krok po kroku.

1. Znajdź domyślny szablon

Dobrym sposobem jest rozpoczęcie od skopiowania szablonu, który jest aktualnie używany przez stronę, którą chcesz zmodyfikować. Łatwiej jest modyfikować istniejący kod niż pisać całą stronę od zera. W większości przypadków będzie to plik page.php.

(Jeśli nie wiesz, jak dowiedzieć się, który plik szablonu jest używany na stronie, którą chcesz edytować, wtyczka What The File okażą się przydatne.)

Do demonstracji użyję motywu Dwadzieścia Dwanaście. Oto jak wygląda jego standardowy szablon strony:

Jak widać, nie ma tu nic nadzwyczajnego: zwykłe wywołania nagłówka i stopki oraz pętla w środku. Ta strona wygląda następująco:

2. Skopiuj i zmień nazwę pliku szablonu

Po określeniu domyślnego pliku szablonu nadszedł czas na wykonanie kopii. Wykorzystamy zduplikowany plik, aby wprowadzić żądane zmiany na naszej stronie. W tym celu będziemy musieli zmienić jego nazwę. Nie można mieć dwóch plików o tej samej nazwie, co jest mylące dla wszystkich.

Możesz nadać plikowi dowolną nazwę, o ile nie zaczyna się od żadnej z zarezerwowanych nazw plików motywu . Więc nie nazywaj go page-something.php ani nic innego, co sprawiłoby, że WordPress pomyślałby, że jest to dedykowany plik szablonu.

Sensowne jest użycie nazwy, która łatwo identyfikuje, jaki plik szablonu jest używany for, na przykład my-custom-template.php. W moim przypadku wybiorę custom-full-width.php.

3. Dostosuj nagłówek pliku szablonu

Następnie musimy powiedzieć WordPressowi, że ten nowy plik jest niestandardowym szablonem strony. W tym celu będziemy musieli dostosować nagłówek pliku w następujący sposób:

Nazwa pod „Nazwa szablonu” będzie wyświetlana pod „Stroną” Atrybuty ”w edytorze WordPress. Pamiętaj, aby dostosować go do nazwy szablonu.

4. Dostosuj kod

Teraz czas przejść do sedna i ziemniaków szablonu strony: kodu. W moim przykładzie chcę tylko usunąć pasek boczny ze strony demonstracyjnej.

Jest to stosunkowo łatwe, ponieważ wystarczy usunąć <?php get_sidebar(); ?> z mojego szablon strony, ponieważ to właśnie nazywa pasek boczny. W rezultacie mój niestandardowy szablon wygląda tak:

5. Prześlij szablon strony

Po zapisaniu dostosowanego pliku nadszedł czas, aby przesłać go do mojej witryny internetowej. Niestandardowe szablony stron można zapisać w kilku miejscach, aby były rozpoznawane przez WordPress:

• Twój aktywny (podrzędny) folder motywu
• Folder głównego motywu nadrzędnego
• Podfolder w jednym z nich

Osobiście lubię tworzyć folder o nazwie page_templates w moim motywie potomnym i umieszczać w nim dowolne niestandardowe szablony.Najłatwiej jest mi mieć przegląd moich plików i dostosowań.

6. Aktywuj szablon

Na koniec musisz aktywować szablon strony. Jak wspomniano wcześniej, odbywa się to w sekcji Atrybuty strony → Szablony w edytorze WordPress. Zapisz, wyświetl stronę i voilà! Oto moja dostosowana strona bez paska bocznego:

Nie jest to takie trudne, prawda? Nie martw się, szybko to zrozumiesz. Aby dać Ci lepsze wyobrażenie, do czego użyć tych szablonów stron, pokażę dodatkowe przypadki użycia (w tym kod) w pozostałej części artykułu.

Pięć różnych sposobów korzystania z szablonów stron

Jak już wspomniano, szablony stron można wykorzystywać do wielu różnych celów. Za ich pomocą możesz dostosować prawie wszystko na dowolnej stronie. Na drodze stoi tylko Twoja wyobraźnia (i umiejętności programowania).

1. Szablon strony o pełnej szerokości

Pierwszym przypadkiem, któremu się przyjrzymy, jest zaawansowana wersja szablonu demonstracyjnego, który utworzyliśmy powyżej. Tam już usunęliśmy pasek boczny, usuwając <?php get_sidebar(); ?> z kodu. Jednak, jak widać na zrzucie ekranu, nie powoduje to w rzeczywistości układu o pełnej szerokości, ponieważ sekcja treści pozostaje po lewej stronie.

Aby rozwiązać ten problem, musimy zająć się CSS, w szczególności ta część:

Atrybut width ogranicza element, który zawiera naszą zawartość do 65,1042% dostępnego miejsca . Chcemy to zwiększyć.

Jeśli jednak zmienimy to na 100%, wpłynie to jednak na wszystkie inne strony w naszej witrynie, co jest dalekie od tego, czego chcemy. Dlatego w pierwszej kolejności należy zmienić główną klasę div w naszym niestandardowym szablonie na inną, np. class="site-content-fullwidth”. Wynik:

Teraz możemy dostosować CSS dla naszej nowej klasy niestandardowej:

W rezultacie zawartość rozciąga teraz wszystko przez cały ekran.

2. Dynamiczna strona błędu 404 z obszarami widżetów

Strona błędu 404 to miejsce, w którym każda osoba próbuje uzyskać dostęp do strony w Twojej witrynie, która nie istnieje, czy to z powodu literówki, błędnego łącza, czy też zmienił się permalink do strony.

Pomimo faktu, że uzyskanie 404 nie jest lubiane przez wszystkich w Internecie, jeśli prowadzisz witrynę internetową, strona błędu 404 ma niemałe znaczenie. Jej zawartość może mieć decydujący wpływ na to, czy ktoś natychmiast opuści Twoją witrynę, czy zostanie w pobliżu i przejrzy inne treści.

Kodowanie od podstaw dostosowanej strony błędu jest uciążliwe, zwłaszcza jeśli nie masz pewności co do swoich umiejętności . Lepszym sposobem jest wbudowanie obszarów widżetów do szablonu, aby można było elastycznie zmieniać to, co jest tam wyświetlane, poprzez przeciąganie i upuszczanie.

W tym celu pobierzemy i wyedytujemy plik 404.php dostarczany z Twenty Twelve ( hierarchia szablonów, pamiętasz?). Jednak zanim cokolwiek tam zmienimy, najpierw utworzymy nowy widżet, wstawiając następujący kod do naszego pliku functions.php:

Powinno to wyświetlić nowo utworzony widżet na zapleczu WordPress. Aby upewnić się, że faktycznie pojawia się w witrynie, musisz dodać następujący wiersz kodu do swojej strony 404 w odpowiednim miejscu:

Po przesyłam szablon do mojej witryny, czas wypełnić mój nowy obszar widżetów:

Jeśli teraz spojrzę na stronę błędu 404, moje nowo utworzone widżety pojawią się tam:

3. Szablon strony do wyświetlania niestandardowych typów postów

Niestandardowe typy postów to świetny sposób na wprowadzenie treści, które mają własny zestaw punktów danych, projekt i inne dostosowania. Ulubionym przypadkiem użycia tego typu postów są elementy recenzji, takie jak książki i filmy. W naszym przypadku chcemy zbudować szablon strony pokazujący pozycje portfela.

Najpierw musimy stworzyć nasz niestandardowy typ posta (CPT). Można to zrobić ręcznie lub za pomocą wtyczki. Jedną z opcji wtyczek, które mogę z całego serca polecić, są typy. Umożliwia łatwe tworzenie niestandardowych typów postów i pól niestandardowych.

Zainstaluj i aktywuj typy, dodaj niestandardowy post, upewnij się, że jego slug to „ portfolio ”, dostosuj dowolne potrzebne pola (takie jak dodanie wyróżnionego obrazu ), dostosuj inne opcje i zapisz.

Teraz, gdy mamy typ posta w portfolio, chcemy, aby pojawił się w naszej witrynie. Pierwszą rzeczą, jaką zrobimy, jest utworzenie odpowiedniej strony.Pamiętaj, że jeśli wybierzesz „portfolio” jako fragment swojego CPT, strona nie może zawierać tego samego kodu. Poszedłem z moim clients-portfolio i dodałem też przykładowy tekst.

Po dodaniu kilku elementów w sekcji typu posty „portfolio” chcemy, aby pojawiały się one na naszej stronie tuż pod zawartość strony.

Aby to osiągnąć, ponownie użyjemy pochodnej pliku page.php. Skopiuj go, nazwij portfolio-template.php i zmień nagłówek na taki:

Jednak w tym przypadku będziemy musieli wprowadzić kilka zmian w oryginalnym szablonie. Kiedy spojrzysz na kod page.php, zobaczysz, że wywołuje on w środku inny plik szablonu, nazwany content-page.php (gdzie jest napisane <?php get_template_part( ‘content’, ‘page’ ); ?>). W tym pliku znajdujemy następujący kod:

Jak widać, to tutaj jest wywoływany tytuł strony i zawartość. Ponieważ zdecydowanie chcemy, aby były one dostępne w naszej witrynie z portfolio, będziemy musieli skopiować niezbędne części tego szablonu do naszego pliku page.php. Wynik wygląda następująco:

Aby przenieść elementy portfolio na naszą stronę, dodamy następujący kod tuż pod wywołaniem the_content().

Spowoduje to wyświetlenie CPT na stronie:

Jestem pewien, że wszyscy zgadzamy się, że wygląda mniej niż gwiazdowo, więc niektóre style są w porządku.

O wiele lepiej, nie sądzisz?

A oto cały kod szablonu strony portfolio:

4. Strona współautora z obrazami awatara

Następnym krokiem w naszym szablonie strony jest strona współtwórcy. Chcemy ustawić listę autorów na naszej stronie, zawierającą ich zdjęcia i liczbę postów, które opublikowali pod ich nazwiskiem. Wynik końcowy będzie wyglądał następująco:

Ponownie zaczniemy od naszego pliku hybrydowego sprzed poprzedniej i dodamy do niego kod listy współpracowników. Ale co, jeśli nie wiesz, jak stworzyć coś takiego? Bez obaw, możesz sobie poradzić z inteligentną kradzieżą.

Widzisz, domyślny motyw Dwadzieścia czternaście zawiera domyślnie stronę współtwórcy. Możesz znaleźć jego szablon w folderze szablonów stron o nazwie contributors.php.

Jednak podczas przeglądania pliku znajdziesz w nim tylko następujące wywołanie: twentyfourteen_list_authors();. Na szczęście jako zapalony użytkownik WordPressa doszedłeś do wniosku, że prawdopodobnie odnosi się to do funkcji w pliku function.php firmy Twenty Fourteen i masz rację.

Z tego, co tam znajdujemy, interesuje nas część to:

Ponownie dodamy go poniżej wywołania dla the_content() z następującym wynikiem:

Teraz trochę stylizacji:

I to powinno być na tyle. Dzięki dwudziestu czternastu!

5. Dostosowana strona archiwum

Twenty Twelve zawiera własny szablon stron archiwum. Zacznie działać, na przykład, gdy spróbujesz wyświetlić wszystkie poprzednie posty z określonej kategorii.

Jednak chcę czegoś bardziej podobnego do tego, co zrobił Problogger: strony, która pozwala ludziom odkryć dodatkowe zawartość mojej witryny na kilka różnych sposobów. To znowu jest zrobione za pomocą szablonu strony.

Pozostając przy naszym mieszanym szablonie z wcześniejszych czasów, dodamy poniżej pod wywołaniem the_content():

Poza tym odrobina stylu dla paska wyszukiwania:

Wynik powinien wyglądać mniej więcej tak:

Dla porządku, oto cały plik:

Nie zapomnij przypisać go do strona!

Szablony stron WordPress w pigułce

Na drodze do opanowania WordPressa nauka korzystania z szablonów stron jest ważnym krokiem. Dzięki nim dostosowywanie witryny jest bardzo, bardzo łatwe i pozwala przypisać unikalną funkcjonalność i projekt do dowolnej liczby lub kilku stron. Od dodawania obszarów widżetów, przez pokazywanie niestandardowych typów postów, po wyświetlanie listy autorów witryny – możliwości są praktycznie nieograniczone.

To, czy używasz tagów warunkowych, wykorzystujesz hierarchię szablonów WordPress, czy tworzysz pliki szablonów specyficzne dla strony, zależy wyłącznie od Ciebie i tego, co chcesz osiągnąć. Zacznij od małych rzeczy i pracuj nad bardziej skomplikowanymi rzeczami. Nie minie dużo czasu, zanim każda część Twojej witryny WordPress odpowie na każdy telefon.