it-swarm.com.de

Cache-Busting-CSS-Dateien außer style.css

Also gut, wir sind wahrscheinlich alle mit der typischen Methode vertraut, um sicherzustellen, dass Ihre Haupt-CSS-Datei aktualisiert wird, wenn Sie die Seite laden (Busting des Browser-Cache), 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, gleich nach dem 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); ?>" />

Und dies führt zu einer Warnung (als Teil des href-Attributs des Links, wenn der Browser die Seite abruft):

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

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

Andere empfohlene Möglichkeiten, die 'neueste' Version einer anderen CSS-Datei als style.css einzuschließen? Soll ich stattdessen wp_register_style verwenden? Wenn ja ... wie kann ich wp_register_style anweisen, den Browser-Cache zu löschen (dh: besorge mir die neueste Version der CSS-Datei, auch wenn der Browser sie zwischengespeichert hat)? Danke im Voraus

7
FOR

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

8

Ich neige dazu, das Haupt-Stylesheet einfach mit wp_enqueue_style in die Warteschlange zu stellen und 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 mit dem Cachen aufhören will, aktualisiere ich $ver auf etwas, das sich ständig ändert, wie zum Beispiel die Zeit.

$ver = time();

Oder etwas ähnliches..

4
t31os

Hier ist der Code, den ich von einem unveröffentlichten CDN-Plugin habe. Es ersetzt automatisch die ver query_var, die die Enqueue-Funktionen für die Dateizeit verwenden:

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

Wenn Sie es vorziehen, die Standard-style.css-Datei nicht für Ihre CSS-Cache-Busting-Technik des WordPress-Themas zu verwenden, finden Sie hier ein vollständiges Arbeitscodebeispiel:

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

Für die Kürze dieses Beispiels habe ich rel="stylesheet" type="text/css" für das <link> -Element ausgeschlossen. Fügen Sie diese Attribute also unbedingt zu Ihrem endgültigen Markup hinzu.

1
rjb

Einfach: Verwenden Sie die URL, um den Stil und den Pfad zu laden, um die filemtime() zu erhalten:

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 ungefähr so ​​aussehen

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

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 Anwendungsbeispiel ...

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

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

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