web-dev-qa-db-ja.com

メインのCSSファイルをバージョン管理するにはどうすればいいですか。

メインのスタイルシートに 'styles.css'以外のファイル名（たとえばstyles-1.css）を使用するようにwordpressに指示するにはどうすればよいですか。バージョン管理とキャッシュの目的でこれを行いたいのですが。

themesstylesheet
7
Bobby Jack

Style.cssはあなたのWordPressテーマに必要です。 WordPressがAppearance >> Themesメニューのテーマ名とメタ情報を取得する場所です。そうは言っても、あなたはあなたのテーマで実際には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()の4番目の引数はスタイルシートのバージョン番号です。あなたのテーマの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はCSSファイルのURLに "？ver = N"を追加します。

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 。css
  • style. 124 。css

だから私のアプローチは次のとおりです。

Apache htaccessリダイレクト

Apacheで HTML5ボイラープレート を使用している場合は、.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>

（通常はコメントを外して最初に有効にする必要があります）

テーマfunctions.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は正しいです、あなたはすべてのあなたの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 bloginfo( 'stylesheet_url' ); ?>?v=<?php fileVersion('style.css'); ?>" />

こうすれば手動でバージョン番号を更新する必要はありません、サーバ上でファイルが更新されるときはいつでもバージョンは自動的にそのUNIXタイムスタンプに変更されます

3
Paul Sheldrake

まあ、あなたはあなたが望むバージョンを呼び出す場所として単にstyle.cssを使うことができます。簡単に言えば

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

それからあなたがバージョンをアップグレードするとき、ただそれがになるようにそれを編集してください：

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

バージョンの保存に関しては、 Subversion 、または git の使用を検討しましたか？それからあなたはあなたのスタイルシートの完全な実績を持つことができます。バージョン管理の完全な理由が完全に理解されていない可能性があります。

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' );

このように、バージョン番号は?ver=#.##のように自動的にURLに追加され、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で変更されたかどうかわからないので、完全にはわかりませんが、1つの方法は関連する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