将自定义 css 添加到默认 style.css（下划线 _S Wordpress 主题）？答案

【问题标题】：Adding custom css to default style.css (Underscores _S Wordpress theme)?将自定义 css 添加到默认 style.css（下划线 _S Wordpress 主题）？
【发布时间】：2021-06-21 16:50:28
【问题描述】：

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

但是，我似乎无法在 style.css 中获取某些属性来更改 html。例如，我正在尝试将以下 <h1> 标记设置为红色。但它不会改变。

<h1 id="testOfContent">Test</h1>

CSS（在下划线提供的style.css文件中）：

#testOfContent {
    color: red;
}

但是，字体仍然是黑色的。你如何操纵一个 wordpress 主题（尤其是 _S 下划线，它是可定制的）来使用你自己的 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' );

【问题讨论】：

您始终可以使用浏览器的开发工具来确定哪些样式应用于特定元素（哪些不应用）以及它们的位置。例如火狐：getfirebug.com/css
尝试h1#testOfContent 而不是#testOfContent。您需要确保两件事中的一个或两个：使您的规则至少与您要覆盖的规则一样具体；如果它不是更多具体的，请确保它在其他规则之后加载。
@connexo，不幸的是没有运气。甚至尝试添加 !important 只是为了看看是否有什么可以让它工作。
您有该网站的链接？或者到可以在其中找到此类元素的实际模板？
@connexo 不幸的是我没有。该站点目前仅在本地运行。我在上面发布的带有<h1> 标签的代码 sn-p 在我的header.php 中。我已经尝试将此 sn-p 发布在其他文件中，但仍然无济于事。很明显，有什么东西干扰了我的 CSS，因为我在另一个网站（基本的 html/css 文件组合）上尝试过这个并且效果很好。

标签： html css wordpress wordpress-theming underscores-wp

【解决方案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 Sass，因为 Bootstrap 4 是用 Sass 编写的。如果你更喜欢使用 Bootstrap 3，你也可以找到它的 Sass 端口。

如果您不确定如何构建 Sass，我为 Sassify 选项整理了一个 Webpack 4 开发工作流程，该选项包含在下划线 Wordpress 入门主题中。希望这有助于https://jimfrenette.com/2018/08/completely-blank-no-css-_s-wordpress-starter-theme/

【讨论】：

【解决方案3】：

如果您使用的是 Chrome，请尝试清除缓存 (ctrl+F5)。
或打开开发工具>设置>首选项>网络>禁用缓存（当开发工具打开时）

【讨论】：

【解决方案4】：

你可以试试这个：

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

【讨论】：