自定义后台CSS代码-知集

Vela 主题设置 · 分区：后台设置 · 上级分区：gongneng · 选项 ID：css · 类型：code_editor

功能简介

「自定义后台CSS代码」是 Vela 主题设置项，位于「后台设置」分区。开启后站点将呈现对应表现，关闭则无影响。

适用场景

当你希望「自定义后台CSS代码」生效时，开启本设置即可，无需改动主题文件。
适用于需要在不写代码的前提下，快速为站点追加「自定义后台CSS代码」相关表现的场景。
若同一页面存在多个相似美化项，建议只开启其一，避免视觉冲突。

代码实现

📂 文件创建清单

文件	是否需新建	完整存放路径 / 所属文件夹
`sections.php`	否（已存在）	`/zibll_child/includes/acg/sections.php` —— 「后台设置」分区的 `fields` 数组
本设置项 `css`	否	作为 `sections.php` 中 `fields` 数组的一项，无需单独建文件

无需新建任何 PHP / JS / CSS 文件。本设置是 Vela 主题设置页的一个开关，字段已写在 /zibll_child/includes/acg/sections.php（相对路径 zibll_child/includes/acg/sections.php）的「后台设置」分区（上级分区：gongneng）。开启后，前端通过 vela_get_option('css') 读取开关状态，由 includes/acg/ 模块输出对应样式类或加载美化资源。

📁 本段代码存放文件

以下 CSF 字段定义 需放在 /zibll_child/includes/acg/sections.php（zibll_child/includes/acg/sections.php）的「后台设置」分区的 fields 数组中（该项已存在，无需重复添加；若你要新增同类设置，照此格式在对应分区追加即可）。

开关注册代码（CSF 字段定义）

array(
                    array(
                        'id'       => 'css',
                        'type'     => 'code_editor',
                        'title'    => '自定义后台CSS代码',
                        'settings' => array(
                          'theme'  => 'mbo',
                          'mode'   => 'css',
                        ),
                        'default'  => '
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('. $img .'admin.png) 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('. $img .'x.png),default}
a:hover{cursor:url('. $img .'y.pn),pointer}
#adminmenu .wp-submenu{background-color: #ffffff;}
                        ',
                      ),
                )

使用示例

后台 外观 → Vela主题设置 → 后台设置，找到「自定义后台CSS代码」开关并打开，保存设置。
回到前台对应页面，即可看到效果（部分项仅 PC 端或仅子比主题生效，详见说明）。
在主题或插件代码中读取该设置：

$on = vela_get_option('css', false);
if ($on) {
    // 开关已开启，自定义逻辑
}

文章版权归作者所有，未经允许请勿转载。

THE END

Vela 功能详解

自定义后台CSS代码