Question

WordPress导航菜单通常输出为：

<ul>
  <li><a href="location.html">Menu Item 1</a></li>
  <li><a href="location2.html">Menu Item 2</a></li>
  <li><a href="location3.html">Menu Item 3</a></li>
</ul>

通常，您在主题中使用custom walker class来更改这些元素的参数，但是如何更改它们加载的顺序？这是我的目标：

<ul>
  <a href="location.html"><li>Menu Item 1</li></a>
  <a href="location2.html"><li>Menu Item 2</li></a>
  <a href="location3.html"><li>Menu Item 3</li></a>
</ul>

Answer 1

还有另一个更简单的解决方案。我遇到了与Wordpress和引导菜单相同的问题，它在css中具有正确的对齐方式。

我所做的是通过将'echo'设置为false来捕获wp_nav_menu的输出：

$output = wp_nav_menu(array('echo' => false));

一旦你有了输出，可能性是无穷无尽的，例如你可以使用：

explode($delimiter, $output);

将字符串拆分为标记，反转它们等等。确保再次添加分隔符，或者沿着此路径使用正则表达式。

有关wp_nav_menu的详细信息，请参阅： wp_nav_menu documentation

'回响' （bool）是否回显菜单或返回它。默认为真。

Answer 2

经过数小时的研究，我发现自定义助行器课程无法做到这一点。 WordPress在class-walker-nav-menu.php的评论中特别提到<li>本身无法修改，第189-203行：

       /**
         * Filters a menu item's starting output.
         *
         * The menu item's starting output only includes `$args->before`, the opening `<a>`,
         * the menu item's title, the closing `</a>`, and `$args->after`. Currently, there is
         * no filter for modifying the opening and closing `<li>` for a menu item.
         *
         * @since 3.0.0
         *
         * @param string $item_output The menu item's starting HTML output.
         * @param object $item        Menu item data object.
         * @param int    $depth       Depth of menu item. Used for padding.
         * @param array  $args        An array of wp_nav_menu() arguments.
         */
        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );

相反，我必须使用Javascript（显然不理想但可行）。这比它最初出现的要复杂得多。您必须设置一个正则表达式，它将读取您的wp_nav_class输出，然后通过多维数组移动它们。请仔细阅读以下代码：

// 1- Get entire content of sidebar menu ul, then split by row
var listItems = $(".sidebar-nav").html();
var listItemsArray = listItems.match(/(.*<\/li>)/gm);

// 1b- Set up variables
var listItemsTemp = [];
var listItemsRearranged = new Array(listItemsArray.length);
var listItemsRearrangedConcat = new Array(listItemsArray.length);

// 2- Take listItemsArray and loop through it w/ regex
for (var i = 0; i < listItemsArray.length; i++) {

  // 4- Use regex to break each list item into five pieces
  listItemsTemp[i] = listItemsArray[i].match(/((<\w+\b>)|(<a\shref=".*">)|(\w+\b)|(<\/\w+\b)>)/g);

  // 5- Setup listItemsRearranged[i] with an array of listItemsTemp.length
  listItemsRearranged[i] = new Array(listItemsTemp.length);

  // 6- Take listItemsTemp and reassign positions
  // We can do this because our string will always have five pieces
  listItemsRearranged[i][0] = listItemsTemp[i][1];
  listItemsRearranged[i][1] = listItemsTemp[i][0];
  listItemsRearranged[i][2] = listItemsTemp[i][2];
  listItemsRearranged[i][3] = listItemsTemp[i][4];
  listItemsRearranged[i][4] = listItemsTemp[i][3];

  // 7- Join the array back into a string
  listItemsRearrangedConcat[i] = listItemsRearranged[i].join("");
}

// 8- Finally, we rejoin the string and print back into the page
var listItemsFinal = listItemsRearrangedConcat.join("");
$(".sidebar-nav").html(listItemsFinal);

使用WordPress中的自定义walker类反转菜单项和锚标记

2 个答案: