Cum pot să versionez fișierul CSS principal?

Acest lucru poate fi inadecvat, te rog să-mi spui dacă am omis ceva.

Al patrulea argument al funcției wp_enqueue_style() este numărul de versiune al fișierului de stiluri. În fișierul functions.php al temei tale:

function my_theme_styles() {
    // înlocuiește "10" cu numărul tău de versiune; incrementează pe măsură ce faci modificări
    wp_enqueue_style('my-theme-style', get_bloginfo('template_directory') . '/style.css', false, 10);
}
add_action('wp_print_styles', 'my_theme_styles');

Necesită ca fișierul tău header.php să conțină wp_head(), ceea ce desigur făceai oricum. ;)

Această metodă îți permite să setezi antete cu expirare îndelungată pentru fișierul CSS și să forțezi clienții să descarce un fișier nou prin actualizarea numărului de versiune. WordPress va adăuga "?ver=N" la URL-ul fișierului tău CSS.

Adaugă acest cod în fișierul functions.php al temei tale:

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

add_filter( 'stylesheet_uri', 'my_cool_style_versioner' );

EAMann are dreptate, nu e nevoie să folosești fișierul style.css pentru tot CSS-ul tău.

Pentru a versiona fișierul de stil și alte fișiere din tema ta, poți adăuga acest cod în fișierul functions.php

function fileVersion($filename)
{
    // obține calea absolută către fișier
    $pathToFile = TEMPLATEPATH.'/'.$filename;
    // verifică dacă fișierul există
    if (file_exists($pathToFile)) 
    {
        // returnează timpul ultimei modificări a fișierului
        echo filemtime($pathToFile);
    }
    else
    {
        // anunță dacă fișierul nu a fost găsit
        echo 'FișierNegăsit';
    }
}

Apoi, când creezi legătura către fișierul de stil, poți face astfel.

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

În acest fel, nu va trebui să actualizezi manual numărul versiunii. De fiecare dată când fișierul este actualizat pe server, versiunea se va schimba automat la acel timestamp UNIX.

Notă, că nu ar trebui să folosești parametri în URL pentru versionarea fișierelor (proxy-urile nu le cachează).

O metodă mai bună ar fi versionarea numelor de fișiere prin adăugarea unui număr, de exemplu:

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

Deci abordarea mea este următoarea:

Redirectări Apache htaccess

Dacă folosești HTML5 boilerplate cu Apache, poți găsi următoarea secțiune în fișierul .htaccess:

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

# Dacă nu folosești un proces de build pentru gestionarea versionării fișierelor,
# poți considera activarea următoarelor directive pentru a direcționa toate
# cererile precum `/css/style.12345.css` către `/css/style.css`.

# Pentru a înțelege de ce acest lucru este important și o idee mai bună decât `*.css?v231`, citește:
# 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>

(De obicei, trebuie să le activezi mai întâi prin decomentarea liniilor)

Theme functions.php

Am dorit să folosesc automat versiunea temei mele pentru fișierul CSS, așa că am venit cu următoarea soluție:

Poți adăuga următoarele în functions.php al temei tale:

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

Reține că am furnizat null ca versiune în loc de false, astfel încât WordPress să nu adauge versiunea sa în parametrii URL.

Rezultat

Aceasta va genera un fișier CSS similar cu următorul pentru Versiunea 1.0.2 a temei tale:

<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' />

După ce schimb tema la Versiunea 2.0.0 în style.css, va genera următorul:

<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' />

Note adiționale

Atenție, dacă elimini pur și simplu punctele din versiune așa cum am făcut eu, poți întâmpina probleme cu versiuni de teme precum 1.2.23 și 1.22.3, deoarece ambele vor rezulta într-o versiune fără puncte de 1223.

O metodă mai bună ar fi să iei în considerare acest lucru în fișierul .htaccess. De exemplu, poți permite caractere de subliniere între numere și poți înlocui punctele cu acestea.

Aceasta nu a fost testată, dar ar trebui să funcționeze:

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

Ei bine, ai putea pur și simplu să folosești style.css ca fiind locul unde apelezi versiunea dorită. Pur și simplu pune:

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

Apoi, când actualizezi o versiune, doar modifică-o să fie:

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

Cât despre salvarea versiunilor, te-ai gândit să folosești Subversion, sau git? Astfel poți avea o istoric complet al fișierelor tale de stil. E posibil să nu înțeleg pe deplin motivele complete din spatele versiunilor tale.

Am dat peste această întrebare veche și am constatat că toate răspunsurile par învechite în prezent.

Aș folosi pur și simplu versiunea temei, așa cum este definită în partea de antet a fișierului style.css. O poți obține cu wp_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' );

În acest fel, numărul versiunii va fi adăugat automat la URL sub forma ?ver=#.##, iar URL-ul se va schimba de îndată ce versiunea temei este incrementată în style.css.

În functions.php modifică

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

cu

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

schimbă $ver cu orice valoare, sau time() pentru modul de dezvoltare.

Nu sunt sigur dacă acest lucru s-a schimbat pentru WP3, așa că nu sunt complet sigur, dar o modalitate este de a edita direct fișierul php relevant (nu știu dacă se poate face din cadrul paginilor Dashboard/Admin):

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

Și deschide header.php. În acest fișier, găsește această linie:

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

Pentru a adăuga o 'versiune' la fișierul CSS (presupunând că vrei să fie ceva de genul: stylesheetURL.css?version=2) schimbă-o în:

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

Aceasta este o metodă puțin ineleantă, așa că dacă există o modalitate mai bună, aș dori să o aud și eu =)

Pentru a folosi un alt fișier CSS styles-1.css poți fie să modifici linia (de mai sus) în:

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

(Practic eliminând <?php ... ?> și înlocuind-o cu o cale obișnuită.)