Как сделать так, чтобы пункт меню верхнего уровня не имел ссылки, но имел связанные подменю?

Самый простой способ сделать это без плагина или чего-либо еще - использовать функцию "Меню" WordPress. Вот инструкции для WordPress 4.8:

1. На панели управления WordPress перейдите в раздел "Внешний вид -> Меню"
2. На вкладке "Редактировать меню" выберите "Пользовательские ссылки"
3. Для URL-адреса введите "#" (без кавычек)
4. Для текста ссылки введите нужный текст на верхнем уровне раскрывающегося меню
5. Нажмите кнопку "Добавить в меню"
6. Перетащите пункт меню в нужное положение в вашем меню
7. Для только что добавленного пункта меню нажмите стрелку вниз справа от пункта (слева от пункта будет написано "пользовательская ссылка")
8. Удалите "#" из URL-адреса. Это - во всех браузерах - преобразует ссылку в обычный текст.
9. Нажмите кнопку "Сохранить меню"

Самый простой метод, который я придумал, состоял в том, чтобы создать пользовательский элемент ссылки со значением URL ссылки #. Это отсылает пользователя к пустому хэшу на той же странице, поэтому в основном ссылки никуда не ведут.

Однако существуют некоторые побочные эффекты использования пустых хэшей для ссылок-заполнителей. Ссылка по-прежнему будет отображаться и вести себя как ссылка, поэтому она может сбить пользователя с толку, когда он нажимает на то, что кажется ссылкой, но ничего не происходит. Другой эффект заключается в том, что щелчок по пустому хэшу ссылка переопределит любой существующий хэш, отправив пользователя в верхнюю часть страницы. Это может быть не так тревожно для меню, которое в любом случае находится в верхней части страницы, но это довольно неприятно, когда страница неожиданно перескакивает, когда вы этого не ожидаете, особенно если это касается нижнего колонтитула.

Решение состоит в том, чтобы объединить метод пустого хэша с фрагментом кода, чтобы определить, когда в меню используются пустые хэш-ссылки, и полностью удалить атрибут href из этой ссылки. Элемент a без атрибута href является правильным методом HTML 5 создания ссылки-заполнителя.

/**
 * Remove the href from empty links `<a href="#">` in the nav menus
 * @param string $menu the current menu HTML
 * @return string the modified menu HTML
 */
add_filter( 'wp_nav_menu_items', function ( $menu ) {
    return str_replace( '<a href="#"', '<a', $menu );
} );

Это сработало для меня:

Я активировал Классы CSS в Меню > Параметры экрана > Классы CSS Затем я дал элемент меню, который хотел деактивировать класс ".nolink" , и добавил этот фрагмент кода в свою пользовательскую панель CSS:

.nolink {
   pointer-events: none;
   cursor: default;
}

Используя подход PHP, я добавил этот код в functions.php :

function remove_link_contact_menu($item_output, $item) {
    if ($item->post_name == 'contact')
        return '<span>' . $item->title . '</span>';

    return $item_output;
}
add_filter('walker_nav_menu_start_el', 'remove_link_contact_menu', 20, 2);
add_filter('megamenu_walker_nav_menu_start_el', 'remove_link_contact_menu', 20, 2);

Это заменит ссылку элементом span для меню элемента с именем post_name == "контакт", что я и искал. Вы можете легко изменить это, чтобы проверить заголовок меню или идентификатор, или добавить некоторый код, чтобы проверить, есть ли в нем какие-либо дочерние пункты меню и т.д.

Ценю, что это старая тема, но для быстрого и грязного способа создания ссылки в Wordpress - это сделать URL ссылки следующим образом:

#_

Обратите внимание на подчеркивание после хэштега. Таким образом, если ваше меню прокручивается вниз по странице (т. Е. исправлено), вы не переходите в верхнюю часть страницы при нажатии на нее и не требуете никаких плагинов/скриптов.

Создайте пункт меню "Пользовательские ссылки" и добавьте "javascript:;" (без кавычек) для поля URL. Это лучший способ, чем использовать "#", потому что он не будет прокручивать вашу страницу вверх при нажатии.

Я решил так: в header.php (вашей темы) Я искал:

'link_before'     => '',
'link_after'      => '',

И заменен на:

'link_before'     => '<script>var scriptTag=document.getElementsByTagName("script");scriptTag=scriptTag[scriptTag.length-1];if(scriptTag.parentNode.href)if(scriptTag.parentNode.href.slice(-1)=="#")document.write("<span onclick=\"return false\">")</script>',
'link_after'      => '<script>var scriptTag=document.getElementsByTagName("script");scriptTag=scriptTag[scriptTag.length-1];if(scriptTag.parentNode.href)if(scriptTag.parentNode.href.slice(-1)=="#")document.write("</span>")</script>',

Простыми словами, этот скрипт проверяет, заканчивается ли его родительская ссылка на "#", в этом случае он добавляет элемент span вокруг содержимого тега A, который отключает щелчок.

