如何在主题中添加自定义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文件中查看.

I usually add this piece of code if I want to add another css file

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

I believe the theme makers want to retain as much as possible of the theme's layout design. So a custom css file doesn't hurt much. I think it's more of a support question. With custom css file, the makers can help those who use their themes more easier. Because the original style.css is unaltered, so the theme maker can probably take a look in the custom css file.

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

Using @import in WordPress for adding custom css is no longer the best practice, yet you can do it with that method.

the best practice is using the function wp_enqueue_style() in functions.php.

Example:

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());
}
 

Activate the child theme and add the following example code in the 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());
}

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

My proposal would be to use child themes. It is very easy to implement and all modifications you do (including styles) are completely isolated from the original theme.

如果您想保留HTML. 您可以将此添加到您的css文件.我认为这更好.

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

还可以根据您的主题与子主题和父主题一起使用.

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

If you want to leave your html along. you can add this to your css file. I think this is better.

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

also depending on your theme it will work with child and parent themes.

-- keep in mind, css works sequential (when using the same level of identifier, already used ) , so what is last in your file will overwrite. so put your customstyle import at the bottom if you want to override stuff.

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

https://codex.wordpress.org/Child_Themes

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

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

关于custom.css文件,主题开发人员可以通过多种方式来处理此问题...许多人这样做只是为了阻止那些不想使用子主题的客户,通过编辑主style.css文件....

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

To prevent overwritting of main theme CSS or other files, you should ALWAYS use a child theme in WordPress ... not doing so will only cause you major headaches and problems down the road.

https://codex.wordpress.org/Child_Themes

... and with how easy it is to setup a child theme, there is no reason you shouldn't be using one.

Using a child theme will then allow you to override any of the main parent theme files you want, simply by copying from parent into your child, or by creating a new file with the same name.

Regarding the custom.css file there's numerous ways that theme developers handle this ... a lot of them do this simply to try and prevent clients who don't want to use a child theme, from editing the main style.css file ....

Either way you shouldn't be worried about that, as long as you use a child theme you shouldn't have to worry about updating your theme later on and losing your changes ... get in the habit of always using child themes, you will thank me later, i promise.

最好的方法是将所有排队的样式组合为一个函数,然后使用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' );
 

请注意:

第三个参数是依赖项数组,它引用此样式表是否依赖于另一个样式表.因此,在上面的代码中,custom.css依赖于style.css

|
其他基本信息:
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时,它允许我们将脚本放在页脚中.

The best way is to combine all enqueued styles into a single function and then call them using wp_enqueue_scripts action. Add the defined function to your theme's functions.php somewhere below the initial setup.

Code Block:

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

Please Note :

3rd parameter is the dependency array which refers to whether or not this stylesheet is dependent on another stylesheet. So, in our above code custom.css is dependent on style.css

|
Additional Basic:
wp_enqueue_style() function may have 5 parameters: like this way - wp_enqueue_style( $handle, $src, $deps, $ver, $media );
In real world of WP Coding, usually we also add javascript files/jQuery libraries inside that function like this way:

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

The 5th parameter true/false is optional (2nd, 3rd and 4th params are also opt.) but very essential, it allows us to place our scripts in footer when we use the boolean parameter as true.

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

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

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

Go to Appearance > Edit CSS from your WordPress Dashboard.

Here is the screen with basic CSS editor.

Now paste your CSS directly to the default text. You can delete the default text so that your CSS only appears in the editor. Then save the stylesheet and your CSS will be live.

如果要避免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时间中的最后修改日期作为查询参数.

If you want to avoid web browser cache problems, you need include the file version, like in this example is shown.

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

In this case, I write the last modification date in unix time as a query param.

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

https://codex.wordpress.org/Child_Themes

走这条路,您稍后会感谢您.

Use a child theme. It's your best bet. This way if the theme is ever updated, you won't override the stylesheets you've created.

https://codex.wordpress.org/Child_Themes

Go this route, you'll thank yourself later.