Jak utworzyć dodatkowy pasek boczny oraz dodać do motywu drugi, trzeci sidebar?

Zarządzasz dużą stroną, potrzebujesz stworzyć dodatkowy sidebar dla konkretnej podstrony? Chcesz umieścić na podstronach O Firmie, Kontakt, Dojazd “Sidebar 1″, a na podstronach ofertowych”Sidebar 2”, natomiast na podstronie z katalogiem produktów “Sidebar 3” ? Nic prostszego. Musisz zarejestrować dodatkowe “paski boczne”, a następnie dodać kod w motywie, który będzie je wyświetlał we froncie.

Zaczynajmy!

Otwieramy plik functions.php i za pomocą funkcji rejestrujemy nowy sidebar. U mnie standardowo podczas rozpoczęcia pracy nad projektem, instaluję mój “startowy” motyw, który domyślnie ma zarejestrowany 1 pasek boczny, tak jak poniżej:

function nf_widgets_init() {
	register_sidebar( array(
		'name'          => esc_html__( 'Sidebar', 'nf' ),
		'id'            => 'sidebar-1',
		'description'   => esc_html__( 'Add widgets here.', 'nf' ),
		'before_widget' => '<section id="%1$s" class="widget %2$s">',
		'after_widget'  => '</section>',
		'before_title'  => '<h3 class="widget-title">',
		'after_title'   => '</h3>',
	) );
}
add_action( 'widgets_init', 'nf_widgets_init' );

A więc rejestrujemy nowy pasek, dopisując kolejny “Footer 1”, tak jak poniżej. Analogicznie możesz utworzyć kolejne, np. “Sidebar Shop”, “Sidebar Katalog Produktów”, “Footer RODO” itd.

function nf_widgets_init() {
	register_sidebar( array(
		'name'          => esc_html__( 'Sidebar', 'nf' ),
		'id'            => 'sidebar-1',
		'description'   => esc_html__( 'Add widgets here.', 'nf' ),
		'before_widget' => '<section id="%1$s" class="widget %2$s">',
		'after_widget'  => '</section>',
		'before_title'  => '<h3 class="widget-title">',
		'after_title'   => '</h3>',
	) );
	register_sidebar( array(
		'name'          => esc_html__( 'Footer 1', 'nf' ),
		'id'            => 'footer-1',
		'description'   => esc_html__( 'Add widgets here.', 'nf' ),
		'before_widget' => '<section id="%1$s" class="widget %2$s">',
		'after_widget'  => '</section>',
		'before_title'  => '<h3 class="widget-title">',
		'after_title'   => '</h3>',
	) );
}
add_action( 'widgets_init', 'nf_widgets_init' );

Zarejestrowany nowy sidebar pojawi się w panelu administracyjnym w zakładce Wygląd > Widgety:

To jak i czym uzupełnisz nowy sidebar zależy tylko od Ciebie, możesz korzystać z wielu widgetów (domyślnych, ale i wbudowanych w zainstalowane pluginy).

Ok sidebar zarejestrowany, ale teraz trzeba go umieścić w motywie. Jeśli trzymamy się tego przykładu to nowy sidebar o nazwie “Footer 1” umieścimy w pliku footer.php, ale w Twoim przypadku może to być plik header.php, single.php lub każdy inny plik motywu. A więc wklejamy:

<?php dynamic_sidebar( 'footer-1' ); ?>

Choć czasem warto dodać warunek “if – endif” lub “if – else – endif”, za pomocą którego sidebar “Footer 1” będzie się wyświetlać tylko wtedy gdy będą dodane do niego widgety w panelu administracyjnym.

<?php if ( is_active_sidebar( 'footer-1' )) : ?>
<div class="footer-widget-1">
<?php dynamic_sidebar( 'footer-1' ); ?>
</div>
<?php endif; ?>

I to tyle w temacie. Jeśli wszystko wykonałeś wedle mojej instrukcji to w zadeklarowanym miejscu w motywie we froncie zobaczysz widgety, które dodałeś w panelu administracyjnym! 

Powodzenia!

Marcin Guzik

Marcin Guzik

Zafascynowany WordPressem. Użytkownik WP od 2008 roku, od wersji 2.4, albo 2.5 (nie pamiętam dokładnie). Piszę na: mrcng.pl. Zawodowo: jestem właścicielem Net-Factory. Prywatnie: mąż, ojciec, instruktor karate.

Opieka i serwis stron internetowych

Zajmij się swoim biznesem a my zajmiemy się Twoją stroną. Zapewniamy stałą opiekę oraz wyspecjalizowany serwis dla stron na WordPress oraz sklepów internetowych WooCommerce.

Wybierz coś dla siebie