WordPress向指定文章类型单独添加CSS样式表到网站前台及后台

将通过修改主题的 functions.php 文件来实现功能，这是一种常见且相对高效的方法。

实现方案概述

通过修改主题的 functions.php 文件（或使用自定义功能插件），您可以条件化地为 “bsv5” 文章类型引入自定义的 Bootstrap 样式表。实现此功能主要涉及以下两个步骤：

1. 条件化地向块编辑器（Gutenberg）引入样式：在编辑 bsv5 文章类型时，将您的自定义样式表加载到编辑器中。
2. 条件化地向前端文章页面引入样式：当访问 bsv5 文章类型的单篇文章页面时，在前端加载同样的样式表。

以下是具体的代码实现步骤和说明。

代码实现

将以下代码添加到您当前主题的 functions.php 文件中（建议先备份）。如果您不熟悉代码操作，建议使用子主题进行操作，以避免主题更新时修改被覆盖。

/**
 * 根据文章类型条件化地向WordPress块编辑器和前端添加自定义Bootstrap样式表
 */

// 1. 向文章类型为'bsv5'的后台块编辑器引入自定义bootstrap样式表
function add_bootstrap_diy_to_editor() {
    global $post;
    // 检查是否在编辑页面且当前文章类型是'bsv5'
    if ( is_admin() && ! empty( $post ) && 'bsv5' === $post->post_type ) {
        // 获取网站根目录路径（适用于不同服务器环境）
        $bootstrap_diy_css_path = get_home_path() . 'css/bootstrap.css';
        // 检查文件是否存在，存在才引入
        if ( file_exists( $bootstrap_diy_css_path ) ) {
            // 获取文件修改时间用于版本控制，避免缓存
            $version = filemtime( $bootstrap_diy_css_path );
            // 构建文件URL
            $bootstrap_diy_css_url = home_url( '/css/bootstrap.css' );
            // 向编辑器添加样式。
            wp_enqueue_style( 
                'bootstrap-editor', 
                $bootstrap_diy_css_url, 
                array(), 
                $version 
            );
        }
    }
}
// 钩子：在编辑器加载资源时执行
add_action( 'enqueue_block_editor_assets', 'add_bootstrap_diy_to_editor' );

// 2. 向文章类型为'bsv5'的前端文章页面引入自定义bootstrap样式表
function add_bootstrap_diy_to_frontend() {
    // 检查是否在单篇文章页面且文章类型是'bsv5'
    if ( is_singular( 'bsv5' ) ) {
        // 获取网站根目录路径
        $bootstrap_diy_css_path = get_home_path() . 'css/bootstrap.css';
        // 检查文件是否存在，存在才引入
        if ( file_exists( $bootstrap_diy_css_path ) ) {
            // 获取文件修改时间用于版本控制
            $version = filemtime( $bootstrap_diy_css_path );
            // 构建文件URL
            $bootstrap_diy_css_url = home_url( '/css/bootstrap.css' );
            // 向前端添加样式
            wp_enqueue_style( 
                'bootstrap-frontend', 
                $bootstrap_diy_css_url, 
                array(), 
                $version 
            );
        }
    }
}
// 钩子：在前端加载资源时执行
add_action( 'wp_enqueue_scripts', 'add_bootstrap_diy_to_frontend' );

代码说明

• get_home_path() 函数：用于获取 WordPress 安装的根目录路径。这可能需要在您的 functions.php 文件顶部（在 <?php 之后）添加以下代码 if it’s not already available：
  php if ( ! function_exists( 'get_home_path' ) ) { require_once ABSPATH . 'wp-admin/includes/file.php'; }
• 文件存在性检查 (file_exists): 在尝试加入样式表之前，代码会检查 bootstrap-diy.css 文件是否存在，以避免不必要的错误。
• 版本控制 (filemtime): 使用文件的最后修改时间作为版本号，可以确保在您更新 CSS 文件后，浏览器能加载最新的样式，而不会使用缓存的旧版本。
• 条件逻辑:
  • 对于编辑器 (enqueue_block_editor_assets 钩子)，检查是否在管理后台且当前全局 $post 对象的类型为 bsv5。
  • 对于前端 (wp_enqueue_scripts 钩子)，使用 is_singular( 'bsv5' ) 来检查当前是否正在显示一篇单独的 bsv5 类型文章。

注意事项

1. 路径正确性: 请确保 bootstrap-diy.css 文件确实位于您网站的根目录下的 /skint/css/ 文件夹中。get_home_path() 获取的是服务器上 WordPress 安装的绝对路径（例如 /home/user/public_html/）。
2. 缓存问题: 修改代码和 CSS 文件后，由于浏览器、插件或服务器缓存，您可能无法立即看到变化。请尝试清除所有相关的缓存。
3. 执行顺序和依赖: 此代码将您的自定义 Bootstrap 样式表作为独立的样式表加入。如果它需要覆盖其他 Bootstrap 样式的规则，请确保其选择器的特异性足够高，或者考虑使用 !important（不推荐大量使用）。
4. 主题兼容性: 此代码假设您的主题支持并正确使用了标准的 WordPress 样式表排队系统。绝大多数现代主题都是如此。
5. 子主题建议: 强烈建议在子主题的 functions.php 文件中进行此类修改，以防止主题更新时您添加的代码被覆盖。
6. 插件冲突: 如果您使用了某些优化、缓存或资源管理插件，它们可能会干扰样式表的加载。如果遇到问题，请尝试暂时停用相关插件以排查。

替代方案

除了直接修改代码，您也可以考虑使用类似 WP Add Custom CSS 这样的插件。这类插件通常允许您针对不同的文章类型或单个文章页面添加自定义 CSS 规则或样式表。如果您不习惯编码，这可能是一个更用户友好的选择。