Jak stworzyć niestandardowy szablon strony WordPress

Prawdziwie profesjonalna witryna WordPress prawie na pewno zawiera niestandardowe szablony stron. Rzeczywiście, wiele najpopularniejszych typów stron internetowych będzie opierać się na szablonach. Witryna z nieruchomościami będzie potrzebowała szablonu dla swoich domów, witryny e-commerce dla swoich produktów, witryny członkowskiej dla członków i tak dalej.

Szablon definiuje wygląd stron i postów w interfejsie użytkownika. Jest to plan, który mówi, jak i gdzie będziesz wyświetlać całą zawartość każdego postu. Na przykład wszelkie zmiany wprowadzone w szablonie przepisów w witrynie kulinarnej wpłyną na sposób wyświetlania wszystkich przepisów w interfejsie użytkownika.

Istnieją dwa rodzaje niestandardowych szablonów stron WordPress, przez które przejdę:

1. Szablon dla zwykłych stron
2. Szablon dla stron z jednym postem

Dlaczego potrzebujesz niestandardowego szablonu WordPress dla zwykłych stron

Szablon to łatwy sposób na zapewnienie, że podobne strony mają tę samą strukturę. Zamiast tworzyć układ dla każdej strony osobno, możesz po prostu utworzyć szablon raz i przypisać go do dowolnych stron. Te strony będą następnie podążać za szablonem.

Wyobraźmy sobie przykład. W witrynie kulinarnej możesz mieć wiele stron z poradami kulinarnymi, takimi jak „Jak zrobić doskonały makaron”, „Jak gotować jajka” i tak dalej.

Mam ebooka o gotowaniu, który chcę wyświetlić na wszystkich tych stronach. Zamiast edytować każdą stronę o tej samej treści (co zajęłoby dużo czasu) mogę po prostu utworzyć szablon raz i przypisać szablon do stron. W ten sposób każda strona będzie zawierała wezwanie do działania, aby pobrać mój ebook.

Na obu stronach powyżej możesz zobaczyć moje wezwanie do działania po prawej stronie. To dlatego, że przypisałem ten sam szablon do obu stron.

Dwa sposoby tworzenia niestandardowego szablonu strony WordPress

Istnieją dwa sposoby tworzenia niestandardowego szablonu strony WordPress:

• Trudna droga . Motywy automatycznie dostarczają pliki PHP, które definiują szablony w WordPress. Kiedy tworzysz niestandardowy typ postu (na przykład przepisy kulinarne), musisz albo edytować te pola PHP, albo utworzyć nowe, aby upewnić się, że Twoja witryna wyświetla Twoje posty.
• Łatwa droga. Do tworzenia szablonów możesz użyć wtyczki WordPress, takiej jak Toolset. Zestaw narzędzi tworzy szablony w kilka minut i bez kodowania. Ponadto dzięki blokom zestawu narzędzi możesz dodawać bloki do edytora WordPress Gutenberg z dynamiczną zawartością.

Poniżej pokażę Ci prosty sposób.

Najpierw stworzę szablon dla zwykłych stron, który będzie zawierał wezwanie do działania po prawej stronie.

Po drugie, stworzę szablon dla mojego niestandardowego typu postu z przepisami.

Jak stworzyć niestandardowy szablon strony WordPress dla zwykłych stron

Krok 1: Tworzenie struktury szablonu treści

Najpierw musisz stworzyć szablon treści dla swoich stron. Po zainstalowaniu zestawu narzędzi możesz otworzyć nowy szablon treści i rozpocząć dodawanie bloków.

Najpierw układam strukturę szablonu. Poniżej możesz zobaczyć, że dodałem własny blok siatki Toolset, który pozwala mi podzielić mój szablon na sekcje. Szablon podzieliłem na dwa i rozszerzyłem sekcję po lewej tak, aby zajmowała 75% strony.

Krok 2: Dodaj treść do szablonu

