WordPress管理后台轻微美化[WP教程]

前言

原生WordPress后台非常的简洁,但喜欢多一点花里花哨的我,总感觉没那么好看,所以花了点时间把它的CSS样式改了改。没改动主体PHP的代码,因为WordPress更新就没了,作为喜欢更新却非常懒的我觉得这是非常麻烦的,所以就只该动CSS代码。就稍微的改了一下,如果你也喜欢的话就自己下载或者复制试试吧!

说明

【如果用本教程请认真读一下,以及看一下效果图在决定是否食用】:此美化教程以我WP后台的功能来美化的,有一些地方或者功能以及一些插件的页面我还没有美化到,也可能有些CSS代码污染(也就是其他地方用到同一个class、id),可能会影响到其他地方的布局,如果发现留言告知一下。在这里抱歉了!能力有限。

方法一:下载WPJAM 插件+CSS代码【推荐】

第一步:下载【WPJAM 插件】插件,插件下载里面应该有,自己百度搜索一下也行。

第二步:插件添加CSS代码步骤

插件可能需要关注他们的微信公众号,好像需要验证码才开启全部功能,自己找不到的,自己好好的去看 WPJAM 插件 怎么用。如何添加请看图:

图片[1]-WordPress管理后台轻微美化[WP教程]-老奶狗博客

第三步: CSS代码(需含style标签)

