l-1

WordPress笔记

主页/WordPress笔记/博客文章/添加自定义/WordPress块类名自定义实现方案

WordPress块类名自定义实现方案

下面我将为您提供一个完整的PHP实现方案，用于修改WordPress所有默认块的类名，同时确保不影响WordPress的升级更新。

建议：

  • 实现这个目的需要修改较多内容，不建议对此进行修改；
  • 如果放弃程序的实时更新，也可以直接从程序核心部分进行修改，但同样比较繁琐。
  • 如果依然要保留块的样式，对于熟悉各类开源CMS的人来说，判断网站使用的是WordPress并不难。
  • 如果是从安全的角度出发的，可以考虑将帝国CMS的安全技术在WordPress上进行实现。

WordPress块类名自定义实现

思路分析

要实现这个功能，我们需要：

  1. 使用WordPress的render_block过滤器修改服务器端输出
  2. 针对所有默认块进行类名替换
  3. 确保代码在子主题或自定义插件中运行，避免更新被覆盖
  4. 自定义类名css重整

替换类名完整实现插件代码

<?php
/**
 * Plugin Name: WordPress块类名自定义
 * Description: 修改所有默认WordPress块的类名，不影响程序升级更新
 * Version: 1.0.0
 * Author: Your Name
 */

// 防止直接访问
if (!defined('ABSPATH')) {
    exit;
}

class WP_Block_Class_Renamer {

    private $class_mappings;

    public function __construct() {
        // 初始化类名映射
        $this->class_mappings = array(
            // 常用核心块
            'core/paragraph'      => array('wp-block-paragraph' => 'custom-paragraph'),
            'core/heading'        => array('wp-block-heading' => 'custom-heading'),
            'core/image'          => array('wp-block-image' => 'custom-image'),
            'core/gallery'        => array('wp-block-gallery' => 'custom-gallery'),
            'core/list'           => array('wp-block-list' => 'custom-list'),
            'core/quote'          => array('wp-block-quote' => 'custom-quote'),
            'core/audio'          => array('wp-block-audio' => 'custom-audio'),
            'core/cover'          => array('wp-block-cover' => 'custom-cover'),
            'core/file'           => array('wp-block-file' => 'custom-file'),
            'core/video'          => array('wp-block-video' => 'custom-video'),
            // 更多块可以继续添加...

            // 通用模式类名
            'patterns' => array(
                'wp-block-' => 'custom-',
                'has-' => 'custom-has-',
                'is-style-' => 'custom-style-'
            )
        );

        // 添加过滤器
        add_filter('render_block', array($this, 'rename_block_classes'), 10, 2);
    }

    /**
     * 重命名块类名
     */
    public function rename_block_classes($block_content, $block) {
        // 如果没有类名映射或块内容为空，直接返回
        if (empty($block_content) || !isset($block['blockName'])) {
            return $block_content;
        }

        $block_name = $block['blockName'];

        // 处理特定块的类名替换
        if (isset($this->class_mappings[$block_name])) {
            foreach ($this->class_mappings[$block_name] as $old_class => $new_class) {
                $block_content = $this->replace_class_names($block_content, $old_class, $new_class);
            }
        }

        // 处理通用模式类名替换
        if (isset($this->class_mappings['patterns'])) {
            foreach ($this->class_mappings['patterns'] as $old_pattern => $new_pattern) {
                $block_content = $this->replace_pattern_class_names($block_content, $old_pattern, $new_pattern);
            }
        }

        return $block_content;
    }

    /**
     * 替换单个类名
     */
    private function replace_class_names($content, $old_class, $new_class) {
        // 替换类属性中的类名
        $content = preg_replace(
            '/class=["\'](.*?)' . preg_quote($old_class, '/') . '(.*?)["\']/',
            'class="$1' . $new_class . '$2"',
            $content
        );

        // 替换HTML标签中的类名
        $content = preg_replace(
            '/\s' . preg_quote($old_class, '/') . '(?=\s|>)/',
            ' ' . $new_class,
            $content
        );

        return $content;
    }

    /**
     * 替换模式类名
     */
    private function replace_pattern_class_names($content, $old_pattern, $new_pattern) {
        // 查找所有类属性
        preg_match_all('/class=["\'](.*?)["\']/', $content, $matches);

        if (!empty($matches[0])) {
            foreach ($matches[1] as $class_attr) {
                // 分割类名
                $classes = explode(' ', $class_attr);
                $new_classes = array();

                foreach ($classes as $class) {
                    // 替换以旧模式开头的类名
                    if (strpos($class, $old_pattern) === 0) {
                        $new_classes[] = str_replace($old_pattern, $new_pattern, $class);
                    } else {
                        $new_classes[] = $class;
                    }
                }

                // 重建类属性
                $new_class_attr = 'class="' . implode(' ', $new_classes) . '"';
                $content = str_replace('class="' . $class_attr . '"', $new_class_attr, $content);
            }
        }

        return $content;
    }

