使用自定義類沃克在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。