Dodanie widgetów do stopki

autor: Robert

26 stycznia 2015

Początkowo chciałem by przykładowa strona była ładna i spójna, ale stwierdziłem, że właściwie po co powtarzać niektóre elementy skoro można pokazać wiele różnych rozwiązań. Zatem strona nie będzie bardzo estetyczna ale za to pokażę na niej różne sposoby połączenia Bootstrapa z WordPressem.

Dzięki temu do Was będzie należał wybór najbardziej odpowiadających wam elementów i zastosowanie ich na Waszych stronach:)

W tym wpisie zajmiemy się dodaniem do naszej stopki 3 trzech „sidebarów”, które pozwolą umieszczać w niej widgety zamiast kodować zawartość stopki „na sztywno”.

Pierwszym plikiem, który będziemy edytować jest plik functions.php, stworzymy w nim trzy różne panele, które wypełnimy widgetami z poziomu naszego panelu zarządzania.

Następnym zadaniem będzie edycja pliku footer.php w którym odwołamy się do stworzonych paneli i wyświetlimy ich zawartość

Tak więc zaczynamy!

Stworzenie paneli w pliku functions.php

Kod do dodania w pliku functions.php wygląda następująco:

Tworzymy sobie funkcję footer_widgets_init(), która odpowiada za utworzenie trzech paneli. W jej wnętrzu podobnie do tworzenia panelu bocznego korzystamy z wordpressowej funkcji register_sidebar do której przekazujemy następujące parametry:

• 'name' => 'footer-sidebar-1', czyli nazwa naszego panelu, do której będziemy się odwoływać w celu jego wyświetlenia.
• 'description' => 'Pierwsza kolumna w stopce', czyli opis naszego panelu, który pojawi się w panelu zarządzania widgetami
• 'before_widget' => '<div class="jumbotron">', czyli kod HTML, który ma pojawić się przed widgetem
• 'after_widget' => '</div>', analogicznie jak powyżej tylko chodzi o HTML wyświetlany za panelem
• 'before_title' => '<h3 class="widget-title">', odpowiada za kod HTML, który wyświetli się przed tytułem widgeta
• 'after_title' => '</h3>' odpowiada za kod HTML wyświetlany za tytułem widgeta

Jak widzicie w przykładowym kodzie stworzyłem 3 panele gdzie pierwszy z nich jest otoczony divem z klasą .jumbotron. Drugi z nich jest wewnątrz bootstrapowej „studni” a co za tym idzie jest otoczony klasą .well. Trzeci natomiast posiada moją własną klasę .custom-footer-widget ale jego tytuł korzysta z bootstrapowej klasy .page-header.

Na koniec pozostaje nam poinformowanie WordPressa, że właśnie stworzyliśmy sobie 3 panele i chcemy mieć możliwość umieszczenia w nich widgetów za pomocą panelu zarządzania. Korzystamy w tym celu z wbudowanej w WordPress funkcji add_action( 'widgets_init', 'footer_widgets_init' );.

Zapiszcie swój plik functions.php i wyślijcie go na serwer. Zalogujcie się do swojego panelu administracyjnego i w zakładce „Wygląd” -> „Widgety” pojawią się wam trzy nowe panele.

Przeciągnijcie sobie do każdego z nich jakiś widget i zapiszcie, teraz zajmiemy się wyświetleniem ich w stopce.

Wyświetlenie widgetów w pliku footer.php

Otwieramy sobie plik footer.php i wewnątrz klasy .row umieszczamy w nim następujący kod:

Jak widzicie stworzyłem sobie 3 divy z klasą .col-md-4 co w sumie daje nam 12 czyli maksymalny wymiar siatki Bootstrapa.

Jak pamiętacie stworzyliśmy panele z nazwami footer-sidebar-* z numerami 1-3. Teraz w każdym ze stworzonych divów uruchamiamy funkcję <?php dynamic_sidebar('footer-sidebar-*'); ?> z kolejnymi numerami zamiast gwiazdki (‚*’), która pobierze i wyświetli nam stworzone wcześniej panele z umieszczonymi w nich widgetami.

Zapiszcie swój plik footer.php, odświeżcie stronę i cieszcie się nowo utworzonymi panelami z widgetami:)

Pamiętajcie proszę, że stopkę możecie dowolnie modyfikować, możecie stworzyć np. 2 divy z klasą .col-md-6, w jednym umieścić stały kod HTML a w drugim widget. Możecie w ogóle nie korzystać z widgetów itp:)

Wpis ten dotyczy dodawania paneli na widgety w stopce ale jak się pewnie już domyśliliście, możecie ten sposób wykorzystać gdziekolwiek na waszej stronie WWW.

Przejdź do przykładowej strony

---

← Starszy post
Dodanie aktualności na stronie głównej

Robert 1 lipca 2015 o 07:43

Dziękuję:) Postaram się wrócić do tutoriali ale chwilowo mam dużo zleceń i brakuje mi na nie czasu:/

Odpowiedz