Chyba v zobrazení hlavního navigačního menu

Hned na úvodní stránce jsem si všiml chyby v hlavní navigaci. Poslední položka se nevešla na řádek a byla tak hozena na další. Hádám, že to nebyl autorův záměr, navíc odstranění chyby nevyžaduje žádné zásadní zásahy do kódu – stačí nadřazený prvek sémantického seznamu (chválím) rozšířit o 10px. Více viz následující screenshoty.

Chyba se týká položky Videoarchiv

Chyba se týká položky Videoarchiv hlavního navigačního menu.

Příčinou je málo široký nadřezený element:

Příčina chyby v zobrazení hlavního navigačního menu

Řešení je prosté. Stačí elementu ul s třídou “menu” přiřadit šířku 500px, namísto stávajících 490px:

Element ul stačí rozšířit o pouchých 10px.

Prohřešky proti přístupnosti videoarchivu televize Prima

Nejzásadnější a také jediný prohřešek, který budu zmiňovat, je rozdíl barev pozadí a popředí. Vše je snad na první pohled jasné z přiloženého screenshotu:

Šedivé písmo na černém pozadí je opravdu nečitelné.

Pro formálnost snad jen uvedu, že poměr svítivosti a kontrastu barev popředí a pozadí je 1,42:1, kdežto minimální požadovaný, dle nižší úrovně AA, je 3:1. Z prvního poměru lze jasně vyčíst, že barvy jsou hodně podobné!

Hover efekt sice přístupnosti z probíraného úhlu pohledu neodporuje, ale při ovládání webu klávesnicí už k žádnému hover efektu nedojde. Když jsou navíc adresy označeny číselným kódem, nikoli pěkným url s názvem pořadu, ztratí se uživatel klávesnice hned po několika stiscích klávesy “tab”.

Co to má za následek? To, že se uživateli namísto zprávy o tom, že hledání bylo neúspěšné, což mi, a nejen mě, přijde jako logické chování, zobrazí výpis příspěvků na blogu stejně, jako by šlo o stránku s výpisem příspěvků – nedojde ani k přesměrování na úvodní stránku.

Ovšem každý problém má své řešení. Když jsem na toto narazil, chvíli jsem o této problematice něco hleda a narazil jsem na polovičaté řešení uživatele spitzerg. Ten přišel s jednoduchým filtrem, který stačí vložit do souboru functions.php:

add_filter( 'request', 'my_request_filter' );
function my_request_filter( $query_vars ) {
    if( isset( $_GET['s'] ) && empty( $_GET['s'] ) ) {
        $query_vars['s'] = " ";
    }
    return $query_vars;
}

Ovšem toto není dostačující. Tím, že se vyhledávací řetězec změní z prázdného na mezeru, dojde sice k přesměrování na šablonu search.php, ovšem mezi výsledky se objeví všechyn stránky, jelikož nějakou tu mezeru snad každý příspěvek obsahuje.

Je nutné tedy modifikovat také kód souboru šablony search.php. V šabloně Twenty Eleven vypadá obsah tohoto souboru takto:

<?php
/**
 * The template for displaying Search Results pages.
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */
 
get_header(); ?>
 
		<section id="primary">
			<div id="content" role="main">
 
			<?php if ( have_posts() ) : ?>
 
				<header class="page-header">
					<h1 class="page-title"><?php printf( __( 'Search Results for: %s', 'twentyeleven' ), '<span>' . get_search_query() . '</span>' ); ?></h1>
				</header>
 
				<?php twentyeleven_content_nav( 'nav-above' ); ?>
 
				<?php /* Start the Loop */ ?>
				<?php while ( have_posts() ) : the_post(); ?>
 
					<?php
						/* Include the Post-Format-specific template for the content.
						 * If you want to overload this in a child theme then include a file
						 * called content-___.php (where ___ is the Post Format name) and that will be used instead.
						 */
						get_template_part( 'content', get_post_format() );
					?>
 
				<?php endwhile; ?>
 
				<?php twentyeleven_content_nav( 'nav-below' ); ?>
 
			<?php else : ?>
 
				<article id="post-0" class="post no-results not-found">
					<header class="entry-header">
						<h1 class="entry-title"><?php _e( 'Nothing Found', 'twentyeleven' ); ?></h1>
					</header><!-- .entry-header -->
 
					<div class="entry-content">
						<p><?php _e( 'Sorry, but nothing matched your search criteria. Please try again with some different keywords.', 'twentyeleven' ); ?></p>
						<?php get_search_form(); ?>
					</div><!-- .entry-content -->
				</article><!-- #post-0 -->
 
			<?php endif; ?>
 
			</div><!-- #content -->
		</section><!-- #primary -->
 
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Náš problém vyřeší úprava první podmínky tak, aby nevyhodnocovala pouze to, zda-li náš řetězec odpovídá nějakému výsledku, ale také to, zda-li náš řetězec neobsahuje pouhou mezeru:

<?php
/**
 * The template for displaying Search Results pages.
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */
 
get_header(); ?>
 
		<section id="primary">
			<div id="content" role="main">
 
			<?php if ( have_posts() && get_search_query != " " ) : ?>
...

A tím je problém WordPress s prázdným vyhledáváním zobrazujícím výpis příspěvků vyřešen kompletně.

Instalace pluginu na rozdělení do více sloupců

Asi nejjednodušším a dobře fungujícím pluginem je plugin Magazine columns od autora c.bavota. Není nutné jej stahovat z WordPress Plugin Directory, rozbalovat a nahrávat jej skrze FTP do adresáře /wp-content/plugins. Je k nalezení také skrze instalaci pluginů v administraci WordPressu, kdy stačí vyhledat “magazine columns” a dát instalovat.

Použití pluginu pro rozdělení obsahu do více sloupců

Jakmile je zmíněný plugin nainstalovaný a aktivovaný, stačí při psaní příspěvku či stránky přepnout z Visual do HTML (dvě záložky nad hlavním oknem pro tvorbu příspěvků) a vložit kód <!–column–> za místo, kde chcete obsah zalomit do dalšího sloupce. Přepnutí do módu editace HTML je nutný, jinak WordPress sám automaticky převede značky do html entit a ty nebudou poté správně rozpoznány a plugin nebude fungovat. Sloupců lze takto vytvořit maximálně 5. Tedy značku užít 4x.

Použití sloupců pouze na části obsahu příspěvku/stránky ve WordPressu

Autor myslel i na situaci, kdy chcete do sloupců rozdělit pouze jednu část obsahu. V tom případě je nutné vložti více značek do kódu, ale nejde o nic komplikovaného. Opět úpravu provádíme v HTML módu.

