在链接之前将 div 插入菜单项等

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 课程，但我不知道如何使用。

现在，因为我没有收到任何回复，所以我已经为原始主题的标记找到了 solution（没有 div 和 p）。但问题仍然存在：如何将任意标记插入某个现有菜单（在我的情况下是所选主题的主菜单）。即进入每个菜单项 li，然后进入每个链接 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>';
        }
    }
}

在模板（或标题）中获取菜单的位置添加助行器

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