是否将自定义CSS添加到默认style.css(下划线_S WordPress主题)？

我目前正在_S Underscores WordPress主题之上构建自定义主题。我立即要做的一件事就是删除style.css文件中的所有内容, 因为我想创建自己的样式(主要是使用Bootstrap)。

但是, 我似乎无法在style.css中获得某些属性来对html进行更改。例如, 我试图将以下<h1>标记设置为红色。但这不会改变。

<h1 id =” testOfContent”>测试</ h1>

CSS(在Underscores提供的style.css文件中)：

#testOfContent {
    color: red;
}

但是, 字体保持黑色。你如何操作wordpress主题(尤其是_S Underscores, 它是可自定义的)以使用自己的CSS？关于它为什么不注册我自己的CSS的任何想法？

这是我的functions.php文件以及如何加载脚本：

function tlas_css() {
    // Enqueue bootstrap css
    wp_register_style('bootstrap-css', get_template_directory_uri() . '/bootstrap-3.3.4/css/bootstrap.min.css');
    wp_enqueue_style('bootstrap-css');

    // Enqueue custom stylesheet
    wp_enqueue_style( 'tlas-custom-style', get_template_directory_uri() . '/css/tlas.css' );
    wp_enqueue_style( 'tlas-style', get_template_directory_uri() . '/style.css');
}
add_action( 'wp_enqueue_scripts', 'tlas_css' );

#1

你应该使用wp_enqueue_style(‘your-style’, get_stylesheet_uri());检索当前主题样式表的URI。

在codex.wordpress.org上阅读更多内容

#2

我更喜欢自定义并添加到_s主题的CSS的工作流程是通过编辑.scss Sass文件。确保选择”高级选项”, 以便你可以勾选_sassify！如果在https://underscores.me/#generator上使用_s主题生成器, 则选中该复选框

然后, 由于Bootstrap 4是用Sass编写的, 因此你可以导入所需的Bootstrap Sass。如果你喜欢使用Bootstrap 3, 也可以找到它的Sass端口。

如果你不确定如何构建Sass, 我会为下划线Wordpress入门主题中包含的Sassify选项放一个Webpack 4开发工作流程。希望这对https://jimfrenette.com/2018/08/completely-blank-no-css-_s-wordpress-starter-theme/有帮助

#3

你可以尝试以下一种方法：

   add_action( 'wp_enqueue_scripts', 'yourstyle' );
    function yourstyle() {
      wp_enqueue_style( 'yourstyle', get_template_directory_uri() . '/css/yourstyle.css', array(), PARENT_THEME_VERSION );
    }