Na místo, odkud chceme sloupce používat vložímě kód <!–startcolumns–> a na místo, kde chceme se sloupci přestat potom <!–stopcolumns–>. Obsah mezi těmito značkami rozdělíme do sloupců pomocí již zmíněného kódu <!–column–>.

Zdrojový kód pluginu neumožňuje vytvořit na jedné stránce více než jednu část, která je rozdělena do sloupců, bohužel.

Nedostatky pluginu pro více sloupců a jejich odstranění

Plugin má jednu nevýhodu. Ne všichni ji musí nutně zaznamenat, ovšem pokud v obsahu, který rozdělujete do více sloupců chcete použít napřípklad plugin NexGen Gallery, nebude vám fungovat.

Vlastně nebude fungovat žádný plugin, který využívá technologii shortcode ( [shortcode] ).

Příčinou je autorova nesprává práce s filtry, jak správně poznamenal uživatel lukeyates1981, který také zveřejnil způsob, jak tento bug odstranit.

Abyste se nemuseli prodírat jeho popisem chyby a popisem jak chybu odstranit, přikládám zde již opravený zdrojový kód pluginu verze 1.0.4 ke stažení: magazine-columns.php

Soubor stačí rozbalit a přepsat jím stávající soubor magazine-columns.php v adresáří /wp-content/plugins/magazine-columns/

Dejte ovšem pozor, při případné aktualizaci pluginu, ať již manuální či automaticky staženou, dojde k přepsání této opravy. Pro případ, že by autor aktualizoval plugin a chybu neopravil, bude nutné znovu stávající soubor přepsat.

Dnes se podíváme na stránku http://skype.com.

Ke stažení: Verze pro Windows

Ti z vás, kdo nepoužíváte Linux jakožto svůj operační systém si prvního nedostatku, který zmíním, nevšimnete. Ačkoli je prezentace Skype.com schopna zjistit vámi používaný jazyk a nabídnout vám svou prezentaci ve vašem jazyce, není již schopna zjistit operační systém, který používáte. To vede k tomu, že ačkoli jsem připojen z Linuxu, nemohu rovnou stáhnout Skype ve verzi pro můj operační systém. Přitom řešení je velmi jednoduché.

Ano, lze namítnout, že získání použitého OS z user agent stringu může být zavádějící – lze jej podvrhnout. Ale troufám si tvrdit, že drtivá většina uživatelů svůj user agent string nepodvrhuje. Navíc i kdyby user agent string podvrhovalo 10% uživatelů, vyplatí se skript pro zvývajících 90% nasadit.

Aktivní plocha odkazů

S prvním zmíněným nedostatkem souvisí i tento. Když již použiji odkaz Ostatní soubory ke stažení, ze kterého mohu snad jen tušit, že se pod ním skrývají verze pro další operační systémy – určitě by nebylo na škodu zvolit lepší text informující o dalších verzích, například “Verze pro další operační systémy” či “Používáte jiný operační systém?” (ano, jsou tam ke stažení i další soubory, ale stejně nevím, co si pod tím představit) – dostanu se na stránku, kde má každý operační systém svůj obrázek.

Uživatele přímo svádí neklikat na text “Skype pro …”, ale na logo svého operačního systému. Ovšem chyba lávky – obrázek není klikatelný. Na odhalení této “chyby” nemusí mít člověk přehršel zkušeností s použitelností a přístupností. Lze použít i software, který odhalí, kam uživatelé klikají. Lze jmenovat třeba open source projekt ClikHeat.

Doplnění: Klikací obrázky skype na své prezentaci dokonce již používá. Asi se jen zapomnělo na zmiňovanou stránku. Porovnej: http://www.skype.com/intl/cs/welcomeback/ a http://www.skype.com/intl/cs/get-skype/other-downloads/

To je pro dnešek vše. Jak jsem psal v úvodu, nejde o komplexní případovou studii ani analýzu, ale o pár postřehů, ze kterých se lze něco přiučit.

Každá šablona musí obsahovat aspoň soubor style.css (v případě tzv. child themes) a index.php (v případě parent theme). To ale začínající uživatele nemusí moc zajímat.

Čili změnit vzhled, a v případě speciálních šablon třeba také rozšířit funkcionalitu, můžeme skrze šablony. Takových šablon (anglicky theme, případě themes v plurálu) najde na internetu spousty. Začít můžeme oficiální sbírkou na stránkách WordPressu: http://wordpress.org/extend/themes/

Jinak můžeme samozřejmě využít služeb nějakého internetového vyhledávače a šablon najít ještě mnohem víc (omlouvám se, kdyby vtípek někoho urazil ). Ne všechny jsou ale zdarma (ačkoli WordPress samotný zdarma je). Existují tedy i komerčně prodávané šablony.

Ty většinou bývají široce škálovatelné a někteří tvůrci k nim poskytují i podporu, po nějaký ten měsíc.

Jak nainstalovat vybranou šablonu z oficálního katalogu WordPressu

Oficiální katalog šablon můžeme procháze přímo z administrace webu, do které se dostaneme po zadání adresy webové stránky /wp-admin čili například www.mojestranka.cz/wp-admin. Uživatelské jméno a heslo jste si zadali při instalaci, nebo vám bylo administrátorem vytvořeno později a zasláno emailem.

V administraci, v levém panelu, je boxík Vzhled (ang. Apperance) a jako první položka jsou Šablony (Themes). Po přejití na tuto stránku uvidíte všechny dostupné šablony, které jsou již instalované. Nahoře na stránce jsou poté dvě záložky, z nichž jedna, “Správa šablon” (Manage Themes), je aktivní. Druhou neaktivní je “Instalace šablon” (Install themes).

A přávě na druhé záložce máme k dispozici WordPress katalog šablon. Vyhledávat v něm můžete dle názvu, autora či štítku, ale také lze okruh vyhledávání zúžit dle zaškrtaných vlastností.

Vyhledané šablony se vám seřadí podobně jako na předchozí záložce. Máte na výběr, u každé z nalezených šablon, dva odkazy. Náhled a Instalovat.

Odkaz náhled vám otevře javascriptové pop-up okno, ve kterém si můžete prohlédnout šablonu běžící na testovací instalaci WordPressu. Odkaz Instalovat otevře také pop-up okno v němž znovu stisknutím tlačítka “Instalovat” nahrajete šablonu na váš web. Po nahrání máte na nové stránce, na kterou jste stisknutím tlačítka instalovat v pop-up okně přešli, na výběr ze tří odkazů: Náhled, Aktivovat a Zpět do Instalátoru.

