如何在WordPress子主题中扩展类以实现本地图标自定义？

由于直接修改父主题文件会在主题更新时丢失，以下是完全基于子主题的实现方案，无需改动父主题任何文件：

1. 搭建子主题文件结构 #

在你的子主题目录下创建以下文件夹：

• assets/dist/：存放本地图标CSS和字体文件
• includes/utils/icons/：存放本地图标映射类文件

2. 注册并加载本地图标CSS #

直接在子主题的functions.php中添加以下代码，用来注册并在前台、后台加载自定义图标样式：

// 前台加载本地图标样式
add_action('wp_enqueue_scripts', 'mytheme_child_enqueue_local_icons');
function mytheme_child_enqueue_local_icons() {
    $suffix = defined('SCRIPT_DEBUG') && SCRIPT_DEBUG ? '' : '.min';
    wp_register_style(
        'local-icons',
        get_stylesheet_directory_uri() . '/assets/dist/local-icons' . $suffix . '.css',
        [],
        wp_get_theme()->get('Version')
    );
    wp_enqueue_style('local-icons');
}

// 后台加载本地图标样式
add_action('admin_enqueue_scripts', 'mytheme_child_admin_enqueue_local_icons');
function mytheme_child_admin_enqueue_local_icons() {
    $suffix = defined('SCRIPT_DEBUG') && SCRIPT_DEBUG ? '' : '.min';
    wp_enqueue_style(
        'local-icons',
        get_stylesheet_directory_uri() . '/assets/dist/local-icons' . $suffix . '.css',
        [],
        wp_get_theme()->get('Version')
    );
}

3. 扩展后台图标包列表 #

父主题通过AJAX接口返回图标包数据，我们通过覆盖该AJAX动作来添加本地图标包。在子主题functions.php中添加：

// 覆盖后台图标包AJAX响应，注入本地图标
add_action('wp_ajax_mytheme_get_icon_packs', 'mytheme_child_add_local_icon_pack', 1);
function mytheme_child_add_local_icon_pack() {
    if (!is_user_logged_in()) {
        wp_send_json_error();
    }

    // 获取父主题原有的图标包数据
    $icon_packs = [
        'mytheme-icons' => array_values(\MyTheme\Utils\Icons\mytheme_Icons::get()),
        'font-awesome' => array_values(\MyTheme\Utils\Icons\Font_Awesome::get()),
    ];

    // 添加自定义本地图标包
    $icon_packs['local-icons'] = array_values(\MyThemeChild\Utils\Icons\Local_Icons::get());

    wp_send_json($icon_packs);
    wp_die(); // 必须终止脚本执行
}

注意：如果父主题的AJAX动作名称不是mytheme_get_icon_packs，需要在父主题Admin类中查找add_action('wp_ajax_xxx', [$this, 'get_icon_packs'])这行代码，将上述代码中的mytheme_get_icon_packs替换为实际的xxx。

4. 创建本地图标映射类 #

在子主题的includes/utils/icons/Local_Icons.php文件中创建图标映射类：

<?php
namespace MyThemeChild\Utils\Icons;

if (!defined('ABSPATH')) {
    exit;
}

class Local_Icons {
    public static function get() {
        return [
            '&#xe900' => 'icon-add-circle-1',
            '&#xe901' => 'icon-airplane',
            '&#xe902' => 'icon-alien',
            // 这里添加你所有的图标Unicode与类名映射
        ];
    }
}

然后在子主题functions.php中引入这个文件：

// 引入本地图标映射类
require_once get_stylesheet_directory() . '/includes/utils/icons/Local_Icons.php';

5. 迁移字体和CSS文件 #

将你之前制作的local-icons.css（以及.min压缩版）和对应的字体文件（如.ttf、.woff、.woff2）复制到子主题的assets/dist/目录下，确保CSS中的字体路径正确，示例：

@font-face {
    font-family: 'LocalIcons';
    src: url('./local-icons.woff2') format('woff2'),
         url('./local-icons.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* 图标样式定义 */
.icon-add-circle-1:before { content: '\xe900'; }
.icon-airplane:before { content: '\xe901'; }
.icon-alien:before { content: '\xe902'; }

内容的提问来源于stack exchange，提问作者sokolata