WordPress のスターターテーマ(ブランクテーマ)、このところはずっと Underscores (_s) (アンダースコアズ)を使用してきたが、長らく更新はされず、Github の https://github.com/automattic/_s を見ると正式に開発終了宣言がなされ、「Public archive」となっている。
ちなみにスターターテーマとは、オリジナルのテーマを作るときの叩き台となる最低限のテーマのこと。
もちろん、今後もこのまま使っていけばいいのだが、やはり別の代替となるスターターテーマを探したほうがいいとずっと思ってきたわけで、どうしようと色々探してみた。
以前このブログでも紹介したモダンなスターターテーマと呼び声高い Sage がいいかなとは思ってはいるが、以前の紹介記事でインストールしただけで、そのまま放置していた。
今回あらためてちょっといじってみたが、色々魅力的だが、やはり WordPress のテーマ開発としてはどうなんだ、という印象。Laravelの開発スタイルを導入したテーマなので、これまでとがらりと変わってしまうので、いきなり実戦投入ははばかられる。
それで他にいいの無いかなと色々探してみたが、とりあえずこれがベストなのではというのが「Air-light」。Github 見てみても開発は活発なようだ。
ということで、まずは入れてみる。Github にはインストール方法が色々書いてあるが、開発用サーバ(Ubuntu)なので、今回は以下のように入れてみた。
まずは、 wp-content/themes に移動して、以下で Air-light を落とす。
$ git clone https://github.com/digitoimistodude/air-light.gitんで、出来た air-light ディレクトリ内に移動して
$ npm installしてやる。すると、ありがたいことに sass にも対応した gulpfile.js も用意されているので、
$ npx gulpしてやるが、以下のようなエラーが。
node:fs:561
return binding.open(
^
Error: ENOENT: no such file or directory, open '/var/www/certs/localhost-key.pem'
at Object.openSync (node:fs:561:18)
at Object.readFileSync (node:fs:445:35)
at getKey (/var/www/html/test/wp-content/themes/air-light/node_modules/browser-sync/dist/server/utils.js:38:15)
at getHttpsServerDefaults (/var/www/html/test/wp-content/themes/air-light/node_modules/browser-sync/dist/server/utils.js:45:14)
at Object.getHttpsOptions (/var/www/html/test/wp-content/themes/air-light/node_modules/browser-sync/dist/server/utils.js:67:41)
at /var/www/html/test/wp-content/themes/air-light/node_modules/browser-sync/dist/server/utils.js:81:44
at Object.getServer (/var/www/html/test/wp-content/themes/air-light/node_modules/browser-sync/dist/server/utils.js:85:15)
at createProxyServer (/var/www/html/test/wp-content/themes/air-light/node_modules/browser-sync/dist/server/proxy-server.js:87:35)
at createServer (/var/www/html/test/wp-content/themes/air-light/node_modules/browser-sync/dist/server/index.js:69:41)
at module.exports.plugin (/var/www/html/test/wp-content/themes/air-light/node_modules/browser-sync/dist/server/index.js:12:20) {
errno: -2,
code: 'ENOENT',
syscall: 'open',
path: '/var/www/certs/localhost-key.pem'
}
なにやら .pem を読み込みに行っているようなので、gulp の設定を見てみる。すると、gulp ディレクトリ内に、config.js がある。以下のようになっている。
const themeDir = './';
const proxyUrl = 'https://airdev.test';
module.exports = {
cssnano: {
"preset": [
"cssnano-preset-advanced",
{
discardUnused: false, // Prevent removal of seemingly unused font-family
reduceInitial: false, // Retain initial value optimizations
"discardComments": {
"removeAll": true
}
}
],
},
size: {
gzip: true,
uncompressed: true,
pretty: true,
showFiles: true,
showTotal: false,
},
rename: {
min: {
suffix: '.min'
}
},
browsersync: {
// Important! If src is wrong, styles will not inject to the browser
src: [
themeDir + '**/*.php',
themeDir + 'css/**/*',
themeDir + 'js/dev/**/*'
],
opts: {
logLevel: 'debug',
injectChanges: true,
proxy: proxyUrl,
browser: 'Google Chrome',
open: false,
notify: true,
// Generate with: mkdir -p /var/www/certs && cd /var/www/certs && mkcert localhost 192.168.x.xxx ::1
https: {
key: "/var/www/certs/localhost-key.pem",
cert: "/var/www/certs/localhost.pem",
}
},
},
styles: {
src: themeDir + 'sass/*.scss',
development: themeDir + 'css/dev/',
production: themeDir + 'css/prod/',
watch: {
development: themeDir + 'sass/**/*.scss',
production: themeDir + 'css/dev/*.css',
},
stylelint: {
src: themeDir + 'sass/**/*.scss',
opts: {
fix: false,
reporters: [{
formatter: 'string',
console: true,
failAfterError: false,
debug: false
}]
},
},
opts: {
development: {
verbose: true,
bundleExec: false,
outputStyle: 'expanded',
debugInfo: true,
errLogToConsole: true,
includePaths: [themeDir + 'node_modules/'],
quietDeps: true,
silenceDeprecations: ['legacy-js-api', 'import'],
},
production: {
verbose: false,
bundleExec: false,
outputStyle: 'compressed',
debugInfo: false,
errLogToConsole: false,
includePaths: [themeDir + 'node_modules/'],
quietDeps: true,
silenceDeprecations: ['legacy-js-api', 'import'],
}
}
},
js: {
src: themeDir + 'js/src/*.js',
watch: themeDir + 'js/src/**/*',
production: themeDir + 'js/prod/',
development: themeDir + 'js/dev/',
},
php: {
watch: [
themeDir + '*.php',
themeDir + 'inc/**/*.php',
themeDir + 'template-parts/**/*.php'
]
},
phpcs: {
src: [themeDir + '**/*.php', '!' + themeDir + 'node_modules/**/*', '!' + themeDir + 'vendor/**/*'],
opts: {
bin: '/usr/local/bin/phpcs',
standard: themeDir + 'phpcs.xml',
warningSeverity: 0
}
}
};
このうち、以下の行が問題なので、
browsersync: {
...
opts: {
...
notify: true,
// Generate with: mkdir -p /var/www/certs && cd /var/www/certs && mkcert localhost 192.168.x.xxx ::1
https: {
key: "/var/www/certs/localhost-key.pem",
cert: "/var/www/certs/localhost.pem",
}
},
},この https 部分を削除してやり、以下のようにする。
browsersync: {
...
opts: {
...
notify: true
},
},ついでにファイルの冒頭にある
const proxyUrl = 'https://airdev.test';を環境に合わせて
const proxyUrl = 'http://xxx.xx.xx.xxx/test';としてやる。これで改めて、 npx gulp してやると、またもやエラー
node:internal/fs/watchers:247
const error = new UVException({
^
Error: ENOSPC: System limit for number of file watchers reached, watch '/var/www/html/sage/wp-content/themes/air-light/node_modules/@keyv'
at FSWatcher.<computed> (node:internal/fs/watchers:247:19)
at Object.watch (node:fs:2468:36)
at createFsWatchInstance (/var/www/html/sage/wp-content/themes/air-light/node_modules/chokidar/lib/nodefs-handler.js:119:15)
at setFsWatchListener (/var/www/html/sage/wp-content/themes/air-light/node_modules/chokidar/lib/nodefs-handler.js:166:15)
at NodeFsHandler._watchWithNodeFs (/var/www/html/sage/wp-content/themes/air-light/node_modules/chokidar/lib/nodefs-handler.js:331:14)
at NodeFsHandler._handleDir (/var/www/html/sage/wp-content/themes/air-light/node_modules/chokidar/lib/nodefs-handler.js:567:19)
at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
at async NodeFsHandler._addToNodeFs (/var/www/html/sage/wp-content/themes/air-light/node_modules/chokidar/lib/nodefs-handler.js:617:16)
Emitted 'error' event on Domain instance at:
at FSWatcher.emit (node:domain:539:12)
at FSWatcher._handleError (/var/www/html/sage/wp-content/themes/air-light/node_modules/chokidar/index.js:647:10)
at NodeFsHandler._addToNodeFs (/var/www/html/sage/wp-content/themes/air-light/node_modules/chokidar/lib/nodefs-handler.js:645:18)
...
どうやら watch するファイル数が上限を越えているようだ。ググってみると、
$ echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -pとしてやれば上限を変更できるとのこと。これで npx gulp が問題なく通って、これで今回の場合、
「http://xxx.xx.xx.xxx:3000/test」でアクセスできるようになった。これで .scss ファイルなどを更新していけばそれに合わせてブラウザも自動でリロードしてくれる。
ちなみに以下のようなトップページになる。
じつにあっさりしている。このあたりはメニューとか、もうちょっとなにかほしいかなと思うが、テーマファイルを見てみるとなかなか良さげである。とにかく、満足の行く gulpfile.js が用意されているのがありがたい。今度新規にサイトを作るときにはこれでやってみようと思う。
「WordPress のスターターテーマどうするか問題。とりあえず Air-light がベストそうだ」への1件のフィードバック