sageの使い方(設定方法)

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をカスタマイズするにはSASSblade,gulpなどの知識が必要となりそうです。

コメントを残す