问题描述

如何指示 wordpress 使用不同于’styles.css’ 的文件夹作为主样式表 – 例如，styles-1.css？我想为版本控制和缓存目的而这样做。

最佳解决方案

您的 WordPress 主题需要 Style.css 。这就是 WordPress 获取外观>> 的主题名称和元信息的地方。主题菜单从。也就是说，您实际上并不需要在您的主题中使用 style.css 。我知道几个很容易使用的主题，它不使用它，我只使用它在一些我的定制设计。

在 header.php 中，只需放置以下标签来代替常规样式表链接：

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

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

次佳解决方案

这可能是不适当的，请让我知道，如果我错过了一些东西。

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 将附加”?ver=N” 到您的 CSS 文件的 URL 。

第三种解决方案

放在你的主题的 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' );

第四种方案

EAMann 是正确的，您不必为所有 CSS 使用 style.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%20bloginfo(%20'stylesheet_url'%20);%20?>?v=<?php%20fileVersion('style.css');%20?>" />

这样，您无需手动更新版本号，只要文件在服务器上更新，版本将自动更改为该 UNIX 时间戳

第五种方案

注意，你 should not use querystrings for file versioning(proxys 不缓存它们) 。

更好的方法是通过添加一个数字来版本文件名

  • style.123.css

  • style.124.css

所以我的做法如下：

Apache htaccess 重定向

如果您使用 HTML5 boilerplate 与 apache，您可以在.htaccess file 中找到以下部分：

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

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

主题功能

我想自动使用我的主题版本的样式表，所以我想出了以下：

您可以将以下内容添加到主题 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 没有在查询字符串中附加它的版本。

Result

这将为您的主题的版本 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 版本的 style.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，因为它们都产生了一个无 dot 版本的 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');

第六种方案

那么你可以简单地使用 style.css 作为你想要的版本。简单的说

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

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

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

对于保存版本，您是否考虑使用 Subversion 或 git？然后，您可以拥有样式表的完整记录。有可能我没有完全了解您的版本控制的完整原因。

第七种方案

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

我只需使用 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' );

像这样，版本号将自动附加到像?ver=#.##这样的 URL，一旦主题的版本在 style.css 中增加，URL 就会更改。

参考文献

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。