Attribuer un numéro de version à la feuille de style principale d'un thème enfant

Dans header.php, j'aime attribuer un numéro de version à la feuille de style afin que le navigateur soit obligé de le rafraîchir. Mais lorsque vous travaillez avec un thème enfant, sa feuille de style n'est pas explicitement appelée, mais WordPress le recherche automatiquement. Alors, comment ou où attribuer un numéro de version à la feuille de style du thème enfant?

Vous pouvez mettre à jour la version dans la feuille de style des thèmes enfants elle-même ...

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

Je pense que la meilleure façon de le faire est de laisser la feuille de style du thème enfant (style.css) vide avec seulement les commentaires nécessaires (comme le nom du thème, la description, etc., donc wordpress peut reconnaître votre thème), puis de créer un autre fichier css dans votre- dossier-nom-thème / css / main.css

Après cela sur function.php, vous pouvez avoir une nouvelle "version" à chaque fois que vous changez votre fichier:

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

La logique:

Chaque fois que vous enregistrez le fichier, l'heure modifiée du fichier est modifiée. La nouvelle heure est passée à la fonction date pour convertir l'heure (filemtime renvoie un entier représentant l'heure) au format date pour en faire une chaîne au format souhaité. Dans notre exemple, l'heure est formatée avec une précision de minutes. Vous pouvez le changer pour suivre même la seconde, c'est-à-dire "YmdHis". Après cela, la nouvelle heure modifiée du fichier est transmise en tant que nouvelle version à wp_enqueue_style.

Référence :

http://www.php.net/filemtime

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

Ce que vous devez faire est de désenregistrer le style principal par poignée, puis de vous réinscrire avec votre numéro de version. Dans ce cas, la poignée est style-css.

Vous pouvez déterminer le handle que vous devez utiliser en consultant le lien vers la feuille de style rendue:

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

Ici, l'id est style-css-cssce qui signifie que notre poignée eststyle-css

Mettez ceci dans le function.php de votre thème enfant:

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

La première réponse actuelle dépend du thème, car elle nécessite que le développeur du thème ait fait ce numéro de version du thème enfant dans une variable, puis l'ajouté au style.css enfant lors de sa mise en file d'attente. J'ai vu cela sur certains thèmes, mais pas beaucoup. Ce qui suit fonctionne sur n'importe quel thème qui enregistre les styles enfants dans functions.php - ne fonctionnera pas avec l'ancienne règle @import, que je n'ai plus beaucoup vue.

Dans functions.php du thème enfant, vous devriez avoir quelque chose de similaire à ceci:

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

Si vous le modifiez comme suit, il ajoutera un horodatage comme numéro de version à chaque enregistrement du fichier, permettant à chaque modification de la feuille de style de passer par le 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);

J'espère que cela aide quelqu'un. Je l'utilise sur tous les sites que je gère activement.

Je crois que si vous utilisez l'éditeur de thème Wordpress pour modifier la feuille de style de votre thème enfant, il ajoute automatiquement un nouveau numéro de version à chaque fois que vous enregistrez le fichier.

Au lieu d'utiliser le style.css par défaut, j'utilise généralement wp_enqueue_style dans le fichier functions.php du thème enfant ou un autre fichier php inclus. Donc, vous auriez toujours le style.css dans le thème enfant avec tous les détails du thème enfant, mais vous pouvez alors avoir un fichier css séparé dans le thème enfant pour le style du thème enfant réel (je le mets généralement dans un actif / css dans le thème enfant). Cela vous permettrait également de définir la version CSS avec le 4ème paramètre. Par exemple:

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

Vous pouvez ajouter une priorité à l'action si elle ne se charge pas dans le bon ordre ou si vous travaillez avec le paramètre de dépendance dans wp_enqueue_style ci-dessus:

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