Как адаптировать меню с шаблона под wordpress?

Question

AlexandraSvetik @AlexandraSvetik

Как адаптировать меню с шаблона под wordpress?

Добрый день. Купила тему хочу адаптировать под wordpress. Все сделала не могу разобраться с меню. В шаблоне оно открываться при наведении и в мобильной версии открываться при нажатии по +. У меня меню встало а вот этот функционал не работает
вот код шаблона

<nav class="navigation navbar navbar-default">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="open-btn">
                            <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="index.html"><img src="<?php echo bloginfo('template_url'); ?>/assets/images/logo.png" alt></a>
                    </div>
                    <div id="navbar" class="navbar-collapse collapse navbar-right navigation-holder">
                        <button class="close-navbar"><i class="ti-close"></i></button>
                        <ul class="nav navbar-nav">
                            <li class="menu-item-has-children">
                                <a href="#">Home</a>
                                <ul class="sub-menu">
                                    <li><a href="index.html">Home</a></li>
                                    <li><a href="index-2.html">Home style 2</a></li>
                                    <li><a href="index-3.html">Home style 3</a></li>
                                </ul>
                            </li>
                            <li class="menu-item-has-children">
                                <a href="#">Pages</a>
                                <ul class="sub-menu">
                                    <li><a href="about.html">About</a></li>
                                    <li><a href="about-s2.html">About style 2</a></li>
                                    <li><a href="team.html">Attorneys</a></li>
                                    <li><a href="attorney-single.html">Attorney single</a></li>
                                    <li><a href="faq.html">FAQ</a></li>
                                    <li><a href="testimonials.html">Testimonials</a></li>
                                    <li><a href="404.html">404</a></li>
                                    <li class="menu-item-has-children">
                                        <a href="#Level3">Third level</a>
                                        <ul class="sub-menu">
                                            <li><a href="#">Level 3</a></li>
                                            <li><a href="#">Level 3</a></li>
                                            <li><a href="#">Level 3</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li class="menu-item-has-children">
                                <a href="#">Practice Areas</a>
                                <ul class="sub-menu">
                                    <li><a href="practice-area.html">Practice Areas</a></li>
                                    <li><a href="practice-area-s2.html">Practice Areas s2</a></li>
                                    <li><a href="service-single.html">Practice single</a></li>
                                </ul>
                            </li>
                            <li class="menu-item-has-children">
                                <a href="#">Cases</a>
                                <ul class="sub-menu">
                                    <li><a href="case-studies.html">Cases</a></li>
                                    <li><a href="case-studies-s2.html">Cases s2</a></li>
                                    <li><a href="case-single.html">Cases single</a></li>
                                </ul>
                            </li>
                            <li class="menu-item-has-children">
                                <a href="#">Blog</a>
                                <ul class="sub-menu">
                                    <li><a href="blog.html">Blog Default</a></li>
                                    <li><a href="blog-left-sidebar.html">Blog left sidebar</a></li>
                                    <li><a href="blog-fullwidth.html">Blog fullwidth</a></li>
                                    <li><a href="blog-details.html">Blog Details default</a></li>
                                    <li><a href="blog-details-left-sidebar.html">Blog Details left sidebar</a></li>
                                    <li><a href="blog-details-fullwidth.html">Blog Details fullwidth</a></li>
                                </ul>
                            </li>
                            <li><a href="contact.html">Contact</a></li>
                        </ul>
                    </div><!-- end of nav-collapse -->
                    <div class="search-quote">
                        <div class="header-search-area">
                            <div class="header-search-form">
                                <form class="form">
                                    <div>
                                        <input type="text" class="form-control" placeholder="Search here">
                                    </div>
                                    <button type="submit" class="btn"><i class="fi flaticon-magnifying-glass-browser"></i></button>
                                </form>
                            </div>
                            <div>
                                <button class="btn open-btn"><i class="fi flaticon-magnifying-glass-browser"></i></button>
                            </div>
                        </div>
                        <div class="quote">
                            <a href="#" class="theme-btn">Free consultation</a>
                        </div>
                    </div>
                </div><!-- end of container -->
            </nav>

вот мой код

<?php /* Primary navigation */
	                                wp_nav_menu( array(
	                                    'menu' => 'primary',
	                                    'depth' =>  0,
	                                    'container' => false,
	                                    'strcasecmp' => 1,
	                                    'menu_class' => 'nav navbar-nav center',
	                                    'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
	                                    //Process nav menu using our custom nav walker
	                                    'walker' => new wp_bootstrap_navwalker())
	                                );
	                                wp_nav_menu( array(
	                                    'menu' => 'primary',
	                                    'depth' =>  0,
	                                    'container' => false,
	                                    'menu_class' => 'dropdown-menu center',
	                                    'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
	                                    //Process nav menu using our custom nav walker
	                                    'walker' => new wp_bootstrap_navwalker())
	                                );
	                                ?>
                    </div><!-- end of nav-collapse -->

