Select Page

Niekedy sa stane, že na jednom type obsahu (napríklad v článkoch) chceme mať iný sidebar ako v inom (napríklad v projektoch). Pre tento prípad je možné vytvoriť vlastný sidebar, ktorý sa bude dať upravovať vo widgetoch a zobrazí sa tam, kde ho potrebujeme.

Vytvor si odvodenú tému

Vytvor si child theme. Áno, je možné urobiť zmeny aj priamo do nainštalovanej témy, ale po najbližšej aktualizácii sa všetky zmeny premažú. Odvodená téma pomôže predísť strate zmien, ktoré v téme urobiš. Návod nájdeš tu.

Zaregistruj svoj sidebar

Otvor súbor functions.php tvojej odvodenej témy. Dostaneš sa k nemu cez FTP > wp-content > Themes > Tvoja téma. Mal by byť dostupný aj cez administrátorské rozhranie WordPressu: Vhľad > Editor > functions.php.

Dajme tomu, že chceme vlastný sidebar pre projekty.

Pridaj tam tento kód:

// NEW SIDEBAR 
function projects_sidebar() {
    register_sidebar(
        array (
            'name' => __( 'Projects Sidebar', 'your-theme-domain' ),
            'id' => 'projects_sidebar',
            'description' => __( 'Sidebar for a single project', 'your-theme-domain' ),
            'before_widget' => '<div class="project-sidebar-content">',
            'after_widget' => "</div>",
            'before_title' => '<h3 class="project-sidebar-title">',
            'after_title' => '</h3>',
        )
    );
}
add_action( 'widgets_init', 'projects_sidebar' );

Poďme sa pozrieť, čo v tomto kóde môžeš alebo čo by si mal zmeniť:

  • Ak chceš, môžeš zmeniť názov funkcie custom_sidebar. Nezabudni to však zmeniť všade.
  • v riadku, kde je názov sidebaru ‘name’, môžeš názov sidebaru (Projects Sidebar). Pozor, apostrofy nevymazávaj.
  • ‘your-theme-domain’ – toto nechaj všade tak, ako to je
  • V riadku „description“, resp. popis, môžeš upraviť popis, ktorý sa zobrazí v back-ende. Ja tam mám „Sidebar for a single project“.
  • Na záver si nazvy classy tak, ako Ti to vyhovuje, aby si ich mohol naštýlovať.

Uprav template súbor

Vo svojej odvodenej téme (child theme) cez FTP nájdi php template s tým typom obsahu, kam chceš pridať svoj nový sidebar. Ak ho chcem napríklad pridať do projektov, pôjdem do  wp-content > themes > moja téma > a tam nájdem single-project.php. Ak tam tento súbor nemáš, skopíruj ho sem z pôvodnej témy (parent theme).

Tam, kde chceš umiestniť sidebar, vlož tento kód.

<?php if ( is_active_sidebar( 'projects_sidebar' ) ) : ?>
    <?php dynamic_sidebar( 'projects_sidebar' ); ?>
<?php endif; ?>

Ja som ho ešte dodatočne obalila do div-ka s classom.

Začni používať svoj nový sidebar

V back-ende medzi widgetami teraz nájdeš box s tvojím novým sidebarom a v článku/projekte/stránke sa zobrazí tam, kde si ho vložil. Hotovo :)

Zdroje:

  • https://www.ostraining.com/blog/wordpress/custom-sidebar/