Na webdesignerwall możecie przeczytać  serię wpisów dotyczących budowy skórki do WordPressa. Dzisiaj opublikowana została pierwsza część, pokazująca jak na podstawie domyślnej skórki utworzyć własny theme. Tutorial ukazuje jak w prosty sposób wpierając się domyślnym themem stworzyć własną unikatową skórkę, którą potem możemy użyć na naszym WordPressowym blogu. Autor wyjaśnia też w nim to w jaki sposób skórki do wordpressa działają i na czym powinniśmy się skupić przy ich tworzeniu. Artykuł możecie przeczytać tutaj w wersji angielskiej, a w rozwinięciu wpisu na moim blogu znajduje się jego tłumaczenie na język polski.

1. Strona główna

Zanim zaczniemy przyjrzyjmy się standardowej skórce do WordPressa i zobaczmy jak jest zbudowana. Weźmy pod uwagę takie elementy, jak nagłówek, wpisy, wyszukiwarka, nawigacja, stopka itd.

Domyślna strona główna (index.php)

Domyślna pojedyncza strona (single.php)

2. Photoshop

Opierając się na informacjach zebranych na podstawie domyślnej skórki projektujemy nowy wygląd naszego bloga. Tutaj jako przykład użyłem GlossyBlue, jednego z moich darmowych themów do WordPressa. Pobierz demo.zip by zobaczyć plik Photoshopa.

3. HTML + CSS

Gdy mamy gotowy design, tworzymy statyczny szablon HTML + CSS, taki jak dla każdej strony.Możesz skorzystać z plików mojego GlossyBlue w demo.zip by podążać za tym tutorialem.  Wypakuj archiwum i zapoznaj się z index.html, single.html i page.html. W dalszej części tutoriala będę korzystał z tych plików i przystosowywał do skórki.

Dlaczego warto utworzyć statyczny plik HTML jako pierwszy?

Głównie dlatego, że proces rozwoju projektu przez to staje się o wiele łatwiejszy. Przeważnie tworzę HTML dla każdej skórki, testuję zgodność z przeglądarkami  kodu HTML oraz  CSS, a potem jedyne co mam do zrobienia to wycięcie i wklejenie kodu WordPressa. Robiąc to nie boje się błędów HTML albo CSS w procesie tworzenia skórki.

4. Jak działa Theme do WordPressa

Jeśli przejdziesz do folderu domyślnego skórki (wp-content/themes/default), powinieneś zobaczyć wiele plików PHP oraz jeden plik style.css. Gdy przeglądasz stronę główną WordPress faktycznie korzysta z kilku plików szablonu by ją wygenerować (index.php << header.php, sidebar.php, and footer.php).

Po więcej wiadomości sięgnij do Site Architecture i Template Hierarchy.

5. Kopiowanie plików szablonu

Skopiuj folder z plikami szablonu GlossyBlue do folderu wp-content/themes. Następnie przejdz do folderu z domyślną skórką (WordPress Default) i skopiuj plik comments.php, serachform.php do glossyblue.

Damian: Do zrobienia tego tutorialu i testowania skórki możesz użyć instalacji WordPressa na serwerze lokalnym co znacznie przyśpieszy pracę. Pisałem o tym we wpisie Szybka i prosta instalacja WordPressa na serwerze lokalnym.

6. Style.css

Przejdź do folderu z domyślną skórką i otwórz plik style.css. Skopiuj  kod komentarza z góry arkusza stylów i wklej do pliku style.css GlossyBlue. Zmień nazwę skórki i jej autora na taką jaką chcesz.

7. Dzielenie plików

Teraz musimy zrozumieć gdzie plik index.php dzieli się na pozostałe pliki: header.php, sidebar.php i footer.php. Obrazek poniżej  pokazuje uproszczoną wersję mojego pliku index.php i to na jakiej zasadzie powinien być podzielony.

8. Header.php

Otwórz plik index.html. Wytnij część od góry do końca <!–/header –>, wklej następnie do nowego pliku PHP i zapisz jako header.php.

Przejdź do folderu domyślnej skórki, otwórz header.php. Skopiuj i zastąp tagi <title>, <link> stylesheet, <h1>, i  <div class=description>.

Menu nawigacji (wp_list_pages)

Zastąp <li> tagiem <ul id=nav> z  <?php wp_list_pages(‘sort_column=menu_order&depth=1&title_li=’);?>.

