我最近发布了一个插件WP Coda Slider,该插件使用短代码将jQuery滑块添加到任何帖子或页面。我要在下一版本中添加一个选项页面,并且我想包括一些CSS选项,但是我不希望插件将样式选项添加为内联CSS。我希望选择在调用时动态添加到CSS文件中。

我也想避免使用fopen或写入文件来解决安全问题。

这样的事情很容易实现,或者我最好添加样式选择直接进入页面?

评论

@Chris_O:我一直在思考几乎完全相同的事情。我想要的是一种使用函数名而不是文件名来调用wp_enqueue_style()(和wp_enqueue_script())的方法,让我的函数生成CSS(或JS),但最终还是通过链接的样式表将其包括在内。据我所知,使用wp_equeue _ *()函数是不可能的。也许我们应该提交示踪票?

@MikeSchinkel:那是使用wp_enqueue函数的非常合乎逻辑的方法。我会在票证上添加支持。

@Chris_O:我刚刚看到了@Doug的回答;我做了一个错误的假设,您已经知道这一点。如果我意识到情况并非如此,我会向您指出:wordpress.stackexchange.com/questions/556/#562

@MikeSchinkel我知道wp_register和wp_enqueue。我一直在寻找一种基于插件选项页面中的值构建样式表的方法。

@Chris_O:啊。我喜欢把自己想象成一个人,即使我学会了解决方案,他仍然可以看到其他人在解决方案中所缺少的东西(即,大多数专家不是好老师,尽管我不是最好的专家,但我通常还是个好老师。 )太太,这是我想念的,对不起。 :)

#1 楼

使用wp_register_stylewp_enqueue_style添加样式表。不要简单地将样式表链接添加到wp_head。排队样式允许其他插件或主题在必要时修改样式表。

您的样式表可以是.php文件:

wp_register_style('myStyleSheet', 'my-stylesheet.php');
wp_enqueue_style( 'myStyleSheet');


my- stylesheet.php看起来像这样:

<?php
// We'll be outputting CSS
header('Content-type: text/css');

include('my-plugin-data.php');    
?>

body {
  background: <?php echo $my_background_variable; ?>;
  font-size: <?php echo $my_font_size; ?>;
}


评论


另外-由于只有在更改选项页上的值时这些值才会更改-您可以在保存时生成CSS文件。您也可以将CSS文件存储在plugin目录中,因此与在包含include等的每个CSS请求上运行PHP文件相比,这样做的性能更高。

– hakre
2010年9月7日在21:44

谢谢!运作良好。但是我得到了致命错误get_option()...未定义。然后,我加载了wp-config.php文件,然后解决了该问题。

– Sumith Harshan
2014年1月2日,13:43



Sumith,您能解释一下如何在自定义CSS文件中使用get_option吗?非常感谢!

– Antonio Petricca
2015年9月9日,11:50

#2 楼

动态构建CSS文件然后加载它会给添加CSS文件带来非常低的带宽负担,这会增加巨大的性能负担,尤其是在CSS中有一些变量需要通过WP处理的情况下。因为是为一页加载而创建的两个不同文件,所以WP会启动两次,并两次运行所有数据库查询,这很麻烦。

如果滑块仅位于一页上,并且您希望动态设置样式,那么最好的选择是在标题中添加样式块。

按性能顺序:


添加小标头中的样式块,
动态创建-非常快
通过
wp_enqueue_style添加非动态样式表-中
通过
wp_enqueue_style添加动态样式表-非常慢


评论


@ Dan-gayle很好。该插件可以在一页以上的页面上使用,有些用户在2页或3页上使用它。它仅将当前的静态样式表和js放入具有短代码的页面上。

– Chris_O
2010-09-07 17:25

我同意丹·盖尔(Dan Gayle)的观点,即使您投票赞成我的回答。在wp_head上添加一个小的CSS块比在每个页面视图上下载一个单独的样式表要好得多(即使仅限于使用简短代码的少数帖子/页面)。首先使用单独的样式表的唯一原因是浏览器可以缓存它们。动态样式表不能被缓存。

–道格
2010-09-07 17:56

这仍然是正确的处理方式吗?

–戴夫·基斯
13年5月21日在14:26

#3 楼

这是我通常的做法:

function build_stylesheet_url() {
    echo '<link rel="stylesheet" href="' . $url . 'stylesheetname.css?build=' . date( "Ymd", strtotime( '-24 days' ) ) . '" type="text/css" media="screen" />';
}

function build_stylesheet_content() {
    if( isset( $_GET['build'] ) && addslashes( $_GET['build'] ) == date( "Ymd", strtotime( '-24 days' ) ) ) {
        header("Content-type: text/css");
        echo "/* Something */";
        define( 'DONOTCACHEPAGE', 1 ); // don't let wp-super-cache cache this page.
        die();
    }
}

add_action( 'init', 'build_stylesheet_content' );
add_action( 'wp_head', 'build_stylesheet_url' );


#4 楼

我在处理此类问题的所有建议时遇到了困难-也许我有点胖,或者贡献者失去了共同的感觉。

我决定在插件php文件中对此进行编码:-

echo "<link href='http://www.brittany-gite-holidays.co.uk/wp-content/plugins/flexavailability/css/css.css' type='text/css' rel='stylesheet' />";
echo "<link href='http://www.brittany-gite-holidays.co.uk/wp-content/plugins/flexavailability/css/public.css' rel='stylesheet' type='text/css'/>";


似乎有效。它只会在使用该插件的页面上加载。它在h1标签之后加载,这对我来说很好。我看不出它会更有效或更清晰。

....但是也许我错了-我确实说我有点胖。

评论


您只应在页面标题中加载元素

–乳木果
13年1月18日在20:37

是的。那是因为您的CSS希望影响从页面顶部向下的所有内容。我很高兴只影响h1标签之后的内容。我无法使任何示例正常工作(我认为它们可能无法正确解释)。您可以在一些测试html上自己尝试一下。如果我错了告诉我:)

–薄饼
2013年1月19日18:56

@chazza这不是唯一的原因。当浏览器在编写body标签之后检测到任何样式时,它将停止执行任何其他操作,直到加载和应用该样式为止,这对性能不利,并导致屏幕重排和未样式化文本的闪烁。但是,如果这并不重要,请像您所说的那样放入这些css文件。我无时无刻不在做,最终还是可以的。不是最佳,但很好。

–丹·盖尔(Dan Gayle)
16-2-1在19:40



#5 楼

自Wordpress 3.3起进行更新

有一个名为wp_add_inline_style的函数,该函数可用于根据主题/插件选项动态添加样式。这可以用来在头部添加一个小的css文件,该文件应该快速有效。

<?php
function myprefix_scripts() {

    wp_enqueue_style('name-of-style-css', plugin_dir_path(__FILE__) . '/css/ccsfilename.css');

    $css = get_option( 'loader_css', 'default css goes here for when there is no value' );

    //or for Example
    $color = get_option( 'custom_plugin_color', 'red' ); //red is default value if value is not set
    $css = ".mycolor{
                background: {$color};
           }";

    wp_add_inline_style('name-of-style-css', $css);

}

add_action( 'wp_enqueue_scripts', 'myprefix_scripts' );