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 - パッケージインストール

ってな感じで必要なパッケージを入れてくれる。そんで

$ 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

としてやればもろもろコンパイルされる。もしくは

$ yarn start

としておけばファイルが更新されるたびに自動的にコンパイルしてくれる。

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

コメントを残す

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