WordPress - motywy, wtyczki, informacje, programowanie

Szablony stron

Szablony stron w WordPressie – z czego składa się każdy motyw

Z tego poradnika dowiesz się jak są skonstruowane motywy WordPressa, z jakich składają się plików i jak je tworzyć. Zrozumiesz różnice między motywem i szablonem (często te pojęcia są mylone). Dowiesz się też w jaki sposób WordPress decyduje, który szablon użyć by wyświetlić Twoje artykuły.

Zainstalowałeś WordPressa, wybrałeś jeden z motywów, być może jeszcze nie ten ostateczny, na którym postawisz swoją stronę, ale na razie chcesz poeksperymentować. Ponieważ masz jakieś (być może nawet duże) doświadczenie w PHP, albo chociaż w HTML i CSS, zaglądasz do kartoteki ze swoim motywem i widzisz tam sporo plików, głównie PHP. Zaglądasz do kartotek innych szablonów i zauważasz, że niektóre nazwy się powtarzają. Zatem zapewne istnieje jakiś system nazewnictwa, jakaś konwencja, czy może jest to tylko przypadkowa zbieżność nazw?

Motyw WordPressa – lokalizacja i podstawowe funkcje

Świeża instalacja musi zawierać przynajmniej jeden motyw domyślny, który jest włączony przy pierwszym uruchomieniu. Bez niego WordPress jest po prostu biblioteką funkcji, które właśnie w motywach maja być używane. W obecnej wersji (w chwili pisania tej notki jest to wersja 3.3.2) takim wzorcowym motywem, przygotowanym przez twórców WordPressa jest TwentyEleven (od numeru roku 2011 – niedługo należy się pewnie spodziewać motywu TwentyTwelve).

Wszystkie motywy WordPressa instalowane są w podkatalogu /wp-content/themes. Tam są wrzucane, gdy instalujesz je w adminie swojego bloga (opcja Wygląd/Motywy ang. Appearance/Themes). Tam też musisz je wrzucać, kiedy robisz to ręcznie, aby potem móc ich używać. Blog korzysta zawsze z jednego i tylko jednego motywu  i nie ma znaczenia jak dużo masz ich w folderze wp-content/themes. W żaden sposób nie spowalnia to działania Twojego bloga (w przeciwieństwie do mnożenia niepotrzebnych i nieużywanych wtyczek). Mimo to jednak, dobrą zasadą jest nie trzymanie na serwerze niepotrzebnych plików, a zwłaszcza skryptów PHP. Każdy taki skrypt jest potencjalną dziurą w bezpieczeństwie. Zagrożenie jest niewielkie, ale niezerowe.

Najmniejszy możliwy motyw WordPressa musi zawierać co najmniej dwa pliki:

style.css – plik ze stylami dla Twojego serwisu, który zawiera też nagłówek z informacjami o Twoim motywie. Z puntu widzenia CSS jest to komentarz jednak WordPress interpretuje go po swojemu. Dzięki tym informacjom motyw może być wyświetlony w interface administracyjnym w sekcji Wygląd/Motywy (wiadomo jaką ma nazwę, autora, itd.)

index.php – skrypt PHP, który zawiera kod wyświetlający stronę lub strony Twojego serwisu. Najprostszy (aczkolwiek trochę nonsensowny) skrypt może po prostu wyświetlać pustą stronę, albo klasyczne „Hello World!”. Tylko po co wtedy WordPress.

Poniżej możesz zobaczyć przykładową zawartość pliku style.css dla motywu TwentyEleven (w dwóch miejscach przyciętą, aby zwiększyć czytelność):

/*
Theme Name: Twenty Eleven
Theme URI: http://wordpress.org/extend/themes/twentyeleven
Author: the WordPress team
Author URI: http://wordpress.org/
Description: The 2011 theme for WordPress is sophisticated,
lightweight,and adaptable. Make it yours with a custom menu,
header image, and background -- then go further with (...)
Version: 1.3
License: GNU General Public License
License URI: license.txt
Tags: dark, light, white, black, gray, one-column, two-columns,
left-sidebar, right-sidebar, fixed-width, flexible-width,
custom-background, custom-colors, custom-header, custom-menu, (...)
*/

Blok taki musi się znaleźć na samej górze pliku style.css. Jego naważniejszą, i jedyną obowiązkową linią jest druga:

Theme Name: Twenty Eleven