    /**
     * 获取所有支持的块类型
     */
    public function get_supported_blocks() {
        return array_keys($this->class_mappings);
    }

    /**
     * 添加新的类名映射
     */
    public function add_class_mapping($block_name, $old_class, $new_class) {
        if (!isset($this->class_mappings[$block_name])) {
            $this->class_mappings[$block_name] = array();
        }

        $this->class_mappings[$block_name][$old_class] = $new_class;
    }
}

// 初始化插件
new WP_Block_Class_Renamer();

// 可选：添加管理界面配置
add_action('admin_menu', function() {
    add_options_page(
        '块类名设置',
        '块类名设置',
        'manage_options',
        'block-class-settings',
        'block_class_settings_page'
    );
});

function block_class_settings_page() {
    ?>
    <div class="wrap">
        <h1>WordPress块类名设置</h1>
        <p>此插件自动修改所有默认WordPress块的类名，不影响程序升级更新。</p>
        <p>当前支持的块类型：</p>
        <ul>
            <?php
            $renamer = new WP_Block_Class_Renamer();
            $blocks = $renamer->get_supported_blocks();
            foreach ($blocks as $block) {
                if ($block !== 'patterns') {
                    echo '<li><code>' . esc_html($block) . '</code></li>';
                }
            }
            ?>
        </ul>
        <p>通用模式替换：</p>
        <ul>
            <li><code>wp-block-</code> → <code>custom-</code></li>
            <li><code>has-</code> → <code>custom-has-</code></li>
            <li><code>is-style-</code> → <code>custom-style-</code></li>
        </ul>
    </div>
    <?php
}

使用说明

  1. 将上述代码保存为PHP文件（例如block-class-renamer.php）
  2. 上传到您的WordPress网站的/wp-content/plugins/目录
  3. 在WordPress后台启用该插件
  4. 如需自定义类名映射，可以修改代码中的$class_mappings数组

扩展配置

您可以通过以下方式添加自定义类名映射：

// 在插件初始化后添加自定义映射
add_action('plugins_loaded', function() {
    $renamer = new WP_Block_Class_Renamer();
    $renamer->add_class_mapping('core/button', 'wp-block-button', 'my-button');
    $renamer->add_class_mapping('core/columns', 'wp-block-columns', 'my-columns');
});

注意事项

  1. 此代码应该放在子主题的functions.php文件或自定义插件中
  2. 修改前建议备份网站
  3. 某些块可能有动态生成的类名，可能需要额外处理
  4. 使用前最好先测试确保不影响网站功能

这个实现方案提供了完整的PHP代码，可以修改所有默认WordPress块的类名，同时确保WordPress升级时不会影响这些更改。

WordPress块类名自定义后的CSS处理方案

当您修改了WordPress块的类名后，原来的CSS样式将不再适用，因为CSS选择器依赖于类名。下面我将提供一个完整的解决方案，包括如何为新类名编写CSS样式。

思路分析

处理CSS问题有几种方法：

  1. 重写所有核心块的CSS样式
  2. 使用CSS预处理器生成新样式
  3. 通过JavaScript动态转换CSS规则
  4. 使用SASS/LESS变量系统

我将提供一个基于SASS的解决方案，这样可以高效地管理样式并确保一致性。

完整实现方案

1. 创建SASS变量和映射系统

首先，创建一个SASS文件来定义所有新的类名：

// _variables.scss
// 新的类名前缀
$prefix: 'custom-';

// 块类名映射
$block-classes: (
  paragraph: #{$prefix}paragraph,
  heading: #{$prefix}heading,
  image: #{$prefix}image,
  gallery: #{$prefix}gallery,
  list: #{$prefix}list,
  quote: #{$prefix}quote,
  audio: #{$prefix}audio,
  cover: #{$prefix}cover,
  file: #{$prefix}file,
  video: #{$prefix}video,
  button: #{$prefix}button,
  columns: #{$prefix}columns,
  group: #{$prefix}group,
  media-text: #{$prefix}media-text,
  // 添加更多块...
);

2. 创建混合宏来生成样式

// _mixins.scss
@mixin block-styles($block-name) {
  $class-name: map-get($block-classes, $block-name);

  .#{$class-name} {
    @content;
  }
}

