cómo agregar la versión de style.css en WordPress

Si eres un desarrollador de temas, es posible que desees forzar la recarga de tus recursos cuando publicas una nueva versión.

El versionado de un tema se realiza en style.css

/*
    Theme Name: Nombre de tu tema
    Version: 1.0.2
*/

Al inicio de tu functions.php:

$theme = wp_get_theme();
define('THEME_VERSION', $theme->Version); //obtiene la versión escrita en tu style.css

Luego, cuando cargues CSS o JS, usa THEME_VERSION como cuarto argumento:

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

Esto generará en la página:

.../nombre-de-tu-tema/css/main.css?ver=1.0.2 

Resulta útil cuando tienes múltiples recursos que gestionar y no deseas cambiarlos manualmente.

En lugar de codificar manualmente la versión, en algunos casos puede ser mejor versionar dinámicamente tu hoja de estilos. De esta manera, cada vez que la modifiques, cambiará automáticamente y refrescará la caché del navegador inmediatamente sin tener que editar tu functions.php una y otra vez.

Puedes usar filemtime() para lograr esto. Así es como puedes hacerlo en un estilo hijo que hace referencia al parent_style:

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

Puedes lograr esto usando una de las siguientes formas:

1) Agrega la siguiente etiqueta en el archivo header.php del tema.

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

2) Agrega el siguiente código en el archivo functions.php del tema.

function theme_styles()  
{ 
  // Registrar el estilo así para un tema:  
  // (Primero el nombre único para el estilo (custom-style) luego el src, 
  // después dependencias, versión y tipo de medio)
  wp_enqueue_style( 'style-css', get_template_directory_uri() . '/style.css', array(), '1.2', 'all' );
}
add_action('wp_enqueue_scripts', 'theme_styles');

Para más información consulta esta página.

La mejor manera de cargar CSS en tu tema de WordPress es mediante el siguiente código en tu archivo functions.php:

function theme_styles()  
{ 
  global $ver_num; // define una variable global para el número de versión
  $ver_num = mt_rand() // en cada llamada/carga del estilo, $ver_num obtendrá un valor diferente
  wp_enqueue_style( 'style-css', get_template_directory_uri() . '/style.css', array(), $ver_num, 'all' );
}
add_action('wp_enqueue_scripts', 'theme_styles');

Esta es la forma correcta de cargar los estilos en tu tema y también es la mejor para fines de pruebas y desarrollo, ya que cada actualización entregará la versión actualizada del estilo.

Si deseas evitar la carga de la primera manera, puedes usar esta versión más corta y colocar la siguiente línea en tu archivo header.php para obtener el mismo resultado:

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

Saludos

Prueba esto:

Añade esto al archivo 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();
}

Añade esto al header o footer -> autoVer('/js/main.js');

Contrario a los métodos presentados hasta ahora, creo que es mejor usar el número de versión que aparece en la parte superior de tu archivo style.css:

// style.css
/**
Theme Name: Mi tema
...
Version: 1.2.3
...
**/

Para usar la versión del tema en tu CSS, agrega lo siguiente a tu archivo functions.php (o equivalente):

<?php

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

Esto significa que, después de editar tu archivo style.css, lo único que necesitas hacer es cambiar el número de versión en la parte superior del mismo archivo para ver los cambios en el frontend.

Si examinas la sección head del HTML del tema, verás lo siguiente:

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

Otra solución, si aún no lo has resuelto, es cambiar el nombre del archivo style.css de tu tema hijo a, por ejemplo, style2.css y luego modificarlo en el archivo functions.php de tu tema hijo, como se muestra a continuación:

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

Esto hará que WordPress solicite y sirva un nuevo archivo CSS para tu sitio web.

Aquí utilizamos la función wp_get_theme() de WordPress para obtener la versión del tema (tal como está especificada en la hoja de estilos del tema, style.css):

// obtener versión 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' );

De hecho, no necesitas eliminar la caché del archivo style.css.

Puedes escribir tu propio archivo CSS y luego encolarlo como lo ha escrito @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');

Según las reglas del navegador, el último archivo CSS tiene mayor prioridad, así que asegúrate de usar !important en tu código CSS si es necesario.

Buena suerte.

Esta es una forma bastante directa de obtener el número de versión llamando a la función bloginfo($show) dos veces. Primero para la hoja de estilos y en segundo lugar para el número de versión.

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

Eso es todo lo que hay que hacer. Espero que ayude o sea útil. Puedes revisar todos los parámetros disponibles y ver qué puedes mostrar con la función bloginfo().

Ignora mi comentario ya que @Ravs ha señalado mi error con respecto al parámetro 'versions' para la función bloginfo(). De hecho, imprime el número de versión de WordPress.