如何为 WordPress 菜单项添加自定义字段并修改其 HTML

WordPress 菜单是用于组织一组链接（菜单项）的强大工具，主题通常使用这些菜单来创建导航功能。本指南将详细演示如何为 WordPress 菜单项添加自定义字段，并修改菜单项的 HTML 输出。用到的插件是ACF（Advanced Custom Fields）。

ACF插件现已更名为SCF，在插件市场安装：

添加字段

高级自定义字段插件可以很容易地向菜单项添加自定义字段，请按照以下步骤操作。

在自定义字段管理屏幕中，单击添加新按钮来创建一个新的字段组。
添加编辑菜单项时想要看到的字段
在位置下，选择菜单项规则并选择“全部”（在所有菜单项上显示此字段组）或特定菜单/位置（仅为特定菜单项显示此字段组）

编辑字段

一旦创建了字段组并将其指定为出现在菜单项编辑屏幕上，就可以通过导航到外观 > 菜单管理页面来编辑字段值。

WP 将每个菜单项作为帖子对象存储在wp_posts表中。ACF 会将所有自定义字段值存储在wp_postmeta表中。

显示字段

可以通过wp_nav_menu_objects过滤器轻松自定义 WordPress 菜单项的 HTML 。每次呈现菜单时都会运行此过滤器（通过wp_nav_menu()函数），并可以修改菜单项对象。每个对象都包含一个title在每个菜单链接元素中输出的值<a>。

此示例显示如何修改所有菜单项对象，并在新“图标”字段存在值时附加一个图标。

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;
    
}

结论

下面是浏览器中的显示效果。注意新的图标<i>元素！

联系我们
教程看不懂？联系我们为您免费解答！免费助力个人，小企站点！	客服微信
① 电话：020-2206-9892
② QQ咨询：1025174874
③ 邮件：info@361sale.com
④ 工作时间：周一至周五，9:30-18:30，节假日休息