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

25

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

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

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

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

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

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

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

PVA
источник
1
Вот решение отлично работает, проверьте его wordpress.org/support/topic/no-page-menu-item
Вы можете сделать это с помощью JS. попробуйте эту статью. kvcodes.com/2014/07/…
Квварадха
В поле URL оставьте это поле пустым.
ЭМИ ВАН
Никто не упомянул класс WP_NAV_MENU_WALKER, вы могли бы написать свой собственный ходок, который выплевывает то, что вы хотите.
user3135691

Ответы:

12

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

  1. Установить пользовательскую ссылку, по #которой ничего не вернется
  2. Добавьте пользовательский класс к элементам, а затем используйте jQuery для удаления ссылок.
  3. Используйте PHP эквивалентный методу jQuery
  4. Используйте плагин Disable Parent Menu Link (или разберите его и напишите свой собственный)
Брук.
источник
Спасибо за советы и ссылки! Как предположил Гэвин, использование # для пользовательской ссылки «работает»; другие варианты могут работать лучше, но не так просто. Что ж, плагин, вероятно, прост, но я ненавижу использовать плагины, если я могу выполнить то же самое более непосредственно. Я должен выбрать лучший подход. Еще раз спасибо!
ПВА
Если вы планируете использовать его в тактильных устройствах, будьте осторожны с использованием пустых, href=""поскольку большинство пользователей тактильных устройств не смогут увидеть раскрывающееся меню без использования JS
Simon
Ссылки ломаются. Возможно, вы захотите проработать несколько этих идей в своем ответе
Shea
Кроме того, № 2 и № 3 относятся wp_list_pages(), а неwp_nav_menu()
Shea
25

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

  1. На панели инструментов WordPress перейдите в «Внешний вид -> Меню»
  2. На вкладке «Редактировать меню» выберите «Пользовательские ссылки»
  3. Для URL введите «#» (без кавычек)
  4. В качестве текста ссылки введите нужный текст для верхнего уровня раскрывающегося меню.
  5. Нажмите кнопку «Добавить в меню»
  6. Перетащите пункт меню в нужное место в вашем меню
  7. Для элемента меню, который вы только что добавили, нажмите стрелку вниз справа от элемента (он будет читать «пользовательскую ссылку» слева от элемента)
  8. Удалите «#» из URL. Это - во всех браузерах - преобразует ссылку в обычный текст.
  9. Нажмите на кнопку «Сохранить меню»
GavinR
источник
Спасибо за этот совет. Это правда, хотя и не идеально, так как ярлыки по-прежнему выглядят как «ссылки», когда вы наводите курсор мыши, но они никуда не денутся. Так что это может работать в крайнем случае.
ПВА
1
Вы прочитали весь комментарий? После добавления ссылки щелкните стрелку раскрывающегося списка рядом с именем ссылки и удалите «#» из текстового поля URL. Это во всех браузерах приведет к тому, что ссылка не будет кликабельной.
GavinR
1
Да, спасибо, я прочитал весь комментарий. Я вернулся и попробовал снова и понял свою проблему. Когда я оставляю #, слово появляется в навигационной панели, но как «мертвая ссылка». Когда я удалил #, слово не появилось в навигационной панели, если я не нависал над ним, и оно появлялось в состоянии наведения. Поэтому я предполагаю, что это означает, что я должен применить CSS к слову, чтобы оно появлялось без связи. Я не уверен, почему состояние зависания появляется ...
ПВА,
Это все еще в 4.9.5, однако я не уверен, так как это похоже на хакерское преимущество ошибки. Если нет ... это избавит людей от многих головных болей ... Это похоже на тот факт, что Wordpress считает "1 2 3 4 5 6" надежным паролем ... все же.
Brooklynsweb
К вашему сведению, если вы выполните Шаг 8 (по любой уважительной причине), тогда ваш курсор не будет указателем, когда вы наводите указатель мыши на пользовательскую ссылку. В этом случае вы можете оформить его указателем: курсор.
MarsAndBack
7

Самый простой метод, который я придумал, - создать элемент пользовательской ссылки со значением 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 );
} );
карите
источник
2

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

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

.nolink {
   pointer-events: none;
   cursor: default;
}
RickyBono
источник
Это убивает выпадающий тоже.
user385917
Использование #в качестве цели ссылки, а затем применение собственного CSS-класса для стилизации, на мой взгляд, является наименее хакерским решением. Тем pointer-events: noneне менее, настройка не имеет большого смысла для меня, так как это нарушит подменю. Не могли бы вы пояснить, почему вы устанавливаете этот атрибут?
user1438038
1

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

Сэм Булл
источник
0

Я решил так: в 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, который отключает щелчок.

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

niente0
источник
Привет, я знаю, что это старый ответ, но для дальнейшего использования я бы не стал просто менять заголовочный файл вашей темы, потому что при следующем обновлении весь ваш код будет перезаписан. Лучшее решение для этого - создать дочернюю тему с вашим пользовательским кодом.
Скотт
0

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

preg_replace('/<a>([^<]+)<\/a>/i', '<span class="no-link">$1</span>', $navHTML);
deweydb
источник
0

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

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 );
Дуг Кэссиди
источник
0

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

#_

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

user1249523
источник
0

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

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

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

Барри
источник
0

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

обкрадывать
источник
Эта функциональность не предоставляется ядром. Возможно, тема или плагин добавляет его в ваши настройки?
Дэйв Ромси,
Я видел это и раньше, хотелось бы знать, какой плагин или тема сделали это.
ДавГарсия
0
  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;.

calmohallag
источник
0

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

Таи Реу
источник
0

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

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

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

DavGarcia
источник
0

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

/* disable parent menu items */
ul.main-menu > li > a {
    pointer-events: none;
}
Карл Адлер
источник