覆盖插件的CSS设置

时间:2013-07-11 作者:Oliver Watkins

我想覆盖我的插件CSS设置,但在我的style.css 文件,因为插件CSS在之后加载。

有没有一种方法可以应用样式来覆盖插件CSS?

3 个回复
SO网友:Stephen Harris

了解开发人员认为哪个答案“更好”会很有趣,因此可以替代Johanne的答案(如果插件延迟加载脚本,或者在没有警告的情况下开始移动脚本,则可能会带来困难)

如果已在中包含所有必要的样式,请阻止加载样式表style.css 然后可以防止加载插件的样式表:

add_filter( \'style_loader_tag\', \'wpse106104_disable_stylesheet\', 10, 2 );
function wpse106104_disable_stylesheet( $link_tag, $handle ){

    if( \'plugin-script-handle\' == $handle ){
         $link_tag = false;
    }
    return $link_tag;
}
这样做的优点是不需要加载额外的样式表,但插件的CSS随后会包含在所有页面加载中,因此这可能并不理想。

替换样式表

否则,您可以将样式表复制到主题中,编辑并确保WordPress使用它:

add_filter( \'style_loader_src\', \'wpse106104_replace_stylesheet\', 10, 2 );
function wpse106104_replace_stylesheet( $stylesheet_src, $handle ){

    if( \'plugin-script-handle\' == $handle ){
         $stylesheet_src = get_template_directory_uri() . \'/css/themes-copy-of-plugin.css\';
    }
    return $stylesheet_src;
}

SO网友:Johannes Pille

在wp\\u head/wp\\u footer操作后包含覆盖

插件的样式表很可能使用WordPress插入到页面中enqueue functions.

如果是这样,脚本和样式表将添加到wp_head() 位于(通常是主题的头文件php,默认位置)或wp_footer() 分别是(如果在队列参数中指定,则通常是主题的footer.php文件)。

因此,如果您想覆盖插件css,则应在稍后加载负责的样式表。

按照将图纸插入页眉的默认选项,页眉代码的模拟片段可能如下所示:

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo(\'template_url\'); ?>/css/reset.css?ver=1.0" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo(\'stylesheet_url\'); ?>?ver=1.0" />
<link rel="pingback" href="<?php bloginfo( \'pingback_url\' ); ?>" />

<?php wp_head(); ?>

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo(\'template_url\'); ?>/css/plugin-override.css?ver=1.0" />
或者,您可以(应该)自己用覆盖正确地将样式表排队,并使其依赖于插件的样式表(WP将在依赖之后加载)。

为了能够做到这一点,您必须检查插件代码,并找到样式表的句柄,以便在注册自己的插件代码时将其作为依赖项引用
cd /path/to/plugin && grep -r wp_enqueue_style . 从一个*nix shell可以帮助你。

然后,在主题的函数中。php文件,您可以添加以下内容:

add_action( \'wp_enqueue_scripts\', \'wpse_register_plugin_override\' );

function wpse_register_plugin_override() {
    wp_register_style(
        \'wpse-plugin-override\', /* your handle */
        get_template_directory_uri() . \'/css/plugin-override.css\', /* the file */
        array( \'the-plugins-stylesheet-handle\' ), /* dependency */
        1.0 /* version of your stylesheet */
    );
    wp_enqueue_style( \'wpse-plugin-override\' );
}

SO网友:user156

例如,如果您只想重写一个类.plugin-class {width: 100px;}, 只需将相同的类添加到style.css 文件和添加!对它很重要,这将覆盖它。

.plugin-class { width:200px !important;}

结束

相关推荐

Plugins_url(‘’,__FILE__)!=带有sym链接的WP_plugin_URL

对于我的众多网站之一,plugins/plugin-name 是指向的符号链接universal-install/wp-content/plugins/plugin-name.echo WP_PLUGIN_URL 显示我期望的内容echo plugins_url(); 显示我期望的内容echo plugins_url(\'\',__FILE__) 显示我期望的内容,后跟指向通用插件目录的绝对路径。我有什么办法可以解决吗echo plugins_url(\'\',__FILE__) 仅返回预期结果?