Jak tworzyć niestandardowe szablony stron WordPress

Szablony stron w motywach WordPress pomagają w określeniu układu stron w witrynie. Modyfikowanie tych szablonów może być jednak czasami onieśmielające, szczególnie dla początkujących. Na szczęście WordPress oferuje dość dużą elastyczność, jeśli chodzi o szablony stron, umożliwiając tworzenie niestandardowych szablonów stron w swoim motywie.

Tworzenie niestandardowych szablonów stron dla witryny umożliwia łatwe dostosowywanie układów i projektów witryny zgodnie z własnymi preferencjami. Umożliwia także dodawanie niestandardowych wymagań, takich jak używanie różnych nagłówków dla różnych stron. Zmiany te można w rzeczywistości zastosować na różnych stronach lub na jednej stronie.

W tym artykule przyjrzymy się, jakie są niestandardowe szablony stron WordPress, domyślna hierarchia szablonów stron, a także jak tworzyć niestandardowe szablony stron WordPress w swoim motywie.

Spis treści

Co to jest niestandardowy szablon strony WordPress

Hierarchia szablonów stron WordPress

Tworzenie niestandardowego szablonu strony

• Jak stworzyć globalny szablon niestandardowy
• Tworzenie szablonu pojedynczej strony

Wniosek

Co to jest niestandardowy szablon strony WordPress

Niestandardowy szablon strony WordPress to plik szablonu, który umożliwia stworzenie oddzielnego projektu i stylu witryny.

Na przykład, jeśli masz w swojej witrynie motyw do blogowania, możesz utworzyć dla niej niestandardowy szablon, który nie będzie renderował paska bocznego ani komentarzy. Możesz również utworzyć szablon dla stron, na których masz szablon renderujący treść w układzie ramkowym, a drugi w układzie o pełnej szerokości. Nie ma ograniczeń co do liczby szablonów stron, które możesz utworzyć.

Renderowanie stron jest kontrolowane przez plik page.php w WordPress. Ten plik stanowi zatem domyślną bazę do renderowania zawartości strony i znajduje się w katalogu głównym plików motywów, jak pokazano poniżej.

Jeśli istnieje więcej konkretnych szablonów stron, uruchamiana jest Hierarchia szablonów.

Hierarchia szablonów stron WordPress

Hierarchia szablonów stron określa, który plik szablonu wybiera WordPress podczas wyświetlania strony, w zależności od charakteru złożonego żądania oraz jego istnienia w motywie.

Domyślna hierarchia szablonów WordPress jest następująca:

Szablon strony : WordPress sprawdza szablon przypisany do strony i używa tego szablonu na stronie

page-{slug}.php : Jeśli do strony nie jest przypisany żaden szablon, WordPress sprawdza szablon ze ślimakiem na stronie i stosuje go, jeśli zostanie znaleziony.

Powiadomienie to część w adresie URL strony po nazwie domeny i można ją edytować. Poniżej znajduje się przykładowa ilustracja na ten temat.

page-{id}.php : WordPress sprawdzi następnie istnienie szablonu strony z identyfikatorem strony do renderowanej strony, jeśli nie zostanie znaleziony szablon z ślimakiem.

page.php : Jeśli nie zostanie znaleziony żaden szablon z identyfikatorem strony, WordPress użyje standardowego szablonu page.php do renderowania strony.

singular.php : w przypadku, gdy plik page.php nie zostanie znaleziony, WordPress użyje pliku singular.php niezależnie od typu posta.

index.php : Jeśli żaden z powyższych szablonów nie jest dostępny, WordPress domyślnie renderuje strony za pomocą pliku index.php.

Renderowanie stron w środowisku WordPress może zatem odbywać się za pomocą jednego z powyższych szablonów stron. W związku z tym do Ciebie należy określenie poziomu pierwszeństwa, jaki chcesz mieć.

Tworzenie niestandardowego szablonu strony

Tworzenie niestandardowych szablonów stron w Twoim motywie jest dość łatwe. Musisz jednak określić, czy szablony stron będą dotyczyć pojedynczej strony, czy dowolnej strony.

W tym przewodniku przyjrzymy się, jak ręcznie utworzyć globalny szablon strony w motywie Stax, a także pojedynczy szablon strony do jednej z naszych stron.

