目录

使用子主题

  • 777 次浏览

为了避免主题更新抹去您自定义的 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
文章大纲