autor: Robert
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!
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 widgetaJak 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.
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 stronyWitam,
Chciałem podziękować za pracę, którą włożyłeś w ten projekt, bardzo dużo mnie to nauczyło. Chętnie zobaczył bym nowe wpisy z kursu wordpressa, może pokażesz jak zrobić wordpressowe portfolio ?;) Z pewnością ułatwiło by to życie wielu osobom, w tym mi 🙂
W każdym razie kawał dobrej roboty !
Pozdrawiam i liczę na więcej ! 🙂