Jak stworzyć globalny szablon niestandardowy

Czasami chcesz utworzyć szablon strony, który może być używany globalnie na dowolnej stronie w Twojej witrynie.

Aby to zrobić, musisz najpierw zidentyfikować edytor tekstu, którego będziesz używać, taki jak Notatnik, Notatnik ++, wysublimowany tekst lub dowolny inny edytor według twoich preferencji.

Gdy to zrobisz, możesz rozpocząć tworzenie pliku szablonu, wykonując następujące czynności:

Krok 1: Utwórz nowy plik i dodaj następujący kod :

 <?php /* Template Name: PageWithNoFooter */ ?>

Zalecamy używanie nazwy szablonu, która nie jest używana w żadnych innych szablonach stron, które możesz mieć w swojej witrynie, a także nazwy, którą możesz łatwo zidentyfikować i powiązać ze stronami witryny.

Gdy to zrobisz, zapisz nowy szablon strony z rozszerzeniem .php. W naszym przypadku plik szablonu nazwiemy pagewithnofooter.php . Możesz użyć dowolnej nazwy według własnych preferencji, ale bardziej zalecane jest użycie nazwy podobnej do nazwy szablonu.

Krok 2: Dodaj żądany kod do pliku

W tym kroku możesz dodać preferowany kod do pliku, niezależnie od tego, czy jest to PHP, czy zarówno PHP, jak i HTML.

W celach ilustracyjnych, w naszym przypadku użyjemy zawartości domyślnego pliku right-sidebar.php w pliku pagewithnofooter.php, ale dostosujemy go i dodamy kod, aby renderować niestandardowy tekst powitalny HTML, a także wyłączyć stopkę. Jeśli używasz innego motywu WordPress, możesz również skopiować zawartość page.php w obrębie motywu lub dowolnego innego szablonu strony zdefiniowanego przez motyw, który może mieć Twój motyw.

Nasz kod będzie więc wyglądał następująco:

 <?php /*Template Name: PageWithNoFooter */ namespace Stax; use Stax\Customizer\Config; stax()->force_main_layout( 'right' ); get_header(); ?> <div <?php stax()->main_section_class(); ?>> <div class="svq-site-content"> <?php while ( have_posts() ) : the_post(); ?> <?php if ( 'yes' === stax()->get_option( Config::OPTION_SINGLE_SHOW_TITLE ) ) { stax()->get_template_part( 'template-parts/content/panel', get_post_type() ); } ?> <main class="svq-main-page"> <?php echo ' <H2>Welcome to my custom Template. You can use this template globally within your website</H2>'; ?> <?php stax()->get_template_part( 'template-parts/content/entry', get_post_type() ); ?> </main><!-- #primary --> <?php endwhile; ?> <?php get_sidebar(); ?> </div> </div> <?php //get_footer();

Krok 3: Prześlij szablon strony do plików motywu .

Za pomocą programu FTP, takiego jak Filezilla lub za pośrednictwem panelu hostingowego, prześlij niestandardowy plik do katalogu głównego plików motywów. W naszym przypadku będzie to albo w następujących ścieżkach katalogów:

i) wp-content > Motywy > Stax

ii) Zalecane: wp-content > Tematy > stax-child

Ma to zastosowanie podczas korzystania z motywu potomnego w witrynie, a motywem potomnym jest stax-child.

Zalecamy używanie motywu potomnego podczas dostosowywania szablonów stron lub innych dostosowań plików w motywie, aby uniknąć utraty dostosowań podczas aktualizacji motywu.

Krok 4: Utwórz nową stronę i przypisz do niej szablon „PageWithNoFooter”

Aby to osiągnąć, przejdź do sekcji Strony> Dodaj nowy w panelu WordPress i utwórz swoją stronę.

Po utworzeniu strony przypisz do niej szablon „PageWithNoFooter” i zapisz zmiany.

Poniżej znajduje się przykładowa ilustracja tego:

Teraz, po wyświetleniu podglądu strony w interfejsie, nasza strona nie będzie miała renderowanej stopki na twojej stronie. Będziesz także mieć niestandardowy kod HTML, który dodaliśmy.