Teraz, gdy mam strukturę, muszę wstawić bloki z treścią, którą chcę wyświetlić. Po lewej dodaję treść posta. Wszystko, co muszę zrobić, to wstawić pojedynczy blok pola zestawu narzędzi, który pozwala mi wybrać dowolne źródło treści.

Poniżej wybieram treść posta po prawej stronie jako źródło bloku.

Po prawej stronie szablonu dodam wezwanie do działania. Wszystko, co muszę zrobić, to wybrać dowolne bloki w zależności od zawartości. Poniżej użyłem bloku nagłówka i bloku przycisku zestawu narzędzi. Do bloku przycisków dołączam również link do książki.

Krok 3: Stylizuj klocki

Kiedy połączysz WordPress z zestawem narzędzi, będziesz mógł stylizować bloki dodawane do szablonu. Jeśli zdecydujesz się tworzyć bloki „Trudna droga”, będziesz musiał polegać na swoich umiejętnościach kodowania, aby uzyskać dobrą stylizację.

Po kliknięciu bloku zobaczysz po prawej stronie szereg opcji stylizacji i ulepszenia szablonu.

W sekcji „Typografia” możesz zmienić:

• Czcionka
• Rozmiar czcionki
• Rozstaw
• Styl
• Kolor tekstu

To nie wszystko. W „Ustawieniach stylu” możesz również zmienić następujące elementy:

• Kolor tła
• Margines/wypełnienie
• Granica
• Cień pudełkowy

Poniżej dodałem nowy kolor tła dla wezwania do działania. Zwróć uwagę, że nie musisz kodować żadnych zmian, a raczej po prostu wybierasz kolory i dowolną inną stylizację.

Krok 4: Dostosuj szablon do różnych rozmiarów ekranu

Najprawdopodobniej budujesz swój szablon na laptopie lub komputerze stacjonarnym, ale pamiętaj, że Twoi użytkownicy mogą nie wyświetlać witryny na ekranie o tym samym rozmiarze. W rzeczywistości coraz większa większość będzie korzystała z tabletów lub urządzeń mobilnych.

Dlatego może być konieczne dostosowanie szablonu do każdego rozmiaru ekranu. Jest to dość łatwe dzięki zestawowi narzędzi i WordPress.

Na prawym pasku bocznym obok każdego elementu stylu znajduje się opcja przełączania między komputerem, tabletem i telefonem komórkowym.

Jak widać, kiedy przełączam się między opcjami, szablon dostosowuje się sam, dzięki czemu można sprawdzić, jak szablon będzie wyglądał na każdym urządzeniu.

Krok 5: Przypisz szablon do swoich stron

Teraz, gdy mam szablon, wystarczy przypisać go do odpowiednich stron. Gdy to zrobię, każda strona wyświetli ten sam szablon.

Wszystko, co muszę zrobić, to edytować każdą stronę i wybrać odpowiedni szablon treści.

W interfejsie zobaczę teraz szablon na dowolnej stronie, do której go przypiszę.

Dlaczego potrzebujesz niestandardowego szablonu strony WordPress dla pojedynczych postów

Oprócz tworzenia szablonów dla zwykłych postów najprawdopodobniej będziesz potrzebować również szablonów dla każdego z postów w niestandardowym typie postów.

Dla mojej witryny kulinarnej utworzyłem niestandardowy typ postu dla moich przepisów. Poniżej możesz zobaczyć jeden z moich przepisów na zapleczu. Zwróć uwagę na wszystkie niestandardowe pola, które dla niego utworzyłem, takie jak czas przygotowania, czas gotowania i obraz przepisu.

Muszę jeszcze przypisać szablon do moich przepisów. Zobacz, co się stanie, gdy spojrzymy na przepis bez szablonu na interfejsie.

Jak widać, żadne z niestandardowych pól nie pojawia się na interfejsie użytkownika. W rzeczywistości wszystko, co możesz zobaczyć, to główna treść posta, taka jak tytuł posta i treść posta. Dlatego szablon jest tak ważny dla Twoich pojedynczych postów, ponieważ pozwala wyświetlić całą zawartość, w tym pola niestandardowe.

