在 WordPress 后台,自定义顶部工具栏(也称为 Admin Bar)是一种常见的需求,尤其是当你希望为网站的管理员或用户添加快捷操作时。
1. 向工具栏添加自定义菜单项
要向工具栏添加自定义菜单项,你可以使用 admin_bar_menu
钩子。
function my_custom_admin_bar_menu($wp_admin_bar) {
// 添加一个顶级菜单
$wp_admin_bar->add_node(array(
‘id’ => ‘my_custom_node’, // 节点 ID
‘title’ => ‘My Custom Menu’, // 显示的标题
‘href’ => ‘#’, // 链接地址
));
// 添加子菜单
$wp_admin_bar->add_node(array(
‘id’ => ‘my_custom_submenu’,
‘parent’ => ‘my_custom_node’, // 父菜单的ID
‘title’ => ‘Sub Menu Item’, // 子菜单项的标题
‘href’ => ‘#’, // 子菜单链接
));
}
add_action(‘admin_bar_menu’, ‘my_custom_admin_bar_menu’, 100);
代码解释:
admin_bar_menu
是 WordPress 用于编辑后台工具栏的钩子。$wp_admin_bar->add_node()
方法用于添加新的节点,id
是菜单项的唯一标识符,title
是显示的文本,href
是菜单项的链接。parent
参数用于指定该菜单项属于哪个父级菜单。
2. 修改工具栏节点
有时你可能想修改现有的工具栏项,比如隐藏某些默认的菜单项或修改它们的内容。
function remove_default_admin_bar_items($wp_admin_bar) {
// 移除 WordPress 默认的 “更新” 链接
$wp_admin_bar->remove_node(‘updates’);
// 移除 WordPress 默认的 “站点” 菜单
$wp_admin_bar->remove_node(‘site-name’);
}
add_action(‘admin_bar_menu’, ‘remove_default_admin_bar_items’, 999);
3. 设置工具栏显示条件
你可以根据用户角色、页面或其他条件来显示或隐藏工具栏。
function disable_admin_bar_for_frontend() {
if (!is_admin()) {
add_filter(‘show_admin_bar’, ‘__return_false’);
}
}
add_action(‘wp’, ‘disable_admin_bar_for_frontend’);
4. 自定义工具栏的 CSS 样式
如果你希望修改工具栏的外观,可以通过添加自定义 CSS 来实现。
function custom_admin_bar_css() {
echo ‘<style>
#wpadminbar { background-color: #333; }
#wpadminbar .ab-item { color: #fff; }
#wpadminbar .ab-item:hover { background-color: #444; }
</style>’;
}
add_action(‘admin_head’, ‘custom_admin_bar_css’);
5. 控制不同用户角色显示的工具栏项
有时你可能希望仅为特定角色的用户显示某些菜单项。
function custom_toolbar_for_roles($wp_admin_bar) {
// 检查当前用户的角色
if (current_user_can(‘administrator’)) {
// 仅管理员角色添加特定菜单项
$wp_admin_bar->add_node(array(
‘id’ => ‘admin_only_item’,
‘title’ => ‘Admin Only Item’,
‘href’ => ‘#’,
));
}
}
add_action(‘admin_bar_menu’, ‘custom_toolbar_for_roles’, 100);
钩子解释
admin_bar_menu 钩子
作用:admin_bar_menu
钩子用于修改 WordPress 后台的顶部工具栏(Admin Bar)。你可以通过此钩子添加、删除或修改工具栏上的菜单项。
执行时机:admin_bar_menu
钩子在后台工具栏渲染时触发。这个钩子在后台页面加载时执行,通常用于自定义工具栏的内容。
用例:常用于为管理员、编辑或其他角色用户的工具栏添加自定义菜单项、子菜单项等,增强后台操作体验。
示例:
function add_custom_admin_bar_menu($wp_admin_bar) {
// 添加一个新的顶级菜单项
$wp_admin_bar->add_node(array(
‘id’ => ‘custom-menu’,
‘title’ => ‘Custom Menu’,
‘href’ => ‘#’
));
}
add_action(‘admin_bar_menu’, ‘add_custom_admin_bar_menu’, 100);
https://www.49855.net/wp_admin_bar
wp 钩子
作用:wp
钩子在 WordPress 加载时触发,通常在页面渲染之前执行。它用于进行页面渲染前的初始化操作,适合执行一些站点相关的初始化任务。
执行时机:wp
钩子在所有插件和主题的 wp_head()
、wp_footer()
钩子之前触发,且在 HTML 页面的 <body>
标签之前调用。
用例:你可以在此钩子上添加函数来检查用户是否登录,或者根据条件调整内容的显示方式等。
示例:
function check_user_login() {
if (!is_user_logged_in()) {
wp_redirect(home_url(‘/login’)); // 重定向未登录的用户
exit;
}
}
add_action(‘wp’, ‘check_user_login’);
admin_head 钩子
作用:admin_head
钩子在 WordPress 后台管理页面的 <head>
标签中触发,允许你向后台页面的 <head>
部分添加自定义的 HTML、CSS 或 JavaScript 代码。
执行时机:admin_head
钩子是在 WordPress 后台页面加载时执行的,通常用于修改后台管理界面的样式或脚本。
用例:常用于在后台页面中添加自定义 CSS 样式、JavaScript 代码、或者修改后台管理页面的元信息。
示例:
function custom_admin_styles() {
echo ‘<style>
body { background-color: #f0f0f0; }
#adminmenu { background-color: #333; }
</style>’;
}
add_action(‘admin_head’, ‘custom_admin_styles’);