šablony

Jak vytvořit vlastní (odvozenou) šablonu (child theme)

Snad každý, kdo si nainstaluje WordPress se dřív nebo později pokusí udělat do šablony nějaký zásah. Ovšem nikdy nezasahujte do defaultní šablony (u WordPressu 3.0 a vyšším jde o šablony Twenty Ten v adresáři twentyten). V případě problémů tak budete mít jistotu, že máte šablonu, na kterou můžete přepnou a mít aspoň základní funkční web.

Pro jednodušší úpravy si vytvořte odvozenou šablonu ( Child theme)

V adresáři /wp-content/themes se při defaultní instalaci bez dodatečných šablon nachází jen adresář twentyten s defaultní šablonou. Na této úrovni si vytvořte nový adresář (složku) s názvem vlatní šablony. Třeba “sablona” (vyvarujte se háčkům a čárkám, pro jistotu).

style.css je základ, víc nic nepotřebujete

K vytvoření vlastní odvozené šablony vám stačí jeden jediný soubor v této složce. A sice soubor s názvem “style.css” (malým písmem).

Do tohoto souboru vložíte následující kód:

/*
Theme Name: Šablona
Theme URI: http: //priklad.cz/
Description: Vlastní šablona odvozená od Twenty Ten
Author: Vaše jméno
Author URI: http: //vase-homepage.cz
Template: twentyten
Version:  0.1.0
*/

Theme name je název vaší šablony, ten si zvolte libovolný (pakliže ste si vytvářeli vlastní šablonu z dříve modifikované šablony, přjemenujte si ji tak, aby název byl odlišný od “Twenty Ten”)
Theme URI je adresa vašeho tématu, pokud byste jej třeba někde propagovali a udělali pro něj vlastní webovou stránku, tak zde by byla adresa této propagační stránky. Někdy se také uvádí stránka pro kterou je šablona dělána
Description je popis tématu. Čím bylo inspirováno a podobně
Author: vaše jméno, vašich 15 vteřin slávy
Author URI: pakliže máte nějakou vlastní webovou stránku, šup sem s ní
Template: jediný povinný řádek, který nelze vynechat. Musí obsahovat adresář ve kterém je šablona od které je ta vaše odvozena. Pozor, tato položka je case-sensitive (čili je rozdíl mei malými a velkými písmeny)
Version: verze vaší šablony. Buď rovnout 1.0 nebo raději opatrně začněte s 0.1

Opravdu si dejte pozor na položku Template. Ověřte, jestli máte správný název adresáže původní šablony a jestli tato šablona v daném adresáři skutečně je. Pakliže třeba s šablonou nějak manipulujete, může se stát, že šablonu nakopírujete o úroveň níže ( wp-content/themes/twentyten/twentyten ) a pak vám odvozená šablona nebude fungovat.

Dále do souboru style.css patří ještě jeden řádek. A sice tento:

@import url("../twentyten/style.css");

Kde namísto twentyten uvedete stejnou hodnotu, jako u parametru Template. Proč vkládáme tento řádek? Inu proto, že soubor style.css odvozené šablony úplně nahrazuje ten ze šablony původní.Čili, pakliže byste tento řádek nevložili, z původní šablony by se nenahrály vůbec žádné css styly. A to dost pravděpodobně nechcete.

Po tomto řádku již můžete vesele vkládat vlastní styly. Pro orientaci je ještě dobré připomenout, že css má tu vlastnost, že později definované styly přepisují ty dříve uvedené. Tedy, pokud změníte barvu nadpisů h2 v tomto souboru, nepoužije se hodnota nadefinovaná v css původní šablony, i když je celý jeho obsah, díky výše uvedenému řádku, namportován.

functions.php na rozšíření funkcionality

Vedle souboru style.css, který je základním kamenem každé šablony, má spefické vlastnosti ještě soubor functions.php. Jde o soubor, ve kterém uživatel může rozšiřovat funkcionalitu šablony o vlasní funkce. Může si vytvořit vlastní funkce prakticky na cokoli. Mnohé tipy na to co a jak udělat spoléhají právě na tento soubor.

To, co byste měli vědět je to, že tento soubor nepřepisuje soubor functions.php původní šablony, ale načítá se spolu s ním. Přesněji řečeno těsně před ním. Lze tedy nelze takto redeklarovat funkce uvedené v původní šabloně, ale je možné je ve vaší odvozené šabloně bez dalšího užít.

Další soubory odvozené šablony

Tyto dva soubory vám již bohatě stačí k proměně vzhledu a funkcionality šablony. Ovšem můžete chtít také změnit způsob výpisu zobrazení článku, nebo stránky, kategorie či rovnou úvodní stránky. I toto odvozená šablona zvládne. Pakliže adresář odvozené šablony obsahuje nějaký soubor (vyjma style.css a functions.css), který je také v původní šabloně, použije se namísto původního ten, který je obsažený v odvozené šabloně. A pakliže soubor, který by se normálně použil v odvozené šabloně naopak není, použije se ten, který je v šabloně původní. A to je přeci geniální, nemusíte myslet na všechny soubory a jen si měnit to, co přesně potřebujete.

