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 i adresu–>
<?php bloginfo( ‚name’ ); ?>
</a>
</h1>
<?php } else {?><!–dla rozroznienia wygladu naglowka na stronie glownej i stron wpisow–>
<h1 id=”site-title”>
<a href=”<?php echo home_url(); ?>” title=”<?php bloginfo( ‚name’ ); ?>”>
<?php bloginfo( ‚name’ ); ?>
</a>
</h1>

<?php }?>
<h6 id=”site-description” style=”color:white;”>
<?php bloginfo( ‚description’ );?><!–wyswietlenie opisu strony–>
</h6>
</div>

<div id=”myNavbar” class=”collapse navbar-collapse”>
<?php
wp_nav_menu( array(
‚menu’ => ‚main-nav’,
//’menu_class’ => ‚nav navbar-nav navbar-right’,klasa ul menu
‚menu_class’ => ‚nav navbar-nav’,//ul

‚depth’ => 2,
// ‚link_before’ => ‚<b>’,
// ‚link_after’ => ‚</b>’,
‚walker’ => new BootstrapNavMenuWalker()
));
?>
</div>

</div>
</nav>

</div>
</div>
</div>
</header> </pre>
2.Kontener Bootstrapa- div ten będzie „opakowaniem” dla menu , tytułu strony oraz opisu strony.
3.Wiersz Bootstrapa – div bedzie wierszem w którym będzie kolumna. Zapis ten wynika z ogólnej logicznej semantyki Bootstrapa
kontener->wiersz->kolumna(y)
4.Kolumna – kolumna ma szerokość 12 jednostek a zatem całą szerokość strony, md-oznaczenie dotyczące urządzeń o rozdzielczości laptopa. Poniżej tej rozdzielczości elementy będą układać się responsywnie ;jeden pod drugim.
6.Nawigacja- obejmuje menu w wersji rozdzielczości laptopa,menu w wersji responsywnej, tytuł strony i opis strony.
navbar-inverse- oznacza kolor czarny menu,
navbar-fixed-top – manu będzie „przyklejone w górnej części strony
8- Container fluid – div bedzie miał szerokość całej strony
9-navbarheader- nagłówek navbara obejmujący tytuł i opis strony oraz przycisk button który będzie reprezentował menu strony dla mniejszych rozdzielczości.
10-16 Odniesienie się do menu w formie buttona( przycisku) przy mniejszych rozdzielczościach. Zauważ że wartośc atrybutu data-target=#idMynavbar musi być zgodna z id w linijce 36.
12- sr-only- informacja tylko dla tzw. screen readers , czytnik audio kontentu strony, elemnt tej jest niewidoczny na stronie
13-15 icon-bar- reprezentuje „kreske”:) w menu w formie przycisku dla urządzeń typu smartfon, tablet.
36- Miejsce na printowanie menu
collapse navbar-collapse- oznacza że menu będzie zawierało elementy wysuwane submenu
41- nav navbar-nav navbar-right- określenie klasy dla ul w menu, określa również położenie menu w navbarze, tutaj:prawa strona.
46- odniesienie się do klasy Walker_Nav_Menu WordPressa odpowiedzialnej za printowanie html menu WP ,BootstrapNavMenuWalker jest jej rozszerzeniem, celem jest dostosowanie menu WP do menu Bootstrap , szerzej jest to omawiane przy artykule poświeconym tej klasie.

Share This

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *