ワードプレスでstyle.cssのバージョンを追加する方法

style.cssJoomlaでできる以下のようなWordPressのバージョンを追加する方法。

<link rel="stylesheet" href="/templates/example/css/style.css?v=1.2">

style.cssが動的に読み込まれることを知っています。その方法を教えてください。

バージョン番号はのパラメータですwp_enqueue_style()。

コーデックスによると、ここにwp_enqueue_style受け入れるすべてのパラメータがあります。

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

たとえば、バージョン番号を含むスタイルシートをロードするには、次のようにします。

function wpa_90820() {
    wp_enqueue_style('my-styles', get_stylesheet_directory_uri() .'/my-styles.css', array(), '1.0' );       
}

add_action('wp_enqueue_scripts', 'wpa_90820');

バージョンをハードワイヤする代わりに、スタイルシートを動的にバージョン管理する方が良い場合があります。これにより、スタイルシートを変更するたびに、functions.phpを何度も何度も編集しなくても、自動的にブラウザキャッシュが自動的に変更および更新されます。

そのためにfilemtime（）を使用できます。これは、parent_styleを参照する子スタイルでそれを行う方法です

    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ), filemtime( get_stylesheet_directory() . '/style.css' )  );

テーマ開発者の場合、新しいバージョンをプッシュするときにアセットを強制的に再読み込みすることができます。

したがって、テーマのバージョン管理は style.css

/*
    Theme Name: Your Theme Name
    Version: 1.0.2
*/

あなたの上部にfunctions.php：

$theme = wp_get_theme();
define('THEME_VERSION', $theme->Version); //gets version written in your style.css

後でCSSまたはJSをエンキューするときにTHEME_VERSION、4番目の引数として使用します。

function theme_styles()
{
    wp_enqueue_style('main', get_template_directory_uri().'/css/main.css', [], THEME_VERSION, 'all');
}
add_action('wp_enqueue_scripts', 'theme_styles'); 

ページに出力します：

.../your-theme-name/css/main.css?ver=1.0.2 

気にするアセットが多く、手動で変更したくない場合に便利です。

これは、次のいずれかの方法で実現できます。

1）テーマのheader.phpファイルに次のタグを追加します。

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

2）テーマのfunctions.phpファイルに以下のコードを追加します。

function theme_styles()  
{ 
  // Register the style like this for a theme:  
  // (First the unique name for the style (custom-style) then the src, 
  // then dependencies and ver no. and media type)
  wp_enqueue_style( 'style-css', get_template_directory_uri() . '/style.css', array(), '1.2', 'all' );
}
add_action('wp_enqueue_scripts', 'theme_styles');

詳細については、このページを参照してください。

cssをワードプレスのテーマに読み込む最良の方法は、functions.phpファイル内の次のコードです。

function theme_styles()  
{ 
  global $ver_num; // define global variable for the version number
  $ver_num = mt_rand() // on each call/load of the style the $ver_num will get different value
  wp_enqueue_style( 'style-css', get_template_directory_uri() . '/style.css', array(), $ver_num, 'all' );
}
add_action('wp_enqueue_scripts', 'theme_styles');

これは、テーマにスタイルをロードする正しい方法です。また、更新するたびにスタイルの更新されたバージョンが配信されるため、ステージング/テストの目的に最適です。

最初のロードを回避したい場合は、この短縮バージョンを使用して、次の行をheader.phpファイルに配置すると、同じ結果が得られます。

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); echo '?ver=' . filemtime( get_stylesheet_directory() . '/style.css'); ?>" type="text/css" media="screen, projection" />

乾杯

これを試して：

これをfunctions.phpに追加します

function autoVer($filename){
    $url = get_template_directory_uri() . $filename;
    $file = get_template_directory() . $filename;
    if ( file_exists($file)) {
        return $url . '?v=' .md5(date("FLdHis", filectime($file)) . filesize($file));
    }
    clearstatcache();
}

これをヘッダーまたはフッターに追加します-> autoVer（ '/ js / main.js'）;

これまでに紹介した方法とは逆に、style.cssファイルの上部に表示されるバージョン番号を使用する方がよいと思います。

// style.css
/**
Theme Name: My theme
...
Version: 1.2.3
...
**/

CSSでテーマのバージョンを使用するには、次のコードをfunctions.php（または同等の）スクリプトに追加します。

<?php

wp_enqueue_style(
    'my-theme',
    get_stylesheet_directory_uri() . '/style.css',
    [],
    wp_get_theme()->get('Version')
);

つまり、style.cssファイルを編集した後は、同じファイルの先頭にあるバージョン番号を変更して、フロントエンドの変更を確認するだけです。

テーマのHTMLのヘッドセクションを調べると、次のようになります。

<link rel='stylesheet'
    id='my-theme-css'
    href='... style.css?ver=1.2.3'
    type='text/css'
    media='all'
/>

これは、関数を bloginfo($show) 2回呼び出すことでバージョン番号を取得するかなりまっすぐな方法です。1つ目はスタイルシート、2つ目はバージョン番号です。

<link rel="stylesheet" id="style-css" href="<?php bloginfo('stylesheet_url'); ?>?ver=<?php bloginfo('version'); ?>" type="text/css" media="all" />

これですべてです。お役に立てれば幸いです。利用可能なすべてのパラメーターを確認し、bloginfo()関数で何を出力できるかを確認できます。

@Ravsがbloginfo（）関数の 'versions'パラメータに関するエラーを指摘しているため、コメントは無視してください。実際、Wordpressのバージョン番号を出力します。