it-swarm.cn

如何对主CSS文件进行版本控制?

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

7
Bobby Jack

您的WordPress主题需要Style.css。这就是WordPress获取外观>>主题菜单的主题名称和元信息的地方。也就是说,实际上你根本不必在你的主题中使用style.css。我知道几个不使用它的现成主题,我只在少数我的自定义设计中使用它。

header.php中,只需放置以下标记代替常规样式表链接:

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

这将加载您的替代样式表作为页面的样式表,并完全忽略常规style.css

3
EAMann

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

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()当然 你还在做什么。;)

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

13
Annika Backstrom

将它放在主题的functions.php文件中:

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

注意,你 不应该使用查询字符串进行文件版本控制 (代理不要缓存它们)。

更好的方法是通过添加类似的数字来版本化文件名

  • style. 123 .cs
  • style. 124 。css

所以我的方法如下:

Apache htaccess重定向

如果您使用 HTML5样板 使用Apache,您可以在.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>

(您通常必须首先启用它,取消注释行)

主题函数.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不会在查询字符串中附加其版本。

结果

这将为您的主题版本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' />

在我的style.css中将主题更改为2.0.0后,它将输出以下内容:

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

的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是正确的,您不必将style.css文件用于所有CSS。

要对样式表和主题中的其他文件进行版本控制,可以将其添加到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';
    }
}

然后,当您链接到样式表时,您可以执行此操作。

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

这样您就不必手动更新版本号,只要在服务器上更新文件,版本就会自动更改为UNIX时间戳

3
Paul Sheldrake

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

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

然后,当您升级版本时,只需将其编辑为:

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

至于保存版本,您是否考虑过使用 Subversiongit ?然后,您可以拥有样式表的完整跟踪记录。我可能没有完全理解你的版本控制的全部原因。

2
artlung

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

我只想使用style.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=#.##,并且只要主题的版本在style.css中递增,url就会更改。

2
JHoffmann

functions.php中更改

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

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

$ver更改为任何值,或time()用于开发模式。

1
Rashed Hasan

我不确定WP3是否有所改变,所以我不完全确定,但有一种方法是直接编辑相关的php文件(我不知道是否可以在Dashboard/Admin页面内完成) :

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 ... ?>并用常规路径替换它。)

0
David Thomas