Orelop WP は、俺流の WordPress テーマ開発環境です。 WordPress の環境には「wp-env」を利用し、フロントエンドツールには「vite 」を利用しているため、オールインワンで高速に WordPress のテーマを開発することが可能です。
Orelop WP を利用するには、あらかじめ以下のツールをマシンにインストールしておいて下さい。
- ターミナルを開き、「Orelop WP」を初期化したいディレクトリに移動します。
cd /path/to/project-directory- 以下のコマンドを実行して、「Orelop WP」をダウンロードします。
npx degit hilosiva/orelop-wp#main <project-name>- プロジェクトディレクトリに移動します。
cd <project-name>- 必要な依存関係をインストールします。
npm install以下のコマンドで WordPress の環境と開発用サーバーを起動できます。
■ npm
npm run dev
■ yarn
yarn dev
※初回は WordPress の環境を構築するため時間が掛かります。
開発環境は、http://localhost:3000で立ち上がります。
WordPress の管理画面は、http://localhost:3000/wp-admin/でアクセスできます。
- ユーザ名：admin
- パスワード：password
以下のコマンドで、サーバーが立ち上がっているかを確認できます。
docker ps
デフォルトでは、WordPress の日本語の最新版がインストールされます。
ルートディレクトリにある「.wp-env.json」を編集することで、インストールする WordPress のバージョンや、利用する PHP のバージョンなどを変更することができます。
設定方法は、wp-env の Web ページでご確認ください。
WordPress を構築後に「.wp-env.json」を編集をした場合は、WordPress のサーバーを停止後に、以下のコマンドで環境をアップデートする必要があります。
■ npm
npm run wp:update
■ yarn
yarn wp:update
開発を中断するなど、WordPress の環境を停止するには以下のコマンドを実行します。
■ npm
npm run wp:stop
■ yarn
yarn wp:stop
開発が終了したなどにより、WordPress の環境を破棄する場合は、以下のコマンドを実行することで、Docker イメージごと削除することができます。
■ npm
npm run wp:destroy
■ yarn
yarn wp:destroy
WordPress テーマの PHP ファイルは「src」ディレクトリに配置して下さい。
※「functions.php」の冒頭にある、require_once('lib/ViteHelper.php'); と、その読み込み先である「lib」ディレクトリ内の「ViteHelper.php」は削除しないでください。
「Public」ディレクトリ内に保存したファイルは、ビルド後に納品用テーマディレクトリとして「dist」ディレクトリにコピーされます。従って開発時とディレクトリの構造が変わるため、以下のいずれかの対策を講じて下さい。
- 「Public」ディレクトリ内にある画像ファイルなどを本番サーバーのルートディレクトリにアップロード
- 「Public」ディレクトリ内のファイルを参照するファイルパスの冒頭に
ViteHelper::PUBLIC_URL定数を利用してパスを補完する。
<link rel="icon" href="<?php echo esc_url(ViteHelper::PUBLIC_URL); ?>/favicon.ico">「Orelop WP」は、CSS、SCSS のどちらの開発にも対応しています。
CSS で開発するには「src/assets/css/」ディレクトリ内にある「style.css」を利用して下さい。
なお、ファイル名を変更する場合は、エントリーポイントである、「src/assets/js/main.js」内で読み込んでいる CSS のファイル名も変更してください。
例：css のファイル名を「common.css」に変更
// import "../css/style.css";
import "../css/common.css";「Orelop WP」は、「CSS Nesting Module」に対応しているため、スタイルルールのネスト（入れ子）が利用できます。
例
.hero__figure {
height: 100vh;
& img {
width: 100%;
height: 100%;
object-fit: cover;
}
}また、@import による、CSS ファイルを分割にも対応しています。
例：「object」ディレクトリ内の「hero.css」と「post.css」の読み込み
@import "object/hero.css";
@import "object/post.css";scss を使って CSS を開発する場合は、「src/assets/scss/」ディレクトリ内にある「style.scss」を利用して下さい。
glob パターンによる読み込みにも対応しています。
例：「fondation」ディレクトリと「layout」ディレクトリ内にあるすべての.scss ファイルの読み込み
@use "foundation/**/*.scss";
@use "layout/**/*.scss";JavaScript の開発は「src/assets/js/」ディレクトリ内の「main.js」を利用して下さい。
このファイルが「Orelop WP」のエントリーポイントとなっています。
以下のコマンドを実行すると、「dist」ディレクトリが作成され、納品用のテーマファイルが生成されます。
■ npm
npm run build
■ yarn
yarn build
ビルドを行うと、「src/assets/img/」ディレクトリ内の画像ファイルを最適化（圧縮や、webp ファイルなどの生成）を行い、ハッシュ値をつけて「dist/assets/img/」内に配置されます。
画像の圧縮率や、生成するフォーマットなどに関しては、vite-plugin-image-oretimaizerを利用しているため、vite-plugin-image-oretimaizerのオプションで設定して下さい。
PHP ファイルや、css ファイル内の画像ファイルのパスは自動でファイルパスが置き換わります。（webp が利用できるブラウザで閲覧した場合、「.jpg」や「.png」ファイルは、webp ファイルがレスポンスされます。）
.scss ファイルや.css ファイルは、「dist/assets/css/」内に「main-[ハッシュ値].css」というファイル名で配置されます。
.js ファイルは「dist/assets/css/」内に「main-[ハッシュ値].js」というファイル名で配置されます。
以下のコマンドを実行すると、「dist」ディレクトリをテーマフォルダとして、サーバーが立ち上がります。
■ npm
npm run preview
■ yarn
yarn preview
以下のコマンドを実行すると、「sql/」ディレクトリに「wpenv.sql」という SQL ファイルがエクスポートされます。
■ npm
npm run wp:export
■ yarn
yarn wp:export
以下のコマンドを実行すると、「sql/」ディレクトリにある「wpenv.sql」という SQL ファイルをインポートします。
■ npm
npm run wp:import
■ yarn
yarn wp:import