創建WordPress菜單的自定義HTML結構

我讀過很多文章和WordPress Codex頁面，但仍然無法理解它。我想用很簡單的HTML結構創建菜單，就像這樣：創建WordPress菜單的自定義HTML結構

<nav class="nav"> 
    <ul class="list"> 
     <li class="item"><a class="link--active" href="#">Link 1</a></li> 
     <li class="item"><a class="link" href="#">Link 2</a></li> 
     <li class="item"><a class="link" href="#">Link 3</a></li> 
    </ul> 
</nav>

最重要的事情對我來說是我的自定義類分配給每個元素的能力。我看到很複雜的例子，使用WP 沃克類，並試圖簡化它們，但它沒有奏效。我相信對於熟悉WordPress的人來說這很容易，所以請幫助我。

P.S. 對不起，我的英語不是我的母語。

來源

2015-08-23 sajran

wp有一個標準的walker，它輸出與上面相同但不同的類並使用div代替nav。 – David

我寫過類對我來說最重要。使用nav而不是div也不錯，但它不是很重要。 – sajran

您需要使用wp_nav_menu函數。

要輸出您上面列出的HTML，你需要將它傳遞了以下內容：

<?php wp_nav_menu(array(
    'menu' => 'Your Name for Menu', 
    'container' => 'nav', 
    'container_class' => 'nav', 
    'menu_class' => 'list' 
)); ?>

至於列表項和鏈路類，你可能想看看在默認的WordPress的投入在自己去看看那些會滿足你的需求。

，作爲添加活動類的鏈接，請嘗試以下代碼：

add_filter('nav_menu_css_class', 'add_active_class', 10, 2); 

function add_active_class($classes, $item) { 

    if(in_array('current-menu-item', $classes) || 
    in_array('current-menu-ancestor', $classes) || 
    in_array('current-menu-parent', $classes) || 
    in_array('current_page_parent', $classes) || 
    in_array('current_page_ancestor', $classes) 
) { 
    $classes[] = "active"; 
    } 
    return $classes; 
}

請注意，這不是我的代碼，而是一個片段，我從https://wordpress.stackexchange.com/questions/112955/add-class-to-active-element-and-its-parent-in-nav-menu救我尋找時，書籤同樣的事情，而不必使用JavaScript。

來源

2015-08-24 01:59:00 Cedon

我沒有在我的問題中提到它，但我使用了BEM，因此類非常重要。由於我也使用SASS，我認爲我只會'擴展'WordPress類。它不會像我想要的那樣好，但它是某種東西。謝謝。 – sajran

創建WordPress菜單的自定義HTML結構

回答

相關問題