Pliki szablonu WordPress

Pliki szablonu WordPress. Projektując motyw do WordPress dobrze jest trzymać się pewnych standardów. Dobra organizacja, czy to w kodzie motywu, czy w plikach na serwerze owocuje późniejszymi oszczędnościami w postaci szybszej i łatwiejszej modernizacji strony.

Korzystając z CMSa, takiego jak WordPress, takich „od górnych” zasad jest trochę więcej – aby nasza strona płynnie komunikowała się z panelem administracyjnym musimy poznać przynajmniej te najważniejsze.

W poprzednim wpisie dotyczącym tworzenia motywów do WordPress, poznaliśmy pliki niezbędne do uruchomienia motywu. W tym wpisie zajmiemy się plikami motywu WordPress trochę dokładniej – poznamy te najważniejsze, odpowiadające za wyświetlanie kluczowych sekcji na stronie, oraz kilka opcjonalnych, które pozwolą na jeszcze lepsze spersonalizowanie Twojej witryny opartej o WordPress.

Pliki szablonu WordPress

Każdy motyw w WordPress posiada swój własny katalog usytuowany gdzieś w folderze wp-content/themes. Nazwa katalogu powinna być w miarę prosta, nie powinna zawierać spacji, zaczynać się od cyfry, czy zawierać polskich znaków. W katalogu głównym motywu zwykle znajdziemy wszystkie najważniejsze pliki ale nie jest to regułą. Niektóre bardziej złożone motywu mogą korzystać z bardziej złożonej struktury katalogów, oraz dodatkowych rozwiązań uzupełniających te dostarczone z WP.

Struktura drzewa katalogów w motywie WP wygląda następująco

• root (katalog główny instalacji WordPress)
  • wp-includes
  • wp-admin
  • wp-content
    • languages (pliki językowe z tłumaczeniami)
    • plugins (zainstalowane wtyczki)
    • uploads (biblioteka mediów)
    • themes (zainstalowane motywy)
      • nazwa_motywu (katalog, w którym znajdują się wszystkie pliki motywu)
        • style.css (wymagany plik motywu)
        • index.php (opcjonalny plik motywu)

Nas interesuje wyłącznie to, co znajduje się w katalogu wp-content. Pozostałe katalogi na tym poziomie drzewa powinny być dla nas nietykalne – wszelkie zmiany w tych plikach są bardzo ryzykowne i zostaną utracone przy pierwszej aktualizacji WP.

Najważniejsze pliki szablonu WordPress

Motyw zbudowany dla WordPress może się składać minimalnie z dwóch plików – style.css, oraz index.php.

Plik index.php to drugi bardzo ważny plik motywu WordPress. Właściwie, mając odpowiednio napisaną strukturę strony w tym pliku i arkusz styli CSS (style.css) jesteśmy w stanie uruchomić pełnoprawną stronę niczym nie odbiegającą od tych zbudowanych na kilkudziesięciu plikach. Różnica polegałaby wyłącznie na tym, że musielibyśmy więcej i częściej posiłkować się instrukcjami warunkowymi, żeby lepiej spersonalizować wyświetlanie treści na podstronach. Oczywiście takie podejście nie jest polecane. Znacznie łatwiej edytuje się krótkie pliki, a dzięki wyspecjalizowanej i modularnej budowie możliwe będzie ich wykorzystanie w kolejnych projektach.

index.php możemy potraktować jako nadrzędny plik, w którym znajdują się instrukcje wczytujące pozostałe składowe bloga (header, sidebar, footer), oraz główna pętla wyświetlająca wpisy bloga. Jeżeli nie ustaliliśmy inaczej, to index.php będzie wykorzystany jako pierwszy po przejściu na stronę główną bloga.

Hierarchia plików motywu w WordPress

Tutaj dochodzimy do bardzo ważnej kwestii, jaką jest hierarchia plików w motywie WordPress. WordPress posiada wbudowany mechanizm przeszukiwania i wczytywania odpowiednich plików motywu w zależności od tego co ma zostać wyświetlone (strony, wpisy, strony archiwów, autorów itd.), oraz jakie pliki są obecne w aktywnym motywie. Innymi słowy niektóre pliki mają pierwszeństwo użycia przed innymi w zależności od tego co ma zostać wyświetlone. Najlepiej sam przeanalizuj schemat hierarchii plików:

Jak korzystać z diagramu hierarchii plików

Odszukaj na powyższym schemacie plik index.php – to ten najdłuższy pionowy blok, pierwszy od prawej strony. Natomiast, wszystkie bloki oznaczone ciemnym, grafitowym kolorem, znajdujące się po lewej stronie, symbolizują treści, które mogą zostać wyświetlone przez WP, czyli np. strona główna (Site Front Page), pojedyncza strona (Singular Page → Static Page), archiwum (Archive Page), post na blogu (Singular Page → Single Post Page) itd.

Teraz, wyobraź sobie sytuację, w której twój motyw posiada tylko plik index.php (no i oczywiście style.css).

W zależności od tego, co ma zostać wyrenderowane – strona główna, pojedyncza strona, archiwum, czy post na blogu, WordPress dobierze odpowiednią ścieżkę i spróbuje (patrząc na diagram w kolejności od lewej do prawej) wybrać najbardziej odpowiedni plik do danego zadania – pierwszy napotkany na swojej ścieżce.

