Я знаю, что в сети много вопросов, но я нахожу их очень сложными. В основном я хочу преобразовать меню навигации Bootstrap в WordPress Menu.
Скажем, у меня есть Default Bootstrap Navbar:
<nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <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="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> <li class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> Как я обычно связываю эту навигационную панель с моими страницами WordPress, вместо того, чтобы вручную перечислять каждый <li> я бы использовал следующее:
<ul class="nav navbar-nav"> <?php wp_list_pages('title_li=');?> </ul>
Результатом этого будет список всех моих страниц, которые я создал в WordPress:
<ul class="nav navbar-nav"> <li class="page_item page-item-9"><a href="...">About</a></li> <li class="page_item page-item-2"><a href="...">Sample Page</a></li> </ul>
Это нормально, поскольку я могу добавить страницу, и она будет включена в мое меню, как и ожидалось.
Проблема
Проблема в том, что я не знаю, как включить выпадающий элемент в строке меню и интегрировать его в WordPress, например, выпадающий элемент:
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> <li class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li>
Как бы интегрировать это с WordPress в следующий раз, если я хочу добавить новый раскрывающийся список, я могу легко сделать это так же, как и обычные пункты меню?
Я был бы признателен, если вы не предоставите ссылки на веб-сайты WordPress и другие учебники, поскольку я уже много пробовал
Вам необходимо использовать этот https://github.com/twittem/wp-bootstrap-navwalker , добавить файл навигационного навигатора и следовать инструкциям. Вот пример из произвольного сайта, который я сделал, я не корректирую его на свой собственный сайт, потому что вам нужно будет изучить его для всех ваших будущих разработок WP. Это невероятно просто, проверьте это:
<div id="nav"> <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <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'); ?>"><img class="logo" src="<?php bloginfo('template_directory'); ?>/images/logo.png" alt="" /></a> </div> <?php wp_nav_menu( array( 'menu' => 'primary', 'depth' => 2, 'container' => 'div', 'container_class' => 'navbar-collapse collapse', 'menu_class' => 'nav navbar-nav', 'fallback_cb' => 'wp_bootstrap_navwalker::fallback', 'walker' => new wp_bootstrap_navwalker()) ); ?> </div><!-- /.container-fluid --> </nav> </div><!-- #nav -->
Как вы могли заметить, в основном вы должны заменить то, что после кода
<!-- Collect the nav links, forms, and other content for toggling -->
с
<?php wp_nav_menu( array( 'menu' => 'primary', 'depth' => 2, 'container' => 'div', 'container_class' => 'navbar-collapse collapse', 'menu_class' => 'nav navbar-nav', 'fallback_cb' => 'wp_bootstrap_navwalker::fallback', 'walker' => new wp_bootstrap_navwalker()) ); ?>
и вуаля