Publikováno Od Michal Čížek

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