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フォルダ
ウィジットや初期設定の定義のファイルがある
上書き用