web-dev-qa-db-ja.com

バージョン番号を子テーマのメインスタイルシートに割り当てる

Header.phpでは、ブラウザが強制的に更新するように、バージョン番号をスタイルシートに割り当てるのが好きです。しかし、子テーマを扱うとき、そのスタイルシートは明示的に呼ばれるのではなく、むしろWordPressは自動的にそれを探します。では、子テーマのスタイルシートにバージョン番号をどのようにまたはどこで割り当てるべきか。

child-themestylesheet
9
drake035

子テーマのスタイルシート自体のバージョンを更新できます。

/*
 Theme Name:   Twenty Fourteen Child
 Theme URI:    http://example.com/twenty-fourteen-child/
 Description:  Twenty Fourteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfourteen
 Version:      1.1.2 <---- Update here
*/
4
Matt Royal

これを行う最善の方法は、必要なコメント（テーマ名、説明など、ワードプレスがあなたのテーマを認識できるように）だけで子テーマスタイルシート（style.css）を空のままにしてからテーマ名フォルダ/ css/main.css

その後function.phpにあなたがあなたのファイルを変更するたびにあなたは新しい "バージョン"を持つことができます：

function my_scripts_and_styles(){

$cache_buster = date("YmdHi", filemtime( get_stylesheet_directory() . '/css/main.css'));
wp_enqueue_style( 'main', get_stylesheet_directory_uri() . '/css/main.css', array(), $cache_buster, 'all' );

}

add_action( 'wp_enqueue_scripts', 'my_scripts_and_styles', 1);

ロジック：

ファイルを保存するたびに、ファイルの修正時刻が変更されます。新しい時刻はdate関数に渡され、時刻（filemtimeは時刻を表す整数）を日付形式に変換して、希望の形式の文字列にします。この例では、時刻は分単位の精度でフォーマットされています。 "YmdHis"を追跡するように変更することができますその後、ファイルの新しい修正時刻がwp_enqueue_styleに新しいバージョンとして渡されます。

参照：

http://www.php.net/filemtime

http://php.net/manual/en/function.date.php

9
Laxmana

あなたがする必要があるのはハンドルによって主なスタイルの登録を解除してからあなたのバージョン番号で再登録することです。この場合、ハンドルはstyle-cssです。

レンダリングされたスタイルシートのリンクを見て、使用する必要があるハンドルを判断できます。

<link rel='stylesheet' id='style-css-css'  href='http://site-url/wp-content/themes/child-theme/style.css?ver=4.6.1' type='text/css' media='all' />

ここでidはstyle-css-cssで、これは私たちのハンドルがstyle-cssであることを意味します

これをあなたの子供のテーマのfunction.phpに入れてください：

function wpse_145141_change_style_version(){
    // First de-register the main stylesheet
    wp_deregister_style( 'style-css' );
    // Then add it again, using your custom version number
    wp_register_style( 'style-css', get_stylesheet_uri(), array(), "VERSION_NUMBER" );
    //finally enqueue it again
    wp_enqueue_style( 'style-css');
}

add_action( 'wp_enqueue_scripts', 'wpse_145141_change_style_version');
8
kraftner

デフォルトのstyle.cssを使う代わりに、私は子供のテーマのfunctions.phpまたは他のインクルードされたphpファイルで wp_enqueue_style を通常使用します。だから、あなたはまだすべての子テーマの詳細と一緒に子テーマにstyle.cssを持っているでしょうが、実際の子テーマのスタイルのために子テーマに別のcssファイルを持つことができます子テーマ内のディレクトリ）これにより、CSSのバージョンを4thパラメータで設定することもできます。例えば：

function theme_name_child_scripts() {
    wp_enqueue_style( 'style-name', get_stylesheet_directory_uri() . '/assets/css/child-style.css', array(), '1.0.0', 'screen');
}

add_action( 'wp_enqueue_scripts', 'theme_name_child_scripts' );

アクションが正しい順序でロードされていない場合、または上記のwp_enqueue_styleの依存関係パラメータを使用している場合は、アクションに優先順位を追加できます。

add_action( 'wp_enqueue_scripts', 'theme_name_child_scripts', 20 );
0
Bjorn

テーマ開発者は、その子テーマのバージョン番号を変数に変換し、それをキューに入れるときに子style.cssに追加する必要があるため、現在のトップの答えはテーマによって異なります。私はいくつかのテーマでこれを見ましたが、それほど多くはありませんでした。以下は、functions.phpに子スタイルを登録するすべてのテーマで機能します - これまで見たことがない古い@importルールでは機能しません。

子テーマのfunctions.phpには、これに似たものがあるはずです。

// enqueue the child theme stylesheet

Function wp_schools_enqueue_scripts() {
wp_register_style( 'childstyle', get_stylesheet_directory_uri() . '/style.css'  );
wp_enqueue_style( 'childstyle' );
}
add_action( 'wp_enqueue_scripts', 'wp_schools_enqueue_scripts', 11);

これを次のように変更すると、ファイルが保存されるたびにバージョン番号としてタイムスタンプが追加され、スタイルシートを変更するたびにローカルキャッシュが無効になります。

// enqueue the child theme stylesheet

Function wp_schools_enqueue_scripts() {
wp_register_style( 'childstyle', get_stylesheet_directory_uri() . '/style.css', array(), filemtime( get_stylesheet_directory() . '/style.css' ) );
wp_enqueue_style( 'childstyle' );
}
add_action( 'wp_enqueue_scripts', 'wp_schools_enqueue_scripts', 11);

これが誰かに役立つことを願っています。私は積極的に管理しているすべてのサイトでこれを使っています。

0
Jeff Travilla

Wordpressのテーマエディタを使って子テーマのスタイルシートを編集すると、ファイルを保存するたびに自動的に新しいバージョン番号が追加されます。

0
selfagency