Come aggiungere la versione di style.css in WordPress

Se sei uno sviluppatore di temi, potresti voler forzare il ricaricamento dei tuoi asset quando pubblichi una nuova versione.

La versione di un tema viene gestita nel file style.css

/*
    Theme Name: Nome del Tema
    Version: 1.0.2
*/

All'inizio del tuo functions.php:

$theme = wp_get_theme();
define('THEME_VERSION', $theme->Version); //ottiene la versione scritta nel tuo style.css

Successivamente, quando carichi CSS o JS, utilizza THEME_VERSION come quarto argomento:

function theme_styles()
{
    wp_enqueue_style('main', get_template_directory_uri().'/css/main.css', [], THEME_VERSION, 'all');
}
add_action('wp_enqueue_scripts', 'theme_styles'); 

Produrrà nella pagina:

.../nome-del-tuo-tema/css/main.css?ver=1.0.2 

Diventa utile quando hai più asset da gestire e non vuoi modificarli manualmente.

Invece di codificare manualmente la versione, potresti trovare più conveniente in alcuni casi versionare dinamicamente il tuo foglio di stile, in modo che ogni volta che lo modifichi, cambi automaticamente e aggiorni immediatamente la cache del browser senza dover modificare ripetutamente il tuo functions.php.

Puoi usare filemtime() per farlo. Ecco come fare in uno stile figlio che fa riferimento al parent_style

    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ), filemtime( get_stylesheet_directory() . '/style.css' )  );

Puoi ottenere questo risultato utilizzando uno dei seguenti metodi:

1) Aggiungi il seguente tag nel file header.php del tema.

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

2) Aggiungi il seguente codice nel file functions.php del tema.

function theme_styles()  
{ 
  // Registra lo stile in questo modo per un tema:  
  // (Prima il nome univoco per lo stile (custom-style) poi la sorgente, 
  // poi le dipendenze, numero versione e tipo media)
  wp_enqueue_style( 'style-css', get_template_directory_uri() . '/style.css', array(), '1.2', 'all' );
}
add_action('wp_enqueue_scripts', 'theme_styles');

Per maggiori informazioni vedi questa pagina.

il modo migliore per caricare i CSS nel tuo tema WordPress è il seguente codice nel file functions.php:

function theme_styles()  
{ 
  global $ver_num; // definisce una variabile globale per il numero di versione
  $ver_num = mt_rand() // ad ogni chiamata/caricamento dello stile $ver_num avrà un valore diverso
  wp_enqueue_style( 'style-css', get_template_directory_uri() . '/style.css', array(), $ver_num, 'all' );
}
add_action('wp_enqueue_scripts', 'theme_styles');

Questo è il modo corretto per caricare gli stili nel tuo tema ed è anche il migliore per scopi di staging/testing perché ogni refresh fornirà la versione aggiornata dello stile.

Se vuoi evitare il caricamento con il primo metodo, puoi usare questa versione abbreviata e inserire la seguente riga nel tuo file header.php per ottenere lo stesso risultato:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); echo '?ver=' . filemtime( get_stylesheet_directory() . '/style.css'); ?>" type="text/css" media="screen, projection" />

Saluti

Prova questo:

Aggiungi questo a functions.php

function autoVer($filename){
    $url = get_template_directory_uri() . $filename;
    $file = get_template_directory() . $filename;
    if ( file_exists($file)) {
        return $url . '?v=' .md5(date("FLdHis", filectime($file)) . filesize($file));
    }
    clearstatcache();
}

Aggiungi questo all'header o al footer -> autoVer('/js/main.js');

Contrariamente ai metodi presentati finora, credo sia meglio utilizzare il numero di versione che appare in cima al tuo file style.css:

// style.css
/**
Theme Name: My theme
...
Version: 1.2.3
...
**/

Per utilizzare la versione del tema nei tuoi css, aggiungi il seguente codice al tuo file functions.php (o equivalente):

<?php

wp_enqueue_style(
    'my-theme',
    get_stylesheet_directory_uri() . '/style.css',
    [],
    wp_get_theme()->get('Version')
);

Questo significa che, dopo aver modificato il tuo file style.css, tutto quello che devi fare è cambiare il numero di versione in cima allo stesso file per vedere le modifiche nel frontend.

Se esamini la sezione head dell'HTML del tema, vedrai quanto segue:

<link rel='stylesheet'
    id='my-theme-css'
    href='... style.css?ver=1.2.3'
    type='text/css'
    media='all'
/>

Un'altra soluzione, se ancora non riesci a risolvere, è cambiare il nome del file style.css del tuo child theme in, ad esempio, style2.css e poi modificarlo nel file functions.php del tuo child theme, come mostrato di seguito:

wp_enqueue_style( 'style', get_stylesheet_directory_uri() .'/style2.css' );

Questo farà sì che WordPress richieda e serva un nuovo file CSS per il tuo sito web.

Qui utilizziamo la funzione wp_get_theme() di WordPress per ottenere la versione del tema (come specificato nel foglio di stile del tema, style.css):

// ottieni la versione del tema
function rave_get_version() {
    $theme_data = wp_get_theme();
    return $theme_data->Version;
}
$theme_version = rave_get_version();
global $theme_version;

wp_enqueue_style( 'main-style', get_template_directory_uri() .'/assets/css/style.css', [], THEME_VERSION, 'all' );

In realtà non hai bisogno di invalidare la cache del file style.css.

Puoi scrivere il tuo file css e poi accodarlo come ha scritto @vinod dalvi.

function theme_styles()  
{ 
  wp_enqueue_style('stylecss', get_template_directory_uri().'/tuonome.css', array(), '1.2', 'all');
}
add_action('wp_enqueue_scripts', 'theme_styles');

In base alle regole del browser, l'ultimo file css ha priorità più alta, quindi assicurati di usare !important nel tuo codice css se necessario.

Buona fortuna.

Questo è un metodo piuttosto diretto per ottenere il numero di versione chiamando la funzione bloginfo($show) due volte. Prima per il foglio di stile e poi per il numero di versione.

<link rel="stylesheet" id="style-css" href="<?php bloginfo('stylesheet_url'); ?>?ver=<?php bloginfo('version'); ?>" type="text/css" media="all" />

È tutto qui. Spero che sia d'aiuto o utile. Puoi esaminare tutti i parametri disponibili e vedere cosa puoi ottenere con la funzione bloginfo().

Ignora il mio commento poiché @Ravs ha fatto notare il mio errore riguardo al parametro 'versions' per la funzione bloginfo(). In effetti stampa il numero di versione di WordPress.