如何在主题中添加自定义CSS文件？

一些主题要求您不要编辑style.css文件，而要使用custom.css文件。如果在custom.css上编写代码，它将覆盖style.css中相同的元素样式。我认为这样做是为了防止主题更新时丢失用户样式，是吗？

如何运作？他们是否已在其主题中包含custom.css文件？但是该文件如何包含在主题中，以便主题首先在custom.css中寻找样式？谢谢。

如果要添加另一个CSS文件，通常会添加这段代码

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/my_custom_css.css" type="text/css" media="screen" />

我相信主题制作者希望保留尽可能多的主题布局设计。因此，自定义css文件不会带来太大的伤害。我认为这更多是一个支持问题。借助自定义的CSS文件，制作者可以帮助使用主题的人更加轻松。因为原始的style.css未被更改，所以主题制作者可能可以在自定义css文件中查看。

在WordPress中使用@import添加自定义CSS不再是最佳实践，但是您可以使用该方法来实现。

最佳做法是使用functions.php wp_enqueue_style()中的函数。

范例：

wp_enqueue_style ('theme-style', get_template_directory_uri().'/css/style.css');
wp_enqueue_style ('my-style', get_template_directory_uri().'/css/mystyle.css', array('theme-style'));

激活子主题，并在function.php中添加以下示例代码

add_action( 'wp_enqueue_scripts', 'child_enqueue_styles');

function child_enqueue_styles() {

wp_enqueue_style( 'reset-style', get_template_directory_uri() . '/css/reset.css', array());
}

我的建议是使用儿童主题。它非常容易实现，您所做的所有修改（包括样式）都与原始主题完全隔离。

为了防止覆盖主要主题CSS或其他文件，您应该始终在WordPress中使用子主题...否则，只会导致您头疼不已，并会遇到很多问题。

https://codex.wordpress.org/Child_Themes

...设置子主题非常容易，因此没有理由不应该使用子主题。

然后，使用子主题将使您可以覆盖所需的任何主要父主题文件，只需将其从父主题复制到您的子主题中，或者通过创建具有相同名称的新文件即可。

关于custom.css文件，主题开发人员可以通过多种方式来处理此问题……很多人只是为了防止不想使用子主题的客户端来编辑主style.css文件而已。

无论哪种方式，您都不必担心，只要您使用子主题，就不必担心以后再更新主题并丢失更改...养成始终使用子主题的习惯，您我保证，稍后会感谢我。

如果您想离开您的HTML。您可以将此添加到您的css文件。我认为这更好。

@import url("../mycustomstyle.css");

也取决于您的主题，它将适用于儿童和父母主题。

-请记住，css按顺序工作（当使用相同级别的标识符时，已经使用过），因此文件中的最后一个将被覆盖。因此，如果要覆盖内容，请将customstyle导入置于底部。

最好的方法是将所有排队的样式组合为一个函数，然后使用wp_enqueue_scriptsaction进行调用。将定义的函数添加到主题设置的functions.php中，位于初始设置下方。

代码块：

function add_theme_scripts() {
    wp_enqueue_style( 'style', get_template_directory_uri() . '/css/style.css' );
    wp_enqueue_style ( 'custom', get_template_directory_uri () . '/css/custom.css', array( 'style' ) );
}
add_action ( 'wp_enqueue_scripts', 'add_theme_scripts' );

请注意 ：

第三个参数是依赖项数组，它表示此样式表是否依赖于另一个样式表。因此，在我们上面的代码中，custom.css依赖于style.css

|
附加的Basic：
wp_enqueue_style()函数可能具有5个参数：像这样-wp_enqueue_style（$ handle，$ src，$ deps，$ ver，$ media）;
在WP Coding的现实世界中，通常我们还会在该函数内添加javascript文件/ jQuery库，如下所示：

wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);

第5个参数true / false是可选的（第2、3和4个参数也是可选的），但是非常必要，当我们使用boolean参数为true时，它允许我们将脚本放在页脚中。

从WordPress控制台转到外观>编辑CSS。

这是带有基本CSS编辑器的屏幕。

现在，将您的CSS直接粘贴到默认文本。您可以删除默认文本，以便CSS仅出现在编辑器中。然后保存样式表，您的CSS将生效。

使用儿童主题。这是你最好的选择。这样，如果主题曾经更新过，您将不会覆盖已创建的样式表。

https://codex.wordpress.org/Child_Themes

走这条路，您稍后会感谢您。