Як зробити так, щоб пункт меню верхнього рівня не мав посилання, але мав підменю, яке пов’язане?

Я будую горизонтальне меню, і деякі записи в цьому меню матимуть спадні меню (підменю), а деякі не. Ті, у яких є підменю, насправді не є сторінками. Вони просто призначені для того, щоб бути дороговказами для випадаючих.

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

Головна | Про нас | Продукція | Напрямки | Контактна інформація

А в елементі "товари" мається на увазі 3 сторінки, пов'язані у вертикальному спадному списку під ним, тому "продукти" самі по собі насправді не представляють собою сторінку, як це зробити в WP?

(Я використовую WP як CMS, зі статичною домашньою та внутрішньою сторінками. Створюю власні шаблони, стилюю меню у CSS, потім реєструю меню у function.php та називаю їх у шаблонах.) У WP ви додаєте записи до меню через список сторінок або за користувацькими посиланнями. Але я не хочу, щоб "продукти" пов'язувались. Якщо я не додаю посилання на спеціальне посилання, воно не дозволить мені додати його до меню.

Це можна зробити через адміністратора меню чи я повинен підходити до нього іншим способом?

Дякую за будь-яку допомогу!

У мене є кілька ідей:

1. Встановіть спеціальне посилання, до #якого нічого не повернеться
2. Додайте спеціальний клас до елементів, а потім використовуйте jQuery для видалення посилань.
3. Використовуйте PHP, еквівалентний методу jQuery
4. Скористайтеся плагіном " Відключити батьківське меню" (або розберіть його та напишіть своє)

Найпростіший спосіб зробити це без плагіна або чогось іншого - скористатися функцією «Меню» 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, я додав цей код до function.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>',

Простими словами, цей скрипт перевіряє, чи закінчується його батьківське посилання на "#", в цьому випадку він додає прольотний елемент навколо вмісту тегу 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. Відредагуйте інтервал 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;
}

Набагато простіше рішення можна знайти з іншого питання:

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

Шукайте відповідь Аскелона. Робота ідеально, без необхідності робити якісь попередні_заміни або jquery.