ブランクテーマは、ほとんど何もデザインや装飾がついていないテーマです。
その分、カスタマイズ性が高く、一度やり方を覚えてしまえば新しいデザインに変更する際に、
かなり、なんでも出来るようになります。
今回、ブランクテーマとして有名なrootsのsageをインストールしカスタマイズする方法を紹介します。
というのも、本ブログがWordpressでの制作なのですが、使用するテーマを探そうにもどれも英語版に最適化されているためか、あまりピンとくるものがありませんでした。
さくっと最初から作るついでに、紹介します。
sageとは
オープンソースの開発者集団rootsにより作成されたWordpressのブランクテーマです。
元々、「roots」自体がテンプレートの名前だったと記憶してます。
5年程度前の時点で、BootstrapやScss等、Wordpressのテーマとしてはモダンな技術が多く取り入れられてきたテーマです。
最新の物を見た所、LaravelのBladeファイルでテンプレートが記述されており、より一層、カスタマイズがしやすくなった印象です。
https://readouble.com/laravel/7.x/ja/blade.html
インストール要件
Make sure all dependencies have been installed before moving on:
https://roots.io/docs/sage/9.x/installation/#server-configuration
• WordPress >= 4.7
• PHP >= 7.1.3 (with php-mbstring enabled)
• Composer
• Node.js >= 8.0.0
• Yarn
それぞれ環境によってどうインストールするかは異なりますが、Wordpressまでローカルで表示できる環境になったことを前提に、進めていきます。
なお、私の環境はUbuntu20.04なので、ほとんどの人には上記のインストール手順は参考にならないため割愛します。
Sageのインストール方法
Sageをテーマに追加
WordPressのフォルダの./wp-content/themes/にて下記コマンドを実行します。
$ composer create-project roots/sage
すると、sageというフォルダにsageのパッケージがインストールされます。
Composerについては下記からインストールしましょう。
外観を変更する
WordPressの「外観」→「テーマ」へ行くと、sageが選択可能になっています。

こちらを選択すると、Sageのテーマが有効になります。

かなりシンプルです。
何もありません。
テンプレートの編集
テンプレートの編集は、./{sage-folder}/resources/以下のフォルダを編集していきます。
コマンドラインで下記を入力すると、ライブコーディングが始まります。
$ yarn start
resourceフォルダ以下のファイルの説明をします。
Index.php : 特に使用しません。
Functions.php : WordpressのFunctionファイル。ここに書くことで、管理画面のカスタマイズ等が行えますが、今回は割愛。
Style.css : ここに書いてもCSSは反映されません。
このstyle.cssは、上の「テーマ」の所等で読み込まれる内容を定義する場所です。
試しにTheme Nameを適当な名前に変えてみると、「テーマ」のページで表示名が変わるので試してみてください。
Screenshot.png : ここも、上の「テーマ」で表示させるサムネイル画像です。誰も気にしませんので白紙のままでもOKです。
StyleSheetの編集の仕方
どこを変えればテーマを編集できるの?
Style.cssを変えても編集できないのならばどうすれば…。
Sageでは、SCSSで記述されたものが、コンパイルされて、
{sage-folder}/dist/以下にcssやjsが出力されます。
出力元のSCSSファイルの設置場所は
{sage-folder}/resources/assets/styles/です。
ここに記述し、yarnを実行することでCSSへ反映されます。
Layoutの編集の仕方
トップページのHTMLタグの編集等は、{sage-folder}/resources/viewsフォルダ以下を編集します。
レイアウトはLaravelのBladeテンプレートが用いられているので、Bladeの記述を覚えましょう。
https://readouble.com/laravel/7.x/ja/blade.html
主に編集するファイルは以下の5つです。
index.blade.php : 記事一覧ページ
page.blade.php : 固定ページ
search.blade.php : 検索結果ページ
single.blade.php : 記事ページ
layouts/app.blade.php : フレーム部分。ヘッダーやフッター等の共通部分が読み込まれます。
SCSSコンパイル時のEsLintの無効化
SCSSのコンパイル時に、特にルールを決めていないと、下記のようにエラーが出ます。
28:2 ✖ Expected indentation of 2 indentation
spaces
28:12 ✖ Unexpected whitespace declaration-block-semicolon-space-before
before ";"
28:13 ✖ Unexpected missing no-missing-end-of-source-newline
end-of-source newline
このまま続けても良いですが、SCSS等にあまり慣れていない場合は、SCSSのLintingを無効化しても良いでしょう。
下記ファイルのStyleLintPluginの行をコメントアウトします。
{sage-folder}/resources/assets/build/webpack.config.js
/*
new StyleLintPlugin({
failOnError: !config.enabled.watcher,
syntax: 'scss',
}),
*/
Yarnのインストールでエラーが出たら
今回、Sageをインストールした際、Yarnで少し躓いたので、エラーの解消方法のみ挿入します。
Yarnは下記でインストールできると表示されます。
$ apt install cmdtest
ただ、自分の環境で実行し、SageでYarnを実行した時に、下記のようなエラーが出ました。
ERROR: There are no scenarios; must have at least one.
Yarnのバージョンが古いとのことで、
Yarnを一旦削除し、パッケージの更新し再度Yarnをインストールすると実行ができます。
sudo apt remove cmdtest
sudo apt remove yarn
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
参考 : https://honmushi.com/2020/01/15/yarn-install/
まとめ
これで、かなりシンプルなブランクテーマをまず、編集できるところまで進めました。
Bladeファイルになったことで、WordpressからLaravelを使ったWeb開発にステップアップしたいな…と考えている方への入門となるテンプレートではないかと思います。
次回、Bootstrapを使って、最低限見栄えが問題ないサイトへカスタマイズしていきたいと思います。