如何正确加载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' );
  };
}; ?>

在这里，我们指定要让out custom_css排在style_css之后。

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