WordPress 制作に特化した gulp ボイラープレートです。
Docker を使用してローカルで WordPress を起動することも可能です。
gulp v4.0.2
node v16.15.0
gulp を起動する前に gulpfile.js の以下の箇所に WordPress テーマ名を入力します。
// 出力するWPテーマ名を記入
const themeName = 'test'
.gitignore ファイル内の !test
を上記で設定したテーマ名に書き換えて下さい(記載例通り先端に!をつけます)
# テーマ名を「!」付きで記載してください
!test
gulpfile.js があるディレクトリに移動し、
npm install
で必要なパッケージをインストールしておきます。
npx gulp
ローカルサーバー http://localhost:3000/ が起動し、ファイルの変更があると自動で以下のコンパイルが行われます。
内容 | 変更フォルダ | 生成フォルダ |
---|---|---|
scss ファイルの css 変換 | app/src/sass | app/product/assets/css と themes/テーマ名/assets/css |
ejs ファイルの html 変換 | app/src/ejs | app/product |
画像の圧縮 | app/product/image | themes/テーマ名/assets/image |
js ファイルのテーマへのコピー | app/product/assets/js | themes/テーマ名/assets/js |
フォントファイルのテーマへのコピー | app/product/assets/font | themes/テーマ名/assets/font |
※変換後のファイルは自動で上書きされてしまうため直接触らないようにしましょう。
※テーマ用 php ファイルの生成は行なわれません。
第1階層 | 第2階層 | 内容 |
---|---|---|
app | product | html や css などが入った開発用フォルダ |
src | ejs や sass のフォルダ | |
themes | テーマ名 | WordPress テーマフォルダ |
npx gulp sass
:scss ファイル の変換
npx gulp ejs
:ejs ファイル の変換
npx gulp imagemin
:画像の圧縮
npx gulp js
:js ファイルをテーマへコピー
npx gulp font
:font ファイルをテーマへコピー
npx gulp assets
:assets フォルダをテーマへコピー
npx gulp assetsDel
:テーマの assets フォルダを削除
※不要なファイルが多くなってしまいファイルを全消ししてやり直す場合や、gulp 起動前にファイルを追加してしまったなどで再度コンパイルしたい場合にそれぞれ使用します。
https://www.videosmaller.com/jp/
動画は非対応なので、無料オンラインサービスで圧縮します
Docker Desktop を起動します。(なければ公式サイトからダウンロードしインストール)
docker-compose up
コマンドでコンテナを起動します。
http://localhost:8000/ へアクセスして WordPress の初期設定を行います。
※VScode でターミナルを分割することで gulp と docker は同時に起動することができます。
http://localhost:8000/
:トップページ
http://localhost:8000/wp-admin/
:管理画面
themes/test フォルダはテスト用テーマなので削除して問題ありません。