WordPressのスターターテーマはいくつかあるのですが、今回はSageというテーマの設定方法について説明します。
普通のWordPressのテーマならThemeのディレクトリにテーマを入れるか、管理画面のテーマからダウンロードすればそれでOKなのですがSageの場合それだけでは表示もされません。
テンプレートにテンプレートエンジンのbladeが使っているのでComposerを入れないと動かないのです。
それ以外にもnpmでもダウンロードしないSageで用意してくれている機能が使えません。
Sageをダウンロード
WordPressのthemeディレクトリまで移動してgitからクローンします。
git clone https://github.com/roots/sage.git
composer installを実行する
composer.jsonはすでに用意されているのでcomposer installでファイルを落としてくるだけで良い
composer install
PCにComposerがインストールされていない場合はまずComposerをPCにインストールする必要があります。
パッケージのインストール
ここでつまったのですがSageのドキュメントが古かったです。
Theme Development and Building
$ Theme Development and Building
$ npm install -g gulp bower
$ npm install
$ bower install
こんなようなことが書いてあるのですが、これは古いバージョンでした(2017/4/2現在)
正しくはGitのREADME.mdに書いてありました。
Yarnをインストール(Yarnがインストールしてある場合はスキップ)
macの場合
$ brew update
$ brew install yarn
windowsは以下で出来るっぽいです。
$ npm instlal -g yarn
Yarnを実行
$ yarn
これでnpmも裏で実行されてpackage.jsonに記述されているパッケージをダウンロードすることができます。
yarnって何かはよく分かっていません汗
細かい設定
sidebarを表示する
sage/src/helpers.php
/**
* Determine whether to show the sidebar
* @return bool
*/
function display_sidebar()
{
static $display;
isset($display) || $display = apply_filters('sage/display_sidebar', true); //←ここをtrueに変更
return $display;
}
cssで表示位置を修正しないとメインカラムの下に表示される。
とりあえずここまでやれば一応画面に表示されるようになります。
ただthemeをカスタマイズするにはSASSやblade,gulpなどの知識が必要となりそうです。