Jak přidat vlastní oblast pro widgety?

Každá wordpressová šablona je jiná a ne každá nabízí dostatečné množství míst pro widgety. Tento návod ukáže, jak si do šablony přidat vlastní oblast pro přidávání widgetů.

Tímto způsobem lze přidávat libovolné widgety kdekoliv na webu. Například reklamní bannery či cokoliv jiného v hlavičce, před článkem, na konci článku i třeba pod patičkou.

Registrace nového místa pro widgety

Aby se nové místo pro přidávání widgetů objevilo v administraci, musí se na konec souboru functions.php ve vaší šabloně přidat následující snippet.

/** IPDATA Widget area */
function ipdata_widgets_init() {
    register_sidebar( array(
        'name'          => 'Vlastni Widget Area',
        'id'            => 'ipdata-widget-area',
        'before_widget' => '<div class="chw-widget">',
        'after_widget'  => '</div>',
        'before_title'  => '<h2 class="chw-title">',
        'after_title'   => '</h2>',
    ) );
}
add_action( 'widgets_init', 'ipdata_widgets_init' );

Teď se v administraci WordPressu v sekci Vzhled > Widgety zobrazuje nová oblast. Od této chvíle lze do oblasti umístit libovolný wordpressový Widget.

Přidání nové oblasti do šablony

Teď přijde ta těžší část. Aby se přidaný widget vůbec zobrazil, musí se Widget Area zaregistrovat na správném místě v šabloně.

Otevřete si tedy PHP soubor, kde potřebujete widgety zobrazovat a přidejte na požadované místo následující kód.

<!-- IPDATA Widget Area -->
<?php if ( is_active_sidebar( 'ipdata-widget-area' ) ) : ?>
<div id="header-widget-area" class="chw-widget-area widget-area" role="complementary">
<?php dynamic_sidebar( 'ipdata-widget-area' ); ?>
</div>
<?php endif; ?>

Pokud chcete mít nové widgety na homepage, přijdete kód do souboru index.php ve složce s šablonou. Pokud v hlavičce, přidejte kód do header.php. Pro patičku je soubor footer.php.

Jestliže Vám ale PHP nic neříká, raději sáhněte po některém pluginu, který všechno udělá za vás. Neodbornou editací PHP souborů můžete znefunkčnit celý web.

CSS

V případě, že v nové oblasti potřebujete změnit vzhled, přijdete si do souboru s CSS styly následující a upravte dle vkusu.

div#header-widget-area {
}   

h2.chw-title {
}