Szablony twojego motywu na WordPress – hierarchia i struktura

4 min czytania
Szablony twojego motywu na WordPress – hierarchia i struktura

Każdy programista powinien wiedzieć, że struktura tworzonych przez niego rozwiązań powinna być intuicyjna. Tak samo jest w przypadku struktury folderu z motywem dla WordPressa. Dlatego warto pamiętać o tym jak powinniśmy budować folder z naszym motywem.

Jak wygląda struktura motywu WordPress?

Twórcy WordPressa rekomendują, by organizacja plików w folderze z naszymi szablonami, była ustandaryzowana, tak jak w przypadku ich autorskich motywów, takich jak np.: Twenty Twenty-One, i wyglądała następująco:

  • assets
    • css
    • images
    • js
    • inc
  • template-parts
    • footer
    • header
    • navigation
    • page
    • post
  • 404.php
  • archive.php
  • comments.php
  • footer.php
  • frontpage.php
  • functions.php
  • header.php
  • index.php
  • page.php
  • README.txt
  • rtl.css
  • screenshot.png
  • search.php
  • searchform.php
  • sidebar.php
  • single.php
  • style.css

Folder assets w motywie WordPress

Dzięki takiemu podziałowi elementy, które są dołączane do głównych plików szablonów, są umieszczone w oddzielnym folderze – assets.

  • assets/css – to folder zawierający pliki styli dla Twoich szablonów.
  • assets/js – to folder zawierający pliki ze skryptami obsługującymi Twoje szablony.
  • assets/images – w tym miejscu możesz umieścić wszelkie materiały graficzne wykorzystywane przez motyw.
  • assets/inc – w tymi miejscu możesz umieścić pozostałe pliki, które są wykorzystywane przez szablony np.: własne bloki gutenberg lub inne niestandardowe elementy, które mogą być dołączane za pomocą pliku functions.php.

Folder template-parts w motywie WordPress

Natomiast wewnątrz folderu template-parts powinieneś umieścić każdy element, który jest dołączany do szablonów Twojej strony. Będą to:

  • nawigacja – czyli kontener z kodem generującym menu (może być ich kilka, w zależności od potrzeb),
  • sidebar (kontenery, w których często jest definiowana przestrzeń dla widgetów np: wyszukiwarka, zapis do newslettera, polecane lub najnowsze artykuły),
  • stopka (kontener na mniej ważne linki lub widgety zawierające dane o autorze strony),
  • zawartość szablonu page czy post (kontenery, w których możemy zdefiniować kształt podstawowych postów WordPressa)

Pozostałe pliki w motywie WordPress

Pozostała zawartość folderu z motywem jest dość generyczna. Style.css i screenshot.png zostały omówione w artykule Jak stworzyć swój własny motyw? Dlatego w tym miejscu omówimy po krótce pozostałe. Szczegółowe opisy pojawią się wkrótce w ramach kontynuacji serii wpisów o tworzeniu motywów na WordPressie.

  • archive.php – to wspólny szablon, odpowiedzialny za wyświetlanie postów i elementów z nimi związanych. Powinien pozwalać na wyświetlanie archiwum dla autora, kategorii, daty, tagu i taksonomii.
  • comments.php – ten plik odpowiedzialny jest za wyświetlanie dodanych komentarzy do Twoich wpisów.
  • footer.php – ten plik odpowiedzialny jest za powtarzalną sekcję stopki, powinien zawierać wywołanie funkcji wp_footer();
  • front-page.php – ten szablon odpowiada za stronę główną, jednak nie należy jej mylić z szablonem home.php, który odpowiada za listowanie najnowszych wpisów i często służy jako strona główna bloga.
  • functions.php – w tym miejscu powinieneś definiować dodatkowe, unikalne funkcje Twojego motywu np.: dodatkowe elementy w panelu dostosuj (customizer), wykorzystywane przez Twój theme, ale też w tym miejscu rejestrujemy menu czy też wspierane typy postów.
  • header.php – jeden z ważniejszych szablonów, to właśnie w nim zwykle definiowany jest początek dokumentów HTML z sekcją <head>, która powinna zawierać wywołanie funkcji wp_head();, i początek sekcji <body>.
  • index.php – to ostateczny plik wynikowy, jeśli nie zostały zdefiniowane szablony dla poszczególnych typów postów. W przypadku, gdy każdy typ postu jest obsługiwany przez dedykowane szablony, ten plik może nie zawierać instukcji poza: „<?php”
  • page.php – szablon odpowiedzialny za wyświetlanie zawartości stron. W przypadku pominięcia tego szablonu można wykorzystać w tym samym celu singular.php lub w ostateczności index.php
  • search.php – szablon, w którym powinieneś umieścić listing elementów na podstawie formularza wyszukiwania.
  • searchform.php – ten szablon powinien zawierać Twój własny formularz wyszukiwania, którego wyniki prezentowane będą na stronie wykorzystującej search.php
  • sidebar.php – sidebar, jak nazwa wskazuje to boczna część strony, jednak wszystko zależy od Twojej inwencji twórczej. Zwykle zawiera przestrzeń do umieszczania widgetów.
  • single.php – w tym szablonie obsługiwane są wszystkie typy wpisów, w przypadku pominięcia go, wykorzystywany jest singular.php lub w ostateczności index.php.
  • 404.php – szablon strony błędu z kodem 404 – podobny szablon możemy utworzyć o nazwie 403.php do obsługi błędu 403.

Taka zawartość motywu pozwala obsłużyć Ci wszystkie typy postów oraz stron. Jednak jeśli chcesz zrobić maksymalnie prosty motyw, to możesz wewnątrz pliku index.php zamieścić odpowiednie instrukcje warunkowe, które obsłużą każdy typ postu.

Jednak jeśli chcesz obsługiwać wszystkie typy postów, to sugeruję Ci wykorzystywać szablony: archive, single, page, home i front-page. Jeśli chcesz poznać pełną hierarchię motywów WordPress to zachęcam Cię do odwiedzenia wphierarchy.com.

31 marca, 2022 | Ten od WordPressa | WordPress Developer