WordPress 菜單是用于組織一組鏈接（菜單項(xiàng)）的強(qiáng)大工具，主題通常使用這些菜單來(lái)創(chuàng)建導(dǎo)航功能。本指南將詳細(xì)演示如何為 WordPress 菜單項(xiàng)添加自定義字段，并修改菜單項(xiàng)的 HTML 輸出。用到的插件是ACF（Advanced Custom Fields）。

ACF插件現(xiàn)已更名為SCF，在插件市場(chǎng)安裝：

添加字段

高級(jí)自定義字段插件可以很容易地向菜單項(xiàng)添加自定義字段，請(qǐng)按照以下步驟操作。

1. 在自定義字段管理屏幕中，單擊添加新按鈕來(lái)創(chuàng)建一個(gè)新的字段組。
2. 添加編輯菜單項(xiàng)時(shí)想要看到的字段
3. 在位置下，選擇菜單項(xiàng)規(guī)則并選擇“全部”（在所有菜單項(xiàng)上顯示此字段組）或特定菜單/位置（僅為特定菜單項(xiàng)顯示此字段組）

編輯字段

一旦創(chuàng)建了字段組并將其指定為出現(xiàn)在菜單項(xiàng)編輯屏幕上，就可以通過(guò)導(dǎo)航到外觀 > 菜單管理頁(yè)面來(lái)編輯字段值。

WP 將每個(gè)菜單項(xiàng)作為帖子對(duì)象存儲(chǔ)在wp_posts表中。ACF 會(huì)將所有自定義字段值存儲(chǔ)在wp_postmeta表中。

顯示字段

可以通過(guò)wp_nav_menu_objects過(guò)濾器輕松自定義 WordPress 菜單項(xiàng)的 HTML 。每次呈現(xiàn)菜單時(shí)都會(huì)運(yùn)行此過(guò)濾器（通過(guò)wp_nav_menu()函數(shù)），并可以修改菜單項(xiàng)對(duì)象。每個(gè)對(duì)象都包含一個(gè)title在每個(gè)菜單鏈接元素中輸出的值<a>。

此示例顯示如何修改所有菜單項(xiàng)對(duì)象，并在新“圖標(biāo)”字段存在值時(shí)附加一個(gè)圖標(biāo)。

add_filter('wp_nav_menu_objects', 'my_wp_nav_menu_objects', 10, 2);

function my_wp_nav_menu_objects( $items, $args ) {
    
    // loop
    foreach( $items as &$item ) {
        
        // vars
        $icon = get_field('icon', $item);
        
        
        // append icon
        if( $icon ) {
            
            $item->title .= ' <i class="fa fa-'.$icon.'"></i>';
            
        }
        
    }
    
    
    // return
    return $items;
    
}

結(jié)論

下面是瀏覽器中的顯示效果。注意新的圖標(biāo)<i>元素！

聯(lián)系我們
教程看不懂？聯(lián)系我們?yōu)槟赓M(fèi)解答！免費(fèi)助力個(gè)人，小企站點(diǎn)！	客服微信
① 電話：020-2206-9892
② QQ咨詢：1025174874
③ 郵件：info@361sale.com
④ 工作時(shí)間：周一至周五，9:30-18:30，節(jié)假日休息