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

问题描述

我已经在 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。

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

因此，我想在 <div> 之前将 <li> 添加到 <a> 中，并在 <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 为更详细的工作提供了功能。

解决方法

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

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()
]);