Wie kann ich die CSS-Hauptdatei versionieren?

8

Wie kann ich WordPress anweisen, einen anderen Dateinamen als 'styles.css' für mein Haupt-Stylesheet zu verwenden, z. B. styles-1.css? Ich möchte dies für Versions- und Caching-Zwecke tun.

Bobby Jack
quelle

Antworten:

3

Style.csswird für Ihr WordPress-Theme benötigt. Dort erhält WordPress den Themennamen und die Metainformationen für das Menü Darstellung >> Themen. Das heißt, Sie müssen style.cssin Ihrem Thema überhaupt nicht verwenden. Ich kenne einige leicht verfügbare Themen, die es nicht verwenden, und ich verwende es nur in einer Handvoll meiner benutzerdefinierten Designs.

In header.phpnur legen Sie den folgenden Tag anstelle des regulären Sheet Link:

<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory'); ?>/style-1.css" />

Dadurch wird Ihr alternatives Stylesheet als Stylesheet der Seite geladen und das reguläre Stylesheet vollständig ignoriert style.css.

EAMann
quelle
1
Zur Verdeutlichung müssen Sie in Ihrem WordPress-Theme eine style.css-Datei mit dem Themennamen haben. Sie müssen diese Datei NICHT in Ihre Datei header.php laden.
Doug
1
Und Sie sollten Ihre Stile nicht direkt in Themendateien einfügen - verwenden Sie stattdessen wp_enqueue_style - es ist viel besser für untergeordnete Themen und Plugins.
Krzysiek Dróżdż
13

Dies kann unangemessen sein. Bitte lassen Sie mich wissen, wenn ich etwas verpasst habe.

Das vierte Argument wp_enqueue_style()ist die Versionsnummer des Stylesheets. In Ihrem Thema functions.php:

function my_theme_styles() {
    // replace "10" with your version number; increment as you push changes
    wp_enqueue_style('my-theme-style', get_bloginfo('template_directory') . '/style.css', false, 10);
}
add_action('wp_print_styles', 'my_theme_styles');

Erfordert, dass Sie header.phpein tun wp_head(), was Sie natürlich sowieso getan haben. ;)

Auf diese Weise können Sie lange Ablauflaufzeiten mit Ihrer CSS-Datei verschieben und Clients durch Aktualisieren der Versionsnummer zum Herunterladen einer neuen Datei zwingen. WP hängt "? Ver = N" an die URL Ihrer CSS-Datei an.

Annika Backstrom
quelle
3

Fügen Sie dies in die Datei functions.php Ihres Themas ein:

function my_cool_style_versioner( $style ){
  return str_replace( '/style.css', '/style-1.css', $style );
}

add_filter( 'stylesheet_uri', 'my_cool_style_versioner' );
John P Bloch
quelle
Vermutlich müsste ich diese Funktion von irgendwoher aufrufen ... (und ich nehme an, dass das Fehlen / ein Fehler ist!)
Bobby Jack
Ja, dieser fehlende Schrägstrich war ein Fehler, und ich habe den Filterhaken hinzugefügt, den Sie ebenfalls verwenden müssen.
John P Bloch
Beachten Sie außerdem, dass sich beim Erhöhen der Version das zweite Argument ( '/style-1.css') ändert, das erste ( '/style.css') jedoch immer gleich bleibt.
John P Bloch
erstaunlich, wir sollten Plugin dafür erstellen!
Ariefbayu
3

EAMann ist korrekt, Sie müssen die style.cssDatei nicht für Ihr gesamtes CSS verwenden.

Um das Stylesheet und andere Dateien in Ihrem Design zu versionieren, können Sie diese zu Ihrer Datei functions.php hinzufügen

function fileVersion($filename)
{
    // get the absolute path to the file
    $pathToFile = TEMPLATEPATH.'/'.$filename;
    //check if the file exists
    if (file_exists($pathToFile)) 
    {
        // return the time the file was last modified
        echo filemtime($pathToFile);
    }
    else
    {
        // let them know the file wasn't found
        echo 'FileNotFound';
    }
}

