問題描述

如何指示 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 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。