1. 首页
  2. Docs
  3. 如何使用 ZAXU
  4. 开始使用
  5. 使用子主题

使用子主题

为了避免主题更新抹去您自定义的CSS样式表,JavaScript脚本及PHP函数,推荐您安装使用ZAXU子主题,以下是子主题的详细使用方法:

functions.php

可自定义PHP函数,您的代码添加至该文件末尾即可。

admin-main.js

可自定义作用于WordPress后台JavaScript脚本,可将代码放在以下实例里:

"use strict";
jQuery(document).ready(function($) {     
    // 您可将作用于WordPress后台的JavaScript脚本放在此处
});

main.js

可自定义JavaScript脚本,PJAX回调函数可将代码放在以下实例里:

function zaxuCallBack() {
    // 您的PJAX回调函数代码
}

screenshot.png

子主题封面。

admin-style.css

可自定义作用于WordPress后台CSS样式表。

style.css

可自定义CSS样式表,如果您想对暗黑模式定义样式可将代码放在以下实例里:

@media (prefers-color-scheme: dark) {
     /* 您的暗黑模式代码 */
}

color-scheme.php

如果您要为指定元素定义配色方案可按照以下实例来操作:

一般配色方案:

/*
* 若配色方案的动态颜色选项处于禁用状态时,可将CSS样式代码放入以下代码片段里。
* 文字颜色变量:{$txt_color},半透明颜色变量:rgba(" . zaxu_hex2RGB($txt_color, true) . ", .5);
* 背景颜色变量:{$bg_color},半透明颜色变量:rgba(" . zaxu_hex2RGB($bg_color, true) . ", .5);
* 强调颜色变量:{$acc_color},半透明颜色变量:rgba(" . zaxu_hex2RGB($acc_color, true) . ", .5);
*/

// General color start
    $custom_css = "
        /* 您的CSS样式代码放在此处,例如以下方式 */
        body {
              color: rgba(" . zaxu_hex2RGB($txt_color, true) . ", .5);
              background-color: {$bg_color};
        }
    ";
// General color end

 

IE 浏览器配色方案:

/*
* 若配色方案的动态颜色选项处于禁用状态时,可将CSS样式代码放入以下代码片段里。
* 文字颜色变量:{$txt_color},半透明颜色变量:rgba(" . zaxu_hex2RGB($txt_color, true) . ", .5);
* 背景颜色变量:{$bg_color},半透明颜色变量:rgba(" . zaxu_hex2RGB($bg_color, true) . ", .5);
* 强调颜色变量:{$acc_color},半透明颜色变量:rgba(" . zaxu_hex2RGB($acc_color, true) . ", .5);
*/

// IE browser start
    $custom_css = "
        /* 您的CSS样式代码放在此处,例如以下方式 */
        body {
              color: rgba(" . zaxu_hex2RGB($txt_color, true) . ", .5);
              background-color: {$bg_color};
        }
    ";
// IE browser end

 

动态配色方案(支持暗黑模式)

/*
* 若配色方案的动态颜色选项处于开启状态时,可将CSS样式代码放入以下代码片段里。
* 文字颜色变量:var(--txt-color-100),半透明颜色变量(10透明值跨度):var(--txt-color-10);
* 背景颜色变量:var(--background-color-100),半透明颜色变量(10透明值跨度):var(--background-color-10);
* 强调颜色变量:var(--accent-color);
*/

// Dynamic color start
    $custom_css = "
        /* 您的CSS样式代码放在此处,例如以下方式 */
        body {
              color: var(--txt-color-50);
              background-color: var(--background-color-100);
        }
    ";
// Dynamic color end