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>
元素!
© 版权声明
THE END
暂无评论内容