将 div 插入 link 之前的菜单项等等

Question

我已经在 https://wordpress.stackexchange.com/ 上问过这个问题，但没有人回复。有类似的问题，但我认为它们是为主题开发人员准备的，而不是为那些只是使用某个主题并想扩展其功能的人准备的。

我使用特定主题在 Wordpress 中制作网页。现在，这个主题有一个预期的菜单标记：

<ul id=”primary-navigation-main”>
    <li>
        <a href=”https://example.com/page1”>Page 1</a>
    </li>
    <li>
        <a href=”https://example.com/page1”>Page 2</a>
    </li>
    <li>
        <a href=”https://example.com/page1”>Page 3</a>
    </li>
</ul>

在移动菜单上，愿望略有不同。在公司中，他们希望在按下菜单项时进行一些转换。我在另一个（硬编码）菜单中解决了这样的问题：

<ul id=”primary-navigation-main”>
    <li>
        <div class=”transition-div”></div>
        <a href=”https://example.com/page1”>
            <p>Page 1</p>
        </a>
    </li>
    <li>
        <div class=”transition-div”></div>
        <a href=”https://example.com/page1”>
            <p>Page 2</p>
        </a>
    </li>
    <li>
        <div class=”transition-div”></div>
        <a href=”https://example.com/page1”>
            <p>Page 3</p>
        </a>
    </li>
</ul>

或在此 jsfiddle.

中点赞

我不知道这是否是此过渡的最佳解决方案，但它有效。

所以，我想在 <a> 之前将 <div> 添加到 <li> 中，在 <a> 中我想添加 <p>。我在摆弄 with wp_nav_menu 和 wp_nav_menu_items 但我没有成功。我需要注册 <ul> 还是其他什么？另外，我似乎必须使用 Walker class，但我不知道如何使用。

现在，因为我没有得到任何回应，所以我已经为原始主题的标记找到了 solution（没有 div 和 p）。但问题仍然存在：如何将任意标记插入某个现有菜单（在我的例子中是所选主题的主菜单）。即进入每个菜单项 li，然后进入每个 link a，保留菜单的 URL。

任何人都可以帮助我或者只是告诉我这是不可能的吗？我已经可以使用 wp_nav_menu_items 将项目插入菜单。因此，我认为 wp_nav_menu 提供了一些更详细的工作的功能。

Answer 1

在您的函数文件中添加以下代码

class AWP_Menu_Walker extends Walker_Nav_Menu {
    function start_el(&$output, $item, $depth=0, $args=[], $id=0) {
        $output .= "<li class='" .  implode(" ", $item->classes) . "'>";
 
        $output .= '<div class="transition-div"></div>'; //Put your content here
        
        if ($item->url && $item->url != '#') {
            $output .= '<a href="' . $item->url . '">';
        } else {
            $output .= '<span>';
        }
 
        $output .= $item->title;
 
        if ($item->url && $item->url != '#') {
            $output .= '</a>';
        } else {
            $output .= '</span>';
        }
 
        if ($args->walker->has_children) {
            $output .= '<i class="caret fa fa-angle-down"></i>';
        }
    }
}

在模板（或页眉）中获取菜单的位置添加 walker

wp_nav_menu([
    ...
    ...
    'walker' => new AWP_Menu_Walker()
]);

将 div 插入 link 之前的菜单项等等

Insert div into a menu item before the link and more

wordpress

menu

menuitem

wp-nav-walker