Określa on nazwę motywu, która może być wyświetlona w adminie WordPressa. Kolejne określają skąd można pobrać szablon, kto jest jego autorem, podać opis motywu, licencję, oraz słowa kluczowe dzięki którym szablon trafi do odpowiednich kategorii jeśli zostanie dodany do repozytorium szablonów w serwisie wordpress.org.

Plik index.php, może być jedynym plikiem, w którym oprogramujemy wszystkie widoki motywu. Takie rozwiązanie jest teoretycznie możliwe, ale bardzo niepraktyczne. Aby obsłużyć tylko te elementy, które są domyślnie dostępne w interface administracyjnym należałoby wyprodukować ogromny plik, jego edycja, potencjalna aktualizacja, możliwość modyfikacji przez użytkownika motywu, byłaby niezwykle trudna. Tworzenie motywów potomnych (child themes), zmieniających cokolwiek poza stylami w CSS byłoby niemożliwe.

Hierarchia motywu – przyjęte nazewnictwo.

Podstawą WordPressa zawsze była otwartość i z założenia każda osoba korzystająca z danego motywu może go zmieniać lub tworzyć na jego podstawie motywy potomne.  Dlatego, aby wszystkim uprościć życie, przyjęto pewną pewną domyślną hierarchię motywu – listę nazw plików .php, które są automatycznie używane przez system kiedy trzeba wyświetlić dany rodzaj strony.

Hierarchia ta jest bardzo elastyczna, i tak naprawdę każdy może ją zmienić tak, że pliki w jego motywie będą się nazywały zupełnie inaczej niż innych motywach, ale ta możliwość nigdy nie jest wykorzystana bez wyraźnego powodu.

Hierarchia zakłada też, że jeśli jeden z plików .php nie istnieje, jego rolę przejmuje plik bardziej ogólnego zastosowania, aż w końcu kiedy nie ma żadnego z tych plików, rolę wszystkich przejmuje index.php. W ten sposób programista sam decyduje, czy dzielić swój motyw na dużo różnych plików (co ma zwykle miejsce w wypadku złożonych motywów o licznych, skomplikowanych widokach) czy korzystać zaledwie z kilku typowych plików PHP (co można zaobserwować w prostych motywach, wykorzystywanych do typowych, amatorskich blogów).

Jeżeli np. stworzymy utworzymy na blogu kategorię o uproszczonej nazwie historia oraz ID 25, to WordPress, aby wyświetlić archiwum tej kategorii (listę postów w tej kategorii) najpierw będzie chciał użyć pliku:

category-historia.php

jeśli takiego pliku nie znajdzie, będzie chciał użyć

category-25.php

jeśli go nie znajdzie, będzie chciał użyć

category.php

jeśli go nie znajdzie, będzie chciał użyć

archive.php

a kiedy nie znajdzie żadnego z tych plików użyje

index.php

Ponadto w kartotece z motywem znajdują się pliki zawierające typowe części strony, które najczęściej są wczytywane przez inne skrypty. Na przykład plik header.php zawiera nagłówek strony (wszystko co mieści się w tagu html <head>...</head>). Dzieje się tak dlatego, że takie elementy stron (nagłówek, stopka, sidebar, blok komentarzy) zwykle są identyczne lub bardzo podobne na wszystkich stronach serwisu i ich powielanie w szablonach jest bez sensu.

Najczęściej spotykanymi plikami w motywach WordPressa, oprócz style.css i index.php są:

  • rtl.css – arkusz styli dla języków czytanych od prawej do lewej (np. hebrajski)
  • single.php – szablon wyświetlający pojedyńczy wpis na blogu lub załącznik
  • page.php – domyślny szablon wyświetlający stronę (wpis typu strona)
  • tag.php – szablon wyświatlający archiwum (listę wpisów) danego tagu
  • category.php – szablon archiwum (listy wpisów) danej kategorii
  • author.php – szablon archiwum (listy wpisów) danego autora
  • date.php – szablon archiwum wpisów po dacie
  • archive.php – szablon dowolnego archiwum (listy postów) jeśli nie ma ona swojego szablonu
  • 404.php – szablon strony z błędem 404 (nie odnaleziono strony)
  • header.php – skrypt zawierający nagłówek <head>...</head> wszystkich stron z tagiem otwierającym <body>
  • footer.php – skrypt zawierający końcowa część wszystkich stron z zamknięciem tagów </body> i </html>
  • comments.php – szablon listy komentarzy i formularza do komentowania
  • sidebar.php – szablon sidebara
  • functions.php – plik zawierający lub ładujący wszystkie funkcje ogólnego zastosowania stworzone na potrzeby danego motywu, np dodający akcje, filtry, definiujący shortcody. Plik ten jest bardzo ważny i specjalnie traktowany przez system w wypadku child themes.