// 生成所有块的样式
@mixin generate-all-blocks() {
  // 段落块
  @include block-styles(paragraph) {
    // 复制原始段落块的样式
    margin-bottom: 1.5em;
    line-height: 1.8;

    // 添加自定义样式
    &.has-drop-cap:not(:focus)::first-letter {
      font-size: 3.5em;
      font-weight: 100;
      margin: 0.05em 0.1em 0 0;
    }
  }

  // 标题块
  @include block-styles(heading) {
    font-weight: 700;
    line-height: 1.3;

    // 不同级别的标题
    &.is-style-h1 { font-size: 2.5em; }
    &.is-style-h2 { font-size: 2em; }
    &.is-style-h3 { font-size: 1.75em; }
    &.is-style-h4 { font-size: 1.5em; }
    &.is-style-h5 { font-size: 1.25em; }
    &.is-style-h6 { font-size: 1em; }
  }

  // 图片块
  @include block-styles(image) {
    margin: 0 0 1.5em 0;

    img {
      height: auto;
      max-width: 100%;
    }

    figcaption {
      color: #555;
      font-size: 0.9em;
      text-align: center;
    }
  }

  // 添加更多块的样式...
}

3. 主样式文件

// style.scss
@import 'variables';
@import 'mixins';

// 生成所有块的样式
@include generate-all-blocks();

// 通用块样式
[class^="#{$prefix}"],
[class*=" #{$prefix}"] {
  box-sizing: border-box;
  max-width: 100%;
}

// 响应式设计
@media (max-width: 768px) {
  @include block-styles(columns) {
    flex-wrap: wrap;

    .#{$prefix}column {
      flex-basis: 100% !important;
    }
  }
}

4. PHP代码增强 – 添加CSS排队

更新之前的PHP代码，添加CSS排队功能：

<?php
/**
 * Plugin Name: WordPress块类名自定义与样式处理
 * Description: 修改所有默认WordPress块的类名并提供相应样式
 * Version: 1.0.0
 */

// 防止直接访问
if (!defined('ABSPATH')) {
    exit;
}

class WP_Block_Class_Renamer {

    private $class_mappings;

    public function __construct() {
        // 初始化类名映射
        $this->class_mappings = array(
            // 常用核心块
            'core/paragraph'      => array('wp-block-paragraph' => 'custom-paragraph'),
            'core/heading'        => array('wp-block-heading' => 'custom-heading'),
            'core/image'          => array('wp-block-image' => 'custom-image'),
            // 更多映射...

            // 通用模式类名
            'patterns' => array(
                'wp-block-' => 'custom-',
                'has-' => 'custom-has-',
                'is-style-' => 'custom-style-'
            )
        );

        // 添加过滤器
        add_filter('render_block', array($this, 'rename_block_classes'), 10, 2);

        // 添加样式排队
        add_action('wp_enqueue_scripts', array($this, 'enqueue_styles'));
    }

    // ... 之前的类名替换方法保持不变 ...

    /**
     * 排队自定义样式
     */
    public function enqueue_styles() {
        // 排队编译后的CSS文件
        wp_enqueue_style(
            'custom-block-styles',
            plugin_dir_url(__FILE__) . 'css/custom-blocks.css',
            array(), // 不依赖任何其他样式表
            '1.0.0'
        );
    }
}

// 初始化插件
new WP_Block_Class_Renamer();

5. 自动化构建流程 (package.json)

为了自动化SASS编译，可以创建一个简单的构建流程：

{
  "name": "wordpress-custom-block-styles",
  "version": "1.0.0",
  "scripts": {
    "build": "sass scss:css --style=compressed",
    "watch": "sass scss:css --watch"
  },
  "devDependencies": {
    "sass": "^1.32.0"
  }
}

6. 目录结构建议

your-plugin-or-theme/
├── css/
│   └── custom-blocks.css        # 编译后的CSS
├── scss/
│   ├── _variables.scss          # SASS变量
│   ├── _mixins.scss             # SASS混合宏
│   └── style.scss               # 主SASS文件
├── js/
│   └── admin.js                 # 可选的管理界面JS
├── block-class-renamer.php      # 主插件文件
└── package.json                 # 构建配置

使用说明

  1. 安装Node.js和SASS编译器：npm install -g sass
  2. 在项目目录中运行：npm install
  3. 开发时运行：npm run watch 实时编译SASS
  4. 生产环境运行：npm run build 生成压缩的CSS

替代方案：使用CSS自定义属性

如果您不想完全重写所有CSS，可以考虑使用CSS变量：

:root {
  --block-margin-bottom: 1.5em;
  --block-line-height: 1.8;
  --heading-font-weight: 700;
}

.custom-paragraph {
  margin-bottom: var(--block-margin-bottom);
  line-height: var(--block-line-height);
}

.custom-heading {
  font-weight: var(--heading-font-weight);
}

注意事项

  1. 确保编译后的CSS文件路径正确
  2. 定期检查WordPress核心块的CSS更新，确保您的样式保持最新
  3. 考虑使用CSS源映射以便于调试
  4. 测试所有块在不同设备和浏览器上的表现

这个方案提供了一个完整的方法来处理WordPress块类名更改后的CSS问题，使用SASS可以高效地管理样式并确保一致性。

最新更新