Czym zatem jest ta tajemnicza pętla? Jest to podstawowy składnik każdego szablonu i służy do wyświetlania wszystkich wpisów, stron archiwów itp. Jeśli WordPress natknie się na pętle podczas przetwarzania szablonu i wyświetlania strony to w zależności od tego na jakiej stronie znajduje się użytkownik wyświetli mu albo listę ostatnich wpisów, albo pojedynczy wpis bądź stronę statyczną itp.

Pętla powinna znajdować się w pliku index.php. Jeśli nie pamiętasz z jakich plików składa się szablon WP to wróć do poprzednich lekcji tworzenia szablonów. WordPress Loop to kilka linijek kodu php i ma taką postać:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
[tutaj wyświetlanie wpisów]
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>

Wszystko co znajduje się w miejscu [tutaj wyświetlanie wpisów] jest już zawartością pętli i tylko od nas zależy jak to wykorzystamy. Możemy w tym miejscu odwoływać się do wielu zmiennych takich jak nazwa wpisu, data utworzenia, autor itp. wyświetlać i formatować te dane zgodnie z naszym uznaniem. Przykładowa działająca pętla może wyglądać tak:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2
<small><?php the_time('F jS, Y'); ?></small>
<?php endwhile; else: ?><p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>

Jak widać między tagami h2 wyświeliliśmy nazwę posta, która linkuje do jego zawartości, a poniżej datę utworzenia wpisu. I to wszystko co na tym etapie powinieneś wiedzieć o pętli WP. Wiesz już jak działa i z wiedzą, którą dziś otrzymałeś będziesz umiał ją zastosować.  Jeśli chcesz poznać pozostałe zmienne jakie można tu wyświelić to polecam przeglądnąć pliki defaultowych szablonów WP. W następnym odcinku kursu przejdziemy już do konkretów i przerobimy darmowy szablon html tak, aby działał pod WP.

Pytania i komentarze jak zwykle mile widziane.

Edycja plików szablonu

Otwórz plik, w którym chcesz użyć wtyczki do stronnicowania. Przeważnie będzie to plik index.php lub/i plik archives.php i search.php, które odpowiadają za wyświetlanie listy wpisów. Znajdź w tych plikach taki oto kod:

<div>
	<div><?php next_posts_link('Previous entries') ?></div>
	<div><?php previous_posts_link('Next entries') ?></div>
</div>

i zatąp go takim kodem:

<?php
include('wp-pagenavi.php');
if(function_exists('wp_pagenavi')) { wp_pagenavi(); }
?>

W taki oto sposób zamieniliśmy zwykłe stronnicowanie na nowe w postaci numerów stron. Kiedy odświeżysz stronę to nic się nie stanie ponieważ nasz plugin nie jest jeszcze dostosowany do działania w szablonie. Aby wszystko działało jak należy musisz otworzyć plik wp-pagenavi.php i znaleźć w nim taką linię kodu:

function wp_pagenavi($before = '', $after = '') {
        global $wpdb, $wp_query;

Zastąp go takim kodem:

function wp_pagenavi($before = '', $after = '') {
	global $wpdb, $wp_query;
        pagenavi_init(); //Calling the pagenavi_init() function

Po odświeżeniu strony już wszystko powinno działać jak należy. Wystarczy jeszcze dodać plik css do naszego szablonu, aby móc kontrolować wygląd listy stron. W nagłówku pod odwołaniem do głównego szablonu css dodaj taką linię:

<link rel="stylesheet" href="<?php echo TEMPLATEPATH.'/wp-pagenavi.css';?>" type="text/css" media="screen" />

Możesz już formatować wygląd listy stronnicowania poprzez szablon pagenavi.css.

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

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>>

Nowy system szablonów zapewnia:

1. fizyczne oddzielenie komponentów – poszczególne części strony mogą zostać rozdzielone na wiele pojedynczych plików, które za chwilę opisze.

2. możliwość szybkiej zmiany layoutu strony – użytkownik z odpowiednimi uprawnieniami może bardzo szybko zmienić wygląd całej strony bez wpływu na treść na niej zawartą.

Jest wiele stron, na których możesz pobrać szablony definiujące wygląd Twojej nowej strony np. oficjalny katalog szablonów WordPress. Jednym z zadań tej strony będzie zapoznanie Cię z możliwością tworzenia własnych szablonów od podstaw. Krok po kroku opiszę dokładnie jak się to robi.

Zacznijmy od opisu plików, które mogą wchodzić w skład szablonu. Zaznaczyłem słowo “mogą” ponieważ do poprawnego działania szablonu niezbędne są tylko dwa pierwsze pliki:

- index.php – główny plik szablonu oraz

- style.css – plik stylu szablonu, zawiera on w sobie także nazwę szablonu, która będzie się wyświetlała przy wyborze stylu strony

Pozostałe pliki, które możesz znaleźć w katalogu templatki to:

- 404.php – plik szablonu błędu 404 czyli braku strony

- archive.php – szablon archiwalnego wpisu

- archives.php – plik index.php dla archiwum

- comments.php – szablon komentarzy

- footer.php – stopka strony

- header.php – nagłówek strony

- links.php – szablon dla linków

- page.php – szablon dla stron statycznych

- single.php – szablon pojedynczego wpisu

- search.php oraz searchform.php – szablony odpowiedzialne za wyświetlanie wyników wyszukiwania oraz samejwyszukiwarki

- sidebar.php – szablon paska bocznego

Na początek wystarczy, że będziesz wiedział o istnieniu tych plików. W kolejnych wpisach opiszę dokładnie jak składa się z nich szablon strony. Musisz wiedzieć także, że rozdzielenie szablonu na te poszczególne pliki bardzo ułatwia ewentualne późniejsze zmiany w templatce. Tak jak już wcześniej wspomniałem nie wszystkie pliki są potrzebne do działania szablonu dlatego stopniowo będziemy je dodawać. System jest na tyle sprytny, że jeśli np. Twój szablon nie będzie zawierał pliku page.php, który definiuje wygląd stron statycznych to WordPress użyje w tym celu standardowego szablonu index.php. Konieczność dodania pliku page.php jest zatem podyktowana tylko i wyłącznie potrzebą zmiany wyglądu strony względem głównego szablonu.

W kolejnym wpisie dalsza część nauki tworzenia szablonów. Ewentualne pytania i uwagi proszę zostawić w komentarzu.

czytaj dalszy ciąg kursu>>