Вопрос или проблема
Я использую Twenty Seventeen для создания своего собственного дизайна выпадающего меню, оно не работает для меня.
Когда я наводю курсор на родительский элемент, ничего не отображается.
Вот мой собственный HTML-код.
<div class="headermenu">
<div class="headermenu_wrap">
<div class="menu-primary1-container"><ul id="menu-primary1" class="nav-menu"><li id="menu-item-115" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-115"><a href="http://127.0.0.1/sh/1/?page_id=113">поиск1</a></li>
<li id="menu-item-121" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-121"><a href="#">подменю<svg class="icon icon-angle-down" aria-hidden="true" role="img"> <use href="#icon-angle-down" xlink:href="#icon-angle-down"></use> </svg></a>
<ul class="sub-menu">
<li id="menu-item-116" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-116"><a href="http://127.0.0.1/sh/1/?page_id=77">поиск<svg class="icon icon-angle-down" aria-hidden="true" role="img"> <use href="#icon-angle-down" xlink:href="#icon-angle-down"></use> </svg></a>
<ul class="sub-menu">
<li id="menu-item-117" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-117"><a href="http://127.0.0.1/sh/1/?page_id=20">случайный<svg class="icon icon-angle-down" aria-hidden="true" role="img"> <use href="#icon-angle-down" xlink:href="#icon-angle-down"></use> </svg></a>
<ul class="sub-menu">
<li id="menu-item-118" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-118"><a href="http://127.0.0.1/sh/1/?page_id=29">случайный1<svg class="icon icon-angle-down" aria-hidden="true" role="img"> <use href="#icon-angle-down" xlink:href="#icon-angle-down"></use> </svg></a>
<ul class="sub-menu">
<li id="menu-item-119" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-119"><a href="http://127.0.0.1/sh/1/?page_id=33">случайный3</a></li>
</ul>
</li>
<li id="menu-item-120" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-120"><a href="http://127.0.0.1/sh/1/?page_id=113">поиск1</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul></div>
<div class="social_header-inner">
<ul class="social_header-ul">
<li><a href="http://127.0.0.1/sh/1/&feed=rss2" class="social_links_a" target="_blank">
<i class="fa fa-rss-square"></i></a></li>
<li><a href="#" class="social_links_a" target="_blank">
<i class="fa fa-facebook-square"></i></a></li>
<li><a href="##" class="social_links_a" target="_blank">
<i class="fa fa-twitter-square"></i></a></li>
<li><a href="###" class="social_links_a" target="_blank">
<i class="fa fa-youtube-square"></i></a></li>
<li><a href="####" class="social_links_a" target="_blank">
<i class="fa fa-google-plus-square"></i></a></li>
<li><a href="#####" class="social_links_a" target="_blank">
<i class="fa fa-instagram"></i></a></li>
<li><a href="######" class="social_links_a" target="_blank">
<i class="fa fa-linkedin-square"></i></a></li>
<li><a href="#######" class="social_links_a" target="_blank">
<i class="fa fa-flickr"></i></a></li>
</ul>
</div>
</div>
</div></div>
И вот мои загруженные скрипты из кода источника на фронтенде
<script type="text/javascript" src="http://127.0.0.1/sh/1/wp-includes/js/jquery/jquery.js?ver=1.12.4"></script>
<script type="text/javascript" src="http://127.0.0.1/sh/1/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1"></script>
Новый шаг, я обнаружил, что global.JS и Navigation.JS не вызываются, поэтому я отредактировал functions.php, теперь оба вызываются.
Решение обычно заключается в том, что я использую это для вызова меню.
<?php wp_nav_menu( array( 'theme_location' => 'top', 'menu_class' => 'nav-menu', 'fallback_cb' => 'tie_nav_fallback' ) ); ?>
С моими HTML-данными до Twenty Twelve, если я правильно помню, но новое в Seventeen заключается в том, что я должен вызывать меню внутри
<div class="main-navigation">
.
Ответ или решение
Проблема с выпадающим меню на теме Twenty Seventeen может возникать по нескольким причинам. Давайте разберем основные аспекты, которые помогут решить данную проблему.
1. Структура HTML
Ваш код для меню имеет правильную базовую структуру, но важно убедиться в том, что он соответствует рекомендациям WordPress. Для корректной работы выпадающего меню необходимо следующее:
- Проверьте, что все
<ul>и<li>корректно вложены друг в друга. В вашем представлении это выглядит правильно, однако стоит уделить внимание возможным синтаксическим ошибкам.
2. Подключение JavaScript
Как вы отметили, файлы global.js и navigation.js не загружались изначально. Для решения этой проблемы необходимо убедиться, что в вашем файле functions.php прописаны нужные хендлеры для подключения JavaScript. Например:
function my_theme_enqueue_scripts() {
wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'navigation', get_template_directory_uri() . '/js/navigation.js', array( 'jquery' ), null, true );
// Другие подключаемые скрипты
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );Помимо этого, убедитесь, что в вашем меню есть элементы с классами, ожидаемыми JavaScript. Twenty Seventeen использует для навигации специальные классы, как .menu-item-has-children, которые позволяют JavaScript определить, где должно появляться выпадающее меню.
3. Подключение меню
Обратите внимание на правильный вызов меню через wp_nav_menu(). Убедитесь, что оно выводится внутри нужного контейнера:
<div class="main-navigation">
<?php
wp_nav_menu( array(
'theme_location' => 'top',
'menu_class' => 'nav-menu',
'fallback_cb' => 'tie_nav_fallback'
) );
?>
</div>Здесь очень важно указать правильное расположение меню (theme_location), которое должно быть зарегистрировано в вашей теме.
4. CSS стили
Иногда проблема может быть в отсутствии необходимых стилей для выпадающего меню. Проверьте, что ваш CSS-файл не перезаписывает стили навигации/выпадающего меню. Twenty Seventeen использует для этого селекторы, такие как .sub-menu и .menu-item-has-children. Убедитесь, что эти классы имеют правильные стили, позволяющие показывать подменю. Например:
.sub-menu {
display: none; /* Скрытие подменю по умолчанию */
}
.menu-item-has-children:hover .sub-menu {
display: block; /* Показ подменю при наведении */
}5. Проверка взаимодействия с другими плагинами или темами
Если проблема сохраняется, возможно, другие плагины или даже ваша собственная тема влияют на функциональность меню. Отключите все плагины и проверьте, работает ли выпадающее меню. Если работает, включайте плагины по одному, чтобы найти возможный источник конфликта.
Заключение
На решение проблемы с выпадающим меню может повлиять множество факторов, от структуры HTML до подключения JavaScript и стилей. Проанализируйте каждый из пунктов и проведите последовательные проверки, и, скорее всего, это поможет вам устранить выявленные недостатки. Если ни один из методов не сработает, возможно, стоит рассмотреть вопрос переноса проекта на новую версию темы или реализацию меню через специализированные плагины.