WordPressテーマのバージョンをpackage.jsonと同期する

4579 ワード
WordPress postcss Node.js WordPress テキストリンク

管理画面に表示されるバージョンを動的に更新したい。

postcss使ってるから、package.jsonと同時に更新してみよう！

postcssとpostcss-replaceの導入

postcssに関しては省略。

postcss-replace 

npm install --save-dev postcss-replace

meta.cssを作る

このデータはWordPressしか読まないんですから、ファイルは隔離していいでしょう。

postcss/meta.css
/*
Theme Name: my_theme
Theme URI: https://example.com/
Author: me
Author URI: https://me.me
Description: This is my theme
Version: {{ version }}
License: GNU General Public License v3
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: my_theme
*/

{{ version }} が変数になります。

postcssの設定

postcss.config.js
const pack = require('./package.json')
const packVer = pack.version

module.exports = {
  plugins: [
    require('postcss-replace')({
      data: {'version': packVer}
    }),
  ],
};

data: {'CSS内の変数名': 渡す変数} で変数を指定。

書き出し

cssnanoとかに関してはコメントを抹消してしまうため場合分けしましょう。

postcss.config.js
// 前略
module.exports = {
  plugins: [
    // 中略

    // 圧縮
    process.env.NODE_ENV !== "meta" &&
    require('cssnano')({
      autoprefixer: false
    }),
  ],
};

こんな感じにして

cross-env NODE_ENV=meta postcss ./postcss/meta.css -o ./style.css

こうすればWordPressテーマのメタ情報だけがstyle.cssに書き出されます。

それ以外の部分はpurgecssとか使うでしょうから、こんな感じで別に分ければ良いでしょう。