Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

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


上書き用

noboo
忘れっぽい.... なんちゃってWEBデザイナー のメモ。
https://www.digitalbath.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away