Wprowadzenie

1 Cel mini tutoriala Celem tego mini kursu jest przykładowy pokaz tworzenia dedykowanej strony dla klienta w WordPressie w oparciu o framework Bootstrapa 3. Motyw nie jest przenośny co oznacza że nie można go przenieść do dowolnej instalacji WordPressa bez importowania bazy danych lub pliku xml za pomocą narzędzi importu WP. 2.Uwaga! Kod nie będzie […]

Instalacja

Aby zainstalować Bootstrap 3 posłużymy się plikiem functions.php oraz header. 1. Plik header- tutaj kod( zainsatlowa c wtyczke do prezentacjikodu!!!) 2. Plik functions – Początkowo chciałem wszystsko wrzucić do pliku functions.php jednak stronka nie działała prawidłowo, zdecydowałem się więc na zapis jak powyżej. Cyfry będą oznaczać numer linijki. Plik header: 1. Podłączenie styli Bootstrap za […]

Szkielet ogólny Bootstrap – wprowadzenie

Ogólna budowa layoutu strony www opartej na Bootstrap składa się z kontenerów( container), wierszy(row) oraz ( kolumn). Wygląd poszczególnych elementów jest kształtowany poprzez wbudowane klasy css oraz identyfikatory( te z kolei często korelują z js). Nasz przykład będzie sie składał z czterech responsywnych kolumn. Pierwsza bedzie zawierała obrazek,druga tablice, trzecia paragraf tekstu, czwarta tekstw nagłówku […]

plik header i menu nawigacji

<pre><header> <div class=”container”> <div class=”row”> <div class=”col-md-12″> <nav class=”navbar navbar-inverse navbar-fixed-top” role=”navigation”> <div class=”container-fluid”> <div class=”navbar-header”> <button type=”button” class=”navbar-toggle” data-toggle=”collapse” data-target=”#myNavbar”> <span class=”sr-only”>Nawigacja strony</span> <span class=”icon-bar”></span> <span class=”icon-bar”></span> <span class=”icon-bar”></span> </button> <?php if (is_home() || is_front_page()) {?><!–jesli strona jest domowa lub frontowa–> <h1 id=”site-title”> <a href=”<?php echo home_url();?>” title=”<?php bloginfo( ‚name’ ); ?>”><!–zwrocenie nazwy szablonu […]

klasa BootstrapNavMenuWalker

Wstęp do omówienia kodu. Aby dostosować i zintegrować menu WP z menu w stylu Bootstrap należy użyć wbudowanej klasy Walker_Nav_Menu. Odpowiada ona za dostosowanie wyglądu i zachowania oraz ogólnej specyfikacji menu w WP. Realizacja tego zagadnienia może być podejmowana w różnoraki sposób, przedstawiany tutaj jest tylko jednym z nich. Aby podejrzeć strukture menu najlepiej posłużyć […]

jumbotron

Co to jest jumbotron? Jumbotron jest częścią składową Bootstrap, jego głównym zadaniem jest skupienie uwagi na danej akcji mającej miejsce na stronie. Na naszej stronie jest to przycisk „przepis dnia” wraz z podłączonym do niego łączem prowadzącym do treści tego przepisu. 1.Wstawiamy blok diva o klasie jumbotron. 3.Określamy wycentrowanie textu. 11.Zmienna będzie przechowywać tytuł konkretnego […]

carousel- karuzela czyli slider

Czym jest karuzela w Bootstrap? Karuzela jest inaczej sliderem wbudowanym w ten framework. Można w niej prezentować treści w postaci tekstów i obrazów. 1.Wstawiamy blok karuzeli i nadajemy jej id. Id może być dowolne ale musi być identyczne w odpowiednich miejscach.Klasa karuzeli slide będzie odpowiadać za jej responsywność. 2-6. Generowanie trzech kropek slidera będącymi jednocześnie […]

segment restauracje

kod restauracje omowienie kodu 1. Ustawienie kontenera z marginesem top ( górny wierzchołek z sąsiadującym elementem) 3. Stworzenie panelu bootstrapa 4. Nagłówek panelu wraz jego właściwościami,get_post_archive_link- pozyskanie linku do archiwum postów 9. W divie tym przechowywany jest właściwy kontent panelu. 11. Ustawienie jednej kolumny o szerokości 4 jednostek ( 4 kolumn). 12. Ustawienie jednego z […]

mapa

Kod dla tej sekcji jest zbieżny z sąsiadującymi sekcjami. Sama mapa wyświetla się za pomocą wtyczki którą przerobiłem na wersje z interfejsem dla usera z wersji Simple Google Maps Shortcode Pipina Wiliamsa. Wtyczkę tą opiszę w dziale poświęconym wtyczkom.

formularz kontaktowy

7.Definicja formularza w tagu form, określenie jego id. 11. W tym divie są informacje dotyczące labelki i przynależące do niej pola input 12.col-sm-4 control-label- dla urządzeń mobilnych labelka będzie miała szerokość 4 kolumn, nadanie klasy lementowu control-label dla stylizacji labelki na bootstrap. Reszta kodu się powtarza.