WordPress: wygląd (odc.1) – struktura szablonu

Mój blog wisi już sobie kilka tygodni i stopniowo pojawiają się nowe wpisy. Tymczasem dojrzałam do tego, by zainteresować się zmianą wyglądu strony. Standard jak to standard, mało kogo satysfakcjonuje. Ani to szczególnie ładne, ani to spersonalizowane jak należy a w dodatku standardowe, więc każdy może mieć takie samo. Cóż począć z tym fantem? Nie ma innej rady. Trzeba stworzyć własny layout.

Oczywiście można usatysfakcjonować się przerobieniem istniejącego, albo ściągnięciem gotowego z wielu dostępnych w sieci. Sprawa jest wtedy banalna. Wystarczy spędzić w sieci trochę czasu i wyszukać odpowiednią skórkę. Potem to już wystarczy skopiować ją do katalogu ‚/wp-content/themes’ aby skórka pojawiła się w spisie w zakładce [Design]->[Szaty graficzne]. Teraz już tylko wystarczy załadować upragnioną skórkę klikając na nią.

Niestety to nie w moim stylu. W myśl zasady „jak spadać to z wysokiego konia” zabieram się za rozszyfrowanie tajemnicy szablonów WordPress. Po pierwsze należy sobie uświadomić, że każda strona i blogu WordPress jest zbudowana z trzech bloków:

  • nagłówek (header)
  • treść (content)
  • stopka (footer)

Każdy z tych bloków generowany jest przez osobny skrypt wchodzący w skład skórki. Wystarczy więc edytować zawartość pliku header.php żeby wpłynąć na wygląd nagłówka oraz footer.php, żeby zmienić wygląd stopki. Pliki te znajdują się w katalogu każdej skórki.

Blok treści zawiera wszystko co znajduje się pomiędzy nagłówkiem i stopką i w zależności od sytuacji (struktura linku) generowany jest za pomocą jednego z plików:

  • home.php – panel strony głównej
  • single.php – panel pojedyńczego posta
  • page.php – panel strony typu page
  • archive.php – panel archiwum
  • category.php – panel kategorii
  • search.php – panel wyszukiwania
  • 404.php – panel błędu 404
  • comments.php – panel komentarzy
  • comments-popup.php – panel wyskakującego okna komentarzy
  • author.php – panel autora
  • date.php – panel artykułów z określonego dnia
  • sidebar.php – panel menu bocznego
  • searchform.php – panel formularza wyszukiwarki

Trzy główne bloki spinane są w jedną całość za pomocą pliku index.php i uzupełnione plikiem zawierającym style style.css.

Hierarchię plików i kolejność ich wywoływania świetnie opisuje poniższy rysunek (źródło codex):
Hierarchia plików skórki WordPress

Z tą podstawową wiedzą na temat struktury szablonu aplikacji WordPress można już się pokusić o modyfikację gotowego szablonu i przystosowanie go do swoich potrzeb. O tym jak napisać szablon od podstaw będzie następny odcinek.

Tradycyjnie na koniec pierwszego odcinka garść linków (lista jest rozwojowa, więc warto tu zaglądnąć czasem):

6 komentarzy do wpisu „WordPress: wygląd (odc.1) – struktura szablonu”

  1. Dzisiaj tak pomyślałem, że zacznę przeglądać jak zbudowane są inne CMS-y niż joomla. Do tej pory właśnie na niej działałem. Na google natknąłem się właśnie na tą stronkę szukając budowy nowego szablonu:) I muszę powiedzieć, że fajnie to opisałeś i sensownie. Dzięki;)

  2. No i nareszcie konkret do wordpress na naszym rynku blogów. Fajnie jakby pojawił się wpis o różnicy strony statycznej (html +css) a wordpressem… kwestie SEO itp ale co do tego wpisu rewelacja!!

Dodaj komentarz

%d bloggers like this: