post

Przez kolejne dni, a nawet tygodnie będę umieszczać artykuły dotyczące tworzenia szablonów na platformę WordPress. Jest to temat na tyle popularny, że w sieci znajdziemy sporo artykułów w tej dziedzinie. Chcę jednak podejść do tego tematu bardziej szczegółowo, gdyż wiele osób pyta mnie o kwestie, które nie są rozpisane w taki sposób, aby zrozumiała je osoba początkująca. Dlatego też, będę się starać wyjaśniać wszelkie zawiłości kodowania w taki sposób, aby było to zrozumiałe dla osoby z podstawową znajomością języka HTML i CSS.

Od czego należy zacząć tworzenie szablonu WordPress?

Przede wszystkim od wizji całego projektu, to jak ma wyglądać, jakie elementy funkcjonalne będą się w nim znajdować. Projekt powinien być dopracowany na tyle szczegółowo, żeby w trakcie kodowania nie trzeba było wprowadzać większych zmian. Mogą się zdarzyć niewielkie zmiany kosmetyczne, nie powinny jednak one dotyczyć większej przebudowy układu czy funkcjonalności.

Moja wizja projektu jest trochę zbliżona do takiego szablonu, jaki można znaleźć w różnych serwisach oferujących szablony premium, np.: themeforest.net. Strona główna w stylu one-page, czyli takim gdzie najważniejsza treść zawarta jest na jednej stronie, po której możemy poruszać się za pomocą scrollowania. Oczywiście cały układ ma być responsywny, co oznacza, że strona będzie się dostosowywać do rozdzielczości ekranu, na którym będzie wyświetlana.

Oto przykładowy projekt, który będzie rozpracowywany w trakcie kilkunastu, a może nawet kilkudziesięciu artykułów:

Tworzenie szablonu WordPress

Patrząc na układ strony możemy wyróżnić następujące bloki:

  1. Nagłówek – kontakt i ikony społecznościowe.
  2. Nawigacja – menu umożliwiające nawigowanie po witrynie.
  3. Slider – blok z rotacją wpisów, które należą do określonej kategorii. Pobierana jest ikona wpisu, tytuł oraz skrócony opis.
  4. Oferta – boksy z informacją o ofercie.
  5. O nas – informacja o firmie.
  6. Portfolio/referencje – slideshow zrealizowanych projektów.
  7. Opinie klientów.
  8. Załoga – informacje o pracownikach z graficznym przedstawieniem ich kompetencji.
  9. Kontakt – formularz kontaktowy z mapką google.
  10. Stopka – strefa widgetów, w której można umieszczać dowolne informacje.

Zakładam, że dysponujesz własnym środowiskiem testowym gdyż nie będę omawiać w jaki sposób instalować WordPressa na własnym komputerze (localhost). Było to już wałkowane milion razy i można skorzystać z porad znajdujących się np. tutaj.

W następnej części artykułu zajmę się złożeniem projektu do HTML i CSS, a później już zacznę przystosowywać kolejne bloki do działania w CMS WordPress.