Und wenn Sie dann den Link zu Ihrem Stylesheet erstellen, können Sie dies tun.

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>?v=<?php fileVersion('style.css'); ?>" />

Auf diese Weise müssen Sie die Versionsnummer nicht manuell aktualisieren. Jedes Mal, wenn die Datei auf dem Server aktualisiert wird, ändert sich die Version automatisch in diesen UNIX-Zeitstempel

Paul Sheldrake
quelle
3

Beachten Sie, dass Sie keine Querystrings für die Dateiversionierung verwenden sollten (Proxys speichern sie nicht zwischen).

Ein besserer Weg wäre, die Dateinamen wie durch Hinzufügen einer Zahl wie zu versionieren

  • Stil. 123 .css
  • Stil. 124 .css

Mein Ansatz ist also folgender:

Apache htaccess leitet um

Wenn Sie HTML5 Boilerplate mit Apache verwenden, finden Sie den folgenden Abschnitt in der .htaccess-Datei :

# ------------------------------------------------------------------------------
# | Filename-based cache busting                                               |
# ------------------------------------------------------------------------------

# If you're not using a build process to manage your filename version revving,
# you might want to consider enabling the following directives to route all
# requests such as `/css/style.12345.css` to `/css/style.css`.

# To understand why this is important and a better idea than `*.css?v231`, read:
# http://stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring

<IfModule mod_rewrite.c>
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^(.+)\.(\d+)\.(js|css|png|jpe?g|gif)$ $1.$3 [L]
</IfModule>

(Normalerweise müssen Sie es zuerst aktivieren, indem Sie die Zeilen auskommentieren.)

Theme functions.php

Ich wollte automatisch die Version meines Themas für das Stylesheet verwenden, daher habe ich Folgendes gefunden:

Sie können Ihren Themen functions.php Folgendes hinzufügen :

function my_theme_styles() {
    $my_theme = wp_get_theme();
    $version = str_replace('.','',$my_theme->get( 'Version' ));
    $stylesheet = get_bloginfo('stylesheet_directory').'/style.'.$version.'.css';
    wp_enqueue_style('my-main', $stylesheet, false, null);
}
add_action('wp_print_styles', 'my_theme_styles');

Beachten Sie, dass ich nullanstelle von eine Version angegeben habe false, sodass Wordpress seine Version nicht an den Querystring anfügt.

Ergebnis

Dadurch wird ein Stylesheet wie das folgende für Version 1.0.2 Ihres Themas ausgegeben:

<link rel='stylesheet' id='maw-main-css'  href='http://www.example.com/wp-content/themes/my-theme/style.102.css' type='text/css' media='all' />

Nachdem ich mein Thema in meiner style.css auf Version 2.0.0 geändert habe, wird Folgendes ausgegeben:

<link rel='stylesheet' id='maw-main-css'  href='http://www.example.com/wp-content/themes/my-theme/style.200.css' type='text/css' media='all' />

Zusätzliche Bemerkungen

Achten Sie darauf, dass Sie Probleme mit der Themenversion wie 1.2.23 und 1.22.3 bekommen, wenn Sie nur die Punkte der Version wie ich entfernen, da beide zu einer punktlosen Version von 1223 führen.

Ein besserer Weg wäre, dies in der .htaccess-Datei zu berücksichtigen. Sie könnten beispielsweise Unterstriche zwischen den Zahlen zulassen und die Punkte durch diese ersetzen.

Dies ist ungetestet, sollte aber funktionieren:

.htaccess

# ------------------------------------------------------------------------------
# | Filename-based cache busting                                               |
# ------------------------------------------------------------------------------
<IfModule mod_rewrite.c>
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^(.+)\.([_\d]+)\.(js|css|png|jpe?g|gif)$ $1.$3 [L]
</IfModule>

functions.php

function my_theme_styles() {
    $my_theme = wp_get_theme();
    $version = str_replace('.','_',$my_theme->get( 'Version' ));
    $stylesheet = get_bloginfo('stylesheet_directory').'/style.'.$version.'.css';
    wp_enqueue_style('my-main', $stylesheet, false, null);
}
add_action('wp_print_styles', 'my_theme_styles');
Alexander Taubenkorb
quelle
2

