如何版本化主css文件?

时间:2010-08-11 作者:Bobby Jack

如何指示wordpress使用“样式”以外的文件名。css“用于我的主样式表-例如,styles-1。css?我想这样做是为了版本控制和缓存。

9 个回复
最合适的回答,由SO网友:EAMann 整理而成

Style.css 是WordPress主题所必需的。WordPress从中获取外观>>主题菜单的主题名称和元信息。也就是说,你实际上不必使用style.css 在你的主题中。我知道有几个现成的主题没有使用它,我只在少数定制设计中使用它。

在里面header.php 只需将以下标记替换为常规样式表链接:

<link rel="stylesheet" type="text/css" href="<?php bloginfo(\'stylesheet_directory\'); ?>/style-1.css" />
这将加载替代样式表作为页面的样式表,并完全忽略常规样式表style.css.

SO网友:Annika Backstrom

这可能不合适,如果我错过了什么,请告诉我。

第四个理由是wp_enqueue_style() 是样式表的版本号。在您的主题中functions.php:

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\');
要求您的header.php 是否执行wp_head(), 哪一个of course 不管怎样你都在做

这使您可以使用CSS文件推送长到期头,并通过更新版本号强制客户端下载新文件。WP将在CSS文件的URL中附加“?ver=N”。

SO网友:John P Bloch

把这个放到你的主题函数中。php文件:

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

add_filter( \'stylesheet_uri\', \'my_cool_style_versioner\' );

SO网友:Paul Sheldrake

埃曼是对的,你不必使用style.css 所有CSS的文件。

要对主题中的样式表和其他文件进行版本控制,可以将其添加到函数中。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\';
    }
}
然后,当你链接到你的样式表时,你就可以这样做了。

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( \'stylesheet_url\' ); ?>?v=<?php fileVersion(\'style.css\'); ?>" />
这样,您就不必手动更新版本号,只要在服务器上更新文件,版本就会自动更改为该UNIX时间戳

SO网友:Alexander Taubenkorb

注意,你should not use querystrings for file versioning (代理不会缓存它们)。

更好的方法是通过添加一个数字,比如

  • 风格。123.css
  • 风格。124.css
所以我的方法如下:

如果您正在使用,Apache htaccess会重定向

HTML5 boilerplate 使用apache,您可以在一零七:

# ------------------------------------------------------------------------------
# | 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>
(通常必须首先通过取消对行的注释来启用它)

主题功能。php我想自动将我的主题版本用于样式表,因此我提出了以下建议:

您可以将以下内容添加到主题中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\');
注意,我提供了null 作为版本,而不是false, 因此Wordpress不会将其版本附加到querystring中。

结果

这会为主题的1.0.2版输出如下样式表:

<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\' />
在我以我的风格将主题更改为2.0.0版之后。css它将输出以下内容:

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

其他注意事项

注意,如果你像我一样去掉版本中的点,你可能会在主题版本1.2.23和1.22.3中遇到问题,因为它们都会导致1223的无点版本。

更好的方法是在中考虑到这一点。htaccess文件。你可以在数字之间加下划线,也可以用下划线代替点。

这是未经测试的,但应该有效:

。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>

功能。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\');

SO网友:artlung

好吧,你可以用style.css 作为您调用所需版本的地方。简单地说

@import url("style-1.css");
然后,升级版本时,只需将其编辑为:

@import url("style-2.css");
至于保存版本,您是否考虑过使用Subversion, 或git? 然后你就可以拥有样式表的完整记录了。我可能没有完全理解您进行版本控制的全部原因。

SO网友:JHoffmann

我遇到了这个老问题,发现现在所有的答案似乎都过时了。

我只会使用样式中定义的主题版本。css文件头部分。你可以用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\' );
这样,版本号将自动附加到url,如?ver=#.## 当主题的版本在样式上增加时,url就会改变。css。

SO网友:Rashed Hasan

在里面functions.php 改变

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

wp_enqueue_style( \'twentysixteen-style\', get_stylesheet_uri(), array(), $ver );
改变$ver 任何价值,或time() 对于开发模式。

SO网友:David Thomas

我不确定WP3是否已更改,因此我不完全确定,但一种方法是直接编辑相关的php文件(我不知道是否可以从仪表板/管理页面中完成):

wp-folder/wp-content/themes/your-theme/
敞开心扉header.php. 在该文件中找到以下行:

<link rel="stylesheet" href="<?php bloginfo(\'stylesheet_url\'); ?>" type="text/css" media="screen" />
将“版本”添加到链接样式表中(假设您希望它类似于:stylesheetURL.css?version=2) 将其更改为:

<link rel="stylesheet" href="<?php bloginfo(\'stylesheet_url\'); ?>?version=2" type="text/css" media="screen" />
不过,这有点不雅观,所以如果有更好的方式,我希望自己也能听到=)


我刚刚重读了你的问题。。。

使用不同的样式表styles-1.css 您可以通过(以上)行:

<link rel="stylesheet" href="absolute/or/root-relative/path/to/styles-1.css" type="text/css" media="screen" />
(基本上移除<?php ... ?> 并将其替换为常规路径。)

结束

相关推荐