Jak stworzyć własny szablon wordpress – lekcja wstępna

2 marca, 2012 | wrociu | 0 komentarzy
Szablony - lekcja wstępna
Udostępnij dalej:

Można uznać, że kilka poprzednich wpisów, które pojawiły się na pixelterror.pl w dużym stopniu dotyczyła tworzenia lub modyfikacji motywów wordpress. Pora jednak przejść do samego sedna sprawy. Tym wpisem chciałbym zapoczątkować serię artykułów dotyczących budowania własnego motywu od zera. Pokażę jak zbudować bardzo prosty motyw, który potem będę modyfikować, przekształcać dodając coraz to nowe funkcjonalności.

Początki są zawsze najtrudniejsze. Patrzysz na gotowy już motyw, który zainstalowałeś jakiś czas temu i widzisz setki linijek kodu zamieszczonych w kilkunastu plikach. Poniższy wpis jest dowodem na to, że szablon może być bardzo prosty. Nie będzie on urzekająco piękny, ale będzie wstępem do budowania tych bardziej skomplikowanych i piękniejszych motywów.

Czego będziesz potrzebować? Przede wszystkim elementarnej wiedzy z zakresu HTML, CSS oraz PHP. Będziesz potrzebować również narzędzi – programów do edycji kodu i ewentualnie obróbki grafiki.

Wiedza

Aby móc wystartować z budowaniem własnego motywu warunkiem koniecznym jest podstawowa wiedza za zakresu HTML oraz CSS. Jest bardzo dużo stron poświęconych zarówno HTML i CSS. Jednak wszystko co Tobie będzie potrzebne znajdziesz tutaj: http://www.w3schools.com/. Zagadnień PHP w tworzeniu prostych motywów nie ma wiele. Większość z nich postaram się objaśnić na stronie pixelterror ale mimo wszystko, wiedza na temat instrukcji warunkowych, pętli będzie pomocna.

Narzędzia

W wersji hardkorowej wystarczy najprostszy edytor taki jak „Notatnik” dołączony do MS Windows. Ale aby pracować komfortowo przyda się bardziej zaawansowany edytor, taki co podświetla ładnie składnie języka i pozwala sprawnie zarządzać wszystkimi plikami projektu Twojego szablonu. Ja jakiś czas temu zacząłem używać Bluefish i jestem zadowolony. Dla potrzeb budowania prostych szablonów WordPress w zupełności jest wystarczający.
Nie potrafię powiedzieć, które narzędzie jest najlepsze. Na pewno dużą popularnością cieszy się GIMP. Jest darmowy i w sieci znajdziesz mnóstwo materiałów przydatnych w używaniu tego narzędzia. Jeżeli stać Cię na licencję, można spróbować też z Adobe Photoshop.
Warto przemyśleć sprawę, gdzie chcesz instalować swoje samodzielnie zaprojektowane szablony. Można to robić na swojej „produkcyjnej” stronie, ale można również stworzyć sobie swój własny poligon doświadczalny.
Ja jakiś czas temu zainstalowałem WordPress na moim osobistym komputerze. Tutaj mogę testować zmiany w szablonach bez ryzyka, że ktoś ujrzy rzeczy, które do pokazywania w sieci ze względu na swoją ułomność się nie nadają. Na swoim komputerze (działającym na Windows) zainstalowałem oprogramowanie WampServer. Dzięki temu mój komputer na czas mojej pracy staje się serwerem www z usługami takimi jak Apache, MySQL i PHP. Szerzej dla potrzebujących opiszę to zagadnienie w jednym z przyszłych wpisów.

Mój pierwszy szablon

W tym miejscu warto by było poświęcić jeszcze kilka zdań na temat struktury szablonu, z jakich plików powinien on się składać itd. Myślę, że jednak tą dawkę teorii będę starać się przemycić w dalszej części przy okazji praktyki.

Pierwszą rzeczą, najważniejszą 🙂 i nad którą pewnie spędzisz kilka dłuższych chwil jest wymyślenie nazwy szablonu 🙂 Nasz nazwiemy „Tutorial Theme”.

Stwórz folder o nazwie „tutorialtheme”. Jeżeli chcesz aby szablon był od razu zainstalowany w środowisku, gdzie będziesz szablon testować to stwórz ten folder w główny_katalog_wordpress\wp-content\themes.
Wszystkie pliki dotyczące Twojego projektu będą zamieszczone w katalogu główny_katalog_wordpress\wp-content\themes\tutorialtheme.

