web-dev-qa-db-fra.com

Comment puis-je versionner le fichier CSS principal?

Comment puis-je demander à wordpress d'utiliser un nom de fichier autre que 'styles.css' pour ma feuille de style principale - par exemple, styles-1.css? J'aimerais faire ceci à des fins de gestion de version et de mise en cache.

themesstylesheet
7
Bobby Jack

Style.css est requis pour votre thème WordPress. C'est là que WordPress obtient le nom du thème et les méta-informations du menu Apparence >> Thèmes. Cela dit, vous n'avez pas du tout besoin d'utiliser style.css dans votre thème. Je connais plusieurs thèmes facilement disponibles qui ne l'utilisent pas et je ne l'utilise que dans une poignée de mes conceptions personnalisées.

Dans header.php, placez simplement la balise suivante à la place du lien de feuille de style habituel:

<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory'); ?>/style-1.css" />

Ceci chargera votre feuille de style alternative en tant que feuille de style de la page et ignorera complètement le style.css normal.

3
EAMann

Cela peut être inapproprié, s'il vous plaît laissez-moi savoir si j'ai manqué quelque chose.

Le quatrième argument de wp_enqueue_style() est le numéro de version de la feuille de style. Dans le functions.php de votre thème:

function my_theme_styles() {
    // replace "10" with your version number; increment as you Push changes
    wp_enqueue_style('my-theme-style', get_bloginfo('template_directory') . '/style.css', false, 10);
}
add_action('wp_print_styles', 'my_theme_styles');

Requiert que votre header.php fasse une wp_head(), ce que bien sûr vous faisiez de toute façon. ;)

Cela vous permet de repousser les en-têtes d'expiration longue avec votre fichier CSS et d'obliger les clients à télécharger un nouveau fichier en mettant à jour le numéro de version. WP ajoutera "? Ver = N" à l'URL de votre fichier CSS.

13
Annika Backstrom

Déposez ceci dans le fichier functions.php de votre thème:

function my_cool_style_versioner( $style ){
  return str_replace( '/style.css', '/style-1.css', $style );
}

add_filter( 'stylesheet_uri', 'my_cool_style_versioner' );
3
John P Bloch

Notez que vous ne devez pas utiliser de chaînes de requête pour la gestion des versions de fichiers (les proxys ne les mettent pas en cache).

Un meilleur moyen serait de modifier les noms de fichiers en ajoutant un numéro tel que

  • style. 123 . css
  • style. 124 . css

Donc, mon approche est la suivante:

Apache htaccess redirections

Si vous utilisez HTML5 boilerplate avec Apache, vous trouverez la section suivante dans le fichier.htaccess:

# ------------------------------------------------------------------------------
# | Filename-based cache busting                                               |
# ------------------------------------------------------------------------------

# If you're not using a build process to manage your filename version revving,
# you might want to consider enabling the following directives to route all
# requests such as `/css/style.12345.css` to `/css/style.css`.

# To understand why this is important and a better idea than `*.css?v231`, read:
# http://stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring

<IfModule mod_rewrite.c>
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^(.+)\.(\d+)\.(js|css|png|jpe?g|gif)$ $1.$3 [L]
</IfModule>

(Vous devez généralement l'activer d'abord, en supprimant les commentaires des lignes)

Thème functions.php

Je voulais utiliser automatiquement la version de mon thème pour la feuille de style. Je suis donc venu avec ce qui suit:

Vous pouvez ajouter ce qui suit à vos thèmes functions.php :

function my_theme_styles() {
    $my_theme = wp_get_theme();
    $version = str_replace('.','',$my_theme->get( 'Version' ));
    $stylesheet = get_bloginfo('stylesheet_directory').'/style.'.$version.'.css';
    wp_enqueue_style('my-main', $stylesheet, false, null);
}
add_action('wp_print_styles', 'my_theme_styles');

Notez que j'ai fourni null en tant que version au lieu de false, de sorte que Wordpress n'ajoute pas sa version dans la chaîne de requête.

Résultat

Cela produit une feuille de style comme celle ci-dessous pour la version 1.0.2 de votre thème:

<link rel='stylesheet' id='maw-main-css'  href='http://www.example.com/wp-content/themes/my-theme/style.102.css' type='text/css' media='all' />

Après avoir changé mon thème à la version 2.0.0 dans mon style.css, les résultats suivants seront générés:

<link rel='stylesheet' id='maw-main-css'  href='http://www.example.com/wp-content/themes/my-theme/style.200.css' type='text/css' media='all' />

Notes complémentaires

