vývoj

Dvě různé WordPress šablony na jednom blogu

Tento článek volně navazuje na můj předchozí článek s názvem: Speciální šablona pro konkrétní rubriku, stránku či příspěvek.

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.

Speciální šablona pro všechny příspěvky v konkrétní kategorii

O různých zobrazení vybraných příspěvků, stránek a kategorií jsem napsal již dva články:

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 include() ve spolupráci s WordPress konstantou TEMPLATEPATH.

Obsah bude následující (v případě, že chceme speciální šalonu pro příspěvky v rubrice speciální a moje kategorie):

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

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.

Vytvoření WordPress šablony z vašeho statického HTML webu – 1.díl

Tento článek si klade za cíl pouze uvést do problematiky tvorby WordPress šablon a má být první zastávkou na dlouhé trati pro ty, kteří se rozhodli svůj doposud statický HTML web napsaný v poznámkovém bloku převést na WordPress svépomocí.

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().

<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():

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

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

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

<?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 »', '1 Comment »', '% Comments »'); ?></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 »', '1 Comment »', '% Comments »'); ?></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

Vytvoření WordPress šablony z vašeho statického HTML webu – 2.díl

V přechozím článku jsem vysvětloval, jak zajistit aspoň základní funkcionalitu šablony. Tento článek na předchozí navazuje a ukážu v něm, jakým způsobem přidat možnost rozdílných zobrazení pro titulní stránku, stránku příspěvku a stránku kategorie, jak přidat widgetized sidebar a podporu pro uživatelská menu.

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 »', '1 Comment »', '% Comments »'); ?></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.