wordpress-themedev

boilerplate for wordpress theme development

はじめにやること

• ライブラリのインストール 下記のいずれか
  npm install
yarn

• sanitize.cssなどをbuild
  npx gulp build
/assetsディレクトリが生成される

開発ノウハウ

• 作成時のミドルウェアバージョンは以下

$ npm -v
8.1.2
$ node -v
v16.13.1

• 画像やjsやcssはsrc配下へ配置すること
• 画像をsrcへ配置したあとはgulp buildを実行するとassetsに画像が配置される
• ローカル環境で開発をする際には、yarn startを実行するとファイル監視状態になる
• .scssファイルとjsファイルは編集するとコンパイルされたファイルがassetsに配置される

File Structure

├─themes/your-theme # theme root     
├─ index.php
├─ functions.php
├─ style.css
├─ assets    # compiled files
│  ├─ img
│  ├─ css
│  └─ js
├─ src    # original files
│  ├─ img
│  ├─ css
│  └─ js
├─.gitignore

Recommended

• npm or yarn
• gulp
• docker
• wp-env
• composer
• phpcs

settings.json setting

phpcs.executablePath
phpcbf.executablePath

wp-env commands

wp-env start #start wpenv
wp-env stop #close wpenv
wp-env start --update #update plugins

WorｄPressのブロック開発

下記コマンドでブロック開発監視モードに変わる。 初期はsrc/index.jsが監視対象

npm run start-build

wp-cliを使う

wp-env run cli wp 

@wordpress/envハンドブック

Gulp

start developing with

npm start

build css js img files

gulp build

Deployment

/.github/workflowsのymlファイルに自動デプロイ環境が設定可能。 SECRETSの値とブランチは環境に合わせて要調整。

Using css variables

color: var(--wp--preset--color--priary);
font-family: var(--wp--preset--font-size--font-lm);

Responsive layout tips

Change style on breakpoint

h2 {
  font-size: 24px;
  @include mq() {
    font-size: 18px;
  }
}

Add new line in mobile devices

<br class="sp">

PHPのメモリ容量の上限設定変更が必要な場合

All in on migrationのプラグインで大容量データをインポートするときに利用可能。

wp-env run cli vi .htaccess

.htaccessファイルを開いて下記設定を追記

php_value upload_max_filesize 128M
php_value post_max_size 128M
php_value memory_limit 256M
php_value max_execution_time 300
php_value max_input_time 300