Attention, si vous supprimez simplement les points de la version comme ceux que je vous ai présentés, vous risquez de rencontrer des problèmes avec les versions à thème comme 1.2.23 et 1.22.3, car elles entraînent toutes les deux une version sans points de 1223.

Une meilleure solution serait de prendre cela en compte dans le fichier .htaccess. Par exemple, vous pouvez autoriser les traits de soulignement entre les nombres et remplacer les points par eux.

Ceci n’a pas été testé, mais devrait fonctionner:

.htaccess

# ------------------------------------------------------------------------------
# | Filename-based cache busting                                               |
# ------------------------------------------------------------------------------
<IfModule mod_rewrite.c>
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^(.+)\.([_\d]+)\.(js|css|png|jpe?g|gif)$ $1.$3 [L]
</IfModule>

functions.php

function my_theme_styles() {
    $my_theme = wp_get_theme();
    $version = str_replace('.','_',$my_theme->get( 'Version' ));
    $stylesheet = get_bloginfo('stylesheet_directory').'/style.'.$version.'.css';
    wp_enqueue_style('my-main', $stylesheet, false, null);
}
add_action('wp_print_styles', 'my_theme_styles');
3
Alexander Taubenkorb

EAMann est correct, vous n'avez pas à utiliser le fichier style.css pour tous vos CSS.

Pour la gestion des versions de la feuille de style et des autres fichiers de votre thème, vous pouvez l'ajouter à votre fichier functions.php.

function fileVersion($filename)
{
    // get the absolute path to the file
    $pathToFile = TEMPLATEPATH.'/'.$filename;
    //check if the file exists
    if (file_exists($pathToFile)) 
    {
        // return the time the file was last modified
        echo filemtime($pathToFile);
    }
    else
    {
        // let them know the file wasn't found
        echo 'FileNotFound';
    }
}

Et puis, lorsque vous faites le lien vers votre feuille de style, vous pouvez le faire.

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

De cette manière, vous n'avez pas besoin de mettre à jour manuellement le numéro de version, à chaque fois que le fichier est mis à jour sur le serveur, la version change automatiquement pour l'horodatage UNIX.

3
Paul Sheldrake

Eh bien, vous pouvez simplement utiliser style.css à l'endroit où vous appelez la version de votre choix. Tout simplement

@import url("style-1.css");

Ensuite, lorsque vous mettez à niveau une version, modifiez-la pour qu'elle soit:

@import url("style-2.css");

En ce qui concerne l’enregistrement des versions, avez-vous envisagé d’utiliser un Subversion ou git ? Ensuite, vous pouvez avoir un historique complet de votre feuille de style. Il est possible que je ne comprenne pas bien les raisons de votre gestion des versions.

2
artlung

Je suis tombé sur cette vieille question et j'ai trouvé que toutes les réponses semblaient obsolètes de nos jours.

J'utiliserais simplement la version du thème telle que définie dans la partie en-tête du fichier style.css. Vous pouvez l'obtenir avec wp_get_theme()->get( 'Version' )

function my_enqueue_styles() {
    wp_enqueue_style( 'my-theme-style', get_template_directory_uri() . '/style.css', false, wp_get_theme()->get( 'Version' ) );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_styles' );

Comme cela, le numéro de version sera automatiquement ajouté à l'URL comme ?ver=#.## et l'URL changera dès que la version du thème sera incrémentée dans style.css.

2
JHoffmann

Dans functions.php changer

wp_enqueue_style( 'twentysixteen-style', get_stylesheet_uri();

à

wp_enqueue_style( 'twentysixteen-style', get_stylesheet_uri(), array(), $ver );

remplacez $ver par une valeur ou time() pour le mode de développement.

1
Rashed Hasan

Je ne sais pas si cela a changé pour WP3, donc je ne suis pas tout à fait sûr, mais l'un des moyens consiste à modifier directement le fichier php concerné (je ne sais pas si cela peut être fait depuis les pages Dashboard/Admin) :

wp-folder/wp-content/themes/your-theme/

Et ouvrez header.php. Dans ce fichier, trouvez cette ligne:

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

Pour ajouter une "version" à la feuille de style liée (si vous voulez qu'elle ressemble à ceci: stylesheetURL.css?version=2), modifiez-la en:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>?version=2" type="text/css" media="screen" />

C'est un peu inélégant, cependant, s'il y a une meilleure façon, j'aimerais l'entendre moi-même =)

Pour utiliser une autre feuille de style styles-1.css, vous pouvez simplement utiliser la ligne (ci-dessus) pour:

<link rel="stylesheet" href="absolute/or/root-relative/path/to/styles-1.css" type="text/css" media="screen" />

(Supprimez essentiellement le <?php ... ?> et remplacez-le par un chemin normal.)

0
David Thomas