去掉 WordPress 菜单项链接

知更鸟 WordPress评论220阅读模式

如果仅想让顶级菜单作为文字提示,不想有超链接,可以利用WordPress 自定义链接,轻松实现。

文章源自知更鸟-https://zmingcx.com/remove-wordpress-top-menu-item-links.html

去掉 WordPress 菜单项链接

去掉 WordPress 菜单项链接

文章源自知更鸟-https://zmingcx.com/remove-wordpress-top-menu-item-links.html

在 WordPress 自定义链接 URL中输入#号及链接文字,添加到菜单后,删除这个#号,这样A标签就没有href链接目标了。文章源自知更鸟-https://zmingcx.com/remove-wordpress-top-menu-item-links.html

或者在当前主题函数模板functions.php中添加:文章源自知更鸟-https://zmingcx.com/remove-wordpress-top-menu-item-links.html

add_filter( 'wp_nav_menu_items', function ( $menu ) {
	return str_replace( '<a href="#"', '<a', $menu );
} );

将去掉菜单中所有添加自定义链接目标为#号的超链接。文章源自知更鸟-https://zmingcx.com/remove-wordpress-top-menu-item-links.html

CSS类添加:unclickable文章源自知更鸟-https://zmingcx.com/remove-wordpress-top-menu-item-links.html

添加样式,改变鼠标形态。文章源自知更鸟-https://zmingcx.com/remove-wordpress-top-menu-item-links.html

.unclickable > a:hover {
	cursor: default;
}

唯一的缺点,当鼠标悬停是还是会用有链接的样式。文章源自知更鸟-https://zmingcx.com/remove-wordpress-top-menu-item-links.html

如果想彻底让其不显示A标签,可以将上面的代码修改一下,同样添加到当前主题函数模板functions.php中:文章源自知更鸟-https://zmingcx.com/remove-wordpress-top-menu-item-links.html

add_filter( 'wp_nav_menu_items', function ( $menu ) {
	return preg_replace( "/<a href=\"#\">(.+?)<\/a>/is", "<span class='mymenu'>$1</span>", $menu );
} );

之后,菜单中所有添加自定义链接目标为#号的菜单项,将被替换为<span class='mymenu'>文字</span>,并可以为这个"unclickable"类定义样式。文章源自知更鸟-https://zmingcx.com/remove-wordpress-top-menu-item-links.html

.mymenu:hover {
	cursor: default;
}
文章源自知更鸟-https://zmingcx.com/remove-wordpress-top-menu-item-links.html文章源自知更鸟-https://zmingcx.com/remove-wordpress-top-menu-item-links.html
weinxin
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定