Надеюсь, это поможет:-)

Как и другие здесь, вы можете создать пользовательский пункт меню ссылок с # в качестве URL-адреса. Затем удалите #, как только он будет добавлен в меню. И, наконец, вы можете использовать это простое регулярное выражение, чтобы удалить фактический тег из этих ссылок.

preg_replace('/<a>([^<]+)<\/a>/i', '<span class="no-link">$1</span>', $navHTML);

Это приведет к удалению щелчка (и отмене стилизации элемента). Таким образом, вам не нужно использовать пользовательские ссылки # в вашем меню.

add_action( 'wp_footer', function(){
    ?>
    <script>
    (function( $ ) {
        var itemm = $('#main-menu .menu-item-has-children > a');
        itemm.click(function(){
            document.activeElement && document.activeElement.blur();
            return false;
        });
    })(jQuery);
    </script>
<?php
 }, 1, 0 );

Я понимаю, что опаздываю в игре, но вот два метода, которые я использую:

1) Сделайте родительский пункт меню дубликатом первого подпункта и измените его метку. Например, если первым пунктом в разделе "Продукты" является "Продукт 1", используйте "Продукт 1" в качестве родительского пункта меню, а затем измените его метку на "Продукты". Таким образом, и "Продукты", и "Продукт 1" приведут к странице Продукт 1.

2) Добавьте перенаправление, чтобы страница Продуктов была перенаправлена на Продукт 1. Польза от этого опция заключается в том, что она позволяет создать пустую страницу продуктов для создания иерархического списка на страницах, но если кто-либо попытается перейти на пустую страницу продуктов, он будет перенаправлен.

Перейдите в раздел Внешний вид, затем нажмите меню. В этом разделе перейдите в раздел Структура меню и нажмите на стрелку вниз, чтобы развернуть страницу, и вы увидите окно с надписью отключить ссылку. Установите этот флажок и сохраните.

1. Установите пользовательскую ссылку на #, которая ничего не вернет элементу списка

2. Добавьте этот фильтр:

   add_filter( 'wp_nav_menu_items', 'wpse_remove_empty_links' );
   
   function wpse_remove_empty_links( $menu ) {
   
       return preg_replace("/<a href=\"#\">(.+?)<\/a>/is", "<span>$1</span>", $menu);
   
   }
   

3. Отредактируйте CSS span, чтобы получить тот же стиль, что и <a>, не забывайте cursor: context-menu;.

Начиная с 1/2019, решение, которое создает правильный HTML5, заключается в следующем.

1. Добавьте пользовательскую ссылку с URL-адресом # и любым именем, которое вы хотите. Оба поля обязательны для заполнения.
2. Отредактируйте только что добавленную пользовательскую ссылку, чтобы URL-адрес был пустым.
3. Сохраните изменения.

Это приведет к созданию навигации верхнего уровня, которая является <a>Menu</a>, что является правильным способом представления ссылки, на которую нельзя щелкнуть.

Создайте пользовательское меню ссылок, как указано выше. Просмотрите исходный код и найдите ссылку href подменю, например: #mm-1. Вставьте это в URL-адрес пользовательской ссылки и сохраните меню. Это заставит мобильную версию работать так же хорошо, когда вы нажмете на текст меню.

Моя версия выглядит так:

Сначала в меню в панели администратора в нужной ссылке в поле href ставим # или оставляем его пустым, а затем в function.php добавляются темы:

function replace_empty_menu_links( $item_output, $item, $depth, $args ) {
  if ( $item->url == '#' || $item->url == '' ) {
    $item_output = sprintf( '%1$s<' . 'div' . '%2$s>%3$s%4$s%5$s</' . 'div' . '>%6$s',
      $args->before,
      $attributes,
      $args->link_before,
      apply_filters( 'the_title', $item->title, $item->ID ),
      $args->link_after,
      $args->after
    );
  }
  return $item_output;
}
add_filter( 'walker_nav_menu_start_el', 'replace_empty_menu_links', 10, 4 );

Вы можете заменить 'div' любым подходящим вам элементом.

Это работает для версии 5.3.2 (протестировано в этой версии, но должно работать и в других).

В этой форме работа всех аргументов 'before', 'after', 'link_before', 'link_after', и т.д. из wp_nav_menu() является сохранено.

Кроме того, это работает и для подменю.

Гораздо более простое решение можно найти по другому вопросу:

Меню администратора - Выделите меню верхнего уровня на странице подменю (без отображения подменю)

Ищите ответ Аскелона. Работает отлично, без необходимости выполнять какие-либо preg_replaces или jquery.

Вы можете отключить события в теге <a> для всех пунктов меню первого уровня, используя чистый css. .main-menu класс может иметь другое имя в соответствии с вашим названием меню.

/* disable parent menu items */
ul.main-menu > li > a {
    pointer-events: none;
}