web-dev-qa-db-fra.com

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 l'actualiser. 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 et où attribuer un numéro de version à la feuille de style du thème enfant?

child-themestylesheet
9
drake035

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
*/
4
Matt Royal

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

Ensuite, sur function.php, vous pouvez avoir une nouvelle "version" à chaque fois que vous modifiez 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 de modification du fichier est modifiée. La nouvelle heure est passée à la fonction de date pour convertir l'heure (filemtime renvoie un entier représentant l'heure) au format de 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 seconde, c'est-à-dire "YmdHis". Après cela, la nouvelle heure modifiée du fichier est passée en tant que nouvelle version à wp_enqueue_style.

Référence:

http://www.php.net/filemtime

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

9
Laxmana

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

Vous pouvez déterminer le descripteur que vous devez utiliser en consultant le lien de 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-css, ce qui signifie que notre pseudonyme est style-css

Mettez ceci dans le fichier 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');
8
kraftner

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 de l'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 de thème enfant réel (je le mets généralement dans un fichier assets/css). répertoire dans le thème de l’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 utilisez le paramètre de dépendance dans wp_enqueue_style ci-dessus:

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

La principale réponse actuelle dépend du thème, car elle nécessite que le développeur du thème ait converti ce numéro de version du thème de l'enfant en variable, puis l'ajoute au fichier enfant style.css 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 pas 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 en tant que numéro de version à chaque fois que le fichier est enregistré, ce qui permet à chaque modification de la feuille de style de s'affranchir du 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 ça aide quelqu'un. J'utilise ceci sur tous les sites que je gère activement.

0
Jeff Travilla

Je pense 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.

0
selfagency