Итак, мы разобрались со структурой файлов в теме, движемся дальше.

Мы сверстали прекрасное бутстрап-меню — и как нам теперь его внедрить? Без паники! Уже написан для этих целей прекрасный bootstrap navwalker.

Использовать просто. Открываем наш functions.php. В конец копипастим код:

/* Nav Walker for bootstrap menu */
add_action( 'after_setup_theme', 'wpt_setup' );
if ( ! function_exists( 'wpt_setup' ) ):
function wpt_setup() {
register_nav_menu( 'primary', __( 'Primary navigation', 'wptuts' ) );
} endif;
// Register custom navigation walker
require_once('wp_bootstrap_navwalker.php');

То есть знакомая схема — добавляем действие (add_action), объявляем функцию для этого действия, только единственное — окружаем ее условием — если функции ‘wpt_setup’ не существует, то объявить ее:

if ( ! function_exists( 'wpt_setup' ) ):
function wpt_setup() {
bla-bla
} endif;

И последняя строчка кода require_once(‘wp_bootstrap_navwalker.php’); — мы запрашиваем файл wp_bootstrap_navwalker.php.

Скачать можно здесь .

Просто кладем файл в корень темы, туда же, где functions.php.

Маленькая загвоздка — ничего не будет работать без jquery и bootstrap.

Так как мы исходим из того, что верстка у вас бутстраповская по умолчанию (иначе зачем делать бутстрап-меню?), то я думаю, файлы jquery.js, bootstrap.min.css и bootstrap.min.js вы включили. Если же нет, то добавьте в functions.php следующий блок:

function wpt_register_js() {

wp_register_script('jquery.bootstrap.min', get_template_directory_uri() . '/js/bootstrap.min.js', 'jquery');

wp_enqueue_script('jquery.bootstrap.min');

}

add_action( 'init', 'wpt_register_js' );

function wpt_register_css() {

wp_register_style( 'bootstrap.min', get_template_directory_uri() . '/css/bootstrap.min.css' );

wp_enqueue_style( 'bootstrap.min' );

}

add_action( 'wp_enqueue_scripts', 'wpt_register_css' );

Это объявление бутстраповских js и css файлов. Код немного отличается от того, что был в первом уроке, но по сути делает то же самое. Тут два действия разделены — сначала мы регистрируем скрипт (wp_register_script), потом его объявляем (wp_enqueue_script ), а в первом уроке мы используем сокращенный вариант, что, по мне, гораздо удобнее и читабельнее.

Итак, мы объявили скрипты, подтянули файл навуокера (крутой Уокер), теперь нужно наше меню вывести в шаблоне. Вывести можно где угодно, но, скорее всего, в вашем макете это будет шапка, то есть header.php.

Открываем хедер и копипастим в нужное место:

<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="<?php echo home_url(); ?>">

<?php bloginfo('name'); ?>

</a>

</div>

 

<?php

wp_nav_menu( array(

'menu'              => 'primary',

'theme_location'    => 'primary',

'depth'             => 2,

'container'         => 'div',

'container_class'   => 'collapse navbar-collapse',

'container_id'      => 'bs-example-navbar-collapse-1',

'menu_class'        => 'nav navbar-nav',

'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',

'walker'            => new wp_bootstrap_navwalker())

);

?>

</div>

</nav>

Перед нами бутстраповское меню, и там, где у нас блок html, отвечающий за список:

<div class="navbar-collapse collapse">
<ul id="menu-main-menu" class="nav navbar-nav">

...

</ul>
</div>

вот вместо него мы ставим объявление вордпресс-меню:

<?php

wp_nav_menu( array(

'menu'              => 'primary',

'theme_location'    => 'primary',

'depth'             => 2,

'container'         => 'div',

'container_class'   => 'collapse navbar-collapse',

'container_id'      => 'bs-example-navbar-collapse-1',

'menu_class'        => 'nav navbar-nav',

'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',

'walker'            => new wp_bootstrap_navwalker())

);

?>

‘menu’              => ‘primary’ — меню, которое вы назначите основным в админке вп;

‘theme_location’    => ‘primary’ — примерно то же самое. В админке вп вы должны в разделе меню открыть вкладку «Управление областями» (см. картинку), и там указать основное меню для основной навигации, так как есть область сайдбара и футера, и сколько угодно еще, если вы их добавите. Так вот ‘primary’ — это прайм — самый главный.

‘depth’             => 2 — уровни вложенности. Если у вас есть выпадающие пункты — аллилуйя, в navwalker они предусмотрены! Сами понимаете, основная сложность — с разными стилями выпадения пунктов на десктопе и на мобилке.

‘menu_class’        => ‘nav navbar-nav’ — тут ставим классы из нашего макета, так как они могут отличаться. Мы можем добавить классы navbar-left, nav-justified и любые свои.

Ну остальное понятно.

Итак, мы значительно продвинулись.

Мы идентифицировали наш header.php, объявили стили и ява-скрипты, добавили после открывающего тега <body> шапку нашего макета, вычленили меню и заменили его на вордпрессовское.

Ах да, одна интересная деталь упущена. Что это такое:

<a class="navbar-brand" href="<?php echo home_url(); ?>">

<?php bloginfo('name'); ?>

</a>

<?php echo home_url(); ?> — встроенная функция вп — вывести «домашний» адрес сайта (home — это дом)

<?php bloginfo(‘name’); ?> — вывести имя сайта, которое вы задаете в админке вп в «Настройках > Общие» (Settings > General)