WP-DOC

Pisanie motywu

05.01 Panel boczny – sidebar

Ostatnia modyfikacja: 19.01.2021

Wpis ten jest kontynuacją wpisów działu Budowa motywu część I. Dlatego opisane tu metody będą omawiane na motywie, który był tworzony w wyżej wymienionym dziale. Jeżeli jednak posiadasz własny motyw lub jesteś w trakcie jego pisania, na pewno bez problemu omawiane tu metody przystosujesz do swojego motywu.

Przygotowanie motywu

Zanim przystąpimy do uruchomienia panelu bocznego i możliwości dodawania do niego widżetów, musimy przygotować miejsce w szablonie, gdzie widżety będą się pojawiać. W szablonie na którym pracujemy wygląda on jak na listingu niżej. Ten sam kod znajdziemy w kilku plikach motywu na przykład w single.php. Poniższy kod został uproszczony w stosunku do tego co aktualnie jest w motywie.

single.php – pasek boczny – fragment kodu

<aside class="aside">
    <div class="aside_box">
        <h2>Najnowsze wpisy</h2>
        <p>Tutaj treść widżetu.</p>
    </div>
    <div class="aside_box">
        <h2>Kolejny boks</h2>
        <p>Tutaj kolejny boks z dowolną treścią. W kursie zapoznasz się jak dynamicznie zmieniać zawartość tej części strony.</p>
    </div>
</aside>

Cały panel boczny znajduje się wewnątrz znaczników aside, a każdy widżet będzie umieszczony w elemencie div o nazwie klasy aside_box. Kolejnym ważnym elementem jest nagłówek h2 wewnątrz elementu div. Element div z nazwą klasy jak i nagłówek h2 należy zdefiniować w pliku function.php. Dodatkowym atutem będzie zachowanie styli z pliku style.css. Natomiast treść będzie uzależniona od widżetu, gdyż każdy może wyświetlać coś innego.

Rejestracja panelu bocznego

Aby móc dynamicznie dodawać widżety do sidebar, w pliku function.php musimy go zarejestrować. Służy do tego funkcja register_sidebar(), którą następnie trzeba podpiąć pod akcje widgets_init. Funkcja ta jako argument przyjmuje tablicę z następującymi parametrami:

  • name – nazwa paska bocznego wyświetlana w panelu administratora – zdjęcie niżej.
  • id – unikalny identyfikator za pomocą którego będzie wywołany pasek boczny w motywie.
  • description – opis paska bocznego wyświetlana w panelu administratora – zdjęcie niżej.
  • class – dodatkowa klasa dla interfejsu widżetów.
  • before_widget – kod HTML dodawany przed każdym widżetem. Odbiera atrybut ID widżetu jako, %1$s a nazwę klasy jako %2$s.
  • after_widget – kod HTML dodawany po każdym widżecie.
  • bifore_title – kod HTML dodawana przed tytułem każdego widżetu. Domyślnie jest to znacznik otwierający nagłówek h2.
  • after_title – kod HTML dodawana po tytule każdego widżetu. Domyślnie jest to znacznik zamykający nagłówek h2.
  • before_sidebar – kod HTML dołączany przed paskiem bocznym, kiedy ten jest wyświetlony. Domyślnie pusty ciąg znaków.
  • after_sidebar – kod HTML dołączany po pasku bocznym, kiedy ten jest wyświetlany. Domyślnie pusty ciąg znaków.
Widżety - nazwa oraz opis panelu
Nazwa i opis panelu dla widżetów w panelu administratora WordPress

W pliku function.php utwórz funkcje, na przykład o nazwie reg_sidebar(). Wewnątrz tej funkcji umieść funkcję register_sidebar(), jako jej argument podaj tablicę z parametrami jak na listingu niżej. Całość przypisujemy do akcji widget_init.

function.php – rejestracja paska bocznego sidebar.

// Rejestracja sidebar
function reg_sidebar() {
    register_sidebar(array(
		'name'          => 'Panel boczny', 'nazwa_motywu',
		'id'            => 'sidebar-1',
		'description'   => 'Tutaj przeciągnij widżet.', 'nazwa_motywu',
		'before_widget' => '<div id="%1$s" class="aside_box %2$s">',
		'after_widget'  => '</div>',
		'before_title'  => '<h2>',
		'after_title'   => '</h2>',
	));
}
add_action('widgets_init','reg_sidebar');
// ------------------------------------------------------------ 

Zwróć uwagę, że element div zawiera tą samą klasę co div w pliku single.php.

Po zapisaniu pliku i odświeżeniu panelu administracyjnego WordPress, w dziale Wygląd pojawiła się opcja Widget. Teraz możesz przeciągać widżety na „Panel boczny”, jak na zdjęciu niżej.

Panel administracyjny WordPress - Widget
Pasek boczny z umieszczonymi widżetami.

