Wordpress后台添加、隐藏左侧边栏菜单(附代码)

        用Wordpress开发网站的时候,有时为了方便操作会把一些特定的链接添加到wordpress后台左侧菜单栏中,这个要如何实现呢?其实不会很难,使用两个WordPress内置函数就可以解决问题,分别是add_menu_page()add_action(),添加到主题目录下的functions.php中就可以了。

一、Wordpress后台添加左侧菜单

参考代码如下:

/**
 * WordPress后台左侧添加顶级菜单
 */
 
// my_add_pages() 为 'admin_menu' 钩子的回调函数
function my_add_pages() {
    // 第一个参数'Design page'为菜单名称,第二个参数'网站设计'为菜单标题(可以是链接)
    // 'manage_options' 参数为用户权限
    // 'my_toplevel_page' 参数用于调用my_toplevel_page()函数,来显示菜单内容
    add_menu_page('design page', '<a href="/wp-admin/post.php?post=2&action=edit">左侧菜单</a>', 'manage_options', __FILE__, 'my_toplevel_page');
}
 
// my_toplevel_page() 用于显示菜单的内容,填写菜单页面的HTML代码即可
function my_toplevel_page() {
    echo '这里填菜单页面的HTML代码';
 
    // 如以下示例代码。 wrap 类是WordPress构建好的css类,可以在你的HTML代码中使用
    /*
    echo '
    <div class="wrap">
    <h2>使用帮助</h2>
    <p>这里是使用帮助,通过阅读本文你将了解本程序的使用!有事请<a href="#">与我联系</a></p>
    </div>
    ';
    */
}
 
// 通过add_action来自动调用my_add_pages函数
add_action('admin_menu', 'my_add_pages');

 点击直接跳转到设置好的后台页面编辑页面中。感兴趣的朋友可以试试。效果如下:

二、WordPress隐藏后台左侧菜单 

        我们可以通过remove_menu_page()函数来完成,将如下代码加入到当前主题function.php文件即可。

1、通过函数实现:

    add_action( 'admin_menu', 'df_remove_ad_menus' );
function df_remove_ad_menus(){
    remove_menu_page( 'index.php' ); //仪表页面,控制台首页
    remove_menu_page( 'edit.php' ); //文章页面
    remove_menu_page( 'jetpack' ); //Jetpack等具体插件名
    remove_menu_page( 'upload.php' ); //多媒体页面
    remove_menu_page( 'edit.php?post_type=page' ); //页面管理
    remove_menu_page( 'edit-comments.php' ); //评论菜单
    remove_menu_page( 'themes.php' ); //主题个性设置
    remove_menu_page( 'plugins.php' ); //插件页面
    remove_menu_page( 'users.php' ); //用户页面
    remove_menu_page( 'tools.php' ); //工具页面
    remove_menu_page( 'options-general.php' ); //设置页面
    remove_menu_page( 'cptui_main_menu' ); //cpt ui
}

注意:行末的;不能少,否则会提示错误。

2、通过css来隐藏:

        想要隐藏哪个菜单,就把里面的 class,或者 ID 添加进去就可以了,这个应该不难理解,这样不仅可以隐藏插件生成的菜单,还可以隐藏任何菜单。

/*隐藏后台插件菜单*/
function admin_mycss() {
echo'<style type="text/css">
#toplevel_page_wpuf-admin-opt, #toplevel_page_wsocial,#toplevel_page_edit-post_type-acf {
    display: none;
}
</style>';
}
add_action('admin_head', 'admin_mycss');

完。

在Vue中搭建一个后台管理的侧边栏菜单,你可以使用Vue Router和Vue的组件来实现。下面是一个基本的示例代码: ```vue <template> <div id="app"> <div class="sidebar"> <ul> <li v-for="menu in menus" :key="menu.id" @click="changeRoute(menu.route)"> {{ menu.name }} </li> </ul> </div> <router-view></router-view> </div> </template> <script> export default { data() { return { menus: [ { id: 1, name: 'Dashboard', route: '/dashboard' }, { id: 2, name: 'Users', route: '/users' }, { id: 3, name: 'Settings', route: '/settings' } ] }; }, methods: { changeRoute(route) { this.$router.push(route); } } }; </script> <style> .sidebar { width: 200px; background-color: #f0f0f0; } ul { list-style-type: none; padding: 0; } li { padding: 10px; cursor: pointer; } li:hover { background-color: #e0e0e0; } </style> ``` 在这个示例中,我们首先定义了一个包含侧边栏菜单项的`menus`数组。每个菜单项有一个唯一的`id`、名称`name`和对应的路由路径`route`。 在模板部分,我们使用`v-for`指令遍历`menus`数组,并渲染每个菜单项。我们给每个菜单项绑定了点击事件`@click`,当点击菜单项时会调用`changeRoute`方法来切换路由。 在`changeRoute`方法中,我们使用`this.$router.push(route)`来切换到对应的路由路径。 最后,我们使用`<router-view></router-view>`来显示当前路由对应的组件内容。 在样式部分,我们简单地定义了侧边栏的样式,包括宽度、背景色以及菜单项的样式。 请注意,以上代码只是一个基本的示例,你可以根据自己的需求进行修改和扩展。同时,你需要确保已经正确配置了Vue Router,并且定义了对应的路由和组件。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值