Atribuindo um número de versão à folha de estilo principal de um tema filho

No header.php, gosto de atribuir um número de versão à folha de estilo para que o navegador seja forçado a atualizá-lo. Mas, ao trabalhar com um tema filho, sua folha de estilo não é chamada explicitamente, mas o WordPress o procura automaticamente. Então, como ou onde atribuir um número de versão à folha de estilo do tema filho?

Você pode atualizar a versão na própria folha de estilo dos temas filho ...

/*
 Theme Name:   Twenty Fourteen Child
 Theme URI:    http://example.com/twenty-fourteen-child/
 Description:  Twenty Fourteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfourteen
 Version:      1.1.2 <---- Update here
*/

Eu acho que a melhor maneira de fazer isso é deixar a folha de estilo do tema filho (style.css) vazia com apenas os comentários necessários (como nome do tema, descrição etc., para que o wordpress reconheça o seu tema) e crie outro arquivo css no seu- pasta-nome-do-tema / css / main.css

Depois disso, em function.php, você pode ter uma nova "versão" toda vez que alterar seu arquivo:

function my_scripts_and_styles(){

$cache_buster = date("YmdHi", filemtime( get_stylesheet_directory() . '/css/main.css'));
wp_enqueue_style( 'main', get_stylesheet_directory_uri() . '/css/main.css', array(), $cache_buster, 'all' );

}

add_action( 'wp_enqueue_scripts', 'my_scripts_and_styles', 1);

A lógica:

Toda vez que você salva o arquivo, a hora modificada do arquivo está sendo alterada. A nova hora está sendo passada para a função date para converter a hora (filemtime retorna um número inteiro que representa a hora) para o formato de data para torná-la uma sequência no formato desejado. No nosso exemplo, o tempo está sendo formatado com precisão de minutos. Você pode alterá-lo para rastrear até o segundo, ou seja. "YmdHis"Depois que o novo horário modificado do arquivo estiver sendo passado como uma nova versão para wp_enqueue_style.

Referência:

http://www.php.net/filemtime

http://php.net/manual/en/function.date.php

O que você precisa fazer é cancelar o registro do estilo principal pelo identificador e, em seguida, registrar novamente com o número da sua versão. Nesse caso, o identificador é style-css.

Você pode determinar o identificador que precisa usar olhando para o link da folha de estilo renderizada:

<link rel='stylesheet' id='style-css-css'  href='http://site-url/wp-content/themes/child-theme/style.css?ver=4.6.1' type='text/css' media='all' />

Aqui o id é o style-css-cssque significa que nosso identificador éstyle-css

Coloque isso no function.php do seu filho-tema:

function wpse_145141_change_style_version(){
    // First de-register the main stylesheet
    wp_deregister_style( 'style-css' );
    // Then add it again, using your custom version number
    wp_register_style( 'style-css', get_stylesheet_uri(), array(), "VERSION_NUMBER" );
    //finally enqueue it again
    wp_enqueue_style( 'style-css');
}

add_action( 'wp_enqueue_scripts', 'wpse_145141_change_style_version');

A resposta principal atual é dependente do tema, pois exige que o desenvolvedor do tema tenha transformado o número da versão do tema filho em uma variável e, em seguida, anexado ao filho style.css ao colocá-lo na fila. Eu já vi isso em alguns temas, mas não em muitos. O seguinte funciona em qualquer tema que registre os estilos filhos em functions.php - não funcionará com a antiga regra @import, que eu não via muito mais.

Em functions.php do tema filho, você deve ter algo semelhante a este:

// enqueue the child theme stylesheet

function wp_schools_enqueue_scripts() {
  wp_register_style( 'childstyle', get_stylesheet_directory_uri() . '/style.css'  );
  wp_enqueue_style( 'childstyle' );
}
add_action( 'wp_enqueue_scripts', 'wp_schools_enqueue_scripts', 11);

Se você alterá-lo para o seguinte, ele acrescentará um carimbo de data e hora como número da versão sempre que o arquivo for salvo, permitindo que cada alteração da folha de estilo seja interrompida pelo cache local:

 // enqueue the child theme stylesheet

 function wp_schools_enqueue_scripts() {
   wp_register_style( 
     'childstyle', 
     get_stylesheet_directory_uri() . '/style.css', 
     array(), 
     filemtime( get_stylesheet_directory() . '/style.css' ) 
   );
   wp_enqueue_style( 'childstyle' );
 }
 add_action( 'wp_enqueue_scripts', 'wp_schools_enqueue_scripts', 11);

Espero que isso ajude alguém. Eu uso isso em todos os sites que eu gerencio ativamente.

Acredito que se você usar o editor de temas do Wordpress para editar a folha de estilo do tema filho, ele anexará automaticamente um novo número de versão cada vez que você salvar o arquivo.

Em vez de usar o style.css padrão, eu normalmente uso wp_enqueue_style no functions.php do tema filho ou em outro arquivo php incluído. Portanto, você ainda teria o style.css no tema filho com todos os detalhes do tema filho, mas poderá ter um arquivo css separado no tema filho para o estilo real do tema filho (eu costumo colocar isso em assets / css diretório dentro do tema filho). Isso também permitiria definir a versão CSS com o 4º parâmetro. Por exemplo:

function theme_name_child_scripts() {
    wp_enqueue_style( 'style-name', get_stylesheet_directory_uri() . '/assets/css/child-style.css', array(), '1.0.0', 'screen');
}

add_action( 'wp_enqueue_scripts', 'theme_name_child_scripts' );

Você pode adicionar uma prioridade à ação se ela não estiver carregando na ordem correta ou trabalhar com o parâmetro de dependência em wp_enqueue_style acima:

add_action( 'wp_enqueue_scripts', 'theme_name_child_scripts', 20 );