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

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

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

I have a few ideas:

1. Set the custom link to # which won't return anything
2. Add a custom class to the items and then use jQuery to remove the links.
3. Use a PHP equivalent to the jQuery method
4. Use the Disable Parent Menu Link plugin (or take it apart and write your own)

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

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

The easiest way to do it without a plugin or anything is to use the "Menus" function of WordPress. Here are the instructions for WordPress 4.8:

1. From your WordPress dashboard, go to "Appearance -> Menus"
2. In the "Edit Menus" tab, select "Custom Links"
3. For the URL, Enter "#" (no quotes)
4. For the link text, enter your desired text for the top level of your drop-down menu
5. Click the "Add to Menu" button
6. Drag the menu item to its desired position within your menu
7. For the menu item you just added, click the down arrow to the right of the item (it will read "custom link" to the left of the item)
8. Remove the "#" from the URL. This - in all browsers - will convert the link to plain text.
9. Click on the "Save Menu" button

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

The simplest method I came up with was to create a Custom Link item with the Link URL value of #. This is sending the user to an empty hash on the same page, so basically links nowhere.

However, there are some side-effects of using empty hashes for placeholder links. The link will still appear and behave like a link, so it could confuse a user when they are clicking on what appears to be a link but nothing happens. The other effect is that clicking on an empty hash link will override any existing hash, sending the user to the top of the page. This might not be so worrying for a menu which is at the top of the page anyway, but it is quite jarring when the page unexpectedly jumps when you are not expecting it, especially if this is for a footer menu.

The solution is to combine the empty hash method with a piece of code to detect when empty hash links are used in the menu and to remove the href attribute from that link entirely. An a element without a href attribute is the correct HTML 5 method of creating an placeholder link.

/**
 * 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;
}
 

This worked for me:

I activated CSS Classes in Menus > Screen Options > CSS Classes Then I gave the menu element that I wanted to deactivate the class ".nolink" and added this piece of code to my custom CSS panel:

.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);
 

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

Using the PHP approach I added this code to 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);

This will replace the link with a span element for the item menu with the post_name == "contact", which is what I was looking for. You can easily change that to check for the menu title or the ID, or add some code to check if it has any child menu items etc.

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

< sizes#_

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

Appreciate this is an old thread, but for a quick and dirty way of having a link in Wordpress is by making the link URL as:

#_

Notice the underscore after the hashtag. This way if your menu scrolls down the page (ie. fixed), you don't get a jump to the top of the page when clicking on it and doesn't require any plugins/script.

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

Create "Custom Links" menu item and add "javascript:;" (without quotes) for the URL field. This is better way than using "#" because it won't scroll your page to the top when clicked.

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

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

I solved this way: in header.php (of your theme) I searched for:

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

and replaced with:

'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>',

In simple words, this script checks if its parent link ends with "#", in this case it adds a span element around the content of the A tag, that disables the click.

Hope it helps :-)

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

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

As others here have suggested you can create a custom link menu item with the # as its url. Then erase the # once it is added to the menu. And finally, you can use this simple regex to strip the actual tag from those links.

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 );
 

This will remove the click (and unstyle the item). This way, you dont have to use the custom # links in your menu.

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

I realize I'm late in the game, but these are the two methods I use:

1) Make the parent menu item a duplicate of the first sub-item, and change its label. For example, if the first item under "Products" is "Product 1", use "Product 1" as the parent menu item, then change its label to "Products". That way, both "Products" and "Product 1" will lead to the page Product 1.

2) Add a redirect so that the Products page is redirected to Product 1. The benefit of this option is that it allows you to create a blank Products page to create a hierarchical listing in Pages, but if anyone tries to go to the blank Products page, they will be redirected.

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

Go to Appearance, then click on menus. In this section go under menu structure and click on the arrow down to expand the page and you'll see a box that says disable link. Check that box and save.

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. Set the custom link to # which won't return anything List item

2. Add this filter:

   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. Edit span CSS to get same style as <a>, don't forget cursor: context-menu;.

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

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

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

Writing from 1/2019, the solution that produces proper HTML5 is to do the following.

1. Add a Custom Link with the URL set to #, and whatever name you'd like. Both fields are required.
2. Edit the newly added Custom Link so that the URL is empty.
3. Save the changes.

This will produce a top level nav that is <a>Menu</a> which is the correct way to represent a non-clickable link.

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

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

You may disable the events on the <a> tag for all first level menu items using pure css. .main-menu class may have another name according to your menu naming.

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

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

Create a custom link menu as other as said. View the source code and look for the href of the submenu, for example: #mm-1. Paste this into the URL of the custom link and save the menu. This will make the mobile version work as well when you tap the menu text.

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

сначала в меню на панели администратора в нужной ссылке в поле 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() сохраняется.

Также это работает и для подменю.

My version looks like this:

first, in the menu in the admin panel in the desired link in the href field put # or leave it empty, and then in function.php themes are added:

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 );

You can replace 'div' with any element that suits you.

This works for version 5.3.2 (tested in this version, but should work in others too).

In this form, the work of all arguments 'before', 'after', 'link_before', 'link_after', etc. from wp_nav_menu() is preserved.

Also, this works for sub-menus too.

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

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

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

Much easier solution can be found on another question:

Admin Menu - Highlight top-level menu when on a sub-menu page (without showing sub-menu)

Look for Askelon's answer. Work's perfectly, without needing to do any preg_replaces or jquery.