Tworzenie szablonów dla WordPressa – podstawy część 1

Tworzenie szablonów dla WordPressa – podstawy część 1

Dziś przeszukując istniejące strony na temat tworzenia szablonów WordPress znalazłem artykuł, w którym autor twierdzi, że największą wadą WP jest właśnie zawiły system tworzenia templatek. Zdziwiło mnie trochę to stwierdzenie – uważam bowiem, że system jest dość prosty i można się go bardzo szybko nauczyć. W tym wpisie zacznę ten temat i będę go rozwijał w kolejnych postach. Kiedy skończysz lekturę i wykonasz zawarte tu ćwiczenia będziesz już potrafił zmusić WordPressa do tego, żeby zobaczył twój szablon i wyświetlał go na stronie. W kolejnych częściach dowiesz się z kolei jak wyświetlać listę stron, kategorii, poszczególne posty itp.

Zaczniemy od tego, że wszystkie szablony w WP znajdują się w katalogu wp-content/themes i są pogrupowane w podkatalogi. Zaraz po instalacji w katalogu tym znajdują się dwa szablony: classic i default. Możesz podglądnąć ich pliki, żeby zobaczyć jak są skonstruowane.

Każdy szablon składa się z kilku plików jednak do działania szablonu niezbędne są tylko dwa: index.php oraz style.css. Od nich zatem zaczniemy budowę nowego szablonu.

Utwórz w edytorze, z którego korzystasz plik index.php i wklej do niego taki kod:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Przykładowy szablon</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
</head>
<body>
  Witaj Świecie!
</body>
</html>

Jak widać jest to zwykły szablon strony xhtml. Jedyna różnica polega na tym, że zamiast zwykłego odwołania do pliku css mamy tu linijke kodu php <?php bloginfo(‚stylesheet_url’); ?>, który jest odpowiedzialny za załadowanie standardowego pliku css dla szablonu – pliku style.css. Utwórz teraz plik style.css i umieść w jego treści taki kod:

/*
 Theme Name: Nowy szablon
 */

Jak widzisz plik css musi zawierać tylko jedną linijkę, która definiuje jego nazwę. To wystarczy żeby wyświetlił się na liście szablonów w panelu zarządzania.

Utwórzy nowy folder w katalogu wp-themes/content np. o nazwie szablon i wgraj do niego plik index.php oraz style.css. Wejdź do panelu zarządzania blogiem i do menu Apperance oraz Themes. Szablon już powinien być widoczny na liście i można przełączyć wyświetlanie strony na niego. To wszystko. Proste, prawda? Oczywiście nie jest to jeszcze w pełni funkcjonalny szablon i do tego, aby działał jak należy jeszcze długa droga.

Zróbmy jeszcze jeden krok naprzód i zmodyfikujmy plik index.php tak, aby na pasku przeglądarki wyświetlał prawidłowy tytuł bloga:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title><?php bloginfo('name'); ?></title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
</head>
<body>
  Witaj Świecie!
</body>
</html>

Zamiast tytułu wpisanego na sztywno dodałem kod php w postaci: <?php bloginfo(‚name’); ?> Kod zgodnie z tym co widać pobierze informacje o blogu, a konkretnie jego nazwę i wyświetli jako tytuł. W taki sam sposób dodajemy wyświetlanie listy stron, kategorii itd. Myślę, że taki zasób wiedzy na początek zupełnie wystarczy, aby nie przeładować Twojej pamięci. Będę sukcesywnie zaznajamiał Cię z kolejnymi tajnikami tworzenia szablonów w kolejnych wpisach.

czytaj dalszy ciąg kursu>>

Autor: