WordPress Sensei

Vlastní WordPress šablona #3 – Příprava hlavičky, patičky a postranního panelu

V dnešním díle si ukážeme, jak do naší šablony dostat 3 základní prvky šablony. Těmi jsou hlavička, patička a postranní panel (nebo sidebar chcete-li).

Header

V každém souboru šablonu (v našem případě to je prozatím pouze index.php) se musí zavolat načtení hlavičky. Použijeme funkci get_header() a ta automaticky poptá obsah soubor header.php v adresáři šablony. Pokud budete chtít udržovat víc různých hlaviček, lze jako volitelný parametr použít název. Pokud zavoláte get_header(‘home’), bude includován soubor header-home.php. Počet takovýchto sub-šablon je samozřejmě neomezený, ale snažte se pracovat pro jednoduchost jen s jednou.

Jednoduchá hlavička vypadá takto. Užitečné informace k jednotlivým funkcím jsou přímo v komentářích.

<!DOCTYPE html>
<!-- Nastavení jazyka dokumentu podle lokalizace WordPressu -->
<html <?php language_attributes(); ?>>
<head>
    <!-- Charse dokumentu, klasicky jde o utf -->
    <meta charset='<?php bloginfo('charset'); ?>'>
    
    <!-- Title dokumentu, bývá přepsáno SEO pluginem -->
    <title><?php wp_title('|', true, 'right'); ?> <?php bloginfo('name'); ?></title>

    <!-- Pomocí pingbacku mohou jiné stránky WordPress upozorňovat, že na ně někdo odkazuje -->
    <link rel='pingback' href='<?php bloginfo('pingback_url'); ?>'>

    <!-- Přiřazení RSS kanálu -->
    <link rel='alternate' type='application/rss+xml' title='<?php bloginfo('name'); ?> RSS2 Feed' href='<?php bloginfo('rss2_url'); ?>' />

    <!-- Provedení všech akcí hlavičky -->
    <?php wp_head(); ?>
</head>

<!-- Přiřazení kaskádových tříd k body -->
<body <?php body_class(); ?>>
    <h1>
        <!-- Odkaz na homepage -->
        <a href='<?php echo home_url( '/' ); ?>'>
            <?php bloginfo('name'); ?>
        </a>
    </h1>

Co bych zmínil – velká užitečnost funkce body_class – generuje pro každou stránku unikátní třídy, takže lze provádět jednoduché úpravy v kaskádových stylech. Největší kouzla se ale ději díky funkci wp_head. Ta je pro fungování šablony naprosto nezbytná.

Obecně pluginy a šablonu mohou na určitá místa přidávat různé akca. To znamená, pokud potřebuje plugin (nebo samotný WordPress) přidat něco do hlavičky, udělá přesně v okamžiku, kdy je zavolána funkce wp_head. Proto je tak důležitá.

Určitě jste si povšimli, že do hlavičky se nevkládají žádné styly ani scripty. Ty se totiž nevkládají manuálně do šablony, ale pomocí interních WordPress funkcí. Plynou z toho dvě výhody. Pokud nějaký plugin například požaduje jquery a vy jste ho už do šablony integrovali, knihovna se nenačte dvakrát. Další výhodou je, že cachovací plugin může všechny scripty a styly zabalit do jednoho souboru a snížit jeho velikost, aniž byste to museli dělat ručně.

Vložení scriptů a stylů

Návod jak používat funkce pro includování scriptů a stylů už jsem napsal v jiném návodu, který si můžete projít. Zde to uvedu pouze ve zkratce, plus přidám pár tipů, které se budou při vytváření šablony hodit.

Tyto backendové funkce se vkládají do souboru functions.php. Já do něj vložit něco takového:

function dc_sources() {
    wp_register_script('main-js', get_template_directory_uri() . '/core.js', array('jquery'), wp_get_theme()->version);
    wp_register_style('main-css', get_template_directory_uri() . '/style.css', array(), wp_get_theme()->version);

    wp_enqueue_script('main-js');
    wp_enqueue_style('main-css');
}

add_action('wp_enqueue_scripts', 'dc_sources');

Nejdříve bych zmínil, proč má funkce prefix dc_ WordPress bohužel nepracuje s namespaci, takže se může dost lehce stát, že budou kolidovat názvy funkcí v různých pluginech a šablonách. Proto je dobré dát ke každé globální funkci vlastní prefix.

Další fígl je, že jako verzi stylů a scriptů zvolíte verzi svojí šablony. To znamená, že pokud uděláte její upgrade, všem uživatelům se tyto zdroje automaticky smažou z cache.

Výborně, takže nyní se nám v šabloně načítá style.css, kde jsou nějaké základní WordPress styly a soubor core.js, který je nyní prázdný.

Footer

Patička se chová prakticky stejně jako hlavička. Pro její vykreslení v index.php použijeme funkci get_footer. Opět je možné zvolit název šablony, na základě kterého se includne soubor footer-NAME.php. Případně footer.php pokus necháte název prázdný.

K patičce neodmyslitelně patří funkce wp_footer. Některé pluginy mohou vkládat scripty pouze do patičky. Případně je to další možnost pro třetí strany pracovat s výstupem. My si zatím necháme patičku velice jednoduchou:

    <?php wp_footer(); ?>
    </body>
</html>

Sidebar

Postranní panel vykreslíme jako přes kopírák. Funkce get_sidebar includne soubor sidebar.php. Můžeme použít různé názvy šablon. Zde nás ovšem nečeká žádné includování scriptů, zde si ukážeme jak vykreslovat sidebary, respektive widgety.

Nejdříve si ve functions.php sidebar zagistrujeme:

register_sidebar([
    'name'          => 'Postranní panel',
    'id'            => "sidebar",
    'description'   => 'Hlavní postranní panel',
    'class'         => '',
    'before_widget' => '<li id="%1$s" class="widget %2$s">',
    'after_widget'  => "</li>\n",
    'before_title'  => '<h2 class="widgettitle">',
    'after_title'   => "</h2>\n",
]);

A díky tomu se do něj mohou v administraci vkládat widgety. A teď už jen zbývá je v sidebar.php vykreslit:

<ul>
    <?php dynamic_sidebar('sidebar'); ?>
</ul>

Jako parametr slouží id sidebaru, který chceme zobrazit. Teoreticky ho lze identifikovat i názvem, ale to nedoporučuji používat.

Aktuální stav

Máme k dispozici základní layout – hlavičku, postranní panel, obsah a patičku. Uživatel má už možnost vkládat vlastní widgety. V hlavičce se nám načítají styly i scripty. Příště si ukážeme jak se používá šablonový systém WordPressu – tj. jak mít speciální vzhled pro detail článku, výpis v kategorii, detail stránky atd.

Aktuální stav šablonu si lze stáhnout z GitHubu.

Michal Ozogán