Budujemy własny szablon WordPress cz. 1

laptop blog

Kategoria wpisu Budowa szablonu, WordPress Tagi: , , on przez .



Jak zapewne wiedzą osoby odwiedzające stronę na Facebook ruszyłam z kursem tworzenia szablonów do WordPress. Od razu uprzedzam, że nie będą to bardzo rozbudowane szablony (skórki) mimo to mogą trochę sprawić problemów. Będzie on jednak rozszerzany o dodatkowe opcje zawarte w innych tutorialach.

Na początek warto zacząć od struktury szablonu, podstawowy szablon składa się z plików:

  • index.php
  • header.php
  • footer.php
  • functions.php
  • 404.php
  • category.php
  • page.php
  • single.php
  • style.css

W skład niego mogą też wchodzić inne pliki jak np. search.php.

Tutorial został podzielony na kilka części:
Część 1 znajdziecie poniżej
Część 2 w kolejnym wpisie

Jeśli masz problem z kodem możesz już teraz pobrać fragment szablonu.

Pobierz

Nazwy katalogów w większości są dowolne chociaż przeważnie występują następujące:

  • css
  • img lub images
  • js
  • include

W WordPress większość opcji jest przedefiniowana, co oznacza że zadaniem twórcy szablonu jest jedynie utworzenie odpowiedniego pliki i przygotowanie go tak by posiadał określony wygląd.

Obecnie większość nowych szablonów jest responsywna dlatego postanowiłam tworząc ten tutorial mieć to na uwadze. Nie użyje jednak bootstrap gdyż wymaga on wielu modyfikacji użyje za to bardzo prostego skeleton. Nie posiada on wielu opcji, ale dla małego projektu się sprawdzi. Dodatkowo nie trzeba będzie go mocno modyfikować by uzyskać pożądany efekt.

Tak więc zaczynamy.

Co nam będzie potrzebne

Pobieramy pliki biblioteki CSS skeleton można je pobrać ze strony http://getskeleton.com/

Dodatkowo można pobrać również pliki:

https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js
http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
http://getskeleton.com/js/site.js
http://getskeleton.com/css/github-prettify-theme.css
http://getskeleton.com/css/custom.css

Pliki .CSS umieszczamy w katalogu css a .JS w js – zachowujemy układ jaki ma biblioteka skeleton

Ułatwi to pracę jeżeli nie jesteśmy zaawansowanymi programistami i samodzielnie nie potrafimy tworzyć responsywnych stron (RWD) obecnie to standard. Alternatywnie można pobrać inną bibliotekę dającą RWD jak Bootstrap.

Paczka Skeletona zwiera 2 katalogi CSS i images z plikami oraz plik index.html.

Jeżeli nie posiadamy edytora kodu trzeba go ściągnąć (Notatnik się do tego nie nadaje ze względu na kodowanie strony). Ja wykorzystuje do tych celów najczęściej Notepad++, jest to darmowy program przypominający Notatnik więc obsługa nie powinna sprawić nikomu problemu.

Trzeba również mieć postawionego WordPressa np. na localhost (ja używam serwera XAMPP) lub na serwerze w internecie.


Kiedy już posiadamy to wszystko możemy przystąpić do pracy. Zaczynamy od utworzenia folderu, w którym zbudujemy nasz template a w nim na początek dodajemy:

  • index.php
  • header.php
  • footer.php
  • functions.php
  • style.css

header.php

W zawartości pliku header.php umieszczamy następujące informacje.

W kodzie tym znajduje się deklaracja podstawowych funkcji niezbędnych w szablonie.

W miejscy powyższego kodu zostaną umieszczone odnośniki do wszystkich styli CSS oraz skryptów wykorzystanych później.

Z kolei ten kod dobiera odpowiednio informację o języku naszego szablonu. Jak widać nie jest to sztywne ustawienie.

Teraz by szablon był bardziej funkcyjny dodamy do niego menu.

oraz

W całości kod z zastosowaniem formatowania będzie prezentował się tak:

Za pomocą zmiennej umieszczonej poniżej można uzyskać adres do aktualnie wykorzystywanego szablonu. Jest to bardzo przydatne gdyż nie musimy podawać całego adresu do np. obrazków umieszczonych w szablonie.

Więcej o odnośnikach do strony głównej.

 

index.php

Teraz pora na index.php

Powyższy kod wypisze stronę główną jeżeli ta będzie statyczną stroną, będziemy mieć jednak problemy z stroną blogową.

Trochę objaśnień:

Powyższy kod spina w pewnym sensie całą stronę poprzez dodanie odwołań do pozostałych elementów:
Dodanie header.php

Dodanie footer.php

footer.php

Kolejnym elementem jest footer.php

functions.php

Kiedy mamy już te elementy pora na to by szablon stał się zdatny do użytku. W tym celu tworzymy plik functions.php na razie umieścimy w nim tylko kilka elementów.

Każda z tych funkcji pełni inną rolę.

Po zadeklarowaniu poniższej funkcji trzeba utworzyć katalog o nazwie „js” i umieścić w nim pliki javascript (kończące się na js).

W WordPress skrypty najlepiej dodawać w ten sposób.

Teraz pora na dodanie skryptów CSS. Dzięki tej funkcji po utworzeniu pliku style.css będzie on się automatycznie wczytywał.

Kolejny fragment umożliwia nam dodanie własnego menu co z pewnością ułatwi personalizacje szablonu

 

Teraz pora na dodanie możliwości umaszczenia obrazków do wpisu. Nie jest to obowiązkowe, ale szablon będzie o wiele ciekawszy.

Następnie przychodzi czas na red more czyli czytaj dalej. W tym przykładzie przetłumaczyłam to na Zobacz.

 

style.css

W ostatnim kroku utworzymy plik style.css.

Poniżej tej deklaracji samodzielnie uzupełnia się plik styli. Warto też pamiętać by dodać pozostałe style w katalogu css

Skeleton i dociągnięte do niego style i skrypty powinien część pracy wykonać za nas. Nie posiada on jednak typowych dla WordPress klas oraz nie ma responsywnego menu dlatego do pliku style.css trzeba dopisać

Warto Pamiętać że:

Theme Name: WP test – to nazwa szablonu
Tags: responsive, white, scelton :tagi, hasła do szablonu

Masz problem pobierz gotowy fragment szablonu.

Pozostałe części szablonu pokaże jak utworzyć w kolejnych częściach.

 

Przeczytaj również

Budujemy własny szablon WordPress cz. 2 Witam w drugiej części kursu z budowy szablonu WordPress dziś pokaże jak rozbudować o kolejne opcje szablon, który zaczęłam robić poprzednio. Będą ...
Personalizacja kategorii w WordPress – is_ca... Po pewnej przerwie wracam do tematyki WordPress, tym razem chciałam spersonalizować w szablonie wybraną kategorię i przy tej okazji omówić funkcję is_...
Advanced Custom Fields – własne pola w WordP... Prawie każdy administrator strony lub bloga czasem odczuwa potrzebę dodania do konkretnej podstrony (wpisu lub strony) lub kategorii dodatkowego niest...
Jak spersonalizować sidebar w WordPress Widget log... Kolumna boczna czyli sidebar znajduje się w praktycznie każdym szablonie WordPress (ale nie tylko). Na rynku dostępne są szablony z różną ilością pane...