Posledně jmenovaný odkaz snad není třeba vysvětlovat a první jmenovaný jsme si již také vysvětlili. Ovšem v tomto případě již v pop-up okně neuvidíte testovací stránku WordPressu, ale váš web tak, jak bude po nasazení šablony vypadat. Tedy uvidíte v šabloně váš obsah. Což je před nasazením nové šablony velmi výhodné pro kontrolu, jestli je šablona plně funkcí dle vašich představ. Můžete totiž procházet celým webem s novou šablonou. Podíváte se jak jsou vypisovány rubriky, příspěvky a stránky.

Snad si jen dovolím jeden užitečný tip. Pakliže na odkaz “Náhled” clicknete pravým tlačítkem myši a otevřete si odkaz v novém panelu, nebudete limitovaní rozměry pop-up okna, což může být někdy flustrující a ne zcela přehledné.

No a již jsem to nastínil. Prostřední odkaz slouží k nasazení vaší šablony na váš web. Po stisknutí tohoto odkazu již nebudete muset nic potvrzovat a aktivujte vybranou šablonu. Samozřejmě nemusíte šablonu aktivovat ihned. Můžete šablonu aktivovat také později ze záložky “Správa šablon”, kde jsou všechny nainstalované šablony.

Čili je rozdíl mezi instalovanou a aktivovanou šablonou. Instalovaná šablona je připravená na vašem webu k aktivaci, nasazené, skrze odkaz “Aktivovat”. A aktivovaná šalobna je již aktivována a web se zobrazuje skrze vzhled v ní nadefinovaný. Aktivní šablona se na záložce “Správa šablon” zobrazuje sama na řádku vlevo nahoře.

Instalace šablony skrze FTP

Tuto metodu využijete, pakliže jste svou šablonu nenašli v oficiálním katalogu a nebo vám nefunguje instalace skrze instalátor.

Pakliže máte instalovaný WordPress, tak jste se s FTP již pravděpodobně setkali. Předpokládám, že někde máte uložená nebo poznamenaná hesla k FTP serveru a umíte se skrze FTP k vašemu webu připojit.

Pokud tak učiníte, dostanete se do rootu webu (pokud nemáte FTP nastaveno jinak). Je nutné, pokud není WordPress nainstalovaný na rootu webu, přejít do kořenové složky instalace WordPressu. Jak ji poznáte? Jde o složku se souborem, mimo jiné, wp-config.php a složka wp-content a wp-includes. Někdy musíte přejít do složky public nebo public-html a v ní poté třeba ještě do složky wp, wordpress, blog a podobně.

Pakliže jste tedy v kořenové složce instalace WordPressu, přejděte do adresáře wp-content a v něm do adresáře themes.

V tomto adresáři jsou již adresáře jednotlivých šablon. Každá šablona musí mít svůj adresář. A ten se klidně může jmenovat jinak než se šablona jmenuje v adminstraci WordPressu. Název pro administraci se totiž bere ze souboru style.css.

Pokud jste tedy stáhli šablonu z nějakého webu, pravděpodobně v nějakém .zip či .rar archívu, musíte tuto šablonu u vás na počítači rozbaliz a zajistit, aby byla v nějakém adresáři (někdo tento útvar nazývá také složkou). A v adresáři již přímo musí být soubory typu index.php, style.css, single.php, category.php. Čili nesmí být tyto soubory vnořeny ještě do dalšího adresáře.

Takovou složku pak celou uploadujete skrze FTP do /wp-content/themes. Opět je důležité aby soubory byly ve složce (čili aby nebyly přímo v wp-content/themes, ale třeba /wp-content/themes/moje-sablona) a aby nebyly vnořeny hlouběji. Čili v adresáři /wp-content/themes/moje-sablona bude již přímo soubor index.php, style.php, popřípadě category.php nebo single.php.

Pakliže jste takto šablonu nahráli na váš web a má nastavená příslušná práva (aspoň 664 – práva se nastavují většinou clicknutím pravého tlačítka myši na soubor nebo celý adresář a v pop-up menu bývá upravit práva či něco podobného) objeví se v administraci (Vzled->Šablony a záložka Správa šablon). Opět si ji můžete prohlédnout nebo aktivovat. Vlastně jen uděláte to, co v první metodě udělal WordPress sám. Šablonu stáhl, rozbalil a nahrál do příslušného adresáře (mimo adresář wp-content/themes WordPress žádné šablony neregistruje).

Nastavení šablony

Jak jsem již poznamenal, některé šablony různých nastavení. Ovšem není to podmínkou a už vůbec ne pravidlem. Pokud jste si ale stáhli šablonu s tím, že ji můžete upravovat, bylo to avizováno tvůrcem, poté hledejte v administaci, v levém panelu buď položku Nastavení v boxíku Vzhled a nebo rovnou celý nový boxík (klidně až úplně dole) s názvem vámi nainstalované a aktivované (před aktivací nelze zakto šablonu nastavovat) šablony a v něm již buou příslušné položky (např. nastavení).

Speciální šablona pro konkrétní rubriku, stránku či příspěvek
Dvě různé WordPress šablony na jednom blogu

Pokud ale chceme pro všechny příspěvky v dané kategorii užít rozdílný layout, a vůbec jinou šablonu, se slug a id si moc nevystačíme. V tom případě budeme muset využít komplikovanější techniky.

Musíme si vytvořit “prakticky prázný” soubor single.php, který bude obsahovat pouze rozhodovací algoritmus. Na to využijeme WordPress funkce in_category() a php funkce get_template_part().

Obsah bude následující, v případě, že chceme speciální šalonu pro příspěvky v rubrice “speciální” a “moje kategorie”. Jako parametr funkce in_category uvedeme pole obsahující “slug”, čili název v URL, kýžené kategorie:

<?php 
if ( in_category( array('specialni', 'moje-kategorie' ) ) ) {
 get_template_part('single', 'specialni');
} else {
 get_template_part('single', 'normalni');
}
?>

Přičemž soubor single-normalni.php bude obsahovat původní obsah souboru single.php. Popřípadě, pokud do této doby neexistoval single.php, obsah souboru index.php. A soubor single-specialni.php bude obsahovat upravený kód vašeho speciálního zobrazení všech příspěvků v kategorii speciální a moje kategorie.

Pozor, soubor single-normalni.php a single-specialni.php musí obsahovat get_header() a get_footer(), jako každý jiný tradiční soubor WordPress šablony. Jen, dle tohoto článku, upravený soubor single.php tyto funkce obsahovat nesmí.

Jak vytvářet speciální hlavičky a patičky a sidebary jsem probíral v předchozím článku.

V něm je představeno řešení č. 1, kdy pro kategorii, příspěvek nebo stránku vytvoříme speciální šablonu pomocí tzv. template slugs, kdy vestavěná hierarchie užitích šablon, vždy nejdříve kontroluje o jaký obsah se jedná (například kategorie, stránka) a poté hledá existující šablonu v konkrétním pořadí.

