cum să adaugi versiunea fișierului style.css în WordPress

Dacă ești dezvoltator de teme, poate vei dori să forțezi reîncărcarea resurselor atunci când lansezi o nouă versiune.

Versiunea unei teme este definită în style.css:

/*
    Theme Name: Numele Temei Tale
    Version: 1.0.2
*/

La începutul fișierului functions.php:

$theme = wp_get_theme();
define('THEME_VERSION', $theme->Version); //preia versiunea scrisă în style.css

Ulterior, când încarci CSS sau JS, folosește THEME_VERSION ca al patrulea argument:

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

Va afișa în pagină:

.../numele-temei-tale/css/main.css?ver=1.0.2 

Este util atunci când ai mai multe resurse de gestionat și nu dorești să le modifici manual.

În loc să specificați manual versiunea, puteți considera mai util în anumite situații să versionați dinamic fișierul CSS, astfel încât de fiecare dată când îl modificați, versiunea să se actualizeze automat și să reîncarce cache-ul browserului imediat, fără a fi nevoie să editați functions.php în mod repetat.

Puteți utiliza funcția filemtime() pentru a realiza acest lucru. Iată cum puteți face acest lucru într-un fișier child-style care face referire la parent_style:

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

Puteți realiza acest lucru folosind una dintre următoarele metode:

1) Adăugați următoarea etichetă în fișierul header.php al temei.

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

2) Adăugați următorul cod în fișierul functions.php al temei.

function theme_styles()  
{ 
  // Înregistrați stilul astfel pentru o temă:  
  // (Mai întâi numele unic pentru stil (custom-style) apoi src, 
  // apoi dependențele, versiunea și tipul media)
  wp_enqueue_style( 'style-css', get_template_directory_uri() . '/style.css', array(), '1.2', 'all' );
}
add_action('wp_enqueue_scripts', 'theme_styles');

Pentru mai multe informații, consultați această pagină.

cel mai bun mod de a încărca CSS în tema ta WordPress este următorul cod în fișierul functions.php:

function theme_styles()  
{ 
  global $ver_num; // definim variabilă globală pentru numărul de versiune
  $ver_num = mt_rand() // la fiecare apel/încărcare a stilului, $ver_num va primi o valoare diferită
  wp_enqueue_style( 'style-css', get_template_directory_uri() . '/style.css', array(), $ver_num, 'all' );
}
add_action('wp_enqueue_scripts', 'theme_styles');

Acesta este modul corect de a încărca stilurile în tema ta și este de asemenea optim pentru scopuri de staging/testare deoarece la fiecare reîmprospătare se va încărca versiunea actualizată a stilului.

Dacă dorești să eviți prima metodă de încărcare, poți folosi această variantă prescurtată și poți plasa următoarea linie în fișierul header.php pentru a obține același rezultat:

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

Noroc

Încearcă asta:

Adaugă acest cod în 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();
}

Adaugă în header sau footer -> autoVer('/js/main.js');

Contrar metodelor prezentate până acum, cred că este mai bine să folosești numărul de versiune care apare în partea de sus a fișierului style.css:

// style.css
/**
Nume Temă: Tema mea
...
Versiune: 1.2.3
...
**/

Pentru a folosi versiunea temei în CSS-ul tău, adaugă următoarele în fișierul functions.php (sau echivalent):

<?php

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

Aceasta înseamnă că, după ce editezi fișierul style.css, tot ce trebuie să faci este să modifici numărul de versiune din partea de sus a aceluiași fișier pentru a vedea modificările în frontend.

Dacă examinezi secțiunea head a HTML-ului temei, vei vedea următoarele:

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

O altă soluție, dacă încă nu ai reușit să rezolvi problema, este să schimbi numele fișierului style.css al temei child în, de exemplu, style2.css și apoi să modifici fișierul functions.php al temei child, așa cum este arătat mai jos:

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

Această modificare va determina WordPress să solicite și să servească un nou fișier CSS pentru site-ul tău.

Aici folosim funcția WordPress wp_get_theme() pentru a obține versiunea temei (așa cum este specificat în fișierul de stil al temei, style.css):

// obține versiunea temei
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' );

De fapt, nu este necesar să eliminați cache-ul pentru fișierul style.css.

Puteți crea propriul fișier CSS și apoi să-l încărcați în coadă așa cum a scris @vinod dalvi.

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

Conform regulilor browserelor, cel mai recent fișier CSS are prioritate mai mare, așa că asigurați-vă că folosiți !important în codul CSS dacă este necesar.

Mult succes.

Acesta este un mod simplu de a obține numărul de versiune prin apelarea funcției bloginfo($show) de două ori. Prima dată pentru fișierul de stil și a doua oară pentru numărul de versiune.

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

Acesta este tot ce trebuie făcut. Sper că acest lucru vă este de ajutor sau util. Puteți parcurge toți parametrii disponibili și vedea ce puteți afișa cu funcția bloginfo().

Ignorați comentariul meu deoarece @Ravs a atras atenția asupra erorii mele privind parametrul 'versions' pentru funcția bloginfo(). Într-adevăr, acesta afișează numărul de versiune WordPress.