Cache các tập tin CSS khác với style.css

Được rồi, vì vậy có lẽ chúng ta đều quen thuộc với cách điển hình để đảm bảo rằng tệp CSS chính của bạn được làm mới khi bạn tải trang (làm hỏng bộ đệm của trình duyệt), phải không?

<link rel="stylesheet" type="text/css" media="all"
  href="<?php echo get_stylesheet_uri();
    echo '?'.filemtime( get_stylesheet_directory() . '/style.css'); ?>" />

Tôi cần phải làm điều tương tự trên một tệp CSS khác. Có, tệp style.css của tôi có tập hợp @import "css / myFile.css" đang hoạt động tốt, nhưng hài hước với tôi, nếu bạn muốn. Vì vậy, hãy quay lại tiêu đề.php, ngay sau liên kết đầu tiên đó và trước lệnh gọi wp_head ():

<?php $cssFile = get_stylesheet_directory_uri().'/css/other.css'; ?>
<link rel="stylesheet" type="text/css" media="all"
  href="<?php echo $cssFile; echo '?'.filemtime($cssFile); ?>" />

Và điều này dẫn đến một cảnh báo (là một phần của thuộc tính href của liên kết khi trình duyệt lấy trang):

Cảnh báo: filemtime (): stat không thành công cho http: //localhost/wordpress/wp-content/theme/my_theme/css/other.css

đường dẫn đến tệp dường như được xây dựng chính xác (và tệp other.css ở đó), nhưng filemtime (stat, thực sự) không thành công trên đó. Làm thế nào mà?

Các cách được đề xuất khác để bao gồm phiên bản 'mới nhất' của tệp CSS khác với style.css? Tôi có nên đi với wp_register_style không? Nếu vậy ... làm thế nào tôi có thể yêu cầu wp_register_style phá vỡ bộ đệm của trình duyệt (tức là: hãy cho tôi phiên bản mới nhất của tệp css, ngay cả khi trình duyệt đã lưu vào bộ đệm)? Cảm ơn trước

Bạn đang sử dụng đường dẫn của tệp trong cuộc gọi đầu tiên, nhưng URL của nó trong cuộc gọi thứ hai. Vì vậy, nó sẽ không hoạt động.

Tôi có xu hướng chỉ sử dụng biểu định kiểu chính bằng cách sử dụng wp_enqueue_stylevà thêm thứ gì đó vào phiên bản khi tôi muốn ngăn bộ đệm.

$ver = '';
wp_enqueue_style( 'theme_style', get_bloginfo('stylesheet_url'), false, $ver );

Khi tôi muốn dừng bộ nhớ đệm, tôi cập nhật $verlên thứ gì đó sẽ liên tục thay đổi, chẳng hạn như thời gian ..

$ver = time();

Hoặc một cái gì đó tương tự ..

Đây là mã tôi có từ một plugin CDN chưa được phát hành mà tôi có. Nó sẽ tự động thay thế ver query_var mà các hàm enqueue sử dụng với thời gian tệp:

class CDN_VersionAssets {

    private $default_version = '';
    private $root_url;

    public function __construct() {
        $this->root_url = site_url();
    }

    public function initialize() {
        add_filter('style_loader_src', array($this, 'replace_version'), 10);
        add_filter('script_loader_src', array($this, 'replace_version'), 10);
        add_filter('stylesheet_uri', array($this, 'replace_version'), 10);
    }

    public function on_template_redirect() {
        $this->default_version = @filemtime(get_stylesheet_directory().'/style.css');
    }

    private function get_version($url) {
        if(0 === strpos($url, $this->root_url)) {
            $parts = parse_url($url);
            $file_path = str_replace(site_url('/'), ABSPATH, $parts['scheme'].'://'.$parts['host'].$parts['path']);
            if( !($version = @filemtime($file_path)) ) {
                $version = $this->default_version;
            }
            return $version;
        }
        return false;
    }

    public function replace_version($src) {
        if( $new_version = $this->get_version($src) ) {
            return add_query_arg('ver', $new_version, $src);
        }
        return $src;
    }
}
add_action('init', array(new CDN_VersionAssets(), 'initialize'));

Nếu bạn không muốn sử dụng style.csstệp tiêu chuẩn cho kỹ thuật chặn bộ đệm CSS của chủ đề WordPress , thì đây là một ví dụ mã làm việc hoàn chỉnh:

<?php
    // Prevent CSS Caching
    $css_link = get_stylesheet_directory_uri() . '/css/screen.css';
    $css_file = get_stylesheet_directory() . '/css/screen.css';
?>

<link href="<?php echo $css_link . '?' . filemtime( $css_file ); ?>" />

Sẽ dẫn đến kết quả đầu ra HTML sau:

<link href="http://example.com/wp-content/themes/theme-name/css/screen.css?1349389530" />

Để làm rõ hơn ví dụ này, tôi đã loại trừ rel="stylesheet" type="text/css"thành <link>phần này, vì vậy hãy chắc chắn thêm các thuộc tính đó vào đánh dấu cuối cùng của bạn.

Tôi đã viết chức năng nhỏ của riêng mình như một plugin cho các công việc như thế này. Phải mất hai tham số, đường dẫn sẽ cần phải được nối và định dạng ngày. Đây là cách sử dụng mẫu ...

<?php echo cache_busting_path('/css/reset.css', 'Y-m-d_g:i:s'); ?>

điều này sẽ dẫn đến http://pewsocialtrends.org/wp-content/theme/pew-socialtrends/css/reset.css?2010-11-11_6:47:45

Đây là mã:

    <?php
/*
        Plugin Name: Cache Busting Path
        Description: Function that returns a path with a cache-busting query string based on the last time the file was updated.
        Version: 1.0
        Author: Russell Heimlich
        Author URI: http://www.russellheimlich.com/blog/
        License: GPL2
    */

        function cache_busting_path($path, $time_format = 'U') {
            if( $path[0] != '/' ) { //Checks for the first character in $path is a slash and adds it if it isn't. 
                $path = '/' . $path;
            }
            return get_bloginfo('template_url') . $path . '?' . date($time_format, filemtime( get_theme_root() . '/' . get_template() . $path ) );
        }
?>

Đơn giản: sử dụng URl để tải kiểu và đường dẫn để có được filemtime():

wp_register_style(
    'handle',
    get_stylesheet/template_directory_uri().'/path/to/your/stylesheet.css',
    array( 'possible_dependency' ),
    filemtime( plugin_dir_path( __FILE__ ).'path/to/your/stylesheet.css' )
);

Kết quả URl sẽ giống như

<link href="http://example.com/wp-content/themes/path/to/your/stylesheet.css?1379012967924">