вот ссылка на шаблон темы помогите пожалуйста кому не сложно я новичок. Делала все по инструкции как вот здесь

Вопрос задан более двух лет назад
98 просмотров

1 комментарий

Подписаться 2 Средний 1 комментарий

Пригласить эксперта

Ответы на вопрос 1

Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

WordPress

+2 ещё

Средний
Как настроить правильно редиректы на vps NGIX на Wordrpess?
- 1 подписчик
- 2 часа назад
- 26 просмотров
0

ответов
WordPress

Средний
Почему не работает редактирование и добавление постов WordPress?
- 1 подписчик
- 6 часов назад
- 37 просмотров
1

ответ
WordPress

Простой
Как перенести лендинг на WordPress у которого НЕТ базы данных?
- 2 подписчика
- вчера
- 218 просмотров
2

ответа
WordPress

Средний
Откуда могут появляться {{ после слэша в адресе страниц?
- 1 подписчик
- 21 дек.
- 76 просмотров
3

ответа
WordPress

Средний
Сайт в мобильной версии съезжает влево?
- 1 подписчик
- 20 дек.
- 78 просмотров
1

ответ
WordPress

+1 ещё

Средний
Wordpress — Какой плагин использовать для объектного кэша?
- 2 подписчика
- 20 дек.
- 158 просмотров
2

ответа
WordPress

Простой
Не отображается логотип на странице в Wordpress на телефоне?
- 1 подписчик
- 18 дек.
- 45 просмотров
1

ответ
WordPress

Средний
Почему шорткод в поле acf превращается в тег?
- 1 подписчик
- 18 дек.
- 60 просмотров
1

ответ
WordPress

Простой
Как в классе walker задать в внутри ссылки span?
- 1 подписчик
- 16 дек.
- 46 просмотров
0

ответов
WordPress

+1 ещё

Средний
Почему не срабатывают хуки в woocommerce?
- 1 подписчик
- 15 дек.
- 55 просмотров
2

ответа
Показать ещё Загружается…

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

Fullstack на Wordpress

SilverDuck

от 100 000 ₽

Технический специалист / интегратор / разработчик (Javascript, PHP, WordPress)

HRScan

от 1 000 $

Создать карту для роблокс ( опытный )

26 дек. 2024, в 18:41

30000 руб./за проект

Сделать сайт на Wordpress (или предложить свое)

26 дек. 2024, в 18:20

35000 руб./за проект

Торговый робот для Bybit

26 дек. 2024, в 18:12

20000 руб./за проект

'depth' => 0 говорит не выводить подменю

Answer 1 · 2022-06-15 10:24:03

Да, меню в wordpress - это жесть. Приведу пример своего меню. Должно подсказать некоторые неочевидные вещи.
Это в header.php:

<?php wp_nav_menu( array(
	'sort_column' => 'menu_order',
	'theme_location' => 'primary-menu',
	'container' => false,
	'menu_class' => 'navigation_menu',
	'walker' => new My_Walker_Nav_Menu()
) ); ?>

А это в functions.php:

// Главное меню
class My_Walker_Nav_Menu extends Walker_Nav_Menu {
  function start_lvl(&$output, $depth = 1, $args = Array()) {
    $indent = str_repeat("\t", $depth);
    $output .= "\n$indent<ul class=\"navigation_submenu-".$depth."\">\n";
  }
	public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
		if ( isset( $args->item_spacing ) && 'discard' === $args->item_spacing ) {
			$t = '';
			$n = '';
		} else {
			$t = "\t";
			$n = "\n";
		}
		$indent = ( $depth ) ? str_repeat( $t, $depth ) : '';

		$classes = empty( $item->classes ) ? array() : (array) $item->classes;
		$classes[] = 'menu-item-' . $item->ID;

		$args = apply_filters( 'nav_menu_item_args', $args, $item, $depth );

		$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args, $depth ) );
		$class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';

		$id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args, $depth );
		$id = $id ? ' id="' . esc_attr( $id ) . '"' : '';

		$output .= $indent . '<li' . $id . $class_names .'>';

		$atts = array();
		$atts['title']  = ! empty( $item->attr_title ) ? $item->attr_title : '';
		$atts['target'] = ! empty( $item->target )     ? $item->target     : '';
		$atts['rel']    = ! empty( $item->xfn )        ? $item->xfn        : '';
		$atts['href']   = ! empty( $item->url )        ? $item->url        : '';

		$atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args, $depth );

		$attributes = '';
		foreach ( $atts as $attr => $value ) {
			if ( ! empty( $value ) ) {
				$value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
				$attributes .= ' ' . $attr . '="' . $value . '"';
			}
		}

		$title = apply_filters( 'the_title', writeTitle($item->title), $item->ID );

		$title = apply_filters( 'nav_menu_item_title', $title, $item, $args, $depth );
		
		
		if ($depth == 1) {
			$writeIcon = '<div class="submenu__icon">
				<div class="submenu__icon__img" style="background-image: url('.get_illImg($item->object_id)['url'].');"></div>
			</div>&nbsp;';
		} else {
			$writeIcon = '';
		}
		$item_output = $args->before;
		if (($depth == 1) && (get_field('activity', 'category_' .$item->object_id) == 'inactive')) {
			$item_output .= '<div' .addTooltip($item->object_id). '>';
			$item_output .= $writeIcon;
			$item_output .= $title;
			$item_output .= '</div>';
		} else {
			$item_output .= '<a'. $attributes .'' .addTooltip($item->object_id). '>';
			$item_output .= $writeIcon;
			$item_output .= $args->link_before . $title . $args->link_after;
			$item_output .= '</a>';
		}
		$item_output .= $args->after;

		$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
	}
	
}