Pro kategorii s názvem “Moje Kategorie” a s id=3 vypadá rozhodovací proces takto:

1) jde o kategorii? Ano
2) Existuje v šabloně soubor s názvem category-moje-kategorie.php? Ano, tak jej použij. Ne, bod 3
3) Existuje v šabloně soubor s názvem category-3.php? Ano, tak jej použij. Ne, bod 4.
4) Existuje v šabloně soubor s názvem category.php? Ano, tak jej použij. Ne, bod 5.
5) Existuje v šabloně soubor s názvem archive.php? Ano, tak jej použij. Ne, bod 6.
6) Použij soubor index.php (ten v každé šabloně musí existovat, a pokud neexistujte v child-template tak v parent template uričtě ano).

Problematiku demonstruje i obrázek umístěný v kodexu. Ten obsahuje rozhodovací procesy pro všechny druhy obsahu WordPressu.

Takže již víme, že pro vytvoření speciální šablony pro jednu konkrétní rubriku nám stačí nakopírovat soubor category.php (nebo archive.php či index.php – podle toho který v naší šabloně existuje) a přejmenovat jej buď do tvaru se slugem (čili názvem v pěkné url – s pomlčkami namísto mezer a bez diakritiky) a nebo s id. No a poté již můžeme upravovat či zcela od píky vytvářet speciální zobrazení.

Úprava hlavičky, patičky a sidebaru

No, ale co když chceme upravit také hlavičku, patičku či sidebar? Na to nám slouží parametr funkcí get_header(), get_footer() a get_sidebar().

Všem třem funkcím lze shodně přidat do jejich volání parametr s názvem, který poté zobrazí konkrétní soubor. Čili pokud chceme mít speciální šablonu pro hlavičku v naší template kategorie, upravíme volání funkce get_header(); v šabloně naší speciální kategorie. Třeba v souboru category-moje-kategorie.php.

<?php get_header('moje-kategorie'); ?>

Tato funkce bude hledat soubor s názvem header-moje-kategorie.php. Analogicky můžeme volat i další dvě zmíněné funkce:

get_footer('moje-kategorie'); //hledá soubor footer-moje-kategorie.php
get_sidebar('moje-kategorie'); //hledá soubor sidebar-moje-kategorie.php

Tím si můžeme zcela přizpůsobit výpis obsahu jedné konkrétní kategorie, stránky či příspěvku.

Snad jen jako poznámku pod čarou berte informaci, že pokud chceme rozdílné zobrazení homepage od kategorie či příspěvku, stačí vytvořit v šabloně soubory category.php a single.php a případně z nich volat jinou hlavičku, patičku a sidebar.

Něco jiného je když cheme vytvořit speciální šablonu pro stránku, která je volitelná z administrace. Ovšem tím jsem se již zabýval v předchozím článku.

Jak vytvořit speciální šablonu pro všechny příspěvky v jedné konkrétní kategorii rozebírám v jiném článku.

Diskusní fóra, jakožto prostředek podpory WordPressu, a vůbec jakéhokoli softwaru, nejsou zkrátka to pravé ořechové. Na takovém WordPress fóru se jen těžko orientujete v otázkách a řešení a přeci jen jde o software zaměřený jiným směrem – o diskusní fórum.

Samozřejmě vím, že technické zázemí úspěšnou službu nedělá. V případě otevřené podpory pro opensource software, kterým WordPress je, jde především a hlavně o komunitu. Vím a věřím, že WordPress poradna, umístěná na adrese: http://podpora.dgx.cz/wordpress/, či WordPress fórum, umístěné na http://forum.cwordpress.cz, má silnou a zdravou komunitu. O WordPress poradnu na serveru http://www.separatista.net/forum/ se zas starají odborníci, kteří mají za sebou práci na české lokalizaci WordPressu.

Nechci dělat konkurenci těmto třem zmíněným WordPress poradnám, ale chci ukázat že WordPress poradna nemusí být fórem a že vše může fungovat i jinak.

Doufám, že si můj nově spuštěný projekt WordPress poradny na adrese: http://david.binda.cz/wordpress-otazky-a-odpovedi/ najde své příznivce.

Projekt spouštím tak trochu nepřipraven, hlavně co se překladů týče. Ty nejsou zcela kompletní a tu a tam tedy narazíte na nějakou tu anglickou větu, ovšem jakmile bude trochu víc času, zapracuji na dokonalejších a kompletnějších překladech. Také se budu snažit, ze začátku intenzivněji, tento projekt podpořit svou účastí na zodpovídání položených otázek.

Takže, podpořte tento nový projekt a položte otázku.

Přečtěte si také: První díl věnovaný úvodu do vytváření WordPress šablon ze statického HTML

Rozdílné zobrazení pro příspěvek, kategorii a titulní stránku

WordPress umožňuje použít pro různé druhy obsahu užít různé soubory šablony a tím snadno zajistit rozdílné zobrazení. Ovšem snad všechny webové stránky mají nějaké části společné, minimálně jde o hlavičku a patičku. WordPress na to pamatuje a umožňuje vytvořit samostatný soubor s patičkou a s hlavičkou, a to v širším smyslu. Čili nejde jen o sekci <head>, ale také o grafické záhlaví, popřípadě i navigační menu.

header.php a footer.php

Pro to, abychom při změně záhlaví webu nemuseli vždy měnit více souborů, ale změnu sme mohli provést jen na jednom souboru, máme k dispozici soubor header.php a funkci get_header();

V našem demonstračním HTML kódu se bude na většině podstránek opakovat celé záhlaví (navigační menu a fialový obdélník s logem), včetně sekce <head>. Čili ze souboru index.php můžeme do nově vytvořeného souboru header.php přesunout celou následující část zdrojového kódu:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
 
Name       : Perplex  
Description: A two-column, fixed-width design for 1024x768 screen resolutions.
Version    : 1.0
Released   : 20110110
 
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title><?php bloginfo('name'); ?> <?php wp_title(); ?></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="<?php bloginfo('template_url'); ?>/style.css" rel="stylesheet" type="text/css" media="screen" />
<?php wp_head(); ?>
</head>
<body>
<div id="header">
	<div id="menu">
		<ul>
			<li><a href="#" class="first">Homepage</a></li>
			<li class="current_page_item"><a href="#">Personal Blog</a></li>
			<li><a href="#">About Us</a></li>
			<li><a href="#">Contact Us</a></li>
		</ul>
	</div>
	<!-- end #menu -->
</div>
<!-- end #header -->
<div id="logo">
	<h1><a href="#">Perplex </a></h1>
	<p><em> template design by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a></em></p>
</div>
<hr />
<!-- end #logo -->

A do nově vytvořeného souboru footer.php zas následující část:

