Question

我正在尝试为我的WordPress菜单创建自定义标记，当我在WordPress中添加菜单时，显示的HTML如下：

<div class="menu-menu-container">
    <ul id="menu-menu" class="menu">
        <li id="menu-item-13" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-13">
            <a href="#">Home</a>
        </li>
        <li id="menu-item-14" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14">
            <a href="#">Another Sample</a>
        </li>
        <li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-15">
            <a href="#">Sample Page</a>
            <ul class="sub-menu">
                <li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-22">
                    <a href="#">Hello world!</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

我正在尝试更改代码，以便使用anchor和div标签而不是ul和li显示它。这适用于Bulma框架。

普通链接代码：

<a class="navbar-item" href="#">Home</a>

下拉链接代码：

<div class="navbar-item has-dropdown is-hoverable">
    <a class="navbar-link" href="#">Sample Page</a>
    <div class="navbar-dropdown">
        <a class="navbar-item" href="#">Sample Link</a>
    </div>
</div>

我尝试这样做的另一个原因是删除WordPress自动添加的所有不必要的class和id属性。

使用Walker可以使用WordPress吗？

Answer 1

是的，你可以使用

https://github.com/wp-bootstrap/wp-bootstrap-navwalker（最常见）

您也可以查看

1）https://github.com/wp-bootstrap/wp-bootstrap-navlist-walker
2）https://github.com/jprieton/wp-bootstrap4-navwalker
3）https://github.com/dupkey/bs4navwalker

Wordpress导航Walker更改ul，li为div和锚标签

1 个答案: