WP插件使用wp_enqueue_style未加载CSS样式求助

我开发了一个简单的WordPress插件，通过短代码显示欢迎区域。插件文件结构是：custom-welcome-plugin文件夹下包含custom-welcome-plugin.php和style.css。

插件代码详情 #

主文件（custom-welcome-plugin.php） #

<?php
/*
Plugin Name: Custom Welcome Plugin
Description: Display custom welcome section with shortcode.
Version: 1.0
Author: Your Name
*/

// Enqueue styles
function custom_welcome_enqueue_style() {
    wp_enqueue_style('custom-welcome-style', plugin_dir_url(__FILE__) . 'style.css');
}

add_action('wp_enqueue_scripts', 'custom_welcome_enqueue_style');

// Shortcode function
function custom_welcome_shortcode() {
    ob_start(); // Start output buffering
    ?>

    <!-- Welcome Section -->
    <div class="welcome-section">
        <span class="welcome-header">Welcome to Our Website</span><br><br>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore
            magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat.<br><br>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore
            magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore
            magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat.
        </p><br><br>
        <button class="read-more-btn">READ MORE</button>
    </div>

    <?php
    return ob_get_clean(); // Return buffered content
}

// Register shortcode
add_shortcode('custom_welcome', 'custom_welcome_shortcode');
?>

样式文件（style.css） #

.welcome-section {
      padding: 80px;
      text-align: center;

    }

    .welcome-header {
      font-size: 36px;
     
    }

    .read-more-btn {
      background-color: #ffffff;
      color: #1ca2d5;
      padding: 10px 20px;
      border: solid 1px #1ca2d5;
      font-size: 16px;
    }

我在主题的index.php里用这段代码调用短代码：

<?php
 // Display the welcome section using the shortcode
 echo do_shortcode('[custom_welcome]');
?>

问题：欢迎区域内容正常显示，但CSS样式完全不生效。

排查步骤 #

1. 检查样式文件是否加载成功
   打开浏览器F12开发者工具，切换到「网络」标签，刷新页面后搜索style.css：

   • 找不到文件或返回404，说明路径错误；
   • 文件能正常加载，就接着排查样式优先级问题。

2. 验证样式文件路径是否正确
   在custom_welcome_enqueue_style函数里加一行调试代码，把生成的URL输出到WP日志：

   function custom_welcome_enqueue_style() {
       $style_url = plugin_dir_url(__FILE__) . 'style.css';
       error_log('Custom Welcome Style URL: ' . $style_url);
       wp_enqueue_style('custom-welcome-style', $style_url);
   }
   

   开启WP_DEBUG后查看日志，确认URL是否指向正确的文件位置。

3. 检查样式是否被主题覆盖
   用开发者工具查看元素的计算样式，看看插件的CSS是不是被主题的样式给覆盖了。

解决方案 #

方案1：修复样式文件路径 #

如果路径不对，换成plugins_url()函数生成路径，它能自动适配插件目录结构：

function custom_welcome_enqueue_style() {
    wp_enqueue_style('custom-welcome-style', plugins_url('style.css', __FILE__));
}

方案2：提高样式优先级 #

要是样式被主题覆盖，要么给选择器加更具体的层级，要么临时用!important排查（不推荐长期用）：

更具体的选择器写法

div.welcome-section {
    padding: 80px;
    text-align: center;
}

.welcome-section .welcome-header {
    font-size: 36px;
}

.welcome-section .read-more-btn {
    background-color: #ffffff;
    color: #1ca2d5;
    padding: 10px 20px;
    border: solid 1px #1ca2d5;
    font-size: 16px;
}

临时用!important（仅排查用）

.welcome-section {
    padding: 80px !important;
    text-align: center !important;
}

.welcome-header {
    font-size: 36px !important;
}

.read-more-btn {
    background-color: #ffffff !important;
    color: #1ca2d5 !important;
    padding: 10px 20px !important;
    border: solid 1px #1ca2d5 !important;
    font-size: 16px !important;
}

方案3：调整钩子加载优先级 #

有时候主题会影响wp_enqueue_scripts钩子的触发，给add_action加个优先级参数，调整加载顺序：

add_action('wp_enqueue_scripts', 'custom_welcome_enqueue_style', 100); // 数值越大加载越晚，可根据情况调整

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