Coraz częściej pojawia się potrzeba konwersji działającej, statycznej strony napisanej w czystym HTML'u lub za pomocą prostych skryptów PHP, do postaci bardziej skomplikowanej, ale dającej dużo większe możliwości. Mam tutaj na myśli systemy CMS ( Content Management System ). Opiszę taką konwersję na przykładzie Wordpress'a.
- Wstęp Typowa statyczna strona jest napisana w HTML'u. Czasem nie jest do końca statyczna, bo ma powklejane tu i tam fragmenty kodu PHP lub JavaScript. Na potrzeby tego tutoriala przyjmę jednak, że mamy do czynienia ze stroną stworzoną za pomocą jedynie HTML'a. Taka strona składa się najczęściej z mniej więcej takiej struktury plików, która składa się na całość, którą od tej pory będę w skrócie nazywał template'em:
1
2
3
* index.html
* style.css
* katalog z grafiką, np.: img
Plik index.html zawiera całą treść strony, wszystkie tagi HTML oraz odniesienia do lokalizacji pliku z kaskadowymi stylami ( style.css ) oraz lokalizacją grafik. To on jest dla nas najbardziej interesujący i w nim będzie się działa cała “magia” :) 2. Dla ułatwienia i lepszej wizualizacji konwersji od tej pory będę przedstawiał całą operację na konkretnym przykładzie. Proponuję użycie jako wyjściowego template'a któregoś z dostępnych na stronie Open Source Web Design ( www.oswd.org ) na przykład: LoadFoO [V2] 3. Po ściągnięciu i rozpakowaniu tego template'a widać takie pliki i katalogi:
1
2
3
4
5
* css ( katalog zawierający plik style.css - definicję stylów kaskadowych )
* img ( katalog zawierający pliki graficzne )
* js ( katalog zawierający pliki JavaScripts )
* favicon.ico ( plik z ikoną naszej strony pokazującą się w przeglądarce )
* index.html ( szkielet template'u, tak jak opisywałem wcześniej )
- CSS Konwencja struktury plików dla template'ów w Worpdress wymaga, aby plik style.css znajdował się w głównym katalogu, tzn tam gdzie index.html , więc przenieśmy go teraz z katalogu css o jeden poziom wyżej. Pusty obecnie katalog css można usunąć, żeby nie zaśmiecał przestrzeni.Plik style.css jest jednocześnie opisem template'a, a konkretnie jego nagłówek, który wygląda np tak:
/* Theme Name: nazwatemplate'a Theme URI: ścieżka URI Description: Opis Version: wersja, np: 1.0 Author: twojeimię Author URI: twój adres WWW */
Umieść ten nagłówek przed wszystkimi definicjami stylów w style.css.
W naszym przypadku pamiętaj o zmianie ścieżek w pliku css, aby wskazywały na katalog img. Teraz jest to na przykład: ../img/jakisplik.jpg trzeba je wszystkie zmienić na img/jakisplik.jpg ( przez usunięcie ../ ) 5. Opcjonalnie, ale zalecałbym to, można stworzyć obraz - miniaturę template'a. Powinien mieć rozmiar 300x225 pikseli oraz format PNG. Nazwa musi brzmieć: screenshot.png i musi byc umieszczony tam gdzie plik style.css. 6. Cięcie/Gięcie Głównym plikiem naszego template'a jest index.php, ale skąd go wziąć? Zmienić rozszerzenie pliku index.html na php To jednak nie wystarczy. Trzeba go teraz odrobinę pociąć na kawałki, w najprostszym wypadku będą to pliki: header.php - plik zawierający definicje nagłówka strony footer.php - plik zawierający stopkę strony my dodamy jeszcze sidebar.phpNazwy tych plików są ważne, ponieważ dzięki temu Wordpress sam znajdzie te pliki, bez potrzeby ich definiowania. W kolejnych punktach opiszę każdy z nich.
Plik index.php zawiera jeszcze definicje tak zwanego “loop” czyli takiej “karuzeli”, która pokazuje odpowiednie posty/wpisy na stronie głównej. O tym również później. 7. header.php Najpierw przykładowy plik header.php:<html <?php language_attributes(); ?>> <head> <meta charset=“<?php bloginfo( ‘charset’ ); ?>” /> <title><?phpglobal $page, $paged;
wp_title( ‘|’, true, ‘right’ );
bloginfo( ‘name’ );
$sitedescription = getbloginfo( ‘description’, ‘display’ ); if ( $sitedescription && ( ishome() || isfrontpage() ) ) echo “ | $site_description”;
if ( $paged >= 2 || $page >= 2 ) echo ‘ | ’ . sprintf( __( ‘Page %s’, ‘twentyten’ ), max( $paged, $page ) );
?></title> <link rel=“profile” href=“http://gmpg.org/xfn/11” /> <link rel=“stylesheet” type=“text/css” media=“all” href=“<?php bloginfo( ‘stylesheeturl’ ); ?>” /> <link rel=“pingback” href=“<?php bloginfo( ‘pingbackurl’ ); ?>” /> <?php
if ( issingular() && getoption( ‘threadcomments’ ) ) wpenqueue_script( ‘comment-reply’ );
wp_head(); ?> </head>
<body <?php body_class(); ?>>
Jest on pełny znaczników w języku PHP, które rozpoznaje Wordpress po czym wypełnia je zawartością dynamiczną, np:
<?php bloginfo( ‘stylesheet_url’ ); ?> opisuje lokalizację pliku style.css ( nie definiujemy nazwy, bo jest on domyślny dla Wordpress'a )
wphead(); powoduje wyświetlenie nagłówka HTML na stronie pozostałe zmienne są w większości przypadków dość jasno opisane przez swoje nazwy. 8. footer.php Przykładowa zawartość pliku footer.php: <div id=“foot”> </div> </div> <?php wpfooter(); ?> </body> </html>Zawiera on przeważnie definicję stopki zawartej jako jakiś element <div></div> oraz wywołanie PHP: wpfooter(); - zawiera ono w sobie zmienne potrzebne przez wiele wtyczek Wordpress'a, głównie odnoszące się do kodu JavaScript. 9. sidebar.php W nim umieścimy zawartość prawej kolumny naszego template'a, czyli w naszym przypadku trzeba wyciąć następujący kod z index.php i wkleić do sidebar.php: <ul id=“nav”> <li><a href=“#Home”>Home</a></li> <li><a href=“#Archive”>Archive</a></li> <li><a href=“#Link”>Links</a></li> <li><a href=“#download”>Download</a></li> <li><a href=“#support”>Support</a></li> <li><a href=“#contact”>Contact</a></li> </ul> <div> <h2 style=“margin-top:17px”>Recent Entries</h2> <ul> <li><a href=“#”>Recent Entries1</a> <i>01 Des 06</i></li> <li><a href=“#”>Recent Entries2</a> <i>01 Des 06</i></li> <li><a href=“#”>Recent Entries3</a> <i>01 Des 06</i></li> <li><a href=“#”>Recent Entries4</a> <i>01 Des 06</i></li> <li><a href=“#”>Recent Entries5</a> <i>01 Des 06</i></li> </ul> </div> 10. index.php I znowu wracamy do głównego pliku naszego template'a: index.php. Zawiera on w sobie całą resztę kodu naszej strony, oczywiście po wycięciu z niego tych fragmentów, które zawarte są w pozostałych plikach PHP.Nagłówek będzie zdefiniowany w header.php, a więc z index.php można usunąć wszystko od samej góry do znacznika <body> z nim włącznie. Zamiast tego co wytniemy trzeba wstawić: <?php getheader(); ?>
Kod prawej kolumny już przenieśliśmy do sidebar.php, teraz jest puste miejsce pomiędzy <div id=“right”> i </div>. Trzeba je wypełnić kodem PHP wordpress: <?php get_sidebar(); ?>
Stopkę strony utworzymy poprzez usunięcie wszystkiego poczynając od <div id=“foot”> do końca i zastąpienie przez: <?php get_footer(); ?>
Teraz po otworzeniu panelu sterowania naszej strony Wordpress i wejściu w menu Motywy zobaczymy nowy motyw o nazwie jaką mu nadaliśmy, po jego aktywacji zobaczymy nowy template w akcji. Na razie jednak nie wszystko działa tak jak powinno. Na przykład menu, o tym za chwilę. 11. Menu stron. W pliku index.php zmień kod pomiędzy: <div id=“menu”><ul> i </ul></div> na kod PHP Wordpress:<?php wplistpages(‘sortcolumn=menuorder&title_li=’); ?>
W tym przypadku dodałem zmienną sortcolumn=menuorder aby menu korzystało z kolejności jaką mu narzucimy w panelu sterowania oraz title_li= ( puste), ponieważ nie chcemy aby pokazywał się tytuł “Menu Główne”.
Po odświeżeniu strony zobaczymy już Główne menu zawierające pozycje zdefiniowane przez nas w panelu administracyjnym. Reszta na razie nie jest jeszcze aktywna. 12. Dodatkowe menu w panelu bocznym. Dodanie drugiego menu pozwoli na stworzenie drugiego menu, zawierającego inne elementy niż głowne. Najpierw należy stworzyć plik functions.php o zawartości:<?php addthemesupport( ‘menus’ ); ?>
co doda pozycję “Menu” w dziale “Wygląd” w panelu administracyjnym, w którym to miejscu będzie można zdefiniować i dodać kolejne menu do naszej strony.
W sidebar.php zamień kod:
<li><a href=“#Home”>Home</a></li> <li><a href=“#Archive”>Archive</a></li> <li><a href=“#Link”>Links</a></li> <li><a href=“#download”>Download</a></li> <li><a href=“#support”>Support</a></li> <li><a href=“#contact”>Contact</a></li>
na:
<?php wpnavmenu( array( ‘sortcolumn’ => ‘menuorder’) ); ?>
gdzie sort_column wymusza kolejność w menu taką jak w panelu administracyjnym.
Dodatkowo, żeby wszystko się tak samo wyświetlało dodaj do style.css następującą linijkę:
nav ul {list-style-type:none;list-style-image:none;}
gdzieś w okolicy definicji #nav
Po dodaniu elementów z poziomu panelu pojawią się one w wybranym przez nas miejscu w panelu bocznym. 13. Panel boczny po raz drugi: box W dolnej części panelu bocznego znajduje się box zawierający linki do ostatnich wpisów, aby go zrealizować dynamicznie zamień kod:<div class=“box”> <h2 style=“margin-top:17px”>Recent Entries</h2> <ul> <li><a href=“#”>Recent Entries1</a> <i>01 Des 06</i></li>
<li><a href=“#”>Recent Entries2</a> <i>01 Des 06</i></li> <li><a href=“#”>Recent Entries3</a> <i>01 Des 06</i></li> <li><a href=“#”>Recent Entries4</a> <i>01 Des 06</i></li> <li><a href=“#”>Recent Entries5</a> <i>01 Des 06</i></li>
</ul> </div>
na:
<div class=“box”> <h2 style=“margin-top:17px”>Recent Entries</h2> <ul> <?php global $post; $args = array( ‘numberposts’ => 5, ‘offset’=> 0, ‘orderby’=>‘postdate’); $myposts = getposts( $args ); foreach( $myposts as $post ) : setuppostdata($post); ?> <li><a href=“<?php thepermalink(); ?>”><?php thetitle(); ?> </a> <i> <?php thedate(); ?></i></li> <?php endforeach; ?> </ul> </div>
To spowoduje wyświetlenie linków do 5-ciu ostatnich postów, w kolejności chronologicznej ich publikacji. 14. Loop Jest to taka karuzela, czyli sposób w jaki wyświetlane są posty na głównej stronie, jeśli nie jest ona statyczna. Przykładowy kod, jaki użyję w tym template'cie: zamiast:<div id=“left”> <h2>Welcome to LoadFoO [V1]</h2> <p>Text Content Text <a href=“#”>Content Text</a> Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content.</p> <ul> <li>ul-li test.</li>
<li>ul-li test.</li> <li>ul-li test.</li> <li>ul-li test.</li> <li>ul-li test.</li> </ul> <h2>Functionality or performance</h2>
<p>Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content. </p> </div>
użyj:
<div id=“left”> <?php if ( haveposts() ) : while ( haveposts() ) : thepost(); ?> <h2><a href=“<?php thepermalink() ?>” rel=“bookmark” title=“Permanent Link to <?php thetitleattribute(); ?>”><?php thetitle(); ?></a></h2> <p> <?php thecontent(); ?></p> <?php endwhile; else: ?> <p>Brak postów.</p> <?php endif; ?> </div> 15. Szablon wpisu Musimy jeszcze zdefiniować szablon wpisu ( Post ), a robi się to w pliku: 16. Drobne poprawki. a) W przypadku tego tematu postanowiłem usunąć kod odpowiadający za powiększanie/pomniejszanie tekstu:<div style=“float: right;”><a href=“javascript:ts(‘body’,1)”>[+]</a> | <a href=“javascript:ts(‘body’,-1)”>[-]</a></div>
b) dodanie tytułu strony w górnej części poprzez zamianę w index.php:
LoadFoO [V2]
na:
<?php bloginfo( ‘name’ ); ?>
c) mała zmiana w style.css aby nagłówki wpisów wyglądały tak jak w oryginale:
dodaj: h2 a {color: #9F9F9F; text-decoration: none; }
To by było na tyle, no przynajmniej na początek. Teraz cały dalszy rozwój i życie template'a zależy od Ciebie drogi czytelniku :)