Style.css 未在 wordpress 插件中加载答案

【问题标题】：Style.css is not loaded in wordpress pluginStyle.css 未在 wordpress 插件中加载
【发布时间】：2021-02-14 12:59:04
【问题描述】：

我正在尝试一个插件测试，其中我创建了一个简单的插件，当我在编辑器中将文本包装在一个短代码中时，它将用一个类将文本包装在 <span> 元素中。

它有效。但该插件的 style.css 文件中的 css 样式未应用。

插件脚本是这样的：

class shs_wrap {
    
    /*Create shortcode [wrap]*/
    function shs_wrap() {
        add_shortcode( 'wrap', array( &$this, 'shortcode' ) );
        add_action( 'wp_enqueue_scripts', array( $this, 'style' ) );
    }
        
    /*Run the shortcode*/
    function shortcode( $atts , $content = null) {
        
        /*If the "class" is forgotten in the shortcode, abort*/
        if( empty(preg_quote($atts['class'])) || empty($content))
            return;
        
        /*Prepare output*/
        $output = "<span class='".$atts['class']."'>" . $content . "</span>";
        
        return $output;

    }
    
    /*Add styling from the css-file*/
    function style() {
        wp_register_style( 'style', plugins_url( 'style.css', __FILE__ ));
        wp_enqueue_style( 'style' );
    }

}

new shs_wrap();

写作时

这里有一些文字[wrap class="test"]这里有一些包装的文字[/wrap]这里有一些文字

我只是希望输出是：

这里有一些文字<span class="test">这里有一些包装的文字</span>这里有一些文字

我上面的脚本有效，我可以在源代码中看到 <span> 元素已正确添加到其类 - 这是检查工具的屏幕剪辑：

不过，style.css 文件中的 css 样式并未加载。屏幕上的输出未设置样式，并且从不添加样式文件。样式文件与 php 文件位于同一位置（称为 shs-wrap.php）：

它只包含这个很小的 css sn-p：

这里有什么问题？我的样式入队功能是否有错误？我叫错了吗？

【问题讨论】：

正在确认...所以在引用您的style.css的源html中没有<link />标签？
@mikerojas 正确，源代码中的这个style.css 文件没有<link> 元素。它似乎根本没有加载。
您是否启用了其他主题或插件来加载自己的样式？我想知道使用style 作为名称是否存在命名冲突（太通用）。让。我知道如果使用更独特的名称my-plugin-test-style 有什么作用吗？

标签： wordpress plugins styles

【解决方案1】：

可能只是我，但我认为您应该使用__construct，如下所示，以及更独特的样式句柄：

class shs_wrap {
    
  /*Create shortcode [wrap]*/
  function __construct() {
    add_shortcode( 'wrap', array( $this, 'shortcode' ) );
    add_action( 'wp_enqueue_scripts', array( $this, 'style' ) );
  }
        
  /*Run the shortcode*/
  function shortcode( $atts , $content = null) {
      
    /*If the "class" is forgotten in the shortcode, abort*/
    if( empty(preg_quote($atts['class'])) || empty($content)) {
      return;
    }
    
    /*Prepare output*/
    $output = "<span class='".$atts['class']."'>" . $content . "</span>";
    
    return $output;

  }
  
  /*Add styling from the css-file*/
  function style() {
    wp_register_style( 'my-plugin-test-style', plugins_url( 'style.css', __FILE__ ));
    wp_enqueue_style( 'my-plugin-test-style' );
  }

}

new shs_wrap();

【讨论】：