<div id="footer">
	<p>Copyright (c) 2011 Sitename.com. All rights reserved. Design by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
</div>
<!-- end #footer -->
<?php wp_footer(); ?>
</body>
</html>

Na místo, kde v souboru index.php byly přesunuté části, umístíme php funkce get_header() pro volání souboru s hlavičkou a get_footer() pro volání souboru s patičkou. A jelikož tyto obě části byly na začátku, respektive na konci kódu, umístíme tato volání na začátek souboru, respektive konec souboru.

Čili soubor index.php bude vypadat, na našem demonstračním HTML, takto:

<?php get_header(); ?>
<div id="page">
	<div id="page-bgtop">
		<div id="page-bgbtm">
<div id="content">
<?php if (have_posts()) : /* existují příspěvky pro danou stránku */ ?>
 
		<?php while (have_posts()) : the_post(); /* zpracuj následujícím kódem každý jeden příspěvek */ ?>
 
			<div <?php post_class() /* přidá třídu */ ?> id="post-<?php the_ID(); ?>">
				<h2><a href="<?php the_permalink() /* trvalý odkaz na příspěvek */?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); /* titulek příspěvku */ ?></a></h2>
				<small><?php the_time('j. F. Y') /* datum publikace */ ?> <!-- by <?php the_author() ?> --></small>
 
				<div class="entry">
					<?php the_content('Celý článek &raquo;'); /* to nejdůležitější, zobrazí obsah příspěvku*/ ?>
				</div>
 
				<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Categories: <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
			</div>
 
		<?php endwhile; /* konec zpracování každého jednoho příspěvku */ ?>
 
		<div class="navigation">
			<div class="alignleft"><?php next_posts_link('&laquo; Další články') ?></div>
			<div class="alignright"><?php previous_posts_link('Předchozí články &raquo;') ?></div>
		</div>
 
	<?php else : /* žádné příspěvky pro danou stránku neexistují */ ?>
 
		<h2 class="center">Not Found</h2>
		<p><?php _e('Sorry, no posts matched your criteria.'); /* chybová hláška */ ?></p>
		<?php get_search_form(); /* přidá vyhledávací formulář */ ?>
 
	<?php endif; ?>
</div>
<div id="sidebar">
				<ul>
					<li>
						<h2>Bibendum  ornare </h2>
						<ul>
							<li><a href="#">Nec metus sed donec</a></li>
							<li><a href="#">Magna lacus bibendum mauris</a></li>
							<li><a href="#">Velit semper nisi molestie</a></li>
							<li><a href="#">Eget tempor eget nonummy</a></li>
							<li><a href="#">Nec metus sed donec</a></li>
							<li><a href="#">Velit semper nisi molestie</a></li>
							<li><a href="#">Eget tempor eget nonummy</a></li>
							<li><a href="#">Nec metus sed donec</a></li>
						</ul>
					</li>
					<li>
						<h2>Pellenteque ornare </h2>
						<ul>
							<li><a href="#">Nec metus sed donec</a></li>
							<li><a href="#">Magna lacus bibendum mauris</a></li>
							<li><a href="#">Velit semper nisi molestie</a></li>
							<li><a href="#">Eget tempor eget nonummy</a></li>
							<li><a href="#">Nec metus sed donec</a></li>
							<li><a href="#">Velit semper nisi molestie</a></li>
							<li><a href="#">Eget tempor eget nonummy</a></li>
							<li><a href="#">Nec metus sed donec</a></li>
						</ul>
					</li>
					<li>
						<h2>Turpis nulla</h2>
						<ul>
							<li><a href="#">Nec metus sed donec</a></li>
							<li><a href="#">Magna lacus bibendum mauris</a></li>
							<li><a href="#">Velit semper nisi molestie</a></li>
							<li><a href="#">Eget tempor eget nonummy</a></li>
							<li><a href="#">Nec metus sed donec</a></li>
							<li><a href="#">Nec metus sed donec</a></li>
							<li><a href="#">Magna lacus bibendum mauris</a></li>
						</ul>
					</li>
				</ul>
			</div>
			<!-- end #sidebar -->
		</div>
	</div>
</div>
 
 
<?php get_footer; ?>

Rozdělení šablony pro jednotlivé druhy obsahu

Tak a když nyní máme oddělenou hlavičku a patičku webu, která tak zůstane vždy stejná na celém našem webu, můžeme přistoupit k samotné diferenciaci.

Přidělování jednotlivých souborů šablon probíhá dle následujícího vzorce graficky znázorněného na stránkách codexu: http://codex.wordpress.org/Template_Hierarchy#Visual_Overview

Z tohoto vzorce vyplývá, že pokud budeme chtít jiné zobrazení pro příspěvek, stačí nakopírovat soubor index.php a přejmenovat jej na single.php, provést požadované úpravy, třeba odstranění odkazu z nadpisu <h2> v rámci cyklu (the loop), a soubor uložit. Obdobně pro kategorii můžeme vytvořit soubor category.php a pro stránku page.php.

Toto lze navíc rozšířit o tzv. slugy, tedy speciální zobrazení pro konkrétní příspěvek, konkrétní stránku a konkrétní kategorii. Viz jeden z mých předchozích článků věnovaný této problematice.

Ze schématu dále vyplývá, že všechny neexsitující soubory mají fallback na index.php (to je důvod, proč nám u minimální šablony stačí právě tento soubor).

Widgetized sidebar

Další specialitkou WordPressu je widgetized sidebar, který umožňuje uživatelům vkládat jednoduše do postranního panelu nejrůznější informace a ovládací prvky.

Pro zpřístupnění tohoto mechanismu budeme potřebovat zavés vedle již existujících souborů WordPress šablony (header.php, footer.php, index.php, style.php a popřípadě single.php, page.php či category.php) další soubor a sice speciální soubor s názvem functions.php, který může obsahovat funkce rozšiřující funkcionalitu WordPressu.

Po vytvoření tohoto souboru v adresáři naší WordPress šabony do něj umístíme, pro zprovozněnní widgetized sidebaru následující kód:

1
2
3
4
5
6
7
8
9
10
11
12

<?php 
if ( function_exists('register_sidebar') ) {
register_sidebar(array(
	'name' => 'Můj Sidebar', //název sidebaru zobrazující se v administraci
	'id' => 'sidebar-$i', //id sidebaru pro možnost stylování pomocí css
	'description'=> 'Můj sidebar', //popisek sidebaru
	'before_widget' => '<li>', //do jakého kódu obalit každý widget - otevírací kód
	'after_widget' => '</li>', //uzavírací kód každého widgetu
	'before_title' => '<h2>', //obal pro nadpis widgetu v sidebaru - uvozovací kód
	'after_title' => '</h2>' ));   //obal pro nadpis widgetu v sidebaru - ukončovací kód
}
?>

