Dodawanie paska bocznego do WordPress - samouczek 18
Na początek powiem, że pasek boczny określa, gdzie będą wyświetlane widżety i aby mieć możliwość wyświetlania widżetów w swoim szablonie, musisz włączyć obsługę paska bocznego.
Aby włączyć, przejdź do pliku functions.php i dodaj tam kod.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// Регистрируем сайдбар function start_sidebar() { $args = array( 'id' => 'sidebar-left', 'name' => __( 'Сайдбар', 'striped' ), 'description' => __( 'Левая колонка', 'striped' ), 'class' => 'striped-widget', 'before_title' => '<header><h2 class="widgettitle">', 'after_title' => '</h2></header>', 'before_widget' => '<div id="%1$s" class="widget %2$s">', 'after_widget' => '</div>', ); register_sidebar( $args ); } // Хук для функции 'widgets_init' add_action( 'widgets_init', 'start_sidebar' ); |
Rzućmy okiem na wszystkie atrybuty, wpisany do zmiennej $args:
- ID – unikalny identyfikator paska bocznego, podczas tworzenia innych pasków bocznych ten identyfikator nie może się powtarzać;
- imię – tytuł paska bocznego;
- opis – opis celu paska bocznego;
- klasa – klasa, którą można dodać do stylu paska bocznego;
- przed_tytułem – tekst lub znaczniki, które należy wstawić przed tytułem;
- po_widget – tekst lub znaczniki do wstawienia po tytule;
- przed_widgetem – tekst lub tagi przed widżetem;
- po_widget – tekst lub tagi po widgecie.
przed_widgetem i po_widget – używany do tworzenia opakowania widżetu.
Po dodaniu kodu w panelu administracyjnym pojawi się pozycja Widżety (Widżety).
Spójrzmy na sam pasek boczny i przeanalizujmy go punkt po punkcie, co na nim jest:
- ‘imię‘ => __( 'Pasek boczny', 'w paski’ ) – tytuł paska bocznego;
- ‘opis‘ => __( 'Lewa kolumna', 'w paski’ ) – opis paska bocznego;
Przeciągnij do naszego widżetu paska bocznego:
Dopóki nasz pasek boczny nie wyświetli aktywnego widżetu, możesz z nim pracować tylko w panelu administracyjnym. Aby widżet się wyświetlił, należy dodać specjalny kod w szablonie sidebar-left.php.
Dodaj kod na górze szablonu sidebar-left.php.
|
1 2 3 4 5 6 7 |
<section> <?php if ( is_active_sidebar( 'sidebar-left' ) ) : ?> <div id="primary-sidebar" class="primary-sidebar widget-area" role="complementary"> <?php dynamic_sidebar( 'sidebar-left' ); ?> </div><!-- #primary-sidebar --> <?php endif; ?> </section> |
Po dodaniu kodu na Twojej stronie powinien pojawić się widżet.
Jeśli teraz usuniemy widżet kategorii i pozostawimy pusty pasek boczny, wtedy w miejsce poprzednio wyświetlanego widżetu nie zostanie wyświetlone nic oprócz opakowania paska bocznego.
Ten punkt można naprawić., nieznacznie modyfikując kod wyjściowy widżetu.
W pliku functions.php zmień kod na ten:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
// Регистрируем сайдбар function start_sidebar() { $args = array( 'id' => 'sidebar-left', 'name' => __( 'Сайдбар', 'striped' ), 'description' => __( 'Левая колонка', 'striped' ), 'class' => 'striped-widget', 'before_title' => '<header><h2 class="widgettitle">', 'after_title' => '</h2></header>', 'before_widget' => '<div id="primary-sidebar" class="primary-sidebar widget-area" role="complementary"><div id="%1$s" class="widget %2$s">', 'after_widget' => '</div></div><!-- #sidebar-left -->', ); register_sidebar( $args ); } // Хук для функции 'widgets_init' add_action( 'widgets_init', 'start_sidebar' ); |
W pliku sidebar-left.php zmień kod na ten:
|
1 2 3 4 5 |
<section> <?php if ( !dynamic_sidebar( 'sidebar-left' ) ) { ?> <div>Нет виджетов</div> <?php } ?> </section> |
Teraz rozważ, jak całkowicie ukryć pasek boczny i wyświetlać tylko wtedy, gdy ma widżety.
W pliku functions.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
// Регистрируем сайдбар function start_sidebar() { $args = array( 'id' => 'sidebar-left', 'name' => __( 'Сайдбар', 'striped' ), 'description' => __( 'Левая колонка', 'striped' ), 'class' => 'striped-widget', 'before_title' => '<header><h2 class="widgettitle">', 'after_title' => '</h2></header>', 'before_widget' => '<div id="%1$s" class="widget %2$s"><section><div id="primary-sidebar" class="primary-sidebar widget-area" role="complementary">', 'after_widget' => '</div></section><br /></div><!-- #sidebar-left -->', ); register_sidebar( $args ); } // Хук для функции 'widgets_init' add_action( 'widgets_init', 'start_sidebar' ); |
W pliku sidebar-left.php
|
1 |
<?php dynamic_sidebar( 'sidebar-left' ) ?> |
Wszystko na dziś, dalej możesz pracować samodzielnie. Musisz wyświetlić pasek boczny po prawej stronie, jeśli to nie zadziała, możesz pobrać moje pliki źródłowe i zerknąć, jak to zrobiłem.
- Podstawowy kurs projektowania stron internetowych;
- Układ stron;
- Ogólny kurs CMS WordPress oraz kontynuacja kursu dotyczącego tworzenia szablonów;
- Tworzenie stron internetowych w PHP.
Bardzo fajny wpis, Na pewno kocham tę stronę, tak trzymaj.
Dziękuję Ci, Postaram się zrobić wszystko, co w mojej mocy.