Навігаційна панель Bootstrap для WordPress-теми

Чи траплялося таке, що ви хотіли прискорити процес розробки нової теми? Думаю, бувало. І для цього ви вже використовували (або читали про використання) Bootstrap та мокапи на його основі. Як же інтегрувати компоненти цього фреймворку у WordPress-тему? Давайте вивчимо докладніше з прикладу цього уроку. Почнемо з компонента Navbar, який відповідає за створення адаптивної навігаційної панелі на сайті.

1. Код для навігаційної панелі на основі фреймворку Bootstrap

Ось вихідний код із документаційної сторінки Bootstrap:

<nav class="navbar navbar-default" role="navigation"> 
<!-- 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-ex1-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="#">Brand</a> 
  </div> 
  <!-- Collect the nav links, forms, and other content for toggling --> 
  <div class="collapse navbar-collapse navbar-ex1-collapse"> 
    <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 <b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
          <li><a href="#">Action</a></li> 
          <li><a href="#">Another action</a></li> 
          <li><a href="#">Something else here</a></li> 
          <li><a href="#">Separated link</a></li> 
          <li><a href="#">One more separated link</a></li> 
        </ul> 
      </li> 
    </ul>
  </div>
</nav>

Давайте вивчимо його уважніше, щоб зрозуміти, які саме частини коду нам знадобляться у подальшій роботі.

• Обгортка - Тегnav> з класом "навігаційна панель" та рольовим параметром "навігація, служить для оформлення контенту в навігаційній панелі.

  <nav role="navigation">…</nav>

• Header - ТегDIV> з класом "navbar-header", бачимо будь-яких розмірів екрана.

  <div class="navbar-header">…</div>

• Кнопка перемикання - Тегbutton> для відображення згорнутого контенту на малих екранах, кнопка розкривається на кліку на ній, контент всередині цієї обов'язкової кнопки можна змінювати на свій розсуд.

  <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-ex1-collapse">…</button>

• Марка - Посилання на логотип, носить опціональний характер, її можна прибрати звідси і вставити там, де вам потрібен логотип.

  <a class="navbar-brand" href="#">Brand</a>

• Збірний вміст - ТегDIV> з класом "крах"І"navbar-collapseмістить весь контент, який повинен йти в згорнутому вигляді на малих екранах.

  <div class="collapse navbar-collapse navbar-ex1-collapse">…</div>

• Меню - Тегul> з класом "нав навбар-нав", Що представляє навігацію по сайту.

  <ul class="nav navbar-nav">…</ul>

2. Інтегруємо мокап у шаблон

На цьому етапі нам треба у вже встановлений двигун WordPress додати тему, що розробляється.

2.1. Підготовка теми додавання навігаційного меню

Відкриваємо файл functions.php та реєструємо навігаційну панель, якщо досі цього не зробили:

<?php
/* Theme setup */
add_action( 'after_setup_theme', 'wpt_setup' );
    if ( ! function_exists( 'wpt_setup' ) ):
        function wpt_setup() {  
            register_nav_menu( 'primary', __( 'Primary navigation', 'wptuts' ) );
        } endif;
?>

Реєструємо файли фреймоврку та jQuery:

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' );

Завантажуємо клас wp-bootstrap-navwalker с GitHub. Поміщаємо файл до кореневої папки теми. Переходимо до файлу functions.php і додаємо наступний код:

<?php // Register custom navigation walker
    require_once('wp-bootstrap-navwalker.php');
?>

2.2. Працюємо з меню

Переходимо в меню за посиланням Зовнішній вигляд → Меню. Створюємо нове меню під назвою "Первинний" і додаємо в нього нові елементи. Переходимо потім у вкладку Управління областями і призначаємо для розташуванняПервиннийменю з такою ж назвою, а потім зберігаємо всі зроблені зміни.

2.3. Інтегруємо навігаційну панель та отриманий мокап у шаблон оформлення сайту

Відкриваємо файл header.php і скопіюємо в нього навігаційну панель у форматі мокапа так, щоб вона з'явилась у бажаному розташуванні на сайті. Тепер замінюємо частини скопійованого мокапа функціями із шаблону WordPress. Для початку розміщуємо коректне посилання на логотип. Правимо наступний рядок:

<a class="navbar-brand" href="#">Brand</a>

Замінюємо її на:

<a class="navbar-brand" href="<?php bloginfo('url')?>"><?php bloginfo('name')?></a>

Далі погоджуємо виведення меню замість того, що в мокапі.

Для наступних рядків коду:

<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 <b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li><a href="#">Separated link</a></li>
            <li><a href="#">One more separated link</a></li>
        </ul>
    </li>
</ul>

робимо заміну на:

<?php /* Primary navigation */
wp_nav_menu( array(
  'menu' => 'top_menu',
  'depth' => 2,
  'container' => false,
  'menu_class' => 'nav',
  //Process nav menu using our custom nav walker
  'walker' => new wp_bootstrap_navwalker())
);
?>

І ось компонент навігаційної панелі отримав свій інтегрований фреймворк.

Висновок

У цьому покроковому посібнику ми розглянули процес інтеграції навігаційної панелі на основі фреймворку Bootstrap CSS у тему оформлення на движку WordPress. Для прискорення процедур розробки власної нової теми ви можете просто завантажити вихідні файли і вставити в свою тему, а потім провести дрібні правки там, де вони необхідні.

Джерело: wp.tutsplus.com

Олексій Шевченко

редактор wpcafe

Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, що спеціалізується на створенні сайтів WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/