Итак, мы разобрались со структурой файлов в теме, движемся дальше.
Мы сверстали прекрасное бутстрап-меню — и как нам теперь его внедрить? Без паники! Уже написан для этих целей прекрасный 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;
if(условие) {
действие
}
или
while(что-то происходит) {
действие
}
Но есть и второй способ, пусть он вас не пугает, так как в большом потоке кода такие блоки легче идентифицировать — где условие заканчивается. Особенно, когда условия вложены матрешкой до 3-5 раз.
Выглядит так:
if ( условие ) :
действие
endif;
или
while(что-то происходит) :
действие
endwhile;
РАЗНИЦА: мы убираем фигурные скобки, вместо открывающей ставим двоеточие, вместо закрывающей endif; или endwhile;
END PHP
И последняя строчка кода 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)
You must be logged in to post a comment.