Jest wiele innych plików, które WordPress rozpoznaje domyślnie oraz dany programista może podzielić swoje skrypty w inny sposób. Na przykład, jeśli jego motyw ma wiele sidebarów użycie jednego sidebar.php może być kłopotliwe, wygodniej będzie rozbić kod odpowiedzialny za sidebary na kilka plików. Pliki wymienione powyżej występują jednak najczęściej.

Szczegółową hierarchię plików w motywach, w formie wygodnego schematu graficznego, można znaleźć na stronach WordPress Codex.


Komentarzy: 12

  1. Dzięki, tego szukałem! 🙂

  2. Dzieki za linka do hierarchii plikow, brakowalo mi tego wczesniej. Chociaz na koncu jest on troche niewidoczny, wydaje mi sie ze warto byloby dac miniaturke zdjecia.

    Fajny wpis, nie wiedzialem wczesniej co dokladnie oznacza archive – myslalem ze to jest cos w stylu mapy witryny.

    W wypisanych plikach zdecydowanie brakuje search.php – wydaje mi sie ze to bardzo wazny plik.

  3. Bardzo przydatny wpis. Mam pytanie , który szablon jest odpowiedzialny za określenie wielkości pola formularza do wpisywania komentarzy w motywie Twenty Eleven. Próbuje robić motyw potomny i potrzebuje ograniczyć to pole.

  4. Dzięki 🙂 Przydatny wpis. Mam zamiar ogarnąć trochę temat i stworzyć swoją skórkę i to się przyda na pewno.

  5. Witam 🙂
    W jaki sposób można „zmusić” archiwa subkategorii, aby dziedziczyły szablon rodzica?
    Przygotowałam szablon archiwum dla wybranej kategorii, przykładowo category-73.php, w której m.in. posty wyświetlane są w porządku alfabetycznym. Chciałabym, aby subkategorie dziedziczyły ten szablon, ale ponieważ mam tych subkategorii sporo i ich ilość będzie się zwiększać, bezsensowne i żmudne wydaje mi się kopiowanie za każdym razem szablonu archiwum kategorii dla każdej subkategorii. Wolałabym też uniknąć stosowania wtyczki.
    Czy jest jakiś sposób, w który mogę to zrobić? Próbuję modyfikować functions.php, ale bez oczekiwanego rezultatu.

    • Nie ma na to prostej metody, w tym sensie, że byłaby wbudowana w system, w naturalną hierarchie szablonów. Musisz napisać filter dla haka ‚archive_template’. W funkcji sprawdzasz czy jesteś w archiwum kategorii oraz czy nadrzędna jest ta kategoria, o którą Ci chodzi i zwracasz odpowiedni template. Korzystając z tego haka możesz przedefiniować cała logikę wybierania szablonu. No, ale trzeba już programować trochę, bez tego ani rusz. Przy okazji – są też inne filtry, którymi możesz zmieniać dosłownie dowolnie logikę dołączania szablonów – oczywiście nie warto szaleć przesadnie, ale czasem jeden z nich się przydaje. Listę znajdziesz tutaj.

  6. Tak, z filtrami kombinuję, jednak wiedzy trochę brak,. Choć jestem co raz bliżej i na pewno na dobrej drodze. Ale zawzięłam się, zrobię to 🙂
    Dziękuję.

  7. Witam,

    Mam pytanie. A co jeśli w moim kokpicie nie ma funkcji – edycja ? Chciałabym pozmieniać trochę szablon i znaleść style css ale nie ma tego nigdzie. Proszę o pomoc

    Pozdrawiam

  8. Wiem, że to pewnie oczywiste… ale szukam i nie mogę znaleźć…
    Chcę, żeby motyw strony miał nieco inny wygląd przy jednym z wpisów. W tym wpisie jest spory obrazek i chcę, żeby zajał on prawie całą dostępną powierzchnię, usuwając paski boczne, tło, stopkę, tylko pozostawiając nagłówek. Jak to zrobić?

  9. Dobry wpis. złapałem kilka błędów ort., jednak nic czym należałoby się przejmować.
    Pozdrawiam i zachęcam do wizyty u mnie, szczególnie jeżeli interesujesz się zdrowiem i urodą

  10. Również muszę przyznać, że wpis jest bardzo przydatny. Główkuję właśnie nad jednym motywem i po przeczytaniu tych informacji problem z wyświetlaniem wpisów z danej kategorii mam już rozwiązany. Dzięki!!!