Wyświetlanie panelu bocznego – sidebar

Zanim wyświetlimy pasek boczny w motywie, warto stworzyć osobny plik o nazwie sidebar.php, którego będziemy mogli dołączyć wszędzie tam, gdzie będziemy chcieli wyświetlić widżety. W edytorze kodu utwórz pusty plik php i zapisz go pod nazwą sidebar.php. Następnie za pomocą instrukcji warunkowej if oraz funkcji is_active_sidebar(), sprawdzimy czy zarejestrowany sidebar istnieje. Jeżeli tak to za pomocą funkcji dynamic_sidebar(), wyświetlimy wszystkie widżety, jak na listingu niżej.

sidebar.php – sprawdzanie oraz wyświetlanie sidebar.

<?php if (is_active_sidebar('sidebar-1')) : ?>
    // Nazwa sidebar-1 to ta sama nazwa, która została podana
    // podczas rejestracji sidebar, argument id.
    <?php dynamic_sidebar('sidebar-1'); ?>   
<?phpendif;  ?>

Warto dołożyć klauzurę else, na wszelki wypadek.

sidebar.php – dodanie klauzury else.

<?php if (is_active_sidebar('sidebar-1')) : ?>  
    <?php dynamic_sidebar('sidebar-1'); ?>
<?php else: ?>
    <div class="box_sidebar">
        <h2>Pracujemy nad częścią tej strony.</h2>
        <p>Ta część strony jest nadal w budowie. Jednak bez problemu możesz dalej korzystać z pozostałej części serwisu.</p>
    </div>
<?php endif; ?>

Oczywiście w pliku tym możemy dodać jakąś statyczną treść na przykład jakąś reklamę czy link do postu, który jest najciekawszy na blogu.

Mając już gotową treść w pliku sidebar.php, należy dołączyć go wszędzie tam, gdzie ma być wyświetlony pasek boczny. W motywie, który tworzymy będą to pliki index.php, single.php, page.php, category.php, tag.php oraz 404.php. Do dołączenia pliku sidebar.php należy użyć funkcji get_sidebar(), jak na listingu niżej.

Dołączenie sidebar.php do wyżej wymienionych plików.

<aside class="aside">
    <?php get_sidebar(); ?>
</aside>

Domyślny sidebar

Jeżeli zarejestrujemy sidebar za pomocą funkcji register_sidebar() oraz dodamy do motywu get_sidebar(), nie tworząc pliku sidebar.php, wówczas WordPress utworzy kod HTML jak na listingu niżej.

Domyślny kod HTML sidebar

<div id="sidebar" role="complementary">
    <ul>
    </ul>
</div>

W takim przypadku przy rejestracji sidebar, w before_widget oraz after_widget należy podać elementy listy li. Na poniższym listingu, kod rejestracji sidebar.

Domyślny sidebar – tworzenie listy nieuporządkowanej

function reg_sidebar() {
    register_sidebar(array(
		'name'          => 'Panel boczny', 'wpnauka',
		'id'            => 'sidebar-1',
        'description'   => 'Tutaj przeciągnij widżet.', 'wpnauka',
		'before_widget' => '<li id="%1$s" class="aside_box %2$s">',
		'after_widget'  => '</li>',
		'before_title'  => '<h2>',
        'after_title'   => '</h2>'
	));
}
add_action('widgets_init','reg_sidebar');

Wyrejestrowanie sidebar

Za wyrejestrowanie sidebar odpowiada funkcji unregister_sidebar(). Przyjmuje jeden parametr, wartość id zarejestrowanego sidebar. Poniżej przykład wyrejestrowania sidebar.

Wyrejestrowanie sidebar – przykład

function remove_reg_sidebar(){
    unregister_sidebar( 'sidebar-1' );
}
add_action('widgets_init','remove_reg_sidebar',11);

W akcji widgets_init, na końcu przypisujemy wartość 11. Jeżeli korzystamy z motywu potomnego, to najpierw zostanie załadowany plik function.php motywu potomnego. Wówczas sidebar nie zostanie wyrejestrowany, gdyż nie został jeszcze zarejestrowany sidebar z pliku function.php motywu nadrzędnego. Dodając na końcu wartość 11 obniżamy priorytet naszej akcji i mamy pewność, że zostanie ona wykonana po załadowaniu pliku function.php motywu nadrzędnego.

KOMENTARZE

Jeżeli masz pytanie lub sugestie dotyczącą artykułu to napisz komentarz. Wartościowe komentarze zostaną umieszczone jako opinie warte uwagi.

Napisz komentarz

Wszystkie pola są obowiązkowe. E-mail nie będzie udostępniony, ani wykorzystywany do rozsyłania wiadomości reklamowych.

Jeszcze nikt nie napisał komentarza.