如何创建自定义导航栏(WordPress)

Question

我需要创建一个自定义导航栏来替换WordPress站点上的现有导航条。我有不错的CSS，但从来没有遇到这样的事情。

我已经找到了多种方法来删除现有的导航栏，所以这不是一个问题，但是添加与svg相关的链接是svg的问题。

导航栏应该类似于这个导航栏

Answer 1

我认为你可以从两个不同的角度来处理这个问题。

1 -你不想/不能使用

您可以通过Wordpress的管理面板创建自定义菜单。

向按钮中添加特定类(通过使用“屏幕选项”面板:位于页面右上角的“屏幕选项”面板激活菜单按钮上的CSS类属性字段)。

那么你需要两门课：

• 第一行链接的一个类(谁/什么/如何)
• 第二行链接的另一个类(联系人)

并调整de规则以显示您想要的链接。

最后，我会显示“云”svg作为整个菜单的背景。

真正的问题是wordpress将以li的形式在ul__中输出所有菜单项，因此您可能应该创建两个不同的菜单(一行一个)，并将两个菜单显示在一个专用容器中。

2 -您希望/可以/更喜欢使用

此选项利用Wordpress‘菜单沃克的优势，创建了一个自定义步行器来扩展它

其思想是，通过自定义这个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/

一旦您的自定义菜单输出是确定的，您只需要自定义生成的HTML通过CSS。

注意：第二种方法可能是一种冒险，如果你对PHP不够满意的话