Reference: wp_list_pages.

9. Sidebar.php

Wróć się do index.html, wytnij część rozpoczynającą się <form id=searchform> do zamykającego tagu <div id=sidebar> i wklej do nowego pliku PHP, zapisz go jako sidebar.php.

-  Zastąp <form id=searchform> przez <?php include (TEMPLATEPATH . ‘/searchform.php’); ?>

-  Zastąp znaczniki kategorii <li> przez <?php wp_list_categories(‘show_count=1&title_li=’); ?>

-  Zastąp znaczniki archiwum <li> przez <?php wp_get_archives(‘type=monthly’); ?>

10. Footer.php

Wracamy do pliku index.html, wycinamy od znacznika <div id=footer> do końca </html> i wklejamy do nowego pliku oraz zapisujemy jako footer.php.

Ostatnie wpisy

Tutaj użyłem query_post do wyświetlenia 5 ostatnich wpisów.

Ostatnie komentarze

Ostatnie komentarze generowane są przez plugin (zawarty w folderze z themem).

11. Index.php

Teraz w pliku index.html pozostać powinien tylko div <div id=content>. Zapisujemy plik jako index.php. Wklejamy wiersze: get_header get_sidebar i get_footer tak jak na obrazku.

12. Zrozumienie pętli

Obrazek poniżej pokazuje, jak działa pętla. Pętli używamy do wyświetlania wpisów na blogu i pozwala też kontrolować to co ma być wyświetlane. Zasadniczo, pętla sprawdza czy na blogu są posty, gdy są wyświetla je, jeśli ich nie znajdzie, mówi “Not Found”.

13. Kopiujemy pętlę

Idziemy do folderu domyślnej skórki, otwieramy plik index,php. Kopiujemy pętlę z index.php i wklejamy pomiędzy <div id=content>..</div>. Zastępujemy statyczny tekst Tagami Skórek WordPressa: post date, title, category, comments, next and previous link (data wpisy, tytuł, kategoria, komentarze, następny i poprzedni link).

14.  Podgląd skórki

Gratulacje! Zrobiłeś stronę główną. Teraz zaloguj się do panelu administratora, przejdź do zakładki Design i powinieneś zobaczyć skórkę GlossyBlue, aktywuj ją i przejdź do strony głównej bloga by ją zobaczyć.

15. Single.php

Teraz przyszedł czas by zrobić szablon single.php. Jeśli chcesz możesz wykonać ten sam proces – wytnij & wklej z domyślnej skórki.  Ale myślę, że łatwiej jest użyć index.php by stworzyć single.php. Otwórz single.php domyślnej skórki  i skopiuj tagi szablonu. Następnie umieść comments_template..  Obrazek poniżej przedstawia to co trzeba zmienić.

16. Page.php

Zapisz szablon single.php, który właśnie stworzyłeś jako page.php. Usuń datę wpisu, fomularz komentarzy, następny/poprzedni link, i zapisz.

17. Usuń pliki HTML

Usuń wszystkie pliki HTML z folderu glossyblue (nie będą więcej potrzzebne). Od strony technicznej to wszystko jeśli chodzi o podstawową skórkę do WordPressa.  Możesz zauważyć, że w domyślnej skórce istnieje więcej plików PHP. Ale naprawdę ich nie potrzebujesz, jeśli chcesz tylko podstawową skórkę. Dla przykładu, jeśli search.php lub 404.php nie będzie w folderze skórk WordPress automatycznie będzie korzystać z pliku index.php do renderowania stron. Przeczytaj Template Hierarchy by uzyskać więcej informacji.

18. Szablon strony w WordPressie

Ok, ostatni przykład. Chcę ci pokazać jak użyć Szablonów Stron do zrobienia strony archiwum ukazującej wszystkie posty z twojego bloga (dobre dla mapy strony /sitemap).  Skopiuj plik archives.php z folderu domyślnej skórki. Usuń niepotrzebny kod, powinno to wyglądać tak:

Tutaj użyłem query_post (showposts=-1 wyświetli wszystkie wpisy) do wyświetlenia listy wszystkich wpisów.

Teraz zaloguj się do panelu administracyjnegom napisz nową stronę, nazwij ją Archiwum. Z rozwijanego menu Page Template wybierz Archives.

THE END

Oryginalny wpis pod tytułem “Building Custom WordPress Theme” pochodzi ze strony:  www.webdesignerwall.com.