目录

使用子主题

  • 710次浏览

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

3
0
文章大纲