Nun, Sie können einfach style.cssden Ort verwenden, an dem Sie die gewünschte Version aufrufen. Einfach gesagt

@import url("style-1.css");

Wenn Sie dann eine Version aktualisieren, bearbeiten Sie sie einfach wie folgt:

@import url("style-2.css");

Haben Sie beim Speichern von Versionen in Betracht gezogen, eine Subversion oder ein Git zu verwenden ? Dann können Sie eine vollständige Erfolgsbilanz Ihres Stylesheets erstellen. Es ist möglich, dass ich die vollständigen Gründe für Ihre Versionierung nicht vollständig verstehe.

artlung
quelle
2

Ich bin auf diese alte Frage gestoßen und habe festgestellt, dass alle Antworten heutzutage veraltet sind.

Ich würde einfach die Theme-Version verwenden, wie sie im Header-Teil der Datei style.css definiert ist. Sie können es mit bekommenwp_get_theme()->get( 'Version' )

function my_enqueue_styles() {
    wp_enqueue_style( 'my-theme-style', get_template_directory_uri() . '/style.css', false, wp_get_theme()->get( 'Version' ) );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_styles' );

Auf diese Weise wird die Versionsnummer automatisch an die URL angehängt ?ver=#.##und die URL ändert sich, sobald die Version des Themas in style.css erhöht wird.

JHoffmann
quelle
Ich habe eine Frage. Was ist der Grund, Priorität 40 zu geben?
Kanon Chowdhury
Dieser Fall erfordert keine bestimmte Priorität. Werde das herausarbeiten, danke.
JHoffmann
1

Im functions.phpWechsel

wp_enqueue_style( 'twentysixteen-style', get_stylesheet_uri();

zu

wp_enqueue_style( 'twentysixteen-style', get_stylesheet_uri(), array(), $ver );

Wechseln Sie $verzu einem beliebigen Wert oder time()für den Entwicklungsmodus.

Rashed Hasan
quelle
0

Ich bin mir nicht sicher, ob sich dies für WP3 geändert hat, daher bin ich mir nicht ganz sicher, aber eine Möglichkeit besteht darin, die entsprechende PHP-Datei direkt zu bearbeiten (ich weiß nicht, ob dies über die Dashboard- / Admin-Seiten möglich ist). ::

wp-folder/wp-content/themes/your-theme/

Und mach auf header.php. In dieser Datei finden Sie diese Zeile:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

Um dem verknüpften Stylesheet eine 'Version' hinzuzufügen (vorausgesetzt, Sie möchten, dass es so etwas wie :) ist, stylesheetURL.css?version=2ändern Sie es in:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>?version=2" type="text/css" media="screen" />

Dies ist jedoch irgendwie unelegant. Wenn es also einen besseren Weg gibt, würde ich es gerne selbst hören =)


Ich habe gerade Ihre Frage noch einmal gelesen ...

Um ein anderes Stylesheet zu verwenden styles-1.css, können Sie entweder nur die (obige) Zeile zu:

<link rel="stylesheet" href="absolute/or/root-relative/path/to/styles-1.css" type="text/css" media="screen" />

(Grundsätzlich entfernen <?php ... ?>und ersetzen Sie es durch einen regulären Pfad.)

David sagt, Monica wieder einsetzen
quelle
1
"Das ist allerdings irgendwie unelegant" - ja, besonders wenn ich eine Datei mit dem Namen "style-1.css" verwenden möchte! ;-)
Bobby Jack
@ Bobby Jack, stimmte zu und +1 (obwohl ich versucht habe, einen ähnlich uneleganten Ansatz hinzuzufügen, um Ihr Ziel zu erreichen.) = /
David sagt, Monica
OK. Ich glaube, ich war besorgt, dass stylesheet_url woanders verwendet werden könnte, aber es gibt wirklich keinen Grund dafür, oder? Es gibt auch die Tatsache, dass es schön wäre, einen Mechanismus zur Automatisierung des Updates zu haben, um immer die neueste Dateiversion zu verwenden, aber ich fange gerade an, Fehler in meiner Frage aufzudecken :)
Bobby Jack