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 »'); /* 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('« Další články') ?></div> <div class="alignright"><?php previous_posts_link('Předchozí články »') ?></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ář <– 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.