Вот, что получилось в результате:

<ul id="menu-%d0%be%d1%81%d0%bd%d0%be%d0%b2%d0%bd%d0%be%d0%b5-%d0%bc%d0%b5%d0%bd%d1%8e" class="navigation_menu"><li id="menu-item-104" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-8 current_page_item menu-item-has-children menu-item-104"><a href="https://my.site.ru/">Продукция</a>
<ul class="navigation_submenu-0">
	<li id="menu-item-304" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-304"><a href="https://my.site.ru/knx"><div class="submenu__icon">
				<div class="submenu__icon__img" style="background-image: url(https://my.site.ru/wp-content/uploads/2019/04/KNX-site-1.png);"></div>
			</div>&nbsp;KNX</a>
	<ul class="navigation_submenu-1">
		<li id="menu-item-1724" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1724"><a href="https://my.site.ru/knx/actuators">Актуаторы</a></li>
		<li id="menu-item-1725" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1725"><a href="https://my.site.ru/knx/jalousie">Жалюзи</a></li>
		<li id="menu-item-1726" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1726"><a href="https://my.site.ru/knx/heating">Отопление</a></li>
		<li id="menu-item-1727" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1727"><a href="https://my.site.ru/knx/button">Модули входов/выходов</a></li>
		<li id="menu-item-1728" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1728"><a href="https://my.site.ru/knx/system">Системные устройства</a></li>
		<li id="menu-item-1729" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1729"><a href="https://my.site.ru/knx/accessories">Аксессуары</a></li>
	</ul>
</li>
	<li id="menu-item-59" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-59"><a href="https://my.site.ru/modbus"><div class="submenu__icon">
				<div class="submenu__icon__img" style="background-image: url(https://my.site.ru/wp-content/uploads/2019/04/Modbus-site.png);"></div>
			</div>&nbsp;Modbus</a>
	<ul class="navigation_submenu-1">
		<li id="menu-item-67" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-67"><a href="https://my.site.ru/modbus/input-output">Устройства ввода-вывода</a></li>
		<li id="menu-item-361" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-361"><a href="https://my.site.ru/modbus/adds">Системные устройства</a></li>
	</ul>
</li>
	<li id="menu-item-63" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-63"><a href="https://my.site.ru/smart"><div class="submenu__icon">
				<div class="submenu__icon__img" style="background-image: url(https://my.site.ru/wp-content/uploads/2019/04/Smart-site-1.png);"></div>
			</div>&nbsp;Smart</a>
	<ul class="navigation_submenu-1">
		<li id="menu-item-182" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-182"><a href="https://my.site.ru/smart/climate">Климат</a></li>
		<li id="menu-item-183" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-183"><a href="https://my.site.ru/smart/light">Свет</a></li>
		<li id="menu-item-184" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-184"><a href="https://my.site.ru/smart/curtains">Шторы</a></li>
		<li id="menu-item-223" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-223"><a href="https://my.site.ru/smart/accounting">Учёт</a></li>
	</ul>
</li>
</ul>
</li>
<li id="menu-item-103" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-103"><a href="https://my.site.ru/news">Новости</a></li>
<li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-76"><a href="https://my.site.ru/buy.html">Где купить?</a></li>
<li id="menu-item-423" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-423"><a href="https://my.site.ru/documents">Документы</a></li>
<li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-23"><a href="https://my.site.ru/contacts.html">Контакты</a></li>
<li id="menu-item-1160" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1160"><a href="https://my.site.ru/forum.html">Форум</a></li>
</ul>

Как адаптировать меню с шаблона под wordpress?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт