Почему мое меню навигации Bootstrap 5 не отображает выпадающее меню на маленьких экранах?

Я пытаюсь разработать тему Bootstrap 5 для последней версии WordPress. Я использую Navwalker отсюда: https://github.com/wp-bootstrap/wp-bootstrap-navwalker. Мое меню Navbar на Bootstrap не раскрывается на меньших экранах.

Не работает ли это потому, что я использую Bootstrap 5, а не Bootstrap 4?

Вот мой код из файла header.php:

<nav class="navbar navbar-expand-md navbar-dark bg-dark" role="navigation">
    <div class="container">
        <!-- Логотип и кнопка переключения для лучшего отображения на мобильных устройствах -->
        <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="<?php esc_attr_e( 'Переключить навигацию', 'your-theme-slug' ); ?>">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="#">Navbar</a>
        <?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'        => 'nav navbar-nav',
            'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
            'walker'            => new WP_Bootstrap_Navwalker(),
        ) );
        ?>
    </div>

</nav>

Вот мой код из файла functions.php:

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' => __( 'Основное меню', 'bootstrap' ),
    'secondary' => __( 'Вторичное меню', 'bootstrap' )
) );

Это моя ошибка:

Warning: call_user_func_array() expects parameter 1 to be a valid callback, function ‘register_navwalker’ not found or invalid function name in C:\Users\apiro\Local Sites\wordpressbootstraptheme\app\public\wp-includes\class-wp-hook.php on line 292

Стек вызовов

Time    Memory  Function    Location

1 0.0003 413560 {main}( ) …\index.php:0

2 0.0006 413832 require( ‘C:\Users\apiro\Local Sites\wordpressbootstraptheme\app\public\wp-blog-header.php’ ) …\index.php:17

3 0.0006 414376 require_once( ‘C:\Users\apiro\Local Sites\wordpressbootstraptheme\app\public\wp-load.php’ ) …\wp-blog-header.php:13

4 0.0007 414816 require_once( ‘C:\Users\apiro\Local Sites\wordpressbootstraptheme\app\public\wp-config.php’ ) …\wp-load.php:37

5 0.0007 419496 require_once( ‘C:\Users\apiro\Local Sites\wordpressbootstraptheme\app\public\wp-settings.php’ ) …\wp-config.php:79

6 0.0325 2624792 do_action( ) …\wp-settings.php:538

7 0.0325 2625168 WP_Hook->do_action( ) …\plugin.php:484

8 0.0325 2625168 WP_Hook->apply_filters( ) …\class-wp-hook.php:316

В файле класса nav walker измените все атрибуты “data-” на “data-bs-“

Например: измените “data-toggle” на “data-bs-toggle”

Я думаю, что нужно изменить всего одну строку 😉

У вас, похоже, две разные проблемы.

1. На странице GitHub, на которую вы ссылаетесь, есть раздел, который утверждает, что атрибуты данных необходимо изменить для Bootstrap 5:

Bootstrap 5 использует именованные пространственные атрибуты данных. Все атрибуты данных теперь
включают “bs” в качестве инфикса. Новые атрибуты работают так же, как и старые.

Таким образом, как уже было сказано, любой атрибут, начинающийся с data-, нужно изменить на data-bs-.

Это фактически было создано как pull request вместе с некоторыми другими изменениями для использования с Bootstrap 5: https://github.com/wp-bootstrap/wp-bootstrap-navwalker/pull/531

2. PHP-предупреждение можно упростить, просто включив необходимый файл из вашего файла functions.php следующим образом: include_once get_template_directory().'/class-wp-bootstrap-navwalker.php'; и удалив оборачивающую функцию и хук в after_setup_theme.

В вашем коде и настройках есть несколько проблем, давайте решим их шаг за шагом:

1. Атрибуты данных Bootstrap 5: С введением Bootstrap 5 атрибуты данных для переключения компонента collapse изменились.

Замените:

html

data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"

На:

data-bs-toggle="collapse" data-bs-target="#bs-example-navbar-collapse-1"

Это важное изменение, потому что в Bootstrap 5 все атрибуты данных теперь имеют префикс “bs-“.

2. Navwalker для Bootstrap 5: Если вы используете Bootstrap 5, убедитесь, что ваша версия WP_Bootstrap_Navwalker поддерживает Bootstrap 5. На момент моих последних обучающих данных, navwalker, который вы используете, был разработан для Bootstrap 4. Возможно, вам придется поискать другой navwalker или изменить текущий, чтобы он соответствовал изменениям Bootstrap 5.

3. Ошибка “Функция не найдена”: Ошибка, которую вы видите, возникает потому, что функция register_navwalker не найдена или недоступна во время действия after_setup_theme. Убедитесь, что функция register_navwalker действительно определяется перед вызовом add_action. Убедитесь, что нет условной логики или других проблем, предотвращающих определение функции.

Путь, который вы используете в вызове require_once, кажется правильным, но еще раз проверьте имя файла и путь, чтобы убедиться, что файл существует и путь правильный.

php

require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';

4. Отладка: Всегда полезно включить отладку в WordPress, когда вы работаете над разработкой темы или плагина. Добавьте эти строки в ваш wp-config.php:

php

define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true );
define( 'WP_DEBUG_DISPLAY', false );

Это включит отладку, запишет все ошибки в файл и предотвратит их отображение пользователю. Затем вы можете просмотреть файл wp-content/debug.log на наличие сообщений об ошибках.

Устранив проблемы с атрибутами данных Bootstrap 5 и убедившись, что ваш файл класса WP_Bootstrap_Navwalker корректно включен, вы должны приблизиться к решению проблемы с выпадающим меню. Помните, что любые другие конфликты JavaScript или CSS также могут мешать функциональности Bootstrap, поэтому всегда проверяйте наличие ошибок в консоли и старайтесь исключить конфликты при отладке.