Přidáváme sidebar do šablony

Oblíbeným prvkem WordPress šablon je tzv. sidebar – tedy pruh rozšiřujících aplikací, tzv. widgetů. WordPress přináší jednoduchý mechanismus, jak přidat sidebary do naší nové šablony.

Definice nového sidebaru

Všechna rozšíření šablon ve WordPressu se definují pomocí souboru functions.php, který umístíme do stejného adresáře, jako původní styl styles.css. Sidebary definujeme pomocí využití rozšiřujícího bodu (tzv. hooku) WordPressu nazvaného widgets_init takto:

Uvedená funkce může definovat libovolný počet prostorů pro widgety (sidebarů), přičemž podstatné je jejich pojmenování pomocí id, neboť tímto jménem se na sidebar budeme v šabloně odkazovat. Jméno v klíči name uvidí administrátor v rozhraní WordPressu při plnění sidebaru.

HTML kód v klíčích before_widgetafter_widget obaluje každý jednotlivý widget uvnitř sidebaru – vhodnou HTML značkou je v tomto případě <aside> s patřičnou CSS třídou, aby bylo widget možné stylovat (zleva doprava, shora dolů, mezery, obrysy, podbarvení apod.).

Samotný titulek widgetu (který si může administrátor nastavit v rozhraní WordPressu) se obalí HTML značkami z klíčů before_titleafter_title. Já využívám obalovou značku <div> okolo <h3> pro možnost vytvořit podtržené názvy widgetů na celou šířku sidebaru.

Umístění sidebaru v šabloně

Do šablony (index.php) umístíme následující část kódu:

V tomto kódu ošetříme situaci, zda je vůbec sidebar využíván (zapnut a obsahuje widgety) a jak vypadá formátování celého sidebaru (obalové značky pro vymezení prostoru). Samotné widgety formátované samostatně (viz výše) umístí funkce dynamic_sidebar(), jejímž parametrem je označení sidebaru z klíče id.

Tímto způsobem můžeme umístit všechny sidebary registrované ve functions.php.

Naplnění sidebaru

Sidebar se naplní pomocí funkce táhni a pusť přímo v administrativním rozhraní WordPressu v nabídce Vzhled – Widgety. Naše registrované sidebary budou zpočátku prázdné, ale rychle je naplníme, uspořádáme a jednotlivé widgety opatříme titulky. Pak můžeme celou stránku vyzkoušet v prohlížeči.