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

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

W poprzednim wpisie na temat tworzenie szablonów dowiedziałeś się jak utworzyć dwa podstawowe pliki templatki jakimi są index.php oraz style.css. Dziś napiszę w jaki sposób podzielić plik index.php na kilka logicznych fragmentów, tak aby łatwiej modyfikowało się szablon i dodawało poszczególne funkcjonalności.

Szablon każdej strony składa się z kilku podstawowych elementów takich jak nagłówek, „ciało dokumentu”, pasek boczny, stopka itp. Oczywiście każda strona jest inna i ten schemat nie zawsze się sprawdza. Mimo to w Wordpresie ten podział został ujęty w podobny sposób i każdy element strony zawiera się w osobnym pliku. I tak mamy pliki:

1) header.php – nagłówek

2) sidebar.php – pasek boczny

3) footer.php – stopka

Plik index.php zawiera natomiast  z reguły cała resztę czyli ciało dokumentu i kod odpowiedzialny za wyświetlanie postów, archiwum, stron statycznych itp. Plik ten pobiera także wszystkie inne elementy strony za pomocą kilku linii php. Za chwilę opiszę jak się to robi. Wróćmy zatem do naszego poprzedniego przykładu i podzielmy nasz przykładowy szablon strony na poszczególne pliki. To jak dokładnie będzie wyglądał ten podział zależy w dużej mierze od Ciebie i Twoich potrzeb – mimo to można przyjąć ogólną regułę, że podział przebiega w granicach wyznaczonych przez poszczególne elementy blokowe szablonu czyli element header (który jest naszym nagłówkiem) przenosimy do pliku header.php itp.

Przykładowy kod do, którego dodałem poszczególne sekcje wygląda tak:

<!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>
<div id="header">Nasz nagłówek</div>
<div id="content">Nasz główny content</div>
<div id="sidebar">Pasek boczny</div>
<div id="footer">Stopka</div>
</body>
</html>

Oczywiście możesz dowolnie ostylować taką stronę. Chodzi tutaj o pokazanie samej struktury szablonu. Moglibyśmy poniższy kod zapisać po prostu do pliku index.php i będzie on działał jako szablon. Mimo to, dla późniejszej wygody i po prostu porządku podzielimy cały kod na fragmenty.

Tak będzie wyglądał nasz plik header.php:

<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>
<div id="header">Nasz nagłówek</div>

Jak widzisz wkleiłem tu całość od początku dokumentu do końca nagłówka, w którym później możemy umieścić logo serwisu itp. Plik sidebar.php będzie wyglądał tak:

<div id="sidebar">Pasek boczny</div>

natomiast plik footer.php jak łatwo się domyślić będzie zawierał w sobie dalszą część strony do końca dokumentu:

<div id="footer">Stopka</div>
</body>
</html>

Mamy już stronę podzieloną na sekcję, które teraz znajdują się w osobnych plikach. Możesz je wgrać na serwer. Ostatnia czynność jaką musimy wykonać, aby wszystko działało to w pliku index.php podmienić usunięty kod na pojedyncze linie php, które pobiorą te fragmenty z osobnych plików, które właśnie utworzyliśmy.

Kod index.php będzie wyglądał zatem tak:

<?php get_header(); ?>
<div id="content">Nasz główny content</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

I to wszystko. Jak widzisz łatwo zapamiętać poszczególne kody php służące do pobierania pozostałych plików szablonu. W dalszej kolejności będziemy edytować jeszcze plik index.php, tak aby wyświetlał poszczególne wpisy. Odbywa się to przy wykorzystaniu tzw. wordpress loop (pętli wordpress). W kolejnych wpisach opiszę dokładnie jak zbudowana jest taka pętla i jakie dokładnie spełnia funkcje. Pozostałe fragmenty oczywiście także wyposażymy w dodatkowe funkcjonalności np. pasek boczny będzie mógł wyświetlać widgety czyli specjalne moduły spełniające wyspecjalizowane funkcję takie jak galeria, lista komentarzy itp.

Ostatnia rzecz jaką dziś jeszcze zrobimy to dodanie do plików nagłówka i stopki specjalnych kodów, które pobiorą dane wysyłane przez WP, które muszą się znaleźć w tych miejscach. W taki sposób działają różne pluginy, które muszą dodać swój kod do naszego szablonu. Zatem plik header.php w ostatecznej wersji będzie wyglądał tak:

<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" />
<?php wp_head(); ?>
</head>
<body>
<div id="header">Nasz nagłówek</div>

Dodałem linijkę <?php wp_head(); ?> W tym miejscu wordpress będzie wstawiał swój kod. Na razie nie musimy dokładnie wiedzieć w czym rzecz – ważne, że bez tego niektóre pluginy nie będą działały oraz to, że kod ten musi znajdować się w sekcji head naszej strony.

Analogicznie plik footer.php będzie miał taką postać:

<div id="footer">Stopka</div>
<?php wp_footer(); ?>
</body>
</html>

Dodatkowa linia powinna znajdować się przed tagiem body i ma podobne znaczenie co ta w pliku header.php. Po wgraniu na serwer szablon powinien działać tak samo jakby znajdował się w jednym pliku. Mimo to, że nie widać różnicy w działaniu to poczyniliśmy duży krok naprzód w projekcie naszej templatki wordpress. Komentarze jak zwykle mile widziane.

czytaj dalszy ciąg kursu

Kategorie: WordPress

Tagi: •