デザインカンプからWordpressテーマ化までの手順
npm install
gulpの設定ファイルを雛形からコピーする。
cp gulp/config-example.js gulp/config.js
./src
以下のファイルを監視して、./static
以下に静的サイト用の成果物を出力。
npm run watch:static
./src/ejs/part/__load_css.html.ejs
は</head>
直前に読み込みたいcssファイルを指定./src/ejs/part/__load_css.html.ejs
は</body>
直前に読み込みたいjsファイルを指定
ejsやscssファイル中の画像やフォントなどのパスは./src
以下の相対パスを指定する。
これは、IDEでのパスの補完を利用するためである。トランスパイル時にパスを自動で修正するので問題はない。
ただし、親ディレクトリの相対パスを指定するときは../
から始める。
<img src="../img/xxx.jpg">
body {
background-image: url(../../img/bg.jpg);
}
ファイル名のプレフィックスによって、htmlやphpファイルとして出力されるか決まる。
prefix | html | php |
---|---|---|
_ で始まらない |
⭕ | ⭕ |
_ が1つのみ |
❌ | ⭕ |
_ が2つ続く |
❌ | ❌ |
開発完了後、./static
以下に成果物を出力。
npm run build:static
ejsファイルを元に./src/php
以下にWPテーマ用phpファイルの雛形を出力する。(上書きはしない)
npm run php:init
初回、./wp
にテーマ用のファイルを出力する。
npm run build:wp
ローカル環境のWordpressのthemeディレクトリにシンボリックリンクを貼る。
ln -s $(pwd)/wp <themeディレクトリ>/<開発テーマ名>
WPの管理画面で開発テーマを有効化する。
テーマが壊れて認識できない場合は、./wp
直下のstyle.css
とindex.php
が正しいか確認する。
./gulp/config.js
の<ローカル環境のWPトップページURL>
を置き換える。
module.exports = {
browserSync: {
wp: {
proxy: '<ローカル環境のWPトップページURL>',
}
}
};
開発を開始するときに./src
以下を監視する。
npm run watch:wp
開発完了後は./wp
以下に成果物を出力。
npm run build:wp