我需要创建一个自定义导航栏来替换 WordPress 网站上的现有导航栏。我的 CSS 很不错，但从来没有遇到过这样的事情。
我找到了多种方法来删除现有的导航栏，所以这不是问题，但是添加带有相对于 svg 的链接的 svg 是问题。
导航栏应该看起来像这样 navigation bar
最佳答案
我认为您可以从两个不同的 Angular 来解决这个问题。
1 - 你不想/不能使用 PHP
您可以通过 Wordpress 的管理面板创建自定义菜单。
将特定类添加到按钮(通过使用“屏幕选项”面板激活菜单按钮上的 CSS 类属性字段:在页面的右上角)。
那么你需要 2 个类:
- 第一行链接的一个类(who/what/how)
- 第二行链接的另一个类(联系人)
并调整 de CSS 规则以根据需要显示链接。
最后，我会将“云”svg 显示为整个菜单的背景。
真正的问题是 wordpress 会将所有菜单项输出为 ul 中的 li，因此也许您应该创建 2 个不同的菜单(每行一个) ，并在专用容器中显示这两个菜单。
2 - 你想要/可以/更喜欢使用 PHP
此替代方案利用了 Wordpress 的 Menu Walker通过创建一个自定义的 walker 来扩展它
想法是，通过自定义此 PHP 类，您可以通过定义 HTML 输出来指定您希望 wordpress 如何呈现菜单。
这里有一些链接可以帮助您做到这一点:
https://gist.github.com/kosinix/5544535
https://code.tutsplus.com/tutorials/understanding-the-walker-class--wp-25401
http://jamescollings.co.uk/blog/wordpress-custom-walker-output-section-of-menu/
一旦自定义菜单输出正常，您只需通过 CSS 自定义生成的 HTML。
注意:如果您对 PHP 不够熟悉，则第二种方法可能是一种冒险
关于css - 如何创建自定义导航栏 (WordPress)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41296551/