Poniżej możesz zobaczyć dwa moje przepisy na front-end. Możesz teraz zobaczyć pola niestandardowe, ponieważ przypisałem do nich szablon.

Poniżej pokażę jak stworzyłam ten szablon dla moich przepisów.

Krok 1: Tworzenie szablonu

Pierwszą rzeczą, którą muszę zrobić, to stworzyć szablon, w którym dodam swoje treści. Mogę to zrobić z pulpitu nawigacyjnego zestawu narzędzi na zapleczu WordPressa.

Wybierając szablon w ten sposób automatycznie przypisuję szablon do wszystkich utworzonych przeze mnie receptur. Dlatego nie muszę wracać do każdego przepisu i ręcznie przypisywać szablon.

Krok 2: Dodanie treści do szablonu

Teraz w szablonie treści mogę zacząć dodawać i porządkować treść, tak jak w przypadku poprzedniego szablonu dla moich zwykłych postów.

Po raz kolejny mogę dodać blok Toolset Grid, aby stworzyć strukturę szablonu.

Teraz mogę zacząć dodawać bloki do mojej zawartości. Na przykład na moich przepisach mam obrazek w lewej kolumnie. Z zestawu bloków Gutenberga mogę dodać blok obrazu Toolset. Potrzebuję wersji bloku z zestawu narzędzi, ponieważ umożliwia ona dodawanie zawartości dynamicznej.

Treść dynamiczna oznacza, że ​​możesz utworzyć element, taki jak obraz, a dla każdego posta narysuje odpowiednią treść dla tego konkretnego postu. Na przykład zawartość dynamiczna oznacza, że ​​w moim przepisie na ciastka bananowe, zgadłeś, wyświetli się ciastko bananowe. W przeciwnym razie treść byłaby statyczna, a zamiast ciasta bananowego zobaczysz obraz, który wstawiam podczas tworzenia go w szablonie.

Korzystając z zestawu narzędzi i WordPressa, mogę wybrać dynamiczne źródło dla każdego z moich bloków, aby powiedzieć mu, co ma wyświetlić.

Na przykład utworzyłem nowy blok, aby dodać jedno z moich niestandardowych pól, czas przygotowania. Po dodaniu bloku mogę wybrać pole Czas przygotowania jako źródło bloku po prawej stronie. Ten blok jest również dynamiczny, ponieważ czas przygotowania będzie się różnić w zależności od wymagań receptury.

Istnieje wiele różnych typów bloków, które można dodać, w tym blok powtarzalnego pola, aby dodać wiele elementów (takich jak wiele wierszy przepisu), blok suwaka obrazu, blok YouTube i wiele innych.

Krok 3: Stylizuj swoje klocki

Tak jak w przypadku pierwszego szablonu dla zwykłych postów, mogę ostylować każdy z moich bloków.

Krok 4: Dostosuj szablon do różnych rozmiarów ekranu

Ponownie, podobnie jak w poprzednim szablonie, mogę dostosować strukturę do różnych rozmiarów ekranu.

Krok 5: Sprawdź, jak szablon wygląda z każdym Twoim postem

Na koniec możesz również wybrać przepis, który chcesz wyświetlić w swoim szablonie, aby sprawdzić, czy pasuje do nich wszystkich. Użyj menu rozwijanego u góry strony, aby przełączać się między postami.

Gdy będziesz gotowy, możesz sprawdzić swój szablon w interfejsie użytkownika.

I tak po prostu mam szablon dla moich przepisów. Teraz, kiedy tworzę zupełnie nowy przepis, od razu będzie on podążał za strukturą szablonu.

Zacznij tworzyć swój własny szablon strony WordPress już dziś

Teraz twoja kolej, aby zobaczyć, jak łatwo jest zbudować własny szablon strony WordPress. Wszystko, co musisz zrobić, to pobrać zestaw narzędzi, a następnie sprawdzić jego dokumentację, aby zobaczyć, jak szybko możesz utworzyć szablon dla swoich postów bez kodowania.