<style type="text/css">
body{background-attachment:fixed;background-size:cover;background-repeat:no-repeat;background-position:center center;cursor:pointer;background:linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.1)),url(https://www.owoc.cn/api/bg) center center/cover no-repeat fixed}
#dashboard-widgets-wrap,.wrap>h1:first-child{display:none}
a{color:#673ab7;font-weight:500!important;text-decoration:none}
a:hover{color:#e91e63;background:rgba(0,0,0,.1)!important}
#adminmenu .wp-submenu a,#adminmenu .wp-submenu li.current a{color:#000!important;font-size:14px!important}
#adminmenu,#adminmenuback,#adminmenuwrap,#wpadminbar{background:rgba(0,0,0,.1)!important}
#adminmenu .wp-has-current-submenu .wp-submenu,#adminmenu .wp-submenu,#adminmenu a:hover,#adminmenu li.menu-top:hover,#adminmenu li.opensub>a.menu-top,#adminmenu li>a.menu-top:focus,#wpadminbar .menupop .ab-sub-wrapper{background:rgba(255,255,255,.6)!important}
#adminmenu li.current a.menu-top,#adminmenu li.wp-has-current-submenu .wp-submenu .wp-submenu-head,#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu,.folded #adminmenu li.current.menu-top{background:rgba(0,0,0,.6)!important}
#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after,#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after{border-right-color:rgba(255,255,255,.6)!important}
#adminmenu .wp-submenu,#wp-admin-bar-user-info .avatar,#wpadminbar .menupop .ab-sub-wrapper,table.widefat{border-radius:8px}
#adminmenu li.menu-top:hover{background:0 0!important}
.notice{background:rgba(255,255,255,.6);border-radius:8px}
#adminmenu .wp-submenu .wp-submenu-head,#wpadminbar #wp-admin-bar-user-info .display-name,#wpadminbar #wp-admin-bar-user-info .username,#wpadminbar .ab-submenu .ab-item,#wpadminbar .quicklinks .menupop ul li a{color:#000!important}
#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar>a img{border-color:rgba(255,255,255,0)!important;background-color:rgba(255,255,255,0)!important;border-radius:99px}
.comment-ays,.feature-filter,.imgedit-group,.popular-tags,.striped>tbody>:nth-child(odd),.stuffbox,.widgets-holder-wrap,.wp-editor-container,p.popular-tags,table.widefat{background:rgba(255,255,255,.5)!important}
table.widefat{border:none!important}
.no-thumbnail{display:none!important}
.row-title{font-weight:600!important}
.row-actions{color:#000!important}
.wrap>.page-title-action{padding:8px 20px;display:inline-block;border-radius:99px;font-size:15px;font-weight:600!important;border:none}
.wp-core-ui select{background:rgba(255,255,255,.5) url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E') no-repeat right 5px top 55%!important}
.tablenav,table.widefat{background:rgba(255,255,255,.5)!important;padding:5px;border-radius:8px;margin:5px 0}
.updates-table td input,.widefat tfoot td input,.widefat th input,.widefat thead td input,input[type=radio]{background:rgba(255,255,255,.5)!important;border-radius:99px}
#post-search-input,.tablenav .tablenav-pages .button,.tablenav .tablenav-pages .tablenav-pages-navspan,.wp-core-ui .button-disabled,.wp-core-ui .button-secondary.disabled,.wp-core-ui .button-secondary:disabled,.wp-core-ui .button-secondary[disabled],.wp-core-ui .button.disabled,.wp-core-ui .button:disabled,.wp-core-ui .button[disabled]{border-radius:99px}
.alignleft .wp-core-ui .button,.alignleft .wp-core-ui .button-secondary{background:rgba(255,255,255,.5)!important}
.list-table>.subsubsub{background:rgba(255,255,255,.5)!important;padding:5px;border-radius:99px}
input[type=color],input[type=date],input[type=datetime-local],input[type=datetime],input[type=email],input[type=month],input[type=number],input[type=password],input[type=radio],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],select,textarea{background:rgba(255,255,255,.5)!important}
.edit-attachment-frame .attachment-media-view .details-image,.media-modal-content,.wp-core-ui .attachment .thumbnail,.wp-core-ui .attachment-preview{border-radius:8px}
.media-frame.mode-grid .attachment.details:focus,.media-frame.mode-grid .attachment:focus,.media-frame.mode-grid .selected.attachment:focus,.wp-core-ui .attachment .thumbnail:after{box-shadow:none!important}
.edit-attachment-frame .media-frame-content,.media-modal-content{background:rgba(255,255,255,.8)!important;border-radius:8px}
p.search-box{padding:5px!important}
#major-publishing-action,.postbox{border-radius:8px}
#major-publishing-actions,.categorydiv div.tabs-panel,.customlinkdiv div.tabs-panel,.postbox,.posttypediv div.tabs-panel,.taxonomydiv div.tabs-panel,.wp-tab-panel{background:rgba(255,255,255,.8)!important}
.card,.health-check-accordion-panel,.health-check-accordion-trigger,.health-check-header,.privacy-settings-accordion-panel,.privacy-settings-accordion-trigger,.privacy-settings-header{background:rgba(255,255,255,.5)!important;border-radius:8px}
.health-check-accordion-heading,.privacy-settings-accordion-heading{border-top:none;margin-top:5px}
.health-check-accordion,.privacy-settings-accordion{border:none}
.wp-core-ui .button,.wp-core-ui .button-secondary{color:#000;background:rgba(255,255,255,.8)}
.theme-overlay .theme-actions,.theme-overlay .theme-wrap{background:rgba(255,255,255,.5)!important;border-radius:8px}
.theme-overlay .screenshot{border-radius:8px;border:none}
#widgets-left .widgets-holder-wrap{padding:5px;border-radius:8px}
.menu-item-handle,.widget .widget-top{background:rgba(255,255,255,.5)!important}
#available-widgets .widget .widget-top,div#widgets-right .widgets-holder-wrap{border-radius:8px}
.manage-menus{border-radius:99px;background:rgba(255,255,255,.5)!important}
.accordion-section{border-bottom:none!important;margin:5px}
.nav-menus-php .metabox-holder h3{border-radius:8px}
.accordion-section-content{border-radius:8px}
#menu-management .menu-edit,#menu-settings-column .accordion-container{border:none;box-shadow:none}
.nav-menus-php #post-body{background:rgba(255,255,255,.5)!important}
#nav-menu-footer,#nav-menu-header{background:#fff}
#nav-menu-header{border-top-left-radius:8px;border-top-right-radius:8px;border-bottom:none}
#nav-menu-footer{border-bottom-right-radius:8px;border-bottom-left-radius:8px}
.nav-tab-wrapper{border-bottom:none}
.nav-tab-active,.nav-tab-active:focus,.nav-tab-active:focus:active,.nav-tab-active:hover{border:none!important}
.nav-tab-wrapper .nav-tab{background:rgba(255,255,255,.5)!important;border-radius:99px}
.plugins tr{background:0 0!important}
.plugins .active td,.plugins .active th{border-radius:8px;background:rgba(255,255,255,.5)!important}
.plugin-card,.popular-tags,.wp-filter{background:rgba(255,255,255,.5)!important;border-radius:8px}
.plugin-card-bottom{background:0 0!important}
.defaultavatarpicker .avatar{border-radius:99px}
::-webkit-scrollbar{width:5px;height:1px}
::-webkit-scrollbar-thumb{border-radius:5px;background-color:#12b7f5;background-image:-webkit-linear-gradient(45deg,#ff5d8f 25%,transparent 25%,transparent 50%,#ff5d8f 50%,#ff5d8f 75%,transparent 75%,transparent)}
::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,.2);background:#f6f6f6}
body,div{cursor:url(https://cdn.owoc.cn/img/x1.cur ),default}
a:hover{cursor:url(https://cdn.owoc.cn/img/x2.cur),pointer}
</style>

方法二、添加PHP代码+CSS文件

这个方法需要在主题目录下的functions.php文件里添加PHP代码和下载本站提供CSS文件。这个方法如果更新主题,那就没有了,需要重新添加PHP代码才生效,如果你不想下载插件的话,就用这个方法),如果你啥也不会,请用第一个方法,非常的亲民!

第一步:在 主题目录下的functions.php文件里添加下面PHP代码

// 为WordPress后台引入css
function wpc_add_custom_admin_css() {
echo '<link rel="stylesheet" type="text/css" href="'.get_bloginfo('template_directory').'/admin-styles.css">';
}
add_action('admin_head', 'wpc_add_custom_admin_css');

第二步在主题目录下创建名为:admin-styles.css的文件,把方法一中的CSS代码添加进去,头尾style标签自己去掉即可

------本页内容已结束,喜欢请分享------

感谢您的来访,获取更多精彩文章请收藏本站。

© 版权声明
THE END
喜欢就支持一下吧
点赞8赞赏 分享
评论 抢沙发
头像
发一条友善的评论吧
提交
头像

昵称

取消
昵称表情代码图片