Užitečné pluginy, návody a šablony pro WordPress CMS

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 "-W3CDTD XHTML 1.0 StrictEN" "http:www.w3.or­g/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('tem­plate_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">Ho­mepage</a></li> <li class="curren­t_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.freecsstem­plates.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.freecsstem­plates.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_attri­bute(); ?>"><?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="postme­tadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Categories: <?php the_category(', ') ?> | <?php edit_post_lin­k('Edit', '', ' | '); ?>  <?php comments_popup_lin­k('No Comments »', '1 Comment »', '% Comments »'); ?></p> </div>   <?php endwhile; /* konec zpracování každého jednoho příspěvku / ?>   <div class="navigation"> <div class="alignlef­t"><?php next_posts_lin­k('&laquo; Další články') ?></div> <div class="alignrig­ht"><?php previous_posts_lin­k('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_for­m(); / 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/…te_Hierarchy#…

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_exis­ts('register_si­debar') ) { register_side­bar(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_exis­ts('dynamic_si­debar') || !dynamic_side­bar('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_exis­ts('dynamic_si­debar') || !dynamic_side­bar('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_me­nu' ) ) { register_nav_me­nu( '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('the­me_location=top-menu&menu_id=top-menu&depth=1&echo=1'­); ?>

Více o problematice naleznete tradičně v codexu:
http://codex.wordpress.org/…gation_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.


Celý příspěvek »

 

OVX.cz 2003 | Přihlásit se
Bez cookies už dnes těžko provozovat plnohodnotný web. Setrváním zde tudíž vyjadřujete souhlas s jejich používáním. Více informací. | Zavřít.