使用子主题

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

assets/css/admin-style.css

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

assets/js/admin-main.js

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

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

assets/js/main.js

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

function zaxuSiteInCallback() {
    // 站点入场回调函数
}

function zaxuSiteOutCallback() {
    // 站点出场回调函数(PJAX 驱动执行此函数)
}

functions.php

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

screenshot.png

子主题封面。

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

6
0
文章大纲