Cache-Busting anderer CSS-Dateien als style.css

Also gut, wir sind wahrscheinlich alle mit der typischen Methode vertraut, um sicherzustellen, dass Ihre CSS-Hauptdatei aktualisiert wird, wenn Sie die Seite laden (den Browser-Cache sprengen), oder?

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

Ich muss dasselbe für eine andere CSS-Datei tun. Ja, meine style.css-Datei hat einen eigenen Satz von @import "css / myFile.css", die gut funktionieren, aber humor mich, wenn Sie so wollen. Also zurück zu header.php, direkt nach diesem ersten Link und vor dem Aufruf von 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); ?>" />

Dies führt zu einer Warnung (als Teil des href-Attributs des Links, wenn der Browser die Seite erhält):

Warnung: filemtime (): stat für http: //localhost/wordpress/wp-content/themes/my_theme/css/other.css fehlgeschlagen

Der Pfad zur Datei scheint korrekt erstellt zu sein (und die Datei other.css ist vorhanden), aber die Dateizeit (stat, tatsächlich) schlägt fehl. Woher?

Andere empfohlene Möglichkeiten, die 'neueste' Version einer anderen CSS-Datei als style.css einzuschließen? Sollte ich stattdessen mit wp_register_style gehen ? Wenn ja ... wie kann ich wp_register_style anweisen, den Browser-Cache zu sprengen (dh: Holen Sie sich die neueste Version der CSS-Datei, auch wenn der Browser sie zwischengespeichert hat)? Danke im Voraus

Sie verwenden den Pfad der Datei im ersten Aufruf, aber die URL im zweiten. Also wird es nicht funktionieren.

Ich neige dazu, das Haupt-Stylesheet einfach mit in die Warteschlange zu stellen wp_enqueue_styleund etwas an die Version anzuhängen, wenn ich das Caching verhindern möchte.

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

Wenn ich das Caching beenden möchte, aktualisiere ich $verauf etwas, das sich ständig ändert, wie z. B. die Zeit.

$ver = time();

Oder etwas ähnliches..

Hier ist der Code, den ich von einem unveröffentlichten CDN-Plugin habe, das ich habe. Es ersetzt automatisch die ver query_var, die die Enqueue-Funktionen verwenden, durch die Datei time:

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

Wenn Sie die Standarddatei nicht style.cssfür die CSS-Cache-Busting-Technik Ihres WordPress-Themas verwenden möchten , finden Sie hier ein vollständiges Beispiel für einen Arbeitscode :

<?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 ); ?>" />

Würde zu folgender HTML-Ausgabe führen:

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

Aus Gründen der Kürze dieses Beispiels habe ich rel="stylesheet" type="text/css"das <link>Element ausgeschlossen. Fügen Sie diese Attribute daher unbedingt zu Ihrem endgültigen Markup hinzu.

Ich habe meine eigene kleine Funktion als Plugin für solche Jobs geschrieben. Es sind zwei Parameter erforderlich, der Pfad, der angehängt werden muss, und ein Datumsformat. Hier ist ein Beispiel für die Verwendung ...

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

Dies würde zu http://pewsocialtrends.org/wp-content/themes/pew-socialtrends/css/reset.css?2010-11-11_6:47:45 führen

Hier ist der Code:

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

Einfach: Verwenden Sie die URl, um den Stil und den Pfad zu laden, um Folgendes zu erhalten 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' )
);

Die resultierende URl wird so etwas wie sein

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