Новая тема в bootstrap Урок третий

Новая тема в bootstrap

Продолжаем верстать

Новая тема в bootstrap

Урок третий

Здравствуйте, уважаемые постоянные посетители и гости сайта “Блог Валерия Бородина”!

Продолжаем с вами изучать верстку в bootstrap адаптивной темы для WordPress.

Сегодня в нашем следующем уроке, наша новая тема bootstrap для WordPress приобретет свой надлежащий вид, который подобает настоящему сайту или блогу на WordPress …

Новая тема в bootstrap

Создаем навигацию по сайту и выводим контент

Создаем навигации по сайту

  • Качаем специальный скрипт для совместимости работы WordPress в bootstrap здесь
  • Распаковываем его и заливаем в папку с нашей темой
  • В файле functions.php созданной темы прописываем код для корректной его работы:
<?php
 require_once('wp_bootstrap_navwalker.php');
 
 if (function_exists('add_theme_support')) {
 add_theme_support('menus');
 }
?>
  • В файле index.php прописываем вот этот код внутри тегов <menu></menu> . Он будет выводить наше меню:
<?php
 wp_nav_menu( array(
 'menu' => 'headMenu',
 'depth' => 2,
 'container' => false,
 'menu_class' => 'nav',
 
 'walker' => new wp_bootstrap_navwalker())
 );
 ?>
  • В файле style.css прописываем вот такой код:
menu {
 padding:0;
 margin:0;
 }
  • В файле footer.php пропишем следующий код после подключенных нами ранее скриптов. Это будет строка 12:
<script>
 jQuery(document).ready(function () {
 $(".current-menu-item").addClass("active");
 });
 </script>

Вот мы с вами прописали все нужные скрипты и функции. И у Вас получилась такая заготовка:

Новая тема в bootstrap Урок третий
Новая тема в bootstrap Урок третий

Теперь давайте посмотрим видеоурок по нашему пройденному материалу:

Новая тема в bootstrap для WordPress – Оформление сайдбара

Если вам понравился материал?
Прошу Вас комментировать! Делиться в соцсетях с друзьями!

Спасибо! Ваш Валерий Бородин
До встречи в следующем уроке:

Новая тема в bootstrap для WordPress – Оформление сайдбара.

Все уроки по верстке в bootstrap адаптивной, уникальной темы для WordPress

 

Вы будете первым, кто поставит оценку!
Понравилась статья? Поделиться с друзьями:
Добавить комментарий