Takže když budete chtít upravit výpis článku, jednoduše si do adresáře své odvozené šablony nakopírujete soubor single.php z původní šablony a začnete editovat. Nic víc, nic míň.

Ještě zde pro vás uvedu jeden velmi důležitý diagram. Ten ukazuje jak WordPress vybírá soubory pro zobrazení konkrétní stránky (příspěvku, rubriky, stránky, stránky s výsledkama hledání a podobně). Všimněte si, že vše má fallback na index.php. Čili, pokud vaše původní šablona některý ze souborů, který byste chtěli editovat nemá, vezměte druhý či třetí, a tak dále, v pořadí, pokud existuje, a pakliže ne, vždy můžete sáhnout po index.php a ten přejmenovat na vámi požadovaný soubor (single.php, page.php, category.php, search.php a tak dále a tak dále).

Zdroj: http://www.wp-tricks.co.il/

Co dělat, když už jste do defaultní šablony zasáhli? Jak z takové šablony udělat odvozenou?

To se stává často. Ale i toto má své řešení. Stáhněte si znovu vaší instalaci WordPressu (anglicky: http://wordpress.org/, nebo česky: http://cs.wordpress.org/), rozbalte archív a v adresáři wp-content/themes uvidítě původní šablonu. Adresář s šablonou přejmenujte na twentyten2 a nakopírujte jej do vaší instalace na serveru do složky wp-content/themes. V administraci aktivujte tuto staronovou šablonu. Bude mít stejný název, ale v šedivém obdélníčku následujícím za větou: “Všechny soubory této šablony jsou uloženy v” uvidíte “themes/twentyten2″.

Poté můžete již přejmenovat adresář vaší šablony (z twentyten) na vlastní název a změnit název šablony v souboru style.css (řádek Theme name). Nyní musíte v administraci opět aktivovat tuto vaší šablonu (již se bude zobrazovat  pod vaším jménem). Po její úspěšné aktivaci přejmenujte adresář “twentyten2″ na “twentyten”. Tím umožníte budoucí aktualizaci této šablony v novějších verzích WordPressu.

No a nyní již zpět k vaší odvozené šabloně. Do souboru style.css přidejte řádek “Template: twentyten”. Samozřejmě můžete veškerý další obsah souboru style.css smazat a nahradit jej importovacím řádkem. Dalším důležitým krokem je smazání všech funkcí v souboru functions.php (pakliže neobsahuje nějaké vámi definované, ty můžete zachovat). No a poté už můžete mazat všechny soubory, které jste doposud neupravili. Pakliže ste neupravovali soubor 404.php a víte, že jej upravovat ani nebudete, klidně jej smažte. Obdobně pro všechny soubory, které jste neupravovali, ani upravat chtít nebudete.

A kde je nějaká výhoda odvozených šablon?

Možná se ptáte, proč podstupovat toto martýrium a proč si rovnou nenakopírovat celý adresář twentyten do vlastního názvu a nepřepsat název šablony ve style.css a mít tak již kompletní šablonu a neupravovat ji komplet?

Odvozené šablony vám umožní bezpečný upgrade vaší původní šablony. Pakliže budoucí verze WordPressu upgraduje šablonu Twenty Ten, bude vaše odvozená šablona čerpat upgradovaný soubor functions.php, upgradovaný index.php (pakliže nemáte vlastní) a také upgradovaný style.css. Totéž platí o šabloně, kterou si někde koupíte a její autor vydá další, třeba opravnou, verzi. Můžete si poté upgradovat původní šablonu bez toho, anižbyste přišli o své úpravy. Jde tedy především o bezpečnou úpravu šablon.

Reference:

http://codex.wordpress.org/Child_Themes

http://codex.wordpress.org/Template_Hierarchy

Vlastní Walker pro vaše šablony

WordPress Funkce na procházení více položek, wp_nav_menu, wp_list_categories, wp_list_pages, wp_list_comments a další, mají mezi svými parametry také jeden, který je, a často i zůstává, pro uživatele tak trochu zahalen tajemstvím. Jde o parametr “walker”.

Jako modelovou, pro tento článek, jsem si vybral funkci wp_list_categories(), která prochází kategorie a ty posléze, dle v parametrech předaných pravidel, vypisuje, ale také třeba jen vrací (pomocí parametru echo). Skrce parametry této funkce můžeme změnit kde co. Můžeme nechat vypsat i prázdné kategorie, můžeme ovlivnit pořadí výpisu, to, jestli se kategorie vypíší jako seznam nebo ne, jestli zobrazíme počet příspěvků v kategorii a tak dále a tak dále.

Tvůrci WordPressu se nám snažili případnou editaci co možná nejvíc zpříjemnit. Ovšem někdy ani tato široká škála možností nestačí a tvůrce si s parametry nevystačí. V tom případě přichází na řadu vytváření vlastního Walkeru.

Jaké Walkery jsou ve WordPressu dostupné

Walker je třída, jenž zajišťuje procházení více položek a jejich výpis či vracení do proměnné. Všechny WordPress Walkery (Walker_Comment, Walker_CategoryDropdown, Walker_PageDropdown, Walker_Page, Walker_Category, Walker_nav_menu) jsou odvozené od původní třídy Walker, kterou rozšiřují (extends) o nové funkce.
Walkery Walker_Category, Walker_Page, Walker_PageDropdown a Walker_CategoryDropdown jsou umístěny v souboru wp-includes/classes.php. Walker_Comment je v souboru wp-includes/comment-template.php a Walker_nav_menu je v souboru wp-includes/nav-menu-template.php.

Poznámka: Pro potřeby administrace existují ještě další Walkery a jsou definované v souborech wp-admin/includes/template.php (Walker_Category_Checklist) a wp-admin/includes/nav-menu.php (Walker_Nav_Menu_Edit, Walker_Nav_Menu_Checklist). Z nich můžete čerpat inspiraci pro vaše úpravy walkerů.

Vytváříme vlastní Walker

Pakliže chceme takový Walker modifikovat, musíme si vytvořit nový, který bude rozšiřovat (extend) již nějaký existující. A to buď původní Walker, nebo již nějaký, který jej rozšiřuje (extends). Jak na to.

V souboru functions.php naší šablony (pakliže jej vaše šablona ještě nemá, klidně jej vytvořte) vytvoříme novou třídu (class), která bude rozšiřovat (extends) nějaký Walker. Jak jsem psal, budeme se zde modelově zabývat rošiřováním Walkeru funkce wp_list_categories(). Tento Walker je definován v souboru wp-includes/classes.php na řádku 1283

Tato třída definuje 4 funkce, a sice: start_lvl, end_lvl, start_el a end_el. Funkce start_lvl se volá, když některá kategorie má subkategorie a tyto se mají vypsat hierarchicky, end_lvl se zas vykoná když se dojde za poslední položku hierarchicky vypsané subkategorie, start_el se volá vždy, když se zpracovává nová položka, a end_el, když se ukončilo zpracování každé položky.

Když budeme chtít například upravit způsob výpisu jednotlivých položek bude nám stačit, když námi nově vytvořená třída bude definovat jen funkci start_el. Nic víc není třeba. Samozřejmě je možné, upravovat více, nebo dokonce všechny funkce.

Čili v souboru functions.php si nadefinujeme novou třídu rozšiřující Walker_Category.

class Vlastni_Walker extends Walker_Category {
...
}

A do této třídy si můžeme nakopírovat funkce, které chceme upravit.

class Vlastni_Walker extends Walker_Category {
function start_el(&$output, $page, $depth, $args, $current_page) {
		if ( $depth )
			$indent = str_repeat("\t", $depth);
		else
			$indent = '';
 
		extract($args, EXTR_SKIP);
		$css_class = array('page_item', 'page-item-'.$page->ID);
		if ( !empty($current_page) ) {
			$_current_page = get_page( $current_page );
			if ( isset($_current_page->ancestors) && in_array($page->ID, (array) $_current_page->ancestors) )
				$css_class[] = 'current_page_ancestor';
			if ( $page->ID == $current_page )
				$css_class[] = 'current_page_item';
			elseif ( $_current_page && $page->ID == $_current_page->post_parent )
				$css_class[] = 'current_page_parent';
		} elseif ( $page->ID == get_option('page_for_posts') ) {
			$css_class[] = 'current_page_parent';
		}
 
		$css_class = implode(' ', apply_filters('page_css_class', $css_class, $page));
 
		$output .= $indent . '
 
	<li class="' . $css_class . '"><a title="' . esc_attr( wp_strip_all_tags( apply_filters( 'the_title', $page-&gt;post_title, $page-&gt;ID ) ) ) . '" href="' . get_page_link($page-&gt;ID) . '">' . $link_before . apply_filters( 'the_title', $page-&gt;post_title, $page-&gt;ID ) . $link_after . '</a>';
 
		if ( !empty($show_date) ) {
			if ( 'modified' == $show_date )
				$time = $page-&gt;post_modified;
			else
				$time = $page-&gt;post_date;
 
			$output .= " " . mysql2date($date_format, $time);
		}
	}
}</li>

A můžeme se pustit do upravování. Provádět si můžeme prakticky cokoli. Když budeme s úpravami hotovi a spokojeni, stačí již jen zavolat funkci wp_list_categories() s patřičným parametrem.

1

wp_list_categories( array( 'walker' => new Vlastni_Walker() ) );

Samozřejmě můžeme redefinovat také všechny funkce, která třída Walker_Category dědí od původní třídy Walker. Tato třída je definována opět v souboru wp-include/classes.php, tentokráte na řádku 742. Jde o funkce, kromě těch čtyrech již zmíněných, display_element(), walk(), paged_walk(), get_number_of_root_elements() a unset_children().