Lightning is a very simple & easy to customize theme which is based on the Bootstrap. It is also very friendly with custom post types and custom taxonomies. When you add a new one, the breadcrumbs will be adjusted and posts will look beautifully without editing or adding a template files.
composer install
npm install
npx gulp
js,scss,テキストドメインのビルドをすべて行う
$ npm run build
$ npm run build:script
$ npm run build:text-domain
$ npm run watch:script
$ npm run dist
dist/内に管理画面でのインポート用zipと、転送用のテーマディレクトリが作成されます。
G3 は別途ドキュメントがあるのでそちらを参照
このテーマにはPHP Unit Testを用意しています。 下記コマンドで動作してください。
※ Macの場合はdocker-syncを使うといいです
$ docker-compose run wp- あらかじめ Docker をインストールしておきます。
- 下記を実行して npm scripts をインストールします。
npm installnpm install -g @wordpress/env - あらかじめ、wp-env を起動しておきます。
wp-env start - 下記を実行して composer 関連のファイルをインストールします。
- Windows の場合
npm run composer:install:win - Mac の場合
npm run composer:install:mac
- Windows の場合
- 下記を実行して Unit Test を開始します。
- Windows の場合
npm run phpunit:win - Mac の場合
npm run phpunit
- Windows の場合
全てのテストの実行
まずテスト用のURLが localhost:8889 以外の場合、
./tests/e2e/ に記載されているテスト先のURLを自身の環境に応じて変更してください。
npm install
wp-env start
からの
npx playwright test
ブラウザは chrome だけで良い場合
npx playwright test --project=chromium
操作のスクリーンショットが見たい場合 --trace on を追加
npx playwright test --project=chromium --trace on
npx playwright show-report
例えばWordPressのログイン画面からの動作テストを作る場合は以下のようになります。
npx playwright codegen "http://localhost:8889/wp-login.php"
表示されるコードの必要な箇所を tests/e2e/ の spec.js に追加する
複数の趣旨の変更内容（機能の不具合修正とまったく別のアクションフック追加などの仕様変更など）を一つのプルリクエストで送ると確認・マージが非常ににやりにくくいので、内容別で送るようにしてください。
- 何の目的でどういう変更をしたのか？
- 作業時のコマンドなど変更になる場合などは記載よろしくお願いいたします。
ざっくりで良いので、確認の際はどの画面でどう設定したらどうなるかを確認するのかなど記載してください。
いろんな設定条件の組み合わせが存在する場合、
そもそもどういう動作（どの組み合わせだとどうなるのかという）が正しいのか、テスターはもちろん本人も実装から日にちが経つとわからなくなります。
PHPUnitでテストが書けるものはテストを書くようにしてください。
- 自分が使ってみて本当のそのUIがベストか改めて考えてみてください。
- ドキュメント読まずに表示されている画面だけでわかるように説明なども記載してください。
- また、同じような入力内容の場合はUIを揃えるようによろしくお願いいたします。
- アップデートして既存サイトの表示に変更が出ないか十分注意し、必要に応じて互換処理を入れてください。
同じような記述を複数箇所に書いていませんか？ 違うコードが一部分だけなどの場合はその箇所を引数などで渡してclassや関数にするなど共通化しましょう。
第三者が見てどういう処理・内容なのかがわかりやすい名称を心がけてください。
テーマやプラグインによって一定の命名規則が存在します。 概ね readme.md などに書いてあるとは思いますが、 書いてない場合は他のクラス名など参照の上、前後関係や意味の整合性のとれる名前になっているか今一度考えてみましょう。
通常ライブラリから各プロジェクトに複製してプロジェクト毎にテキストドメイン置換などを行うので、Lightningなど利用先側で変更コミットしてもライブラリに戻すのが面倒です。
親のライブラリで編集したいライブラリのgulpのwatchを走らせながら作業して、親のライブラリを先にコミットするようにしてください。
そうでないと子を修正しても親からの複製で先祖帰りするため。
$wp_customize->add_section(
- 400 | License key
- 450 | 機能設定
- 501 | デザイン設定
- 502 | フォント設定
- 510 | ヘッダー上部設定
- 511 | ヘッダー設定
- 513 | キャンペーンテキスト設定
- 520 | トップページスライドショー設定
- 521 | トップページPR BLock設定
- 530 | ページヘッダー設定
- 532 | レイアウト設定
- 535 | アーカイブページ設定
- 536 | アーカイブページレイアウト
- 538 | 詳細ページ設定
- 540 | フッター設定
- 543 | コピーライト設定
- 550 | モバイルナビ
- 551 | モバイル固定ナビ
- 555 | ウィジェットエリア設定（フッター設定に統合したい）
- 556 | Googleタグマネージャー
- 560 | Font Awesome
Lightningにはデザインスキンを外部から切り替える機能があります。 追加でスキンを作成する場合は下記のファイルを参考にしてください。
https://github.com/vektor-inc/lightning-g3-skin-sample
| 読み込みポイント | Priority | 読み込みファイル | 備考 |
|---|---|---|---|
| wp_enqueue_scripts | vkExUnit_common_style-css | ||
| wp_enqueue_scripts | vkExUnit_common_style-inline-css | ||
| wp_enqueue_scripts | Bootstrap | ||
| wp_enqueue_scripts | lightning-common-style | 全スキン共通CSS | |
| wp_enqueue_scripts | lightning-design-style | デザインスキン | |
| wp_enqueue_scripts | lightning-design-style wp_add_inline_style | デザインスキン | |
| wp_enqueue_scripts | lightning-theme-style | 子テーマでカスタマイズされるのでなるべく後ろである必要がある | |
| wp_enqueue_scripts | vk-font-awesome-css | ||
| wp_head | 50 | HeaderColorManagerでカスタマイズから指定された色 | |
| wp_head | 200 | ExUnit CSSカスタマイズ 共通 | |
| wp_head | 201 | ExUnit CSSカスタマイズ 投稿 |