使用自定义类沃克在WordPress

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的，该<li>本身不能被修改的class-walker-nav-menu.php意见，线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); 

Answer 2

还有另一个更简单的溶剂。我遇到了与Wordpress和CSS中右对齐的引导菜单相同的问题。

我所做的是通过设定“回声”假捕捉wp_nav_menu输出：

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

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

explode($delimiter, $output); 

将字符串拆分为令牌，反转它们等等。确保你重新添加分隔符，或者如果沿着这条路径使用正则表达式。

有关wp_nav_menu详见： wp_nav_menu documentation

'回声' （布尔）是否呼应菜单或返回。默认为true。