Zauważ, że wszystkie ścieżki kończą się na pliku index.php, oznacza to tyle, że ten plik będzie brany w ostateczności do wyrenderowania danej strony nie zależnie od typu treści.

Hierarchii plików to potężny mechanizm, dzięki któremu możemy w bardzo łatwy sposób zmienić sposób prezentacji treści na naszej stronie w zależności od jej typu. Pozwoli to na uatrakcyjnienie, oraz wyróżnienie najważniejszych treści.

W większości motywów, obok index.php pojawia się również single.php. Jest to plik, który odpowiada za wyświetlenie pojedynczego wpisu. Bardzo często jest to kopia index.php ale z drobnymi różnicami – przeważnie wzbogacona o treści charakterystyczne dla blogów. Dodawane są tutaj informacje na przykład o dacie publikacji, autorze, czy choćby moduł dyskusji, które na stronach statycznych są raczej zbędne.

Nagłówek, stopka, panel boczny

Mając już dwa pliki – index.php i single.php, które pokrywają się w jakichś 95%, przyszedł czas na poznanie podstawowych składowych szablonów w motywie WP. I tak aby nie powielać tego samego kodu w różnych miejscach kod szablonu strony możemy podzielić na bloki logiczne dzięki użyciu dodatkowych plików – header.php, footer.php, oraz sidebar.php.

Warto wiedzieć, że możliwe jest także tworzenie dodatkowych wersji tych plików, w razie gdyby potrzebne było użycie innego kodu dla poszczególnych stron.

Dzięki użyciu tych plików, ewentualne zmiany w kodzie np. w stopce strony wiązać się będą tylko z jednym plikiem.

Standardowo, każdy motyw WP można podzielić na następujące bloki logiczne:

• Header (header.php) – tutaj powinno znaleźć się wszystko od początku struktury html, łącznie z deklaracją dokumentu HTML, cała sekcja <head>, aż do początku sekcji <body> – zawsze. Zwykle umieścić tutaj można jeszcze górne logo, nawigację, kod slidera. Czasem można znaleźć tutaj wszystko, aż do głównej sekcji strony, w której znajduje się lewe menu nawigacyjne, lub właściwa zawartość strony, jak np. pętla wyświetlająca wpisy, chociaż nie jest to polecane zwłaszcza jeżeli planujemy później dodać jakieś statyczne strony z innym layoutem.
• Content (index.php, single.php, page.php, category.php, author.php, search.php, itd.) – w tym bloku, umieszcza się pętlę wyświetlającą wpisy, główną treść witryny. W tym pliku umieszczamy instrukcje dołączające pozostałe składowe motywu (header, sidebar, footer).
• Footer (footer.php) – stopka, czyli praktycznie wszystko to, co znajduje się na dole witryny – informacje o prawach autorskich, rok założenia strony, rzadziej dolne menu nawigacyjne, dolne widgety.
• Sidebar (sidebar.php) – Jak nazwa wskazuje, umieszcza się w nim wszystko to, co ma znaleźć się w bocznej kolumnie np. z widgetami, menu nawigacyjnym.

Odpowiednio do każdego z wymienionych wyżej plików istnieje specjalna instrukcja, która wczyta odpowiednią sekcję na stronie:

• get_header() – dołącza plik szablonu nagłówka z aktualnego katalogu motywu. Jako parametr może przyjąć nazwę nagłówka, domyślnie (bez parametru) szuka pliku o nazwie header.php.
• get_footer() – dołącza plik footer.php. Jako argument można podać nazwę innej stopki do wczytania.
• get_sidebar() – dołącza plik motywu sidebar.php. Jako argument można podać nazwę innego sidebara do wczytania.

Poniżej znajduje się listing z przykładowym kodem pliku index.php, w którym wykorzystano wszystkie powyższe funkcje (dla uproszczenia usunięta została pętla WP).

<?php get_header(); ?>

<div id="container">
   <div id="content">
      <!-- kod pętli WP -->
   </div>
   <div id="sidebar">
     <?php get_sidebar(); ?>
   </div>
</div>
<?php get_footer(); ?>

Najczęściej spotykane pliki szablonu WordPress

Pełna lista plików szablonu, o tym jak powinny się nazywać i co zawierać znajduje się tutaj. Z mojej strony chciałbym jeszcze tylko wspomnieć o najczęściej pojawiających się plikach w motywach:

• style.css – główny arkusz stylów CSS.  Obowiązkowy plik szablonu.
• index.php – główny plik motywu.
• comments.php – motyw komentarzy.
• single.php – szablon pojedynczego wpisu. Używany do wyświetlenia pojedynczego wpisu.
• search-form.php – zawiera kod formularza wyszukiwarki.
• functions.php – plik specjalny szablonu, który pozwala na zmianę (albo rozszerzenie) podstawowych zachowań WP
• sidebar.php – plik zawierający kod np. kolumny z widgetami
• header.php – plik zawierający sekcję <head>, czasami górną część witryny – nawigację, górne logo
• footer.php – zawiera kod dolnej części witryny – stopkę, czasem dolne widgety

Aktualizacja 2017-07-07

Artykuł został poprawiony i wzbogacony o akapit z hierarchią plików w motywach WordPress. Poprawionych zostało kilka literówek i wyjaśnień. Rozwinięto i poprawiono niektóre pojęcia.