Poniżej zrzut ekranu na ten temat:

Możesz użyć szablonu na dowolnej stronie, na której chcesz zastosować jego układ, lub na dowolnej stronie, na której nie chcesz mieć stopki.

Tworzenie szablonu pojedynczej strony

Niestandardowe szablony stron do pojedynczych stron są bardziej specyficzne dla strony. Jak wspomniano wcześniej, szablony te są brane pod uwagę do wyboru, jeśli do strony nie jest przypisany żaden „szablon strony”.

Jeśli chodzi o te szablony, możesz kierować na stronę według ślimaka lub identyfikatora strony. Ważne jest również, aby wziąć pod uwagę przyszłe perspektywy swojej witryny podczas określania, czy użyć sluga strony lub identyfikatora. Na przykład, jeśli zamierzasz przenieść swoją witrynę do innej domeny, użycie identyfikatora strony nie byłoby odpowiednie podczas tworzenia pliku szablonu. Zamiast tego użycie ślimaka byłoby uważane za lepszą opcję. Jeśli z drugiej strony Twoja witryna jest zarządzana przez wiele osób i uważasz, że istnieje możliwość, że mogą one zmienić informacje o ruchu strony, wówczas przy tworzeniu szablonu strony o wiele lepiej byłoby użyć identyfikatora strony.

W naszym przypadku tutaj utworzymy niestandardowy szablon strony dla naszej strony kontaktowej i wyłączymy stopkę ze strony. Aby stworzyć taki szablon, musisz wykonać następujące czynności:

Krok 1: Skopiuj zawartość page.php

W tym kroku musisz najpierw zlokalizować page.php w plikach motywu.

Po zlokalizowaniu pliku wybierz jego edycję i skopiuj jego zawartość.

Krok 2: Utwórz nowy szablon na stronie

W katalogu głównym plików motywu utwórz szablon strony do strony kontaktowej. Możesz użyć pliku page-{id}.php lub page-{slug}.php. W naszym przypadku tutaj użyjemy ślimaka, więc nazwiemy nasz szablon jako page-contact.php, ponieważ „kontakt” jest naszym ślimakiem strony, jak widać poniżej:

Poniżej znajduje się również ilustracja lokalizacji pliku:

Krok 3: Wklej zawartość pliku page.php

Będziesz teraz musiał wkleić zawartość pliku page.php, który skopiowaliśmy w kroku 1 powyżej, do naszego nowego pliku page-contact.php. Po wykonaniu tej czynności możesz dostosować plik, aby uwzględnić żądane zmiany w kodzie i zapisać zmiany. W naszym przypadku wyłączymy stopkę na stronie kontaktowej, więc nasz ostateczny kod będzie wyglądał następująco:

 <?php namespace Stax; get_header(); ?> <div <?php stax()->main_section_class(); ?>> <div class="svq-site-content"> <?php /** * Renders the single blog post template. * * @hooked stax_show_single - 10 * @includes template-parts/single.php */ do_action( 'stax_single' ); ?> </div> </div> <?php //get_footer();

Po wyświetleniu podglądu strony kontaktowej zdasz sobie sprawę, że strona nie zawiera stopki.

Poniżej znajduje się porównanie zrzutów ekranu na stronie na początku i po zastosowaniu nowego szablonu.

Strona kontaktowa ze stopką

Strona kontaktowa bez stopki

Wniosek

Tworzenie niestandardowych szablonów stron dla Twojej witryny jest stosunkowo łatwe. W tym przewodniku szczegółowo przyjrzeliśmy się, jak ręcznie tworzyć niestandardowe szablony w motywie WordPress. Użyliśmy tutaj darmowego motywu Stax jako przypadku użycia. Możesz jednak zastosować tę samą technikę we wszystkich innych motywach WordPress, które są zgodne ze standardami kodowania WordPress. Istnieją jednak inne sposoby tworzenia niestandardowych szablonów stron, takie jak używanie programów do tworzenia stron, takich jak Elementor.

Mamy nadzieję, że ten artykuł zawiera niezbędne informacje na temat ręcznego tworzenia niestandardowych szablonów stron. Zachęcamy do komentowania poniżej w przypadku jakichkolwiek pytań lub sugestii.