Почему в Wordpress не применяются стили в меню от Bootstap?

Question

[Norum]

Пытаюсь сделать динамическое меню на вордпрессе, на основе темы. В wp_nav_menu в container_class и menu_class проставляю тот же класс, что у меню в верстке navbar-nav ml-auto, но по стилям получается дичь. Почему не применяются стили?
сам сайт tempest.beget.tech
видео https://yadi.sk/i/NF5iKuepQB13vQ

Answer 1

[Орхан Гасанлы]

Потому что для бутстрапа нужно подключить Walker
https://github.com/wp-bootstrap/wp-bootstrap-navwalker
https://wp-kama.ru/function/walker

Comments

[Norum]

а полегче решения нет?

[Орхан Гасанлы]

Norum, а в чем сложность заключается-то?

[Tempest99]

azerphoenix, я тоже не совсем понял,как данный файл внедрить в вёрстку,так как вижу впервые

[Norum]

azerphoenix, сложность в том, как данный код соединить с моим меню. Руководства то нормально написанного нету

[Орхан Гасанлы]

Tempest99, есть же инструкция. Скачиваете архив, добавляете в директорию с темой.
Далее читаете главу Installation

Place class-wp-bootstrap-navwalker.php in your WordPress theme folder /wp-content/themes/your-theme/

Open your WordPress themes functions.php file - /wp-content/themes/your-theme/functions.php - and add the following code:

/**
 * Register Custom Navigation Walker
 */
function register_navwalker(){
	require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';
}
add_action( 'after_setup_theme', 'register_navwalker' );

If you encounter errors with the above code use a check like this to return clean errors to help diagnose the problem.

if ( ! file_exists( get_template_directory() . '/class-wp-bootstrap-navwalker.php' ) ) {
    // File does not exist... return an error.
    return new WP_Error( 'class-wp-bootstrap-navwalker-missing', __( 'It appears the class-wp-bootstrap-navwalker.php file may be missing.', 'wp-bootstrap-navwalker' ) );
} else {
    // File exists... require it.
    require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';
}

и т.д.

Или же если вы хотите написать свой кастомный валкер, то прочитайте кодекс ВП.

https://misha.blog/wordpress/nav-menu-walkers.html
https://developer.wordpress.org/reference/classes/...
https://wp-kama.ru/function/walker
https://developer.wordpress.org/reference/classes/...

[Орхан Гасанлы]

Norum, все индивидуально. Рекомендую для начала прочитать кодекс ВП, чтобы понять, как это все работает. Далее вы можете написать свой валкер, но так как у вас бутстрапная тема с сайта startbootstrap, то достаточно использовать уже готовый валкер. Если есть необходимость, то можно кастомизировать и его тоже

[Norum]

azerphoenix, тогда можете мне помочь разобраться, так как я начинающий верстальщик и пока плаваю? Вот что я делал:

1)Поместил class-wp-bootstrap-navwalker.php в папку с темой

2) Прописываю код в functions.php НАВЕРХУ (правильно ли это?)

function register_navwalker(){
	require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';
}
add_action( 'after_setup_theme', 'register_navwalker' )

3) Согласно инструкции прописываю код для проверки следом за первым

if ( ! file_exists( get_template_directory() . '/class-wp-bootstrap-navwalker.php' ) ) {
    // File does not exist... return an error.
    return new WP_Error( 'class-wp-bootstrap-navwalker-missing', __( 'It appears the class-wp-bootstrap-navwalker.php file may be missing.', 'wp-bootstrap-navwalker' ) );
} else {
    // File exists... require it.
    require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';
}

4) Закоментировал старый register_nav_menus и вставил новый

register_nav_menus( array(
		    'primary' => __( 'Primary Menu', 'lesson' ),
		) );

		//   (
		// 	array(
		// 		'menu-1' => esc_html__( 'Primary', 'lesson' ),
		// 	)
		// );

Что дальше делать, так и не понял. Название папки с темой lesson

[Орхан Гасанлы]

Norum, добрый день.

я начинающий верстальщик

во-первых, этим занимается не верстальщик, а разработчик.

во-вторых, рекомендую прежде чем заниматься разработкой изучить рнр, изучить кодекс ВП и прочитать документацию к этому walker.

Прописываю код в functions.php НАВЕРХУ (правильно ли это?)

вообще, не принципиально, где именно вы его поместите. Главное, чтоыб он был внутри <?php

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

нужно либо то, либо другое.

Дальше читаем документацию
https://github.com/wp-bootstrap/wp-bootstrap-navwalker
и видим такой код

wp_nav_menu( array(
    'theme_location'  => 'primary',
    'depth'           => 2, // 1 = no dropdowns, 2 = with dropdowns.
    'container'       => 'div',
    'container_class' => 'collapse navbar-collapse',
    'container_id'    => 'bs-example-navbar-collapse-1',
    'menu_class'      => 'navbar-nav mr-auto',
    'fallback_cb'     => 'WP_Bootstrap_Navwalker::fallback',
    'walker'          => new WP_Bootstrap_Navwalker(),
) );

обратите внимание на walker

Вот. тут даже пример приведен

<nav class="navbar navbar-expand-md navbar-light bg-light" 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="<?php esc_attr_e( 'Toggle navigation', '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>

[Norum]

azerphoenix, так в примере то другое