如何使顶层菜单项没有链接,但有链接的子菜单?


25

我正在构建一个水平菜单,该菜单上的某些条目将具有下拉菜单(子菜单),而有些则不会。具有子菜单的页面实际上不是页面。它们只是作为下拉菜单的指南。

例如,说水平菜单如下:

设为首页 关于我们| 产品展示 方向| 联系

而且“产品” li项旨在在其下方的垂直下拉列表中链接3个页面,因此“产品”本身实际上并不代表页面,如何在WP中做到这一点?

(我将WP用作CMS,并带有静态主页和内部页面。我构建自己的模板,在CSS中设置菜单样式,然后将菜单注册在functions.php中,然后在模板中调用它们。)在WP中,您可以向通过页面列表或自定义链接显示菜单。但我不希望将“产品”链接在一起。如果我没有将链接添加到自定义链接,则不会让我将其添加到菜单。

通过菜单管理可以做到吗,还是我必须通过其他方式解决?

感谢您的任何帮助!


1
继承人的解决方案效果很好,去检查它wordpress.org/support/topic/no-page-menu-item

您可以通过使用js来做到这一点。试试这篇文章。kvcodes.com/2014/07/...
Kvvaradha

在“ URL”框中,将其保留为空白。
艾米·王

没有人提到WP_NAV_MENU_WALKER类,您可以编写自己的助行器,吐出您想要的东西。
user3135691

Answers:


12

我有一些想法:

  1. 将自定义链接设置为#不返回任何内容
  2. 将自定义类添加到项目,然后使用jQuery删除链接。
  3. 使用与jQuery方法等效的PHP
  4. 使用“ 禁用父菜单链接”插件(或拆开并编写自己的插件)

感谢您的提示和链接!正如Gavin建议的那样,对自定义链接使用#表示“有效”;其他选项可能会更好,尽管并非易事。好吧,该插件可能很简单,但是如果我可以更直接地完成相同的事情,我不喜欢使用插件。我必须决定最佳方法。再次感谢!
PVA

如果您打算在触觉设备中使用它,请小心使用空白,href=""因为如果不使用JS,大多数触觉设备用户将无法看到下拉菜单
Simon,

链接断开。你可能会想工作了其中的一些想法变成你的答案
乳木果

此外,#2和#3所指的wp_list_pages()不是,而是wp_nav_menu()
Shea 2015年

25

没有插件或任何东西的最简单方法是使用WordPress的“菜单”功能。以下是WordPress 4.8的说明:

  1. 在WordPress信息中心中,转到“外观->菜单”
  2. 在“编辑菜单”标签中,选择“自定义链接”
  3. 对于URL,输入“#”(不带引号)
  4. 对于链接文本,请在下拉菜单的顶层输入所需的文本
  5. 点击“添加到菜单”按钮
  6. 将菜单项拖动到菜单中的所需位置
  7. 对于您刚刚添加的菜单项,请单击该项右侧的向下箭头(它将在该项左侧显示为“自定义链接”)
  8. 从网址中删除“#”。在所有浏览器中,这会将链接转换为纯文本。
  9. 点击“保存菜单”按钮

谢谢你的提示。这是ez,尽管不是完美的,因为当您将鼠标悬停在“标签”上时,“标签”仍然看起来像“链接”,但它们不会随处可见。因此它可以在紧要关头工作。
PVA

1
您阅读了全部评论吗?添加链接后,单击链接名称旁边的下拉箭头,然后从URL文本框中删除“#”。在所有浏览器中,这将导致链接不可单击。
GavinR 2011年

1
是的,谢谢,我确实阅读了整个评论。我回过头来再试一次,意识到了我的问题。当我离开#号时,该单词会出现在导航栏中,但会显示为“无效链接”。当我删除#号时,除非将鼠标悬停在导航栏上,否则该词不会出现在导航栏中,而是会以悬停状态显示。因此,我认为这意味着我必须将CSS应用于该单词,以便它看起来没有链接。我不确定为什么会显示悬停状态...
PVA

它仍然在4.9.5中,但是我不确定,因为它“感觉”起来像是漏洞的hacking优势。如果不是,那将为人们省去很多麻烦……这有点像Wordpress认为“ 1 2 3 4 5 6”是一个强密码...这一事实。
brooklynsweb

仅供参考,如果您执行第8步(出于某种充分的理由),那么当您将鼠标悬停在自定义链接上时,光标将不会成为指针。在这种情况下,可以使用pointer:cursor设置样式。
MarsAndBack

7

我想到的最简单的方法是创建一个“链接”值为“ #。这会将用户发送到同一页面上的空哈希,因此基本上没有链接。

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

解决方案是将空哈希方法与一段代码结合起来,以检测菜单中何时使用了空哈希链接,并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;
}

这也杀死了下拉菜单。
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);

这将用post_name ==“ contact”用项目菜单的span元素替换链接,这就是我想要的。您可以轻松地对其进行更改以检查菜单标题或ID,或者添加一些代码以检查其是否具有任何子菜单项等。


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

简而言之,该脚本检查其父链接是否以“#”结尾,在这种情况下,它将在A标记的内容周围添加一个span元素,从而禁用了单击。

希望能帮助到你 :-)


嗨,我知道这是一个旧答案,但是为了将来参考,我不会只是进入并更改主题头文件,因为在下一次更新时,所有代码都将被覆盖。最好的解决方案是使用您的自定义代码创建一个子主题。
斯科特(Scott)

0

正如这里的其他建议一样,您可以使用#作为其URL创建自定义链接菜单项。一旦将其添加到菜单中,然后将其删除。最后,您可以使用此简单的正则表达式从这些链接中删除实际的标签。

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

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

#_

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


0

我意识到我已经很晚了,但是这是我使用的两种方法:

1)使父菜单项成为第一个子项的副本,并更改​​其标签。例如,如果“产品”下的第一项是“产品1”,则将“产品1”用作父菜单项,然后将其标签更改为“产品”。这样,“产品”和“产品1”都将进入产品1页面。

2)添加重定向,以便将“产品”页面重定向到产品1。此选项的好处是,它允许您创建空白的“产品”页面以在“页面”中创建层次结构列表,但是如果有人尝试转到空白的“产品”页面,它们将被重定向。


0

转到外观,然后单击菜单。在本节中,进入菜单结构,然后单击向下箭头以扩展页面,您将看到一个框,其中显示禁用链接。选中该框并保存。


核心未提供此功能。也许主题或插件正在将其添加到您的设置中?
戴夫·罗姆西

我也曾经看过这个,希望我知道是哪个插件或主题完成的。
DavGarcia

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;


0

创建“自定义链接”菜单项并添加“ javascript :;” (不带引号)的网址字段。这比使用“#”更好,因为单击后它不会将页面滚动到顶部。


0

从1/2019开始,产生正确的HTML5的解决方案是执行以下操作。

  1. 添加URL设置为#以及所需名称的自定义链接。这两个字段都是必需的。
  2. 编辑新添加的“自定义链接”,以使URL为空。
  3. 保存更改。

这将产生一个顶级导航,<a>Menu</a>这是表示不可点击链接的正确方法。


0

您可以<a>使用纯css 禁用所有一级菜单项标签上的事件。.main-menu根据您的菜单命名,该类可能有另一个名称。

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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.