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

Я строю горизонтальное меню, и некоторые записи в этом меню будут иметь выпадающие меню (подменю), а некоторые - нет. Те, которые имеют подменю, на самом деле не являются страницами. Они просто предназначены для руководства по выпадающим спискам.

Например, скажем, горизонтальное меню выглядит следующим образом:

Главная | О нас | Продукты | Направления | контакт

А пункт «products» li должен иметь 3 страницы, связанные в вертикальном выпадающем списке под ним, так что сами «products» на самом деле не представляют страницу, как я могу это сделать в WP?

(Я использую WP в качестве CMS со статическими домашними и внутренними страницами. Я создаю свои собственные шаблоны, стилизую меню в CSS, затем регистрирую меню в functions.php и вызываю их в шаблонах.) В WP вы добавляете записи в меню через список страниц или по пользовательским ссылкам. Но я не хочу, чтобы «продукты» были связаны. Если я не добавлю ссылку на пользовательскую ссылку, она не позволит мне добавить ее в меню.

Это выполнимо через меню администратора или мне нужно подойти к этому как-то иначе?

Спасибо за любую помощь!

У меня есть несколько идей:

1. Установить пользовательскую ссылку, по #которой ничего не вернется
2. Добавьте пользовательский класс к элементам, а затем используйте jQuery для удаления ссылок.
3. Используйте PHP эквивалентный методу jQuery
4. Используйте плагин Disable Parent Menu Link (или разберите его и напишите свой собственный)

Самый простой способ сделать это без плагина или чего-либо еще - это использовать функцию «Меню» в 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 == "contact", что я и искал. Вы можете легко изменить это, чтобы проверить заголовок меню или идентификатор, или добавить некоторый код, чтобы проверить, есть ли у него какие-либо дочерние элементы меню и т. Д.

Я решил так: в 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 );

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

#_

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

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

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

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

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

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

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

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

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

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

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

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