查询:是否有将WordPress仪表盘头像移至菜单顶部的相关文档
如何将WordPress仪表盘头像移至管理菜单顶部
当然有办法实现这个需求!下面是具体的步骤,你可以通过自定义代码来完成这个调整:
方法:通过自定义代码添加头像到菜单顶部
你可以将以下代码添加到子主题的functions.php文件中,或者创建一个简单的自定义插件来使用(推荐后者,避免主题更新丢失修改):
// 在管理菜单顶部添加用户头像 function add_admin_menu_avatar() { $current_user_id = get_current_user_id(); // 获取头像,32是头像尺寸,可根据需要调整 $user_avatar = get_avatar($current_user_id, 32); // 添加占位菜单项,优先级设为1确保排在最前面 add_menu_page( __('用户头像', 'your-text-domain'), $user_avatar, 'read', // 最低权限,所有登录用户可见 'admin-menu-avatar', '', // 空回调函数,不需要跳转页面 '', // 空图标URL,我们用头像代替 1 // 优先级,数值越小越靠前 ); } add_action('admin_menu', 'add_admin_menu_avatar'); // 移除自动生成的子菜单(不需要这个菜单项的子页面) function remove_avatar_submenu() { remove_submenu_page('admin-menu-avatar', 'admin-menu-avatar'); } add_action('admin_menu', 'remove_avatar_submenu', 999); // 添加CSS调整头像显示样式 function style_admin_menu_avatar() { echo '<style> /* 调整头像菜单项的容器样式 */ #toplevel_page_admin-menu-avatar .wp-menu-image { margin: 0 !important; padding: 0 !important; } /* 给头像添加圆角,贴合WordPress风格 */ #toplevel_page_admin-menu-avatar .wp-menu-image img { border-radius: 50%; margin: 8px auto !important; display: block; } /* 隐藏菜单项的文字,只保留头像 */ #toplevel_page_admin-menu-avatar .wp-menu-name { display: none; } </style>'; } add_action('admin_head', 'style_admin_menu_avatar');
代码说明:
add_admin_menu_avatar函数:通过add_menu_page创建一个优先级为1的菜单项,把用户头像作为菜单标题,确保它排在所有默认管理菜单的最顶部。remove_avatar_submenu函数:移除这个菜单项自动生成的子菜单,因为我们只需要显示头像,不需要跳转页面。style_admin_menu_avatar函数:添加自定义CSS,调整头像的显示样式,包括圆角、居中对齐,并且隐藏菜单文字,让头像更融入管理菜单的布局。
自定义调整建议:
- 如果你想要更大的头像,可以把代码中的
32改成其他数值(比如40),记得同步调整CSS中的margin值来保证居中。 - 如果不想隐藏菜单文字,删掉CSS里的
#toplevel_page_admin-menu-avatar .wp-menu-name { display: none; }即可。
内容的提问来源于stack exchange,提问作者samjco-com
相关产品推荐
相关产品推荐