Tím si tedy v administraci zpřístupníme sidebar s názvem Sidebar a můžeme do něj přidávat widgety. Ale to ještě není všechno. Ještě potřebujeme sidebar nějak zobrazit. K tomu slouží následující kód, kde v uvozovkách u funkce dynamic_sidebar() je název definovaný ve functions.php :

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Můj Sidebar') ) : ?>
<!--Zde lze vložit obsah, který se zobrazí v případě, že sidebar nebude naplněn widgety-->
<?php endif; ?>

Čili pakliže někam vložíte tento ḱód, budou se v něm zobrazovat widgety, které nastavíte skrze administraci.

V našem demonstračním ḱódu to bude vypadat takhle (vynechal jsem obsah nad elementem div s id=”sidebar”)

<?php get_header(); ?>
<div id="sidebar">
				<ul>
					<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Můj Sidebar') ) : ?>
					<li>
						<h2>Bibendum  ornare </h2>
						<ul>
							<li><a href="#">Nec metus sed donec</a></li>
							<li><a href="#">Magna lacus bibendum mauris</a></li>
							<li><a href="#">Velit semper nisi molestie</a></li>
							<li><a href="#">Eget tempor eget nonummy</a></li>
							<li><a href="#">Nec metus sed donec</a></li>
							<li><a href="#">Velit semper nisi molestie</a></li>
							<li><a href="#">Eget tempor eget nonummy</a></li>
							<li><a href="#">Nec metus sed donec</a></li>
						</ul>
					</li>
					<li>
						<h2>Pellenteque ornare </h2>
						<ul>
							<li><a href="#">Nec metus sed donec</a></li>
							<li><a href="#">Magna lacus bibendum mauris</a></li>
							<li><a href="#">Velit semper nisi molestie</a></li>
							<li><a href="#">Eget tempor eget nonummy</a></li>
							<li><a href="#">Nec metus sed donec</a></li>
							<li><a href="#">Velit semper nisi molestie</a></li>
							<li><a href="#">Eget tempor eget nonummy</a></li>
							<li><a href="#">Nec metus sed donec</a></li>
						</ul>
					</li>
					<li>
						<h2>Turpis nulla</h2>
						<ul>
							<li><a href="#">Nec metus sed donec</a></li>
							<li><a href="#">Magna lacus bibendum mauris</a></li>
							<li><a href="#">Velit semper nisi molestie</a></li>
							<li><a href="#">Eget tempor eget nonummy</a></li>
							<li><a href="#">Nec metus sed donec</a></li>
							<li><a href="#">Nec metus sed donec</a></li>
							<li><a href="#">Magna lacus bibendum mauris</a></li>
						</ul>
					</li>
				<?php endif; ?>
				</ul>
			</div>
			<!-- end #sidebar --> 
<?php get_footer; ?>

