Edited at

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

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フォルダ

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


上書き用