Plugin CSS not enqueing

时间:2017-02-22 作者:Development SideShow Media

很抱歉,如果有答案的话,这已经是一个重复的问题,我已经花了3天时间尝试以WordPress允许的方式应用CSS样式,很可能我已经开始“代码盲”了

我正在开发一个插件来显示用户生成的内容和所提供服务的平均评级。所有数据都来自其他地方托管的XML文件,一切都很好!现在,当我想将插件发布到WordPress以便其他人可以使用它时,我必须对代码进行一些更改,他们不允许我使用<style><link> CSS的标记。

CSS中的一些选项基于用户在插件的选项页面中设置的设置,我尝试了几种方法使其工作,但无法正确加载样式。

由于用户可以进行的设置,我将CSS文件制作成PHP文件(这样我就可以将所有内容保持在同一位置)。

在主插件文件中,我有以下几行代码:add_action( \'admin_enqueue_scripts\', \'kvssm_enqueue_styles\' ); 我试过这个wp_enqueue_scripts 以及不应用样式的相同结果。

正在调用的函数:

function kvssm_enqueue_styles(  ) {
    wp_enqueue_style( \'reviewCSS\', plugins_url( \'/review-style.php\', __FILE__ ), array(), null );
    wp_enqueue_style( \'widgetCSS\', plugins_url( \'/widget-style.php\', __FILE__ ), array(), null );
}
我已经尝试了此函数的多次迭代,包括wp_register_style

我尝试的最后一种方法是在css中。php添加以下行:

<?php
header( \'Content-type: text/css\' );
header( \'Cache-control: must-revalidate\' );

include( \'ssm-klantenvertellen.php\' );

$dir       = kvssm_get_directory(  );
$kvOptions = kvssm_get_options_kvssm(  );
$pvOptions = kvssm_get_options_pvssm(  );
?>
我正在尝试应用CSS,如下所示:

color: <?php echo $kvOptions[ \'kvssm_color_field_2\' ]; ?>;
但是,最后一个方法无法工作,因为出现致命错误include causes,add\\u action未被识别为函数,这是我使用include 如果我将这些函数放置在css.php 相反,它仍然会导致致命错误,这一次是因为plugins_url() 未被识别。

三大功能:

function kvssm_get_directory(  ) {
    $dir     = plugins_url( __DIR__ );
    $dirA    = explode( \'public_html\', $dir );
    $dir     = $dirA[ 1 ];
    return $dir;
}

function kvssm_get_options_kvssm(  ) {
    $options = get_option( \'kvssm_settings\' );
    return $options;
}

function kvssm_get_options_pvssm(  ) {
    $options = get_option( \'pvssm_settings\' );
    return $options;
}
有人知道我应该如何设置CSS以使其正确显示吗?一些可能很重要的功能:

插件添加了一个短代码,该短代码返回一个结果,该结果应附有CSS。后端的设置页面包括使用do_shortcode()

1 个回复
最合适的回答,由SO网友:Nathan Johnson 整理而成

如果要添加内联CSS,请使用wp_add_inline_style().

<?php
/**
 * Plugin Name: WPSE 257470
 * Description: WordPress StackExchange question 257470
 * Plugin URI: https://wordpress.stackexchange.com/questions/257470/
 * Author: Nathan Johnson
 * Licence: GPL2+
 * Licence URI: https://www.gnu.org/licenses/gpl-2.0.en.html
 */

//* Don\'t access this file directly
defined( \'ABSPATH\' ) or die();

if( ! class_exists( \'wpse_257470\' ) ):
  class wpse_257470 {
    public function plugins_loaded() {
      add_action( \'wp_enqueue_scripts\', [ $this, \'wp_enqueue_scripts\' ] );
    }

    public function wp_enqueue_scripts() {
      //* It\'s necessary to have a \'base\' CSS file that we can attach to
      wp_enqueue_style( \'wpse-257470\', plugin_dir_url( __FILE__ ) . \'style.css\' );
      $color = \'#257470\';
      $custom_css = ".custom_color { color: $color };";
      wp_add_inline_style( \'wpse-257470\', $custom_css );
    }
  }
  add_action( \'plugins_loaded\', [ new wpse_257470(), \'plugins_loaded\' ] );
endif;

相关推荐

如何将.css文件应用于虚拟页面?

如果使用以下插件在保持主题完整的情况下创建虚拟页面wp-virtual-page-tutorial, 怎么可能。css文件是否应用于此虚拟页面?如何使用将虚拟页名称用作条件的if语句来实现这一点?任何帮助都将不胜感激。以下是创建虚拟页面的代码:Class VPTutorial { function __construct() { register_activation_hook( __FILE__, array( $this, \'activate\' ) );&#