Välkommen, just nu i Art till salu!

Välkommen till

Ett av mina publicerade inlägg

Bootstrap Nav walker

Ska försöka att förklara hur du bygger in en meny i ett bootstrap tema. Jag själv använder det också ibland då jag bygger ett tema med bootstrap och underscores. Detta förutsätter att du nu har kopplat samman dit tema med bootstrap och du kan självklart använda dig av bootstrap.min också.
Då börjar vi att göra det vi ska för att få menyn att fungera.
1. Ladda ner själva filen på denna adress https://github.com/wp-bootstrap/wp-bootstrap-navwalker/tree/v3-branch. Du ska sedan skicka upp filen som heter wp-bootstrap-navwalker.php, och detta kan du lägga i bland dina andra filer, så som header.php, footer.php m.m. när du gjort detta så öppnar du din functions.php fil och lägger till följande kod,


// Register Custom Navigation Walker
require_once get_template_directory() . '/wp-bootstrap-navwalker.php';

Du måste också registrera en meny så att du kan lägga till den meny du själv vill ha, så lägg till även detta i functions.php


// Nav Menus
register_nav_menus(array(
'primary' => __('Primary Menu')
));

Sedan sparar du allt och öppnar din header.php och under body så kan du sätta in själva menyn.
Här kommer koden.



<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'depth' => 2,
'container' => false,
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker())
);
?>
<form method="get" class="navbar-form navbar-right" role="search" action="<?php echo esc_url(home_url('/')); ?>">
<label for="navbar-search" class="sr-only"><?php _e('Search', 'textdomain'); ?></label>
<div class="form-group">
<input type="text" class="form-control" name="s" id="navbar-search">
</div>
<button type="submit" class="btn btn-default"><?php _e('Search', 'textdomain'); ?></button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

Du sparar igen och för att allt ska fungera så öppnar vi footer.php och lägger in denna lilla kod strax innan body (som visar att det är slut på sidan.)

Det ska se ut så här.

	<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>

</body>
</html>

När du har gjort detta och sparat även det, så är det bara gå in under utseende och välj menyer, sedan är det bara att lägga till de sidor du vill ha i menyn.
Lycka till nu och hoppas att allt fungerar för dig!


Lämna ett svar

Din e-postadress kommer inte publiceras. Obligatoriska fält är märkta *

tretton − 2 =