TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Po delší době jsem si pro vás připravil sérii tří článků o Wordpressu a programování vlastních šablon. V prvním díle nás čeká příprava pro tvorbu šablon, naprogramujeme si hlavičku, patičku a povolíme nějaké funkce. V dalších dílech si upravíme stránku s příspěvky, vytvoříme vlastní homepage a tak celkově si doprojdeme tvorbu šablon pro tento super RS.
Co k tomu budeme potřebovat
Takovou hlavní a zásadní věcí je nainstalovaný Wordpress. Jak na to si můžete přečíst v předchozích článcích o Wordpressu, které pro nás sepsal Plasmo. Další věcí je znalost HTML a CSS. Musíte si totiž umět nakódovat nějaký „frontend“ webu, jinak nemá cenu se učit dělat šablony. Znalost PHP není zas až tak nutná, stačí abyste se orientovali v nějakém jazyce, který má alespoň vzdáleně podobnou syntaxi. Z toho pak krásně pochopíte, jak co programovat, a PHP vám vleze do hlavy pomalu samo. To jest vlastní zkušenost. Nakonec budeme předpokládat, že máte připravenou nějakou HTML šablonu.
Když už máme nainstalováno a spuštěno, tak jdeme na to
Nejprve si vytvoříme novou složku naší šablony. Pojmenujeme ji nějakým poetickým názvem, který bude vyjadřovat přesně to, jak naše šablona vypadá. Například „sablona“. Otevřte si tedy kořenový adresář nainstalovaného Wordpressu a přejděte do složky root/wp-content/themes/. Zde vytvořte onu složku.
V dalším kroku si do naší nové složky vytvoříme pár PHP souborů s názvy:
index.phppage.phpheader.phpfooter.phpfunction.phpsingle.php
a to by mohlo stačit.
Nakonec si do této složky zkopírujeme soubory připravené šablony.
Teď je asi dobré se zmínit o architektuře Wordpress šablon. Naštěstí je to tak snadné, že vám k dokonalému pochopení stačí poměrně jednoduché schéma.
Všimněte si, že pokud není žádná jiná stránka, tak musí existovat index.php. Což znamená, že v šabloně musí být pokaždé soubor index.php, i kdybyste ho nepoužili.
http://codex.wordpress.org/images/1/18/Template_Hierarchy.png
Nyní si vytvoříme náhledový obrázek naší šablony. Stačí udělat screenshot stránky a uložit jej do složky šablony pod názvem screenshot.png. Pro jistotu bych dodržel rozměry náhledu 300 px na 225 px.
Nakonec se vrhneme do souboru style.css, který by se měl jmenovat style.css, a na začátek souboru vložíme jakousi hlavičku, kde definujeme popis, název, tagy, autora, licenci atp. V podstatě je to pouze komentář, který Wordpress zpracuje a zobrazí jej jako popisek šablony v administraci.
/*
Theme Name: Naše krásná šablona
Theme URI: http://programujte.com/
Description: Nějaký hustokrutěpřísný popis šablony, aby prostě bylo jasné, o čem naše šablona pojednává.
Author: Ladislav Janeček (tanned88)
Version: 1.0
License: Název licence
License URI: odkaz na licenci
Tags: hezká, modrooká, přítulná, sexy, ukecaná, uplakaná, blonďatá, kozatá, šablona
*/Jde se programovat
Teď, když máme vše připraveno, můžeme jít programovat. Tedy, programovat je možná silné slovo. Já osobně bych to nazval používání předepsaných funkcí.
Začneme tedy hlavičkou. Otevřte si soubor header.php a vložte tam kompletní hlavičku z vaší připravené HTML šablony. Teoreticky bych řekl, že stačí vložit kód od tagu <html> včetně doctype po tag <body>. Může se ale stát, že budete chtít, aby na každé stránce bylo stejné menu, jako to je v mém příkladě. V tom případě bychom do tohoto souboru vložili všechen kód, který je hlavou webu naší šablony. Včetně menu, vyhledávání atp.
Po menších úpravých vypadá hlavička nějak takto:
<!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="cs" lang="cs" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="cs" />
<title><?php
global $page, $paged;
wp_title( '|', true, 'right' );
bloginfo( 'name' );
?></title>
<link type="text/css" rel="Stylesheet" href="<?php bloginfo('template_url'); ?>/style.css?v=4" />
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/main.css" type="text/css">
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/jquery.min.js"></script>
<link rel="shortcut icon" href="<?php bloginfo('template_url'); ?>/favicon.ico" />
<meta name="copyright" content="2010, hry.Vyťukej.cz"/>
</head>
<body>
<div id="background_games_xy">
<div id="the_content">
<div id="head">
<div id="logo">
<a href="<?php echo home_url( '/' ); ?>"><img src="<?php bloginfo('template_url'); ?>/images/logo.png" alt="hry.vyťukej.cz" /></a>
</div>
<div id="head_right">
</div>
</div>
<div id="head_menu_midle">
<?php wp_nav_menu( array( 'menu' => 'menu-header') ); ?>
</div>
Jako první se podíváme na nastavení title. Nejprve jsme si definovali globální proměnné a potom jsme použili funkce wp_title( '|', true, 'right' ); a bloginfo( 'name' );. Tím jsme zajistili, aby se v titulku stránky vždy zobrazoval název dané stránky nebo příspěvku a za ním, za separovacím znakem, název stránky.
Dále pak linkování CSS. Zde je důležité, aby každý soubor, obrázek atp. měl absolutní adresu. Tu dopíše do stránky funkce <?php bloginfo('template_url'); ?>/. Nezapomeňte dopsat lomítko před název souboru.
Jako další zde máme odkaz na domácí stránku webu. URL vypíšeme pomocí funkce home_url( '/' );, která však vrací jenom hodnotu, takže pro vypsání musíme použít funkci echo.
A nakonec zde máme funkci wp_nav_menu( array( 'menu' => 'menu-header'));. Tu si budeme muset trošku rozebrat. Tato funkce v podstatě vypisuje menu v podobě <ul><li><a href="#odkaz">odkaz</a></li></ul>. Argumenty, které obsahuje, znázorňují název menu, který potom použijeme v nastavení menu v administraci Wordpressu. Sama o sobě by však tato funkce nefungovala, musíte ji povolit v souboru functions.php, který bude dalším souborem, jenž budeme editovat.
Nyní si tedy otevřeme soubor functions.php. Zde nám v podstatě stačí zaregistrovat již výše zmiňovaný nav_menu pomocí funkce <?php register_nav_menus(); ?>. V tomto souboru si můžete vytvářet vlastní PHP funkce, které pak budete používat na stránkách.
Na konec tohoto dílu se podíváme na footer.php. Zde vložíme patičku našeho webu. Jediná funkce, kterou by tato stránka měla obsahovat, je <?php wp_foot(); ?>.
Nakonec tedy patička vypadá nějak takto:
<div id="foot">
<div id="logo_foot"><a href="#"><img src="<?php bloginfo('template_url'); ?>/images/foot_logo.jpg" alt="vytukej.cz" /></a></div>
<div id="right_content_foot"></ div>
</div>
</div>
</div> <?php
wp_footer();
?>
</body>
</html>
K dnešnímu dílu by to bylo asi vše, příště se podíváme na page.php, single.php a index.php, kde budeme vypisovat obsah stránek a příspěvků.
