Я реализовал WP_navwalker в моем проекте, но он не открывается на мобильном телефоне. Я выложу код ниже. Если я что-то упустил, пожалуйста, дайте мне знать. Я ценю, если кто-то может помочь мне выяснить, чего мне не хватает. Спасибо.
Я использую последнюю версию navwalker из https://github.com/wp-bootstrap/wp-bootstrap-navwalker и следую различным инструкциям к букве, но просто не могу заставить кнопку переключиться, чтобы открыть меню. Еще раз спасибо за вашу помощь в этом.
функций. php
/**
* Register Custom Navigation Walker
*/
function register_navwalker(){
require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';
}
add_action( 'after_setup_theme', 'register_navwalker' );
register_nav_menus( array(
'primary' => __( 'Primary Menu', 'rrspark' ),
) );
function html5blank_header_scripts()
{
if ($GLOBALS['pagenow'] != 'wp-login.php' && !is_admin()) {
wp_register_script('conditionizr', get_template_directory_uri() . '/js/lib/conditionizr-4.3.0.min.js', array(), '4.3.0'); // Conditionizr
wp_enqueue_script('conditionizr'); // Enqueue it!
wp_register_script('modernizr', get_template_directory_uri() . '/js/lib/modernizr-2.7.1.min.js', array(), '2.7.1'); // Modernizr
wp_enqueue_script('modernizr'); // Enqueue it!
wp_register_script('html5blankscripts', get_template_directory_uri() . '/js/scripts.js', array('jquery'), '1.0.0'); // Custom scripts
wp_enqueue_script('html5blankscripts'); // Enqueue it!
}
}
// Load HTML5 Blank conditional scripts
function html5blank_conditional_scripts()
{
if (is_page('pagenamehere')) {
wp_register_script('scriptname', get_template_directory_uri() . '/js/scriptname.js', array('jquery'), '1.0.0'); // Conditional script(s)
wp_enqueue_script('scriptname'); // Enqueue it!
}
}
// Load HTML5 Blank styles
function html5blank_styles()
{
wp_register_style('normalize', get_template_directory_uri() . '/normalize.css', array(), '1.0', 'all');
wp_enqueue_style('normalize'); // Enqueue it!
wp_register_style('html5blank', get_template_directory_uri() . '/style.css', array(), '1.0', 'all');
wp_enqueue_style('html5blank'); // Enqueue it!
wp_register_style('montserrat', 'https://fonts.googleapis.com/css?family=Montserrat:400,700', array(), '1.0', 'all');
wp_enqueue_style('montserrat'); // Enqueue it!
wp_register_style('kaushan', 'https://fonts.googleapis.com/css?family=Kaushan+Script', array(), '1.0', 'all');
wp_enqueue_style('kaushan'); // Enqueue it!
wp_register_style('droid', 'https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic', array(), '1.0', 'all');
wp_enqueue_style('droid'); // Enqueue it!
wp_register_style('roboto', 'https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700', array(), '1.0', 'all');
wp_enqueue_style('roboto'); // Enqueue it!
// wp_register_style('agencystyles', get_template_directory_uri() . '/css/agency.css', array(), '1.0', 'all');
// wp_enqueue_style('agencystyles');
wp_register_style('customstyles', get_template_directory_uri() . '/css/style.css', array(), '1.0', 'all');
wp_enqueue_style('customstyles');
// Enqueue it!
}
header. php
<nav class="navbar navbar-expand-md navbar-dark navbar-expand-md fixed-top" id="mainNav" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a href="/rrspark">
<img src="<?php echo get_template_directory_uri(); ?>/img/homelogo.png" alt="home-brand-logo" style="width: 125px;">
</a>
<div class="collapse navbar-collapse" id="navbar-content">
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'depth' => 2,
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'bs-example-navbar-collapse-1',
'menu_class' => 'navbar-nav ml-auto',
'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
'walker' => new WP_Bootstrap_Navwalker(),
) );
?>
</div>
</div>
</nav>
до закрывающий тег в нижнем колонтитуле. php
<?php wp_footer(); ?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="<?php bloginfo('template_url') ?> . /js/bootstrap.js"></script>
Редактировать, вносить изменения в функции. php
/*------------------------------------*\
Functions
\*------------------------------------*/
/**
* Register Custom Navigation Walker
*/
function register_navwalker(){
require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';
}
add_action( 'after_setup_theme', 'register_navwalker' );
register_nav_menus( array(
'primary' => __( 'Primary Menu', 'rrspark' ),
) );
// Load HTML5 Blank scripts (header.php)
function html5blank_header_scripts() {
if ( $GLOBALS['pagenow'] != 'wp-login.php' && ! is_admin() ) {
if ( HTML5_DEBUG ) {
// jQuery
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', get_template_directory_uri() . '/js/lib/jquery.js', array(), '1.11.1' );
// Conditionizr
wp_register_script( 'conditionizr', get_template_directory_uri() . '/js/lib/conditionizr-4.3.0.min.js', array(), '4.3.0' );
// Modernizr
wp_register_script( 'modernizr', get_template_directory_uri() . '/js/lib/modernizr.js', array(), '2.8.3' );
// Custom scripts
wp_register_script(
'html5blankscripts',
get_template_directory_uri() . '/js/scripts.js',
array(
'conditionizr',
'modernizr',
'jquery'
),
'1.0.0' );
// Enqueue Scripts
wp_enqueue_script( 'html5blankscripts' );
// If production
} else {
// Scripts minify
wp_register_script( 'html5blankscripts-min', get_template_directory_uri() . '/js/scripts.js', array(), '1.0.0' );
// Enqueue Scripts
wp_enqueue_script( 'html5blankscripts-min' );
}
}
}
// Load HTML5 Blank conditional scripts
function html5blank_conditional_scripts()
{
if (is_page('pagenamehere')) {
wp_register_script('scriptname', get_template_directory_uri() . '/js/scriptname.js', array('jquery'), '1.0.0'); // Conditional script(s)
wp_enqueue_script('scriptname'); // Enqueue it!
}
}
// Load HTML5 Blank styles
function html5blank_styles()
{
wp_register_style('normalize', get_template_directory_uri() . '/normalize.css', array(), '1.0', 'all');
wp_enqueue_style('normalize'); // Enqueue it!
wp_register_style('html5blank', get_template_directory_uri() . '/style.css', array(), '1.0', 'all');
wp_enqueue_style('html5blank'); // Enqueue it!
wp_register_style('montserrat', 'https://fonts.googleapis.com/css?family=Montserrat:400,700', array(), '1.0', 'all');
wp_enqueue_style('montserrat'); // Enqueue it!
wp_register_style('kaushan', 'https://fonts.googleapis.com/css?family=Kaushan+Script', array(), '1.0', 'all');
wp_enqueue_style('kaushan'); // Enqueue it!
wp_register_style('droid', 'https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic', array(), '1.0', 'all');
wp_enqueue_style('droid'); // Enqueue it!
wp_register_style('roboto', 'https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700', array(), '1.0', 'all');
wp_enqueue_style('roboto'); // Enqueue it!
wp_register_style('customstyles', get_template_directory_uri() . '/css/style.css', array(), '1.0', 'all');
wp_enqueue_style('customstyles');
// Enqueue it!
}
add_action( 'wp_enqueue_scripts', 'prefix_enqueue_awesome' );
/**
* Register and load font awesome CSS files using a CDN.
*/
function prefix_enqueue_awesome() {
wp_enqueue_style('font-awesome-5', 'https://use.fontawesome.com/releases/v5.3.0/css/all.css', array(), '5.3.0');
}
// Register HTML5 Blank Navigation
function register_html5_menu()
{
register_nav_menus(array( // Using array to specify more menus if needed
'header-menu' => __('Header Menu', 'html5blank'), // Main Navigation
'sidebar-menu' => __('Sidebar Menu', 'html5blank'), // Sidebar Navigation
'extra-menu' => __('Extra Menu', 'html5blank') // Extra Navigation if needed (duplicate as many as you need!)
));
}
add_action( 'wp_enqueue_scripts', 'custom_load_bootstrap' );
/**
* Enqueue Bootstrap.
*/
function custom_load_bootstrap() {
wp_enqueue_style( 'bootstrap-css', '//maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css' );
wp_enqueue_script( 'bootstrap-js', '//maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js', array( 'jquery' ), true );
}
Второе редактирование с выводом инструментов разработчика
После удаления указанного мне div я получил панель навигации для расширения. Проблема в том, что навигационная панель открывается на мобильном телефоне по умолчанию и не закрывается. Пожалуйста, смотрите изображение.