在链接之前将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课程，但我不知道如何使用。

现在，由于我没有得到任何响应，我已经为原始主题的标记找到了解决方案(没有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>';
}
}
}

在模板(或标题(中获得菜单的位置添加walker

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