2013-12-02 4 views
1

Просто ради тестирования я использую двадцать одну тему. Я выполнил шаги в this tutorial, но переключение в мобильном режиме нарушено. Вот что я сделал:Заменить навигацию при загрузке navbar в wordpress

Я пошел http://getbootstrap.com/customize/ и проверил:

  • Navbar под LESS файлов
  • коллапс под плагинов JQuery из-за того, что он говорит here (плагин зависимостей)

Скачан файл.

Unzipped файл и

  • размещены bootstrap.css и bootstrap.min.css в twentythirteen/CSS/

  • Размещенные bootstrap.js и bootstrap.min.js в twentythirteen/CSS/

  • Размещенные this file в twentythirteen как на учебник предложение

Измененный <nav> содержимое header.php от этого:

<div id="navbar" class="navbar"> 
    <nav id="site-navigation" class="navigation main-navigation" role="navigation"> 
     <h3 class="menu-toggle"><?php _e('Menu', 'twentythirteen'); ?></h3> 
     <a class="screen-reader-text skip-link" href="#content" title="<?php esc_attr_e('Skip to content', 'twentythirteen'); ?>"><?php _e('Skip to content', 'twentythirteen'); ?></a> 
     <?php wp_nav_menu(array('theme_location' => 'primary', 'menu_class' => 'nav-menu')); ?> 
     <?php get_search_form(); ?> 
    </nav><!-- #site-navigation --> 
</div><!-- #navbar --> 

к этому:

<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"> 
        <?php /* Primary navigation */ 
         wp_nav_menu(array(
          'menu' => 'main_navigation', 
          'depth' => 2, 
          'container' => false, 
          'menu_class' => 'navbar', 
          //Process nav menu using our custom nav walker 
          'walker' => new wp_bootstrap_navwalker()) 
         ); 
        ?> 
       </ul> 
      </li> 
     </ul> 
    </div> 
</nav> 

и добавил следующее к началу functions.php:

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


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

require_once('wp_bootstrap_navwalker.php'); 

Loaded страницу в XAMPP и навигация сломана :(

Что я делаю неправильно? Должен ли я что-то менять в коде?

EDIT: Не знаю, если я делаю что-то правильно, но я изменил значения menu и menu class (main_navigation это имя, которое я дал мое меню на приборной панели). Это все еще не работает, жестко.

wp_nav_menu(array(
    'menu' => 'main_navigation', 
    'depth' => 2, 
    'container' => false, 
    'menu_class' => 'navbar', 
    //Process nav menu using our custom nav walker 
    'walker' => new wp_bootstrap_navwalker()) 

Смотрите проблему в действии: broken navbar

+0

Сначала вы, вероятно, нуждаетесь в отзывчивом css из bootstrap – Rastko

+0

Можете ли вы опубликовать то, что вы изменили в 'header.php' и' funcitons.php'? Я не знаю, что должны иметь исходные файлы. Кроме того, что означает «сломан»? Вы получаете сообщение об ошибке? – afuzzyllama

+0

@afuzzyllama отредактировал исходное сообщение.Сломанный как внутри, функция переключения нарушена. – Barbara

ответ

0

Глядя на скриншоте, вы включили ваши JavaScript файлы из строя. Вы должны включить библиотеку jQuery перед библиотекой начальной загрузки.

+0

Thx. Теперь посмотрим прямо сейчас. Почему я не понимаю, жестко? Не следует ли использовать html и js по умолчанию на странице примера загрузки, чтобы меню работало? – Barbara

+0

Мне нужно посмотреть событие, связанное с навигацией, чтобы увидеть, что происходит. То, что на клике, должно дать вам представление о том, какую структуру он ищет. – afuzzyllama

+0

Не знаю, понимаете ли вы то, что вы имели в виду, но в хромовом протоколе консоли сказано: Неподготовлено ReferenceError: jQuery не определен bootstrap.min.js: 11 event.returnValue устарел. Вместо этого используйте стандартное событие event.preventDefault(). – Barbara

Смежные вопросы