WordPress のスターターテーマ Sage を触ってみる ~ インストール方法

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 で挙げられている特徴は以下のとおり

試しに触ってみることにしたけど、インストールするのに少々つまずいた点もあったのでまとめてみました。

まずは 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

で次のように表示されれば無事インストール成功。

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

ってやってやると、

Sage create-project

ってな感じで、composer がダウンロード&インストールを始めてくれる。ひと通り済むと、続いて

のように対話的にテーマ名などを聞かれるので答えていく。ひと通り答え終わると、

と出ればインストール成功。 themes ディレクトリ内に、今回の例で言えば hoge ディレクトリが出来ているので、そこに移動して、

$ yarn

ってやってやると、

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 で開発してみようかなと。ってことで、ちょっといろいろいじってみます。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です