Roots -Sage 9.0.0-alpha.4をいじった時のメモ #WordPress

wordpressテーマ、roots・sage
何気に個人的には、一番使いやすいバージョン使用する時のメモ。
sage

要件

PHP >= 5.6.4
Composer
Node.js >= 6.9.x
Yarn

インストールする場所に移動して
your-theme-nameはテーマ名に変更

# @ app/themes/ or wp-content/themes/
$ composer create-project roots/sage your-theme-name dev-master

ヴァージョン変えるときは...
https://github.com/roots/sage/releases/

$ composer create-project roots/sage your-theme-name 9.0.0-alpha.4

テーマファイル

@ themes/your-theme-name/
$ yarn

assetsにあるconfig.jsonの書き換え

devUrlをサイトのurlに
"devUrl": "https://project-name.dev",
publicPathにテーマのパスを
"publicPath": "/wp-content/themes/sage"

ビルドコマンド

//ファイルが変更されたときにアセットをコンパイルする、Browsersyncセッションを開始する
$ yarn run start 

//assetsディレクトリのファイルをコンパイルして最適化する
$ yarn run build
//圧縮
$ yarn run build:production

よく触るところ

└── assets
    ├── config.json
    ├── scripts
    │   └── main.js
    │
    ├── styles
    │   ├── main.scss
    │   └─── commom
    │        ├── _global.scss
    │        └── _variables.scss
    ├── templates
    ├── functions.php
    └── src
         ├── admin.php
         ├── filters.php
         ├── helpers.php
         └── setup.php

main.js

jsファイル読み込む時など

main.scss

scssを読み込む時

global.scss

書き込む時

_variables.scss

bootstorapなどの変数定義

srcフォルダ

ウィジットや初期設定の定義のファイルがある

上書き用