如何正确加载我的custom.css文件

Question

custom.css文件加载正常，但在css文件中进行一些更改并在filezilla上发送后，它不会加载当前的更改。它在删除functions.php文件后加载，然后再次粘贴所有数据。我该怎么办才能解决那个问题。下面我附上了链接文件。我还将<?php wp-head() ?>写在页眉中，将<?php wp-footer() ?>写在页脚文件中。

function wpdocs_theme_name_scripts() {

//  style link
wp_enqueue_style ( 'bootstrap.min', get_template_directory_uri(). '/assets/css/bootstrap.min.css','1.1', true);
wp_enqueue_style ( 'swiper-bundle.min ', get_template_directory_uri(). '/assets/css/swiper-bundle.min.css','1.1', true);
wp_enqueue_style ( 'style css', get_stylesheet_uri() );
wp_enqueue_style ( 'custom css', get_bloginfo('template_directory'). '/custom.css','1.1', true);

//  script link
wp_enqueue_script ( 'jquery-3.5.1.slim.min', get_template_directory_uri(). '/assets/js/jquery-3.5.1.slim.min.js', array(), 1.0, true );
wp_enqueue_script ( 'bootstrap.bundle.min', get_template_directory_uri(). '/assets/js/bootstrap.bundle.min.js', array(), 1.0, true);
wp_enqueue_script ( 'popper.min', get_template_directory_uri(). '/assets/js/popper.min.js', array(), 1.0 , true );  
wp_enqueue_script ( 'swiper-bundle.min', get_template_directory_uri(). '/assets/js/swiper-bundle.min.js', array(), 1.0 , true );  
wp_enqueue_script ( 'main js', get_stylesheet_directory_uri(). '/assets/js/main.js', array(), 1.0 , true );
};
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );

Answer 1

这听起来像是一个缓存问题。如果无法正确清除服务器和浏览器的缓存，则可以根据文件上次修改的时间进行正确的版本控制。示例：

$my_version = filemtime(get_template_directory() . '/custom.css');
wp_enqueue_style ('custom-css', get_template_directory() . '/custom.css', false, $my_version, 'all');

当服务器上更新custom.css文件时，WP将附加适当的时间戳，您的浏览器将下载新版本。

也不要在句柄字符串中使用空格，即将'custom css'更改为'custom-css'。

Answer 2

使用第三个参数array()，在排队时，您可以通过array( 'dependency_handle' )使用依赖关系句柄定义依赖关系。依赖项句柄应该是一个单词字符串，不能使用style css，需要使用style_css或style-css。

<?php
add_action( 'wp_enqueue_scripts', 'theme_scripts' );
function theme_scripts() {
if( ! is_admin() ) {
wp_enqueue_style ( 'style_css', get_stylesheet_uri(), array(), '1.0', 'all'  );
wp_enqueue_style ( 'custom_css', trailingslashit( get_template_directory_uri() ) . 'custom.css', array( 'style_css' ), '1.0', 'all' );
};
}; ?>

在这里，我们指定我们希望custom_css在style_css之后排队。

使用第四个参数，版本，这里1.0让Wordpress知道，如果版本发生更改，就不提供缓存版本。因此，如果您指定了1.1，Wordpress将获取我们脚本的新版本。(对于开发tho，你可能只想在隐身模式下使用浏览器，这不会缓存任何内容(