No a to je pro zfunkčnění widgetized sidebaru vše. Snad jen ještě pro doplnění upřesním, že stejně jako jsme z hlavního souboru (index.php, single.php a podobně) vyjmuli hlavičku s patičkou, můžeme vyjmout i sidebar. A to jednoduše tak, že veškerý kód, který by se měl v šabloně opakovat a jenž tvoří sidebar, umístíme do souboru sidebar.php (v našem případě od div s id=”sidebar” až po komentář &lt– end #sidebar –>. A namísto vyjmuté části kódu umístíme volání WordPress funkce get_sidebar

<?php get_sidebar(); ?>

Uživatelské navigační menu

WordPress od verze 3.0 umožňje skrze administraci jednoduše vytvářet navigační menu. Ovšem šablona musí tuto funkcionalitu podporovat. Nyní si ukážeme, jak toto zprovoznit i v naší šabloně.

Při “porcování” šablony do jednotlivých souborů se nám navigační menu dostalo do souboru s hlavičkou (header.php). Tam tedy budem provádět úpravy. Ale až poté, co funkci navigačních menu zprovozníme v nám již známém souboru functions.php. Kód pro functions.php:

<?php if ( function_exists( 'register_nav_menu' ) ) {
	register_nav_menu( 'top-menu', 'Hlavní menu' );
} ?>

To co je důležité, jsou parametry WordPress funkce register_nav_menu. Prvním parametrem je umístění menu (bez mezer) a druhým je popis menu. Popis se používá při zobrazení v administraci, umístění je pro vnitřní potřeby šablony. Víc do functions.php přidávat nemusíme.

Dalším krokem je nahrazení doposud statického menu v hlaviče za dynamické. Nahradíme tedy celý kód menu jednou WordPress funkcí a sice funkcí wp_nav_menu, přičemž parametr theme_location se musí shodovat s prvním parametrem funkce register_nav_menu z functions.php. Parametr menu_id nastavuje atribut id našeho menu, depth ovlivňuje počet úrovní, které se mají vypsat a echo zajistí, že menu bude vypsáno. Více parametrů je v dokumentaci funkce wp_nav_menu:

<?php wp_nav_menu('theme_location=top-menu&menu_id=top-menu&depth=1&echo=1'); ?>

Více o problematice naleznete tradičně v codexu:
http://codex.wordpress.org/Navigation_Menus

Závěrem

Tento navazující článek (přečtěte si také první díl) snad již vyčerpal téma základy tvorby WordPress šablon. V současnosti mě nenapadá, co by případně melo být obsahem dalšího dílu, jelikož všechny další úpravy šablon jsou již velmi specifické. Ale pokud vás nějaká tematika zajímá, nestyďte se a přihlašte se o ní v diskusi pod článkem.

Demonstrační HTML kódy užité v následujícím článku pochází ze šablony perplex ze serveru freecsstemplates.org

Nejjednodušší WordPress šablona se musí sestávat aspoň ze souboru index.php a ideálně také ze souboru style.css. WordPress si všímá pouze šablon umístěných v adresáři /wp-content/themes/ a každá šablona musí být umístěna ještě ve vlastním adresáři. Čili při vytváření naší šablony si založíme adresář my_template a do ní vytvoříme dva soubory index.php a style.css.

Takže zatím máme v adresáři /wp-content/themes/my_template dva prázdné soubory index.php a style.css.
Do souboru style.css, na jeho začátek, vložíme následující obsah, kterým si zajistíme to, že šablona se bude v administraci hlásit jako Moje Šablona 1.0 od Já :

/*
Theme Name: Moje Šablona
Description: Můj první pokus o WordPress šablonu
Author: Já
Version: 1.0
*/

Dále by se do souboru style.css slušelo nakopírovat WordPress Generated Classes, se kterými WordPress automaticky počítá, aspoň co se WYSIWYG editoru týká a obsah našeho stávajícího css souboru.

.aligncenter, div.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.alignleft {
	float: left;
}
.alignright {
	float: right;
}
.wp-caption {
	background-color: #f3f3f3;
	border: 1px solid #ddd;
	-khtml-border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px; /* optional rounded corners for browsers that support it */
	margin: 10px;
	padding-top: 4px;
	text-align: center;
}
.wp-caption img {
	border: 0 none;
	margin: 0;
	padding: 0;
}
.wp-caption p.wp-caption-text {
	font-size: 11px;
	line-height: 17px;
	margin: 0;
	padding: 0 4px 5px;
}

No a do souboru index.php nakopírujeme html kód úvodní stránky stránky našeho webu (velmi pravděpodobně jde o soubor index.html).

No a nyní se již musíme vrhnout na úpravy našeho původního HTML kódu a okořenit jej o nějaké ty php příkazy, kterým WordPress rozumí.

Úpravy sekce head

Nejdříve začneme s úpravou hlavičky. Sekce head by vždy měla obsahovat, těsně před svým ukončením, čili před tagem </head>, volání funkce wp_head().

1
2
3
4
5
6
7
8
9

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Perplex   by Free CSS Templates</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<?php wp_head(); ?>
</head>

V kódu je funkce wp_head() volána na řáku 8. Jde o funkci, kterou využívají prakticky všechny pluginy, její vynechání by tedy znamenalo znemožnění jejich fungování.

Dále budeme chtít nalinkovat náš css soubor. Ve výše uvedeném příkladě máme relativní odkaz na style.css. Ačkoli je název shodný (a to je pouze náhoda, že mnou vybraná demonstrační šablona má tento název pro soubor s css styly) nebude nám tento odkaz fungovat. Musíme jej doplnit o celou cestu z rootu webu k našemu souboru style.css. Opět to zajistí php funkce, tentokráte funkce bloginfo():

1
2
3
4
5
6
7
8
9

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Perplex   by Free CSS Templates</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="<?php bloginfo('template_url'); ?>/style.css" rel="stylesheet" type="text/css" media="screen" />
<?php wp_head(); ?>
</head>

Všimněte si změny na řádku 7, kdy sme doplnili jak volání funkce bloginfo, tak lomítko před název našeho souboru se styly. Funkce bloginfo totiž vrací něco v tomto smyslu “http://example/home/wp/wp-content/themes/parent-theme” (bez uvozovek) a tudíž by bez námi doplněného lomítka vypadala adresa poté takto: “http://example/home/wp/wp-content/themes/parent-themestyle.css” ale my chceme takovouto adresu: “http://example/home/wp/wp-content/themes/parent-theme/style.css”.

Tak nyní bychom snad chtěli ještě mít možnost ovlivňovat titlek stránky, tag <title>. To nám zajistí funkce wp_title(), ideálně v kombinaci s nám již známou funkcí bloginfo(). Změnu provedeme na řádku 4 následujícího kódu, přičem smažeme “natvrdo” vložený titulek bývalé HTML statickéh stránky:

1
2
3
4
5
6
7
8
9

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title><?php bloginfo('name'); ?> <?php wp_title(); ?></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="<?php bloginfo('template_url'); ?>/style.css" rel="stylesheet" type="text/css" media="screen" />
<?php wp_head(); ?>
</head>

Titulek stránky při zobrazení příspěvku poté bude vypadat nějak takto: My WordPress Blog » Hello world!. Kde My WordPress Blog je název blogu, který lze upravit v administraci a Hello world! je název příspěvku, který lze nastavit při editaci příspěvku. Na titulní stránce bude zobrazeno jen My WordPress Blog. Pakliže chcete jiné pořadí nebo jiný oddělovač názvu blogu od názvu příspěvku, podívejte se do dokumentace.

Tím bychom byli s úpravami hlavičky, aspoň pro základní fungování naší nové WordPress šablony, hotovi. Dále se vrhneme na úpravu patičky, která je o dost jednodušší a po níž nám chybí již “jen” to hlavní, motor zobrazování obsahu vytvořený skrze administraci.

Úprava patičky – funkce wp_footer()

Stejně jako je velmi důležitá, pro fungování pluginů, funkce wp_head() v hlavičce, je důležitá i funkce wp_footer() v patičce webu. Přesněji její umístění těsně před uzavírajícím </body> tagem:

.
.
.
<?php wp_footer(); ?>
</body>
</html>

The Loop – zobrazování obsahu vytvořeného v administraci

Základním kamenem každé WordPress šablony je cyklus (anglicky loop), který se stará o výpis všech článků, které odpovídají dané kategorii (či zobrazení hlavní stránky) a nebo jen zobrazení jednoho jediného příspěvku. V případě jednoho příspěvku (single post) proběhne cyklus pouze jednou, ale stále je nutné, aby vše bylo zapsáno v cyklu. Základní WordPress cyklus vypadá takto:

1
2
3
4
5
6
7

<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
...
<?php endwhile; ?>
<?php else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>

Čili nejdříve se otestuje, jestli jsou vůbec pro danou stránku (kategorii, příspěvek, titulní stránku) vůbec nějaké příspěvky k zobrazení(řádek 1). A pakliže ne(řádek 5), vyhodí se chybová hláška (řádek 6).
Pakliže nějaké příspěvky ale jsou, spustí se cyklus while, který proběhne pro každý jednotlivý příspěvek (řádek 2).

Ve výše uvedeném zdrojovém kódu cyklu samozřejmě něco chybí. A sice způsob, jakým se má příspěvek zpracovat. Způsob zpracování je ve zmíněném kódu nahrazen třemi tečkami. Na jejich místo přijde samotný kód. Příkladem budiž the loop z defaultní šablony WordPressu 2.9 :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<?php if (have_posts()) : /* existují příspěvky pro danou stránku */ ?>
 
		<?php while (have_posts()) : the_post(); /* zpracuj následujícím kódem každý jeden příspěvek */ ?>
 
			<div <?php post_class() /* přidá třídu */ ?> id="post-<?php the_ID(); ?>">
				<h2><a href="<?php the_permalink() /* trvalý odkaz na příspěvek */?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); /* titulek příspěvku */ ?></a></h2>
				<small><?php the_time('j. F. Y') /* datum publikace */ ?> <!-- by <?php the_author() ?> --></small>
 
				<div class="entry">
					<?php the_content('Celý článek &raquo;'); /* to nejdůležitější, zobrazí obsah příspěvku*/ ?>
				</div>
 
				<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Categories: <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
			</div>
 
		<?php endwhile; /* konec zpracování každého jednoho příspěvku */ ?>
 
		<div class="navigation">
			<div class="alignleft"><?php next_posts_link('&laquo; Další články') ?></div>
			<div class="alignright"><?php previous_posts_link('Předchozí články &raquo;') ?></div>
		</div>
 
	<?php else : /* žádné příspěvky pro danou stránku neexistují */ ?>
 
		<h2 class="center">Not Found</h2>
		<p><?php _e('Sorry, no posts matched your criteria.'); /* chybová hláška */ ?></p>
		<?php get_search_form(); /* přidá vyhledávací formulář */ ?>
 
	<?php endif; ?>

Takže jak bylo řečeno, každá šablona musí mít tento (nebo samozřejmě nějakým způsobem upravený) cyklus ve svém těle.

Již máte přesunuté css předpisy do souboru style.css a ten je správně nalinkován z hlavičky (sekce <head>) a v hlavičce máte také titulek webu s titulkem příspěvku a hook pro pluigny. Hook máte také vv patičce webu a výše zmíněným cyklem, nahradíte hlavní obsahovou část vaší šabony. V demonstrační HTML stánce jde o obsah divu s id=”content”:

<div id="content">
				<div class="post">
					<div class="post-bgtop">
						<div class="post-bgbtm">
							<h2 class="title"><a href="#">Welcome to Perplex </a></h2>
							<p class="meta"><span class="date">Sunday, January 26, 2011</span> 7:27 AM Posted by <a href="#">Someone</a></p>
							<div class="entry">
								<p>This is <strong>Perplex </strong>, a free, fully standards-compliant CSS template designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>, released for free under the <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5</a> license.  You're free to use this template for anything as long as you link back to <a href="http://www.freecsstemplates.org/">my site</a>. Enjoy :)</p>
								<p>Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum ipsum. Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, orci in felis. </p>
							</div>
						</div>
					</div>
				</div>
				<div class="post">
					<div class="post-bgtop">
						<div class="post-bgbtm">
							<h2 class="title"><a href="#">Lorem ipsum sed aliquam</a></h2>
							<p class="meta"><span class="date">Sunday, January 26, 2011</span> 7:27 AM Posted by <a href="#">Someone</a></p>
							<div class="entry">
								<p>Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum vel, tempor at, varius non, purus. Mauris vitae nisl nec   consectetuer. Donec ipsum. Proin imperdiet est. Phasellus <a href="#">dapibus semper urna</a>. Pellentesque ornare, orci in consectetuer hendrerit, urna elit eleifend nunc, ut consectetuer nisl felis ac diam. Etiam non felis. Donec ut ante. In id eros.</p>
								<p>Mauris vitae nisl nec metus placerat consectetuer. Donec ipsum. Proin imperdiet est. Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum vel, tempor at, varius non, purus. Mauris vitae nisl nec metus placerat consectetuer. Donec ipsum. Proin imperdiet est. Phasellus <a href="#">dapibus semper urna</a>. Pellentesque ornare, orci in consectetuer hendrerit, urna elit eleifend nunc, ut consectetuer nisl felis ac diam. </p>
							</div>
						</div>
					</div>
				</div>
				<div class="post">
					<div class="post-bgtop">
						<div class="post-bgbtm">
							<h2 class="title"><a href="#">Lorem ipsum sed aliquam</a></h2>
							<p class="meta"><span class="date">Sunday, January 26, 2011</span> 7:27 AM Posted by <a href="#">Someone</a></p>
							<div class="entry">
								<p>Mauris vitae nisl nec metus placerat consectetuer. Donec ipsum. Proin imperdiet est. Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum vel, tempor at, varius non, purus. Mauris vitae nisl nec metus placerat consectetuer. Donec ipsum. Proin imperdiet est. Phasellus <a href="#">dapibus semper urna</a>. Pellentesque ornare, orci in consectetuer hendrerit, urna elit eleifend nunc, ut consectetuer nisl felis ac diam. </p>
								<p> In nulla tortor, elementum vel, tempor at, varius non, purus. Mauris vitae nisl nec metus placerat consectetuer. Donec ipsum. Proin imperdiet est. Phasellus <a href="#">dapibus semper urna</a>. Pellentesque ornare, orci in consectetuer hendrerit, urna elit eleifend nunc, ut consectetuer nisl felis ac diam. </p>
							</div>
						</div>
					</div>
				</div>
			</div>

Po nahrazení bude vypadat takto:

<div id="content">
<?php if (have_posts()) : /* existují příspěvky pro danou stránku */ ?>
 
		<?php while (have_posts()) : the_post(); /* zpracuj následujícím kódem každý jeden příspěvek */ ?>
 
			<div <?php post_class() /* přidá třídu */ ?> id="post-<?php the_ID(); ?>">
				<h2><a href="<?php the_permalink() /* trvalý odkaz na příspěvek */?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); /* titulek příspěvku */ ?></a></h2>
				<small><?php the_time('j. F. Y') /* datum publikace */ ?> <!-- by <?php the_author() ?> --></small>
 
				<div class="entry">
					<?php the_content('Celý článek &raquo;'); /* to nejdůležitější, zobrazí obsah příspěvku*/ ?>
				</div>
 
				<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Categories: <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
			</div>
 
		<?php endwhile; /* konec zpracování každého jednoho příspěvku */ ?>
 
		<div class="navigation">
			<div class="alignleft"><?php next_posts_link('&laquo; Další články') ?></div>
			<div class="alignright"><?php previous_posts_link('Předchozí články &raquo;') ?></div>
		</div>
 
	<?php else : /* žádné příspěvky pro danou stránku neexistují */ ?>
 
		<h2 class="center">Not Found</h2>
		<p><?php _e('Sorry, no posts matched your criteria.'); /* chybová hláška */ ?></p>
		<?php get_search_form(); /* přidá vyhledávací formulář */ ?>
 
	<?php endif; ?>
</div>

Závěrem

Tímto způsobem vytvořená šablona nebude využívat všech možností WordPressu. Bude jen a pouze zobrazovat obsah, který vytvoříte přes administraci (a to dokonce jen a pouze na příspěvky). Zobrazování seznamu kategorií, widgetized sidebar, uživatelsky vytvořená menu a další ze skvělých funkcí WordPressu se musí ještě dokódovat.

Stejně tak je tato šablona stejná pro všechny druhy obsahu (příspěvek, vyhledávání, rubrika, titulní stránka). Pro různá zobrazení pro různé druhy obsahu je nutné šablony rozdělit na více souborů.

To všechno bude ale obsahem až příštího článku.

Update:
Přečtěte si také druhý díl

Reference a další čtení:

http://codex.wordpress.org/Templates
http://codex.wordpress.org/Theme_Development
http://codex.wordpress.org/Site_Design_and_Layout
http://codex.wordpress.org/Template_Hierarchy
http://codex.wordpress.org/Template_Tags
http://codex.wordpress.org/The_Loop