WordPress のスターターテーマとしてはこのところ、Template https://studio.bio/themes/template/ を使用してるんだけど、ちょっと気分変えたいというのもあって、Sage というスターターテーマをちょっと触ってみることに。「Sage」はもちろん「さげ」ではなく、「セージ」と読む(はず)。
公式サイト: https://roots.io/sage/
特徴は「Sage is a WordPress starter theme with a modern development workflow.」つまり「Sage は モデンな開発ワークフローをもったスターターテーマ」。https://github.com/roots/sage で挙げられている特徴は以下のとおり
- Sass for stylesheets
- Modern JavaScript
- Webpack for compiling assets, optimizing images, and concatenating and minifying files
- Browsersync for synchronized browser testing
- Blade as a templating engine
- Controller for passing data to Blade templates
- CSS framework (optional): Bootstrap 4, Bulma, Foundation, Tachyons, Tailwind
試しに触ってみることにしたけど、インストールするのに少々つまずいた点もあったのでまとめてみました。
まずは Composer を入れる
メインの開発サーバ ( Ubuntu 18.04 ) には Composer が入っていなかったので、まずはこれを公式サイト https://getcomposer.org/download/ にしたがってコマンドラインでインストール。まずは
$ php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"でインストーラーをダウンロード(カレントディレクトリに composer-setup.php がダウンロードされる)。
$ php -r "if (hash_file('sha384', 'composer-setup.php') === 'a5c698ffe4b8e849a443b120cd5ba38043260d5c4023dbf93e1558871f1f07f58274fc6f4c93bcfd858c6bd0775cd8d1') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"で、composer-setup.php を検証。うまく行けば、「Installer verified」と出るので、インストーラーを実行するわけだけど、パスの通った /usr/local/bin/ に入れたい。そこで、
$ sudo php composer-setup.php --install-dir=/usr/local/bin --filename=composerってやってやると、/usr/local/bin/composer としてインストールされる(–filename=composer を指定しないと、composer.phar としてインストールされる)。
最後に
$ php -r "unlink('composer-setup.php');"で composer-setup.php を削除。
$ composerで次のように表示されれば無事インストール成功。
手元の環境では上記ですんなり行ったけど、下記記事によると、curl, php-cli, php-mbstring, git, unzip が必要。入っていないようであれば、必要に応じて入れておくこと
https://www.digitalocean.com/community/tutorials/how-to-install-and-use-composer-on-ubuntu-18-04
次に Yarn をインストール
次に Yarn っていう JavaScript パッケージをインストール。Ubuntu であれば、公式の https://yarnpkg.com/lang/ja/docs/install/#debian-stable にしたがって
$ curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
$ echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.listでリポジトリを追加。あとは普通に
$ sudo apt-get update && sudo apt-get install yarnとやってやればよい。
Sage をインストール
ってことでやっと、Sage をインストールできる状態に。どっかからファイルもってくるのかなと思ったけど、WordPress の theme ディレクトリに移動して、たとえば hoge というディレクトリ名でテーマを作りたい場合は
$ composer create-project roots/sage hogeってやってやると、
ってな感じで、composer がダウンロード&インストールを始めてくれる。ひと通り済むと、続いて
のように対話的にテーマ名などを聞かれるので答えていく。ひと通り答え終わると、
と出ればインストール成功。 themes ディレクトリ内に、今回の例で言えば hoge ディレクトリが出来ているので、そこに移動して、
$ yarnってやってやると、
ってな感じで必要なパッケージを入れてくれる。一応、resources/assets/config.json の devUrl と publicPath が問題なく入っているか確認。問題があれば修正する。そんで
$ yarn buildってやってやればインストールは完了。最初、yarn をやらずに yarn build とやったら、いろいろパッケージが無いよっておこられ、あれ? うまく行かないやと悩んでいたけど、ちゃんと「Please run yarn && yarn build to compile your fresh scaffolding」とメッセージが出ていたね。。。
あとはテンプレートファイルは Laravel の Blade テンレート(.blade.php)になっているので、直接アクセスできないように Apache2.4 であれば .htaccess に
<FilesMatch ".+.(blade.php)$">
<IfModule mod_authz_core.c>
Require all denied
</IfModule>
</FilesMatch>参考) https://roots.io/sage/docs/theme-installation/
と記述してやる。
ファイル構造と、ちょっとコケた点
インストールされたテーマの中身を見てみると、
themes/your-theme-name/ # → Root of your Sage based theme
├── app/ # → Theme PHP
│ ├── controllers/ # → Controller files
│ ├── admin.php # → Theme customizer setup
│ ├── filters.php # → Theme filters
│ ├── helpers.php # → Helper functions
│ └── setup.php # → Theme setup
├── config/ # → Theme configuration
├── composer.json # → Autoloading for app/ files
├── composer.lock # → Composer lock file (never edit)
├── dist/ # → Built theme assets (never edit)
├── node_modules/ # → Node.js packages (never edit)
├── package.json # → Node.js dependencies and scripts
├── resources/ # → Theme assets and templates
│ ├── assets/ # → Front-end assets
│ │ ├── config.json # → Settings for compiled assets
│ │ ├── build/ # → Webpack and ESLint config
│ │ ├── fonts/ # → Theme fonts
│ │ ├── images/ # → Theme images
│ │ ├── scripts/ # → Theme JS
│ │ └── styles/ # → Theme stylesheets
│ ├── functions.php # → Composer autoloader, theme includes
│ ├── index.php # → Never manually edit
│ ├── screenshot.png # → Theme screenshot for WP admin
│ ├── style.css # → Theme meta information
│ └── views/ # → Theme templates
│ ├── layouts/ # → Base templates
│ └── partials/ # → Partial templates
└── vendor/ # → Composer packages (never edit)
ってな具合。基本的にいじるのは app/ ディレクトリ以下の .php ファイル、resources/assets/ 以下の .scss などなど。あと、resources/views/ 以下の .blade.php ってことになる。
.scss ファイルなどをいじったら、
$ yarn buildとしてやればもろもろコンパイルされる。
ってことで、ちょっと試しに .scss をいじって yarn build してやると
Error: Failed because of a stylelint error.ってなエラーが。どうもインデントとかの付け方のチェックが通らないよう。ちょっとよくわからないので、とりえあず resources/assets/build/webpack.config.js 内の
new StyleLintPlugin({
failOnError: !config.enabled.watcher,
syntax: 'scss',
}),って箇所をコメントアウト。参考) https://discourse.roots.io/t/yarn-build-failed-because-of-a-stylelint-error/9792/2
とりあえずこれで、なんとかいじれるようになった。
まだまだよくわからないところがあるけど、なんとかなるようだったら、内輪の案件があるのでこの Sage で開発してみようかなと。ってことで、ちょっといろいろいじってみます。