关于如何在WordPress主题中适当添加2个css文件的一些问题?

时间:2014-01-20 作者:AndreaNobili

我在加载CSS时遇到以下情况。

我有一个WordPress主题style.css 通过此代码将设置文件导入myfunctions.php 文件:

/* Function automatically executed by the hook:
 * 1) (OPTIONAL): Register a script (without load it): in this case register the CSS settings
 * 2) Load the CSS settings

 */
function wpb_adding_styles() {
    wp_register_style(\'my_stylesheet\', get_template_directory_uri() . \'/style.css\');
    wp_enqueue_style(\'my_stylesheet\');
}

/* Hooks a function on to a specific action (an action is a PHP function that is executed at specific
 * points throughout the WordPress Core)
 * @param \'wp_enqueue_scripts\': The name of the action to which \'wpb_adding_styles\' is hooked (wp_enqueue_scripts
 *        is the proper hook to use when enqueuing items that are meant to appear on the front end)
 */
add_action(\'wp_enqueue_scripts\', \'wpb_adding_styles\');
在这个style.css 文件我定义了一些基本的CSS配置,例如主体设置:

body{
    padding:0px;
    margin:0px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
}
然后我创建了一个新的style2.css 要覆盖的设置文件\\将定义的某些属性添加到我的常规style.css, 按照前面的示例,我将添加一个属性,即主体背景必须为黑色,类似于:

body {
    ........
    ........
    ........
    background: #000;
}
好的,我想我需要加载style.css 文件使用style2.css 文件作为其依赖项,阅读文档在我看来,我可以做类似的事情(或者相反?)

function load_theme_styles() { 
    wp_enqueue_style(\'main-css\', get_template_directory_uri() . \'/style.css\', array(), \'1.0\', \'all\');
}
add_action(\'wp_enqueue_scripts\', \'load_theme_styles\');
其中array()不应为空,但必须包含style2.css

将不需要编辑的常规CSS文件(例如CSS框架的CSS文件,例如具有原始设置的BootStrap)与我覆盖要更改的设置的自定义CSS文件分开,这是一个好的解决方案吗?

如果这是一个很好的解决方案,你能告诉我如何传入上一个数组吗style2.css 文件

更新1:我已更改wpb_adding_styles() 这样:我的main-css 取决于style2.css.

function wpb_adding_styles() {

    wp_enqueue_style(\'style2\', get_template_directory_uri() . \'/style2.css\', array(), \'1.0\', \'all\');
    wp_enqueue_style(\'main-css\', get_template_directory_uri() . \'/style.css\', array(\'style2\'), \'1.0\', \'all\');

}
它似乎工作得很好,但我不确定它是否是正确的解决方案,因为如果我删除依赖项,它会再次工作得很好

wp_enqueue_style(\'main-css\', get_template_directory_uri() . \'/style.css\', array(), \'1.0\', \'all\');
Tnx公司

安德烈

2 个回复
最合适的回答,由SO网友:akamaozu 整理而成

看起来您使用依赖关系的方式与使用依赖关系的方式相反。

Wordpress Codex, 他们试图解释应该如何使用它。

$deps (阵列)(可选)

此样式表所依赖的任何样式表的句柄数组。Dependent stylesheets will be loaded before this stylesheet.

自从你style2.css 用于更改style.css, 这意味着style2.css 取决于style.css.

您的代码应该是这样的:

function wpb_adding_styles() {

    wp_enqueue_style(\'main-css\', get_template_directory_uri() . \'/style.css\', array(), \'1.0\', \'all\');
    wp_enqueue_style(\'style2\', get_template_directory_uri() . \'/style2.css\', array(\'main-css\'), \'1.0\', \'all\');
}
希望这有帮助!

SO网友:Josh

数组应该包含style2的句柄。css。当您将第一个样式排队时,您使用的是主css,但您必须事先定义该句柄。

在css中处理继承和覆盖是一个很好的工作流是的。尤其是像boostrap这样的框架。这就是问题的关键所在。你有一个很好的基础,你可以在需要的地方轻松地扩展或修改。

当您使用诸如SASS之类的工具时,效果会更好,因为您包含的css文件现在都被压缩到一个压缩文件中。http://sass-lang.com/

干杯

结束

相关推荐

如何根据在主题定制器中点击的选项来实时加载css?

我有个问题。我正在尝试让主题定制器根据单击的无线电输入加载不同的CSS文件,live!目前为止,该选项在我单击“保存和发布”时保存,只有在手动重新加载整个自定义程序页面时才会加载。预览面板会在选择时刷新,但不会加载选定的CSS,我不知道是什么让Twenty Eleven这样做,但我也希望它这样说。我已经查看了Twentyeleven主题来编写此代码。区别在于:主题使用option 用于设置,而不是theme_mod 对于它来说,它有一些设置处理,但我认为这是针对其单独的主题选项页面,我不希望这样</