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

Question

custom.css 文件正确加载，但在 CSS 文件进行一些更改并将其发送到 filezilla 后，它不会加载当前更改。 它在删除 functions.php 文件后加载并再次粘贴所有数据。 我应该怎么做才能解决这个问题。 下面我附上了链接文件。 我还写<?php wp-head()?>在 header 和<?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 将为 append 提供适当的时间戳，您的浏览器将下载新版本。

也不要在句柄字符串中使用空格，即。 将'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 将获取我们脚本的新版本。 （对于开发来说，您可能只想在隐身模式下使用浏览器，这不会缓存任何内容）