如何使顶层菜单项没有链接，但有链接的子菜单？

我有一些想法:

1. 将自定义链接设置为#,该链接不会返回任何内容
2. 向项目添加自定义类,然后使用jQuery删除链接.
3. 使用与jQuery方法等效的PHP
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. 从网址中删除"#".在所有浏览器中,这会将链接转换为纯文本.
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

我想到的最简单的方法是使用链接URL值#创建一个自定义链接项.这会将用户发送到同一页面上的空哈希,因此基本上没有链接.

但是,使用空哈希作为占位符链接有一些副作用.该链接仍然会出现并且表现得像一个链接,因此当用户单击看起来是链接但什么都没有发生的链接时,它可能会使用户感到困惑.另一个效果是,单击一个空的哈希链接将覆盖任何现有的哈希,从而将用户发送到页面顶部.对于位于页面顶部的菜单而言,这可能并不那么令人担心,但是当页面在您不期望的情况下意外跳动时,尤其是在页脚菜单中时,会感到非常震撼.

解决方案是将空哈希方法与一段代码结合起来,以检测菜单中何时使用了空哈希链接,并从该链接中完全删除href属性.没有href属性的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"将项目菜单的链接替换为span元素,这就是我想要的.您可以轻松地对其进行更改以检查菜单标题或ID,或添加一些代码以检查其是否具有子菜单项等.

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设置为:

#_

在主题标签后注意下划线.这样,如果您的菜单向下滚动(即固定),则单击时不会跳到页面顶部,不需要任何插件/脚本.

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 :;"(不带引号)的网址字段.这比使用"#"更好,因为单击后它不会将页面滚动到顶部.

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

简单地说,该脚本检查其父链接是否以"#"结尾,在这种情况下,它将在A标签内容周围添加一个span元素,从而禁用了点击.

希望它会有所帮助:-)

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以获得与<a>相同的样式,别忘了cursor: context-menu;.

   li>

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.

您可以使用纯css为所有第一级菜单项禁用<a>标记上的事件.根据您的菜单命名,.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-＆gt; url=='#'|| $item-＆gt; url==''){
    $item_output=sprintf('％1 $ s＆lt;'.'div'.'％2 $ s＆gt;％3 $ s％4 $ s％5 $ s＆lt;/'.'div'.'>％6 $ s ',
      $ args-＆gt;之前,
      $属性,
      $ args-＆gt; link_before,
      apply_filters('the_title',$item-＆gt;title,$item-＆gt; ID),
      $ args-＆gt; link_after,
      $ args-＆gt;之后
    );
  }
  返回$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.

在另一个问题上可以找到更容易的解决方案:

管理菜单-在子菜单页面上突出显示顶级菜单(不显示子菜单)

寻找Askelon的答案.工作完美,无需执行任何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.