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

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

评论

如果问这个问题的人是德国人,那么几乎可以肯定“覆盖”的意思是“覆盖”。我以为问题不是说将代码放在custom.css文件中会导致style.css文件被修改。我并不是说这很关键,而是我很困惑,这是我的理解。

#1 楼

如果我想添加另一个CSS文件,通常会添加这段代码。我相信主题制作者希望保留尽可能多的主题布局设计。因此,自定义css文件不会带来太大的伤害。我认为这更多是一个支持问题。借助自定义的CSS文件,制作者可以帮助使用主题的人更加轻松。由于原始的style.css保持不变,因此主题制作者可以在自定义的css文件中查看。

评论


不再是最佳实践了– developer.wordpress.org

–iantsch
16-3-15的7:34

@iantsch为什么不呢?有什么更好的?我找不到更好的东西。

–袋鼠
17年7月3日在19:13

@Kangarooo参见Fil Joseph提供的答案:将要包含在页眉或页脚中的脚本/样式排入队列

–iantsch
17年7月5日在9:01

使用HTTP / 1,最佳做法是将所有基本样式打包到一个最小化的文件中,而不是添加浏览器需要下载和处理的另一个CSS文件。

–安迪
19年2月14日在21:47

就我而言,这是最好的解决方案。

–丰富
19-10-10在1:18

#2 楼

在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'));


评论


添加父style.css的依赖项,以确保mystyle.css在style.css之后加载!

– Sumit
16-3-15的6:41

链接到wp_enqueue_style的wordpress文档

–地雷
16-10-8在15:27

我理解路径部分,但是第一部分,“主题样式”和“我的样式”部分,我可以在其中放置任何内容吗?而在functions.php中,要使它正常工作的总代码是什么?

–布鲁诺·文森特(Bruno Vincent)
17年2月5日在9:30

@BrunoVincent可以将句柄命名为任意名称,只要它是唯一的即可。见文件

–法米
18年2月7日在8:57

#3 楼

激活子主题并在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());
}

中添加以下示例代码

#4 楼

我的建议是使用子主题。
实现起来非常容易,您所做的所有修改(包括样式)都与原始主题完全隔离。

#5 楼

为防止覆盖主要主题CSS或其他文件,您应始终在WordPress中使用子主题...否则,只会导致严重的头痛和问题。

https:// codex.wordpress.org/Child_Themes

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

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

custom.css文件有很多主题开发人员可以使用的方法...很多人这样做只是为了防止不想使用子主题的客户端编辑主要style.css文件....

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

#6 楼

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

https://codex.wordpress.org/Child_Themes

进行此操作路线,您稍后会感谢您。

评论


那并不能真正回答问题。然后,您可能需要解释如何在子主题中添加样式表。

– kaiser
16年3月15日在16:48

#7 楼

如果您想保留HTML。
可以将其添加到CSS文件中。我认为这更好。

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


还可以根据您的主题与子主题和父主题配合使用。

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

评论


css不能按顺序工作,它基于规则的特殊性;当您具有相同特异性的规则时,它只会倒退到最后一个覆盖先前的覆盖

–srcspider
2013年9月4日下午14:36

你是对的,这就是我的意思。我的顺序指的是覆盖。而不是整个CSS。

– woony
2014年1月24日,11:56

#8 楼

最好的方法是将所有排队的样式组合成一个函数,然后使用wp_enqueue_scripts操作对其进行调用。将定义的函数添加到主题的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' );


请注意:

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

|附加的基本功能:wp_enqueue_style()函数可能具有5个参数:
这样-
wp_enqueue_style($ handle ,$ src,$ deps,$ ver,$ media);
在WP编码的现实世界中,通常我们还以这种方式在该函数内添加javascript文件/ jQuery库:

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


第5个参数true / false是可选的(第2、3和4个参数也是可选的),但非常必要,当我们将布尔参数设为true时,它允许我们将脚本放在页脚中。

#9 楼

转到外观>从WordPress仪表板编辑CSS。


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


现在粘贴您的CSS直接使用默认文字。您可以删除默认文本,以便CSS仅出现在编辑器中。然后保存样式表,您的CSS就会生效。

#10 楼

如果要避免Web浏览器缓存问题,则需要包含文件版本,如本示例所示。

wp_enqueue_style ('theme-style', get_template_directory_uri().'/path/to/css/style.css?v=' . filemtime(get_template_directory() . '/path/to/css/style.css'));


在这种情况下,我写了最后一个修改UNIX时间中的日期作为查询参数。