publikuj: Opublikuj w wykop.pl Opublikuj we flaker.pl Opublikuj na OSnews.pl Opublikuj w delicious wydrukuj
39 skomentuj »

TAGI: wordpress , theme , szablon

2011-12-12 13:23  |  Grzegorz Serwin

Jak stworzyć własny szablon do WordPressa. Instrukcja krok po kroku (od PSD do HTML i CSS)

Jak stworzyć własny szablon do WordPressa. Instrukcja krok po kroku (od PSD do HTML i CSS)

Jedna z firm, z którą współpracuję, przeniosła swoją siedzibę i poprosiła mnie o zmianę adresu na ich stronie firmowej. Niby nic prostszego do wykonania. Niestety, osoba, która wykonywała ich witrynę, nie miała zbyt dużego pojęcia na ten temat i zamiast wszystkie powtarzające się elementy przenieść do jednego szablonu wpisała je do osobnych plików HTML. Na szczęście było ich tylko dziesięć. Co by jednak się stało gdyby wszystkich plików było np. sto? Czas i koszt wprowadzenia zdawałoby się drobnej poprawki znacznie by się zwiększył. Autor strony chyba tego nie przewidział. Właśnie między innymi dlatego powstały takie narzędzia jak systemy zarządzania treścią, które obsługują szablony, aby ułatwić globalne zmiany na stronie. Aby nie popełniać tego typu błędów, warto nauczyć się obsługi chociaż jednego CMS-a i tworzenia dla niego szablonów. Celem tego artykułu jest pokazanie, jak wykonać od podstaw prosty szablon dla WordPressa. Zaczniemy od pliku PSD, następnie przekształcimy go w stronę HTML, a następnie w pełni działający szablon, który będzie można zainstalować na dowolnej stronie WordPress.

Spis treści

  1. Pliki szkoleniowe
  2. Od czego zacząć?
  3. Tworzymy projekt HTML
  4. Edycja plików HTML i CSS
  5. Struktura strony
  6. Instalacja WAMP oraz WordPress
  7. Instalacja szablonu WordPress
  8. Aktywacja pliku style.css
  9. Dodajemy menu
  10. wp_head() i wp_footer()
  11. Kanał RSS, link pod logo i tytuł strony
  12. Wyświetlanie wpisów
  13. Miniaturki wpisów
  14. Wyszukiwarka
  15. Widgety w pasku bocznym
  16. Podział index.php na części
  17. Stylowanie obrazków w treści
  18. Miniaturka szablonu
  19. Zipowanie szablonu
  20. Zakończenie

Pliki szkoleniowe

Na potrzeby kursu wykonałem bardzo prosty plik PSD,  który możesz pobrać TUTAJ. Jeśli wolisz pominąć cięcie pliku PSD i przejść od razu do kodowania pod WP, to poniżej możesz pobrać gotowy szablon HTML wraz z plikami graficznymi.

 

Od czego zacząć?

Oczywiście, pierwsze co musimy zrobić, to wyciąć wszystkie, potrzebne elementy graficzne z pliku PSD. W tym celu otwieramy Photoshopa lub Gimpshopa. Plik graficzny wygląda tak.

Korzystając z narzędzia Slice Tool, zaznaczamy poszczególne elementy. Będziemy potrzebowali następujące pliki graficzne:

  • logo,
  • ikonkę RSS,
  • tło znajdujące się pod głównym menu wraz z wyszukiwarką,
  • tło znajdujące się pod główną treścią strony
  • oraz miniaturkę wpisu.

Aby wygodnie wyciąć wszystkie elementy, najlepiej wyłączyć niektóre warstwy - główne tło strony, treść znajdującą się w menu oraz w wyszukiwarce. Te elementy będą później nałożone w postaci kodu więc nie są nam potrzebne w plikach graficznych.

Jeśli zaznaczyłeś już poszczególne elementy, to wystarczy wybrać opcję File | Save for Web, aby zapisać poszczególne pliki graficzne. Po zapisaniu plików ustaw odpowiednio ich nazwy. Powinno wyglądać to tak:

  • content.png - tło pod treścią strony,
  • logo.png - jak sama nazwa wskazuje.

  • navbar.png - tło znajdujące się pod menu wraz z wyszukiwarką,

  • rss.png - ikonka RSS,

  • thumb.png - miniaturka wpisu,

Nazwy plików możesz oczywiście dobrać według swojego uznania, byle zachować je później przy pisaniu kodu.

 

Tworzymy projekt HTML

Mamy już wszystkie potrzebne pliki graficzne, więc możemy utworzyć nowy katalog z naszym projektem. Nazwa katalogu może być dowolna. Nazwijmy go np. wp-themes-html. W katalogu tym utwórz podkatalog img/ i wklej tam wszystkie pliki graficzne.

Będziemy oczywiście potrzebować jeszcze dwa pliki: index.html oraz style.css (jest to domyślna nazwa używana przez WordPress, więc najlepiej od razu tak nazwać główny plik stylów CSS). Umieść plik style.css w tym samym katalogu co index.html - później ułatwi nam to pracę.

Dodałem jeszcze plik reset.css pobrany ze strony http://meyerweb.com/eric/tools/css/reset/, który znacznie ułatwi nam stylowanie poszczególnych elementów i pomoże zachować kompatybilność między przeglądarkami. Możesz oczywiście użyć innego pliku reset według własnego uznania.

Docelowo struktura katalog projektu będzie wyglądać tak:

  • img/
    • index.html
    • reset.css
    • style.css

«poprzednia 1 2 3 4 ... 9 następna »

publikuj: Opublikuj w wykop.pl Opublikuj we flaker.pl Opublikuj na OSnews.pl Opublikuj w delicious wydrukuj
39 skomentuj »

Polecane książki

Czytaj Webhosting

Chcesz być na bieżąco z naszymi informacjami? Zapisz się na Newsletter.

Zarejestruj domenę

Sprawdź dostępność swojej domeny:

.pl: 0 zł   .com: 19.90 zł
.com.pl: 0 zł   .eu: 19.90 zł