style.css

Mamy już nazwę i stworzyliśmy folder, w którym będziemy umieszczać pliki szablonu. W pierwszej kolejności tworzymy pliki „style.css”. Plik zawierający arkusz stylów, w którym będziemy definiować wszystkie rzeczy dotyczące wygląda szablonu takie jak: wielkość czcionki, krój czcionki, kolor tła itd. Plik style.css będzie zawierać również nagłówek, który zawiera informacje o nazwie szablonu, autorze, wersji szablonu i licencji. Otwórz do edycji stworzony przed chwilą plik style.css i zamieść w nim następujący nagłówek:

/*
Theme Name: Tutorial Theme
Theme URL: http://www.pixelterror.pl
Description: The simple and minimal WordPress theme.
Author: Wrociu
Author URL:
Version: 1.0.0
Tags: white, light

License: The CSS, XHTML and design is released under the GPL.

*/

Znacznie poszczególnych linii:

  • Linia 2 – Theme Name – nazwa Twojego szablonu
  • Linia 3 – Them URL – adres strony internetowej szablonu
  • Linia 4 – Description – opis szablonu
  • Linia 5 – Author – dane dotyczące autora
  • Linia 6 – Author URL – link do strony autora szablonu
  • Linia 7 – Version – numer wersji szablonu
  • Linia 8 – Tags – tagi określające Twój szablon
  • Linia 10 – License – dane dotyczące licencji

Informacje zamieszczone w nagłówku widoczne są w „Zarządzaniu motywami” panelu administracyjnego WordPress.

Zarządzanie motywami - wygląd

Po wklejeniu nagłówka zapisz plik style.css. Jako że tworzymy dziś jeden z najbardziej prostych szablonów na świecie to chwilowo nie będziemy tego pliku więcej potrzebować.

index.php

Po stworzeniu pliku style.css należy stworzyć główny plik naszego szablonu – index.php. Sercem większości plików index.php jest pętla wyświetlająca wpisy wszystkich kategorii. Zatem do nowo-stworzonego pliku index.php wstaw następujący kod:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<body>

<?php if (have_posts()) : ?><?php while (have_posts()) : the_post(); ?>
	<h2><?php the_title(); ?></h2>
	<?php the_excerpt(); ?>
<?php endwhile; endif;  ?>

</body>
</html>

Zapisz plik index.php, używając „Kokpitu” włącz szablon Tutorial Theme i uruchom swoją stronę. Efekt powinien być mnięj więcej taki:

Tutorial Theme - szablon w akcji

Być może, nie jest to najpiękniejszy szablon na świecie, ale jest Twój, własny 🙂

Poniżej krótkie omówienie co zakodowaliśmy w pliku index.php:

  • Linia 1 – Znacznik <!DOCTYPE> służy do deklaracji typu dokumentu. Informuje on przeglądarkę której wersji HTML lub XHTML używa wczytywana właśnie strona.
  • Linia 2 – Rozpoczynamy naszego html-a. Funkcja language_attributes zwróci atrybuty językowe html np. „lang=”pl-PL”
  • Linia 5 – W tej linii przede wszystkim sprawdzamy czy są jakikolwiek wpisy do wyświetlenia. Jeśli tak, to w pętli, przechodzimy po wszystkich wpisach.
  • Linia 6 – pomiędzy znacznikami nagłówka h2
    umieszczamy funkcję the_title odpowiadającą za wyświetlenie tytułu wpisu
  • Linia 7 – wywołanie funkcji the_excerpt powoduje wyświetlenie „wypisu” artykułu.

Pozostałe linie odpowiadają za zamknięcie np. pętli, instrukcji warunkowej rozpoczętych we wcześniejszych liniach.

Po wklejeniu powyższego kodu do pliku index.php zapisujemy plik i możemy uruchamiać szablon. Wyświetli on tytuły i wypisy Twoich artykułów. Ten bardzo minimalistyczny szablon będzie punktem wyjścia do moich kolejnych wpisów dotyczących budowania motywu od zera.

 

Serdecznie pozdrawiam!

 

 

 

 


zostaw odpowiedź