W tym miejscu na moment porzucimy omawianie zasad działania WordPressa. Znamy już podstawową strukturę tematów, składających się na nie szablonów oraz funkcję najciekawszego mechanizmu systemu, czyli pętli.
Jak już wiemy "pliki szablonów są podstawowym składnikiem każdej strony WordPressa. Jak elementy puzzli poszczególne szablony składane są dynamicznie przez silnik systemu w całą stronę w odpowiedzi na żądanie wyświetlenia jej wysłane przez klienta."
Czas najwyższy aby zderzyć teorię z rzeczywistością. Wyobraźmy sobie, że docelowa struktura naszej strony www wyglądać będzie następująco:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div id="container">
<div id="header"><!-- nagłówek -->
<div id="header-inner"><!-- wewnętrzny kontener nagłówka -->
<div id="firma">
<!-- #logo, miejsce na logo, znak firmowy itp -->
</div>
<div id="nav">
<!-- #nav, nawigacja górna -->
</div>
</div> <!-- #header-inner -->
</div><!-- #header -->
<div id="main">
<div id="container">
<div id="content">
<!-- #content, główny kontent strony -->
</div>
</div><!-- #container -->
<div id="primary" class="widget-area">
</div><!-- #primary .widget-area -->
<div id="secondary" class="widget-area">
</div><!-- #secondary -->
</div><!-- #main -->
<div id="footer"> <!-- stopka -->
<div id="footer-inner"><!-- #footer-inner, wewnętrzny kontener stopki -->
<div id="footer-info">
<!-- #footer-info -->
</div>
</div><!-- #footer-inner -->
</div><!-- #footer -->
</div>
</body>
</html>
Jak widać nasza strona jest dokumentem xhtml (transitional, ponieważ jest to obecnie najlepiej "sprawujący się" format dla WordPress), a składa się ogólnie mówiąc z nagłówka i stopki z kilkoma elementami wewnętrznymi oraz z głównego "kontenera" na treść w postaci div'a o identyfikatorze "main". Słowo kontener użyte zostało w tym kontekście nieprzypadkowo. Zobaczymy zaraz, że większość widocznych na listingu elementów typu div pełni funkcję kontenerów na fragmenty kodu xhtml które generował będzie silnik WordPress.
Div "main" zawiera między innymi kontener na zasadniczą treść strony (div o identyfikatorze "content") oraz dwa kontenery na widgety. Wygląd oraz położenie tych elementów na stronie określimy w arkuszu stylów CSS, obecnie zaś wystarczy wiedzieć, iż wyświetlone zostaną one w 3 kolumnach. Element #content umieszczony został jako pierwszy w przedstawionej strukturze, gdyż rozwiązanie takie jest najbardziej przyjazne wyszukiwarkom (zasadnicza treść umieszczona przed widgetami, czyli pod kątem pozycjonowania mniej istotną zawartością).
Szablony fragmentów strony
Nasza wzorcowa struktura strony musi zostać obecnie przełożona na formę zrozumiałą dla WordPressa. W tym celu podzielmy wzorcowy html na fragmenty które odpowiadać będą fragmentom strony w ramach tematu (WordPress theme).
Na pierwszy ogień weźmiemy nagłówek i stopkę. Szablon nagłówka strony utworzymy poprzez "wycięcie" z wzorca fragmentu kodu xhtml rozpoczynając od znacznika <html> (a właściwie deklaracji DOCTYPE) poprzez nagłówek html'a, znacznik <body> po otwierający główny kontener znacznik <div id="main"> włącznie:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div id="container">
<div id="header"><!-- nagłówek -->
<div id="header-inner"><!-- wewnętrzny kontener nagłówka -->
<div id="firma">
<!-- #logo, miejsce na logo, znak firmowy itp -->
</div>
<div id="nav">
<!-- #nav, nawigacja górna -->
</div>
</div> <!-- #header-inner -->
</div><!-- #header -->
<div id="main">
Otrzymany w ten sposób szablon zapisujemy pod nazwą header.php. Podobnie czynimy tworząc szablon stopki. Kopiujemy kod html poczynając od znacznika zamykającego kontener główny a kończąc na tagu zamykającym dokument:
</div><!-- #main -->
<div id="footer"> <!-- stopka -->
<div id="footer-inner"><!-- #footer-inner, wewnętrzny kontener stopki -->
<div id="footer-info">
<!-- #footer-info -->
</div>
</div><!-- #footer-inner -->
</div><!-- #footer -->
</div>
</body>
</html>
Otrzymany w ten sposób szablon zapisujemy jako plik footer.php.
Kolejnym naszym krokiem powinno być stworzenie pliku index.php. Jak łatwo się domyślić, jego treść uzyskujemy kopiując pozostały we wzorcu nieskopiowany dotychczas kod:
<div id="container">
<div id="content">
<!-- #content, główny kontent strony -->
</div>
</div><!-- #container -->
<div id="primary" class="widget-area">
</div><!-- #primary .widget-area -->
<div id="secondary" class="widget-area">
</div><!-- #secondary -->
Aby szablon miał szanse działać, plik index.php uzupełniamy kodem php odpowiedzialnym za ładowanie nagłówka i stopki:
<?php get_header(); ?>
<div id="container">
<div id="content">
<!-- #content, główny kontent strony -->
</div>
</div><!-- #container -->
<div id="primary" class="widget-area">
</div><!-- #primary .widget-area -->
<div id="secondary" class="widget-area">
</div><!-- #secondary -->
<?php get_footer(); ?>
W ten sposób uzyskaliśmy główny plik szablonu, od załadowania którego silnik WordPress rozpoczyna procedurę aplikowania wskazanego tematu. Jednakże budowa szablonu bynajmniej nie kończy się w tym miejscu, zaś kolejnym etapem naszych działań będzie uzupełnienie szablonów nagłówka i stopki o kolejne niezbędne elementy.
Ciąg dalszy wkrótce ...
Pełna treść artykułu
Brak komentarzy:
Prześlij komentarz