ACF插件的使用教程:向菜单项添加字段

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

ACF插件现已更名为SCF,在插件市场安装:

图片[1]-如何为 WordPress 菜单项添加自定义字段并修改其 HTML
图片[2]-如何为 WordPress 菜单项添加自定义字段并修改其 HTML

添加字段

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

  1. 在自定义字段管理屏幕中,单击添加新按钮来创建一个新的字段组。
  2. 添加编辑菜单项时想要看到的字段
  3. 在位置下,选择菜单项规则并选择“全部”(在所有菜单项上显示此字段组)或特定菜单/位置(仅为特定菜单项显示此字段组)
图片[3]-如何为 WordPress 菜单项添加自定义字段并修改其 HTML

编辑字段

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

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

图片[4]-如何为 WordPress 菜单项添加自定义字段并修改其 HTML

显示字段

可以通过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>元素!

图片[5]-如何为 WordPress 菜单项添加自定义字段并修改其 HTML

© 版权声明
THE END
喜欢就支持一下吧
点赞13 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容