Kurs WordPress (3)

Autor: Damian Chodorek • Opublikowany: 5 grudnia 2014 • Ostatnia aktualizacja: 8 lutego 2015 • Kategoria: kursy, wordpress

Pierwsze kroki. Framework Thematic.

Tworzenia szablonów w WordPressie można dokonać na dwa sposoby:

  • wszystko piszesz własnoręcznie,
  • korzystasz z gotowych frameworków.

Framework sprawia, że nie musimy pisać tego samego kodu wiele razy. Wszystko co powtarzalne jest już zrobione. Naszym zadaniem jest tylko uzupełnić luki – czyli te elementy, które są dla każdego szablonu inne.

Każdy szablon WP składa się ze standardowych plików php. Każdy z nich odpowiada za inną część strony lub funkcjonalność. Framework będzie więc zestawem tych plików.

Piszę o tym nie bez powodu. Naukę tworzenia szablonów rozpoczniemy od gotowca. Zaloguj się więc na swoim testowym WP i zainstaluj motyw Thematic. Na twoim serwerze w katalogu wp-content/themes/ pojawi się nowy folder odpowiadający za zainstalowany szablon.

Framework Thematic

Włącz nowy motyw i wejdź na swój blog. Widzisz szablon oparty na domyślnych CSS’ach frameworka. Przejrzyj kod HTML swojej strony. Zobaczysz między innymi:

<body class="home blog logged-in admin-bar windows chrome ch39 customize-support">

Wszystkie klasy dostajesz w prezencie od frameworka. Jak widzisz zawierają rodzaj systemu operacyjnego (windows), przeglądarkę (ch39), informację o tym, czy użytkownik jest zalogowany (logged-in), w jakiej części serwisu się znajduje (home).

Na podstawie tak dokładnie oznaczonych tagów, możesz skupić się jedynie na tworzeniu własnych stylów CSS do poszczególnych elementów strony. Spójrzmy na jeszcze jeden tag, dotyczący pojedynczego posta:

<div id="post-2555" class="post-2555 post type-post status-publish format-standard hentry category-javascript category-kursy">

Gdyby nie framework musiałbyś pisać kod, który generuje taki HTML sam (z pomocą WP). Dzięki tak dokładnemu opisowi treści wygenerowanej przez autora, możesz dopasować różne style do różnych kategorii, tagów, podstron itp. Przykładowo jeśli chcę, aby na podstronie kontakt tytuł wyglądał inaczej, wystarczy, że napiszę:

#page-id-2267 h1.entry-title {
/*kod CSS*/
}

Pliki szablonu

Framework składa się z wielu plików, ale duża część jest opcjonalna. W WP można dodać swoje pliki, które pomogą rozdzielić niektóre rzeczy, dlatego deweloperzy często korzystają z tej możliwości, ale nie muszą. Pliki, które spełniają najważniejsze role to:

  • header.php – odpowiada za kod i logikę nagłówka,
  • index.php – treść na stronie domowej,
  • single.php – treść pojedynczego posta (po wejściu w niego),
  • page.php – treść strony statycznej,
  • 404.php – co się pojawi w przypadku błędu 404,
  • style.css – arkusz stylów CSS.

Widzisz więc, że nazwy plików doskonale opisują ich zastosowanie. Tworząc swój szablon od zera, będziesz korzystał dokładnie z tych nazw. W katalogu szablonu znajdziesz folder thematicsamplechildtheme, który zawiera pliki: readme.txt, functions.php, style.css. Zajrzyj do pierwszego. Znajdziesz tam zachęcające słowa:

Use these theme files to start your Thematic Child Theme development.
Rename and move this entire folder to the root level of wp-content/themes
alongside Thematic and activate your new Thematic Child Theme like any
other WordPress theme.

Good luck!


Ian Stewart
ian@themeshaper.com
http://themeshaper.com/

W kolejnej części zajmiemy się dokładnie tym – tworzeniem potomnego szablonu.

część 4

Zobacz również
Kurs WordPress (1)Ogólny zarys technologii.
Kurs WordPress (2)Podstawowe rodzaje szablonów.
Kurs WordPress (4)Edycja informacji szablonu. Własne arkusze stylów.
Kurs WordPress (5)Przeszukiwanie i dołączanie plików szablonu. Wstrzykiwanie treści. Mechanizm zaczepów i filtrów.
Projektowanie stron WWW (1)10 heurystyk Jakoba Nielsena – Twoja ściąga.
Kurs obiektowego JavaScript (1)Wstęp, historia i zastosowanie języka. Dla kogo jest ten kurs?

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.