it-swarm.dev

Wie kann ich die Haupt-CSS-Datei versionieren?

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

7
Bobby Jack

Style.css wird für dein WordPress-Theme benötigt. Dort erhält WordPress den Themennamen und die Metainformationen für das Menü Aussehen >> Themen. Das heißt, Sie müssen style.css in 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.

Platzieren Sie in header.php einfach das folgende Tag anstelle des regulären Stylesheet-Links:

<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 der reguläre style.css wird vollständig ignoriert.

3
EAMann

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

Das vierte Argument für wp_enqueue_style() ist die Versionsnummer des Stylesheets. Im functions.php deines Themas:

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 Ihr header.php eine wp_head() ausführt, was natürlich Sie sowieso getan haben. ;)

Auf diese Weise können Sie lange Ablaufheader 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.

13

Legen Sie dies in der Datei functions.php Ihres Themas ab:

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

add_filter( 'stylesheet_uri', 'my_cool_style_versioner' );
3
John P Bloch

Beachten Sie, dass Sie keine Querystringe für die Dateiversionierung verwenden sollten (Proxys zwischenspeichern sie nicht).

Eine bessere Möglichkeit wäre, die Dateinamen zu versionieren, indem Sie eine Zahl wie hinzufügen

  • style. 123 . css
  • style. 124 . css

Mein Ansatz ist also der folgende:

Apache htaccess leitet weiter

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

# ------------------------------------------------------------------------------
# | 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 die Version meines Themas automatisch für das Stylesheet verwenden, also kam ich auf Folgendes:

Sie können Ihren Themes 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 null anstelle von false als Version angegeben habe, sodass Wordpress seine Version nicht in den Querystring einfügt.

Ergebnis

Dies gibt ein Stylesheet wie das folgende für Version 1.0.2 Ihres Themas aus:

<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 meinem 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 Theme-Versionen wie 1.2.23 und 1.22.3 bekommen, wenn Sie nur die Punkte der Version entfernen, wie ich es getan habe, da beide Versionen eine punktlose Version von 1223 ergeben.

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 nicht getestet, sollte aber funktionieren:

.zugang

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

EAMann ist korrekt, Sie müssen die style.css-Datei nicht für all Ihr CSS verwenden.

Um das Stylesheet und andere Dateien in Ihrem Theme zu versionieren, können Sie dies zu Ihrer functions.php-Datei 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, wird die Version automatisch auf diesen UNIX-Zeitstempel geändert

3
Paul Sheldrake

Sie können einfach style.css als 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 wie folgt:

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

Haben Sie beim Speichern von Versionen erwogen, ein Subversion oder git zu verwenden? Dann können Sie eine vollständige Erfolgsbilanz Ihres Stylesheets erstellen. Möglicherweise verstehe ich die Gründe für Ihre Versionierung nicht vollständig.

2
artlung

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

Ich würde einfach die im Header-Teil der Datei style.css definierte Theme-Version verwenden. Sie können es mit wp_get_theme()->get( 'Version' ) bekommen

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, z. B. ?ver=#.##, und die URL ändert sich, sobald die Version des Themas in style.css erhöht wird.

2
JHoffmann

In functions.php ändern

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

zu

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

ändern Sie $ver in einen beliebigen Wert oder time() für den Entwicklungsmodus.

1
Rashed Hasan

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 relevante PHP-Datei direkt zu bearbeiten (ich weiß nicht, ob dies auf den Dashboard-/Admin-Seiten möglich ist). :

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

Und header.php öffnen. 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 ungefähr so ​​aussieht wie: stylesheetURL.css?version=2), ändern Sie es in:

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

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


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

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

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

0
David Thomas