{"id":16580729,"url":"https://github.com/tsubasahiga/piiiqcy","last_synced_at":"2026-05-21T16:12:02.754Z","repository":{"id":170391096,"uuid":"240440907","full_name":"TsubasaHiga/piiiqcy","owner":"TsubasaHiga","description":"boilerplate for WP theme","archived":false,"fork":false,"pushed_at":"2025-01-29T18:39:35.000Z","size":9855,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-05T16:51:22.108Z","etag":null,"topics":["boilerplate","theme","wordpress","wordpress-theme"],"latest_commit_sha":null,"homepage":null,"language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TsubasaHiga.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-02-14T06:13:29.000Z","updated_at":"2025-01-29T18:39:38.000Z","dependencies_parsed_at":"2023-11-12T12:33:35.681Z","dependency_job_id":"42bd3329-c5ad-49a4-b3f5-b8db45500227","html_url":"https://github.com/TsubasaHiga/piiiqcy","commit_stats":null,"previous_names":["tsubasahiga/piiiqcy"],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TsubasaHiga%2Fpiiiqcy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TsubasaHiga%2Fpiiiqcy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TsubasaHiga%2Fpiiiqcy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TsubasaHiga%2Fpiiiqcy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TsubasaHiga","download_url":"https://codeload.github.com/TsubasaHiga/piiiqcy/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242123339,"owners_count":20075348,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["boilerplate","theme","wordpress","wordpress-theme"],"created_at":"2024-10-11T22:26:56.560Z","updated_at":"2026-05-21T16:12:02.736Z","avatar_url":"https://github.com/TsubasaHiga.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# piiiQcy\n\nWordPress Theme Boilerplate with Monorepo Structure\n\n![piiiQcy](docs/assets/images/logo-2.png)\n\npiiiQcy（ピィキュー）はWordPressコーディング規約に則ったWordPress用ボイラープレートです。**モノレポ構成**を採用し、テーマとカスタムプラグインを同時に開発できます。\n\n**👨‍💻 関連プロジェクト**\n\n| Project                                           | Description                                | Use Case                   |\n| ------------------------------------------------- | ------------------------------------------ | -------------------------- |\n| [piiiQcy](https://github.com/TsubasaHiga/piiiqcy) | WordPress テーマ開発ボイラープレート       | WordPress サイト制作       |\n| [Acty](https://github.com/TsubasaHiga/acty)       | 静的サイト向けボイラープレート             | 静的 HTML/CSS サイト制作   |\n| [Quicint](https://github.com/TsubasaHiga/Quicint) | EJS ベースの静的 HTML5 ボイラープレート    | 量産型静的ページ制作       |\n| [vnl](https://github.com/TsubasaHiga/vnl)         | Vite 製 npm ライブラリ開発ボイラープレート | npm パッケージ開発         |\n| [umaki](https://github.com/TsubasaHiga/umaki)     | Web 開発ユーティリティライブラリ           | 共通ユーティリティ関数利用 |\n\n---\n\n\u003e [!CAUTION]\n\u003e\n\u003e ## Breaking Changes (v2.0.0)\n\u003e\n\u003e モノレポ構成への移行に伴い、以下の破壊的変更があります：\n\u003e\n\u003e **ディレクトリ構成の変更**\n\u003e | 変更前 | 変更後 |\n\u003e |--------|--------|\n\u003e | `src/` | `packages/theme/src/` |\n\u003e | `dist/` | `packages/theme/dist/` |\n\u003e | `vite.config.ts` | `packages/theme/vite.config.ts` |\n\u003e\n\u003e **パッケージ管理**\n\u003e\n\u003e - テーマ専用パッケージのインストールは `pnpm add \u003cpkg\u003e --filter @piiiqcy/theme` を使用\n\u003e - ルートの `package.json` には共通ツール（lint, format等）のみ配置\n\u003e\n\u003e **削除されたコマンド**\n\u003e\n\u003e - `pnpm archive` - 配布用アーカイブ生成機能を削除\n\u003e\n\u003e **WordPressテーマのシンボリックリンク**\n\u003e\n\u003e - テーマパスが `packages/theme/dist` に変更されたため、シンボリックリンクの再作成が必要\n\n## Table of Contents\n\n- [Features](#features)\n- [Tech Stack](#tech-stack)\n- [Project Structure](#project-structure)\n- [Quick Start](#quick-start)\n- [Commands](#commands)\n- [Configuration](#configuration)\n- [Architecture](#architecture)\n- [Advanced Topics](#advanced-topics)\n- [License](#license)\n\n## Features\n\n- **Monorepo Structure** - pnpm workspacesによるテーマ・プラグインの統合管理\n- **Vite** - 高速なHMR（Hot Module Replacement）による開発体験\n- **TypeScript** - 型安全なJavaScript開発\n- **SCSS** - FLOCSS風のCSS設計手法\n- **WordPress Coding Standards** - phpcs/phpstanによるPHP品質管理\n- **Docker** - 簡単にローカル環境を構築\n- **画像最適化** - PNG/JPG→WebP変換、SVG最適化を自動化\n- **プラグイン開発** - カスタムブロックなどのプラグインをViteでビルド\n\n## Tech Stack\n\n| Category        | Technology                        |\n| --------------- | --------------------------------- |\n| Frontend        | TypeScript, SCSS, Vite            |\n| Backend         | PHP (WordPress)                   |\n| Package Manager | pnpm (workspaces)                 |\n| Linting         | ESLint, Stylelint, phpcs, PHPStan |\n| Formatter       | Prettier                          |\n| Environment     | Docker, Composer                  |\n| Utilities       | umaki, sharp, svgo                |\n\n## Project Structure\n\n```\npiiiqcy/\n├── packages/                     # モノレポパッケージ\n│   ├── theme/                    # WordPressテーマ\n│   │   ├── src/                  # フロントエンドソースコード\n│   │   │   ├── scripts/          # TypeScriptエントリーポイント\n│   │   │   ├── styles/           # SCSSファイル\n│   │   │   └── images/           # ソース画像\n│   │   ├── dist/                 # ビルド出力（WPテーマ）\n│   │   └── vite.config.ts        # テーマ用Vite設定\n│   │\n│   └── plugins/                  # カスタムプラグイン\n│       └── sample-block/         # サンプルブロックプラグイン\n│\n├── wp-plugins/                   # WordPressプラグイン（外部 + ビルド出力）\n├── app/WordPress/                # WordPressコアファイル\n├── project.config.ts             # プロジェクト設定\n└── docker-compose.yml            # Docker設定\n```\n\n## Quick Start\n\n### Required Environment\n\n| Tool     | Version   |\n| -------- | --------- |\n| Node.js  | `v23.4.0` |\n| pnpm     | `v9.15.4` |\n| PHP      | `8.x`     |\n| Composer | `2.8.4+`  |\n| Docker   | `27.4.0+` |\n\n\u003e [!NOTE]\n\u003e **Windowsユーザー向け**: [WSL2](https://learn.microsoft.com/ja-jp/windows/wsl/install) での実行を推奨します（Git Bash等は動作未確認）。\n\n### Setup\n\n```bash\n# 1. クローン\ngit clone https://github.com/TsubasaHiga/piiiqcy.git my-project\ncd my-project\n\n# 2. プロジェクト初期化（プロジェクト名・ポート設定・.env作成）\n./init.sh\n\n# 3. セットアップ（依存関係 + Docker + WordPress）\nmake setup\n\n# 4. 開発サーバーを起動\npnpm dev\n```\n\n### URLs\n\n| Service         | URL                             |\n| --------------- | ------------------------------- |\n| WordPress       | http://localhost:8000           |\n| WordPress Admin | http://localhost:8000/wp-admin/ |\n| phpMyAdmin      | http://localhost:8080           |\n| Vite Dev Server | http://localhost:3000           |\n\n\u003e [!NOTE]\n\u003e `./init.sh`にてポート番号を変更した場合は適宜読み替えてください。\n\n\u003e [!TIP]\n\u003e\n\u003e - デフォルトのWordPress管理者アカウントは `test` / `test` です。\n\u003e - テーマは `make setup` で自動的に有効化されます。\n\n## Commands\n\n### Development\n\n| Command                   | Description                                 |\n| ------------------------- | ------------------------------------------- |\n| `pnpm dev`                | Vite開発サーバー + 画像変換ウォッチを起動   |\n| `pnpm build`              | TypeScriptチェック + 本番ビルド + 画像変換  |\n| `pnpm build-stg`          | ステージング環境用ビルド（dist-stg/に出力） |\n| `pnpm dev:plugins`        | 全プラグインをウォッチモードでビルド        |\n| `pnpm build:plugins`      | 全プラグインを本番ビルド                    |\n| `pnpm dev:all`            | テーマとプラグインを同時に開発              |\n| `pnpm build:all-packages` | テーマと全プラグインをビルド                |\n\n### Linting \u0026 Formatting\n\n| Command             | Description                         |\n| ------------------- | ----------------------------------- |\n| `pnpm lint:scripts` | TypeScriptファイルのESLintチェック  |\n| `pnpm lint:styles`  | CSS/SCSSファイルのStylelintチェック |\n| `pnpm lint:php`     | PHPファイルのWordPress規約チェック  |\n| `pnpm phpstan`      | PHPStan静的解析（レベル5）          |\n| `pnpm format`       | Prettierによるフォーマット          |\n\n### Docker\n\n| Command          | Description                              |\n| ---------------- | ---------------------------------------- |\n| `make setup`     | **推奨**: 初回セットアップを一括実行     |\n| `make up`        | Dockerコンテナを起動                     |\n| `make restart`   | コンテナを再作成（.env変更の反映に使用） |\n| `make stop`      | Dockerコンテナを停止                     |\n| `make down`      | コンテナを停止し、ボリュームと共に削除   |\n| `make dbdump`    | データベースをdump.sqlにエクスポート     |\n| `make db-export` | URL変換付きDBエクスポート（対話式）      |\n\n### Utilities\n\n| Command     | Description                  |\n| ----------- | ---------------------------- |\n| `./init.sh` | プロジェクト名を対話式で変更 |\n\n## Configuration\n\n### .env 設定項目\n\n```apache\n# プロジェクト名（Docker コンテナとテーマディレクトリに使用）\nPREFIX=piiiqcy\n\n# ポート設定\nWP_PORT=8000      # WordPress\nPMA_PORT=8080     # phpMyAdmin\nVITE_PORT=3000    # Vite開発サーバー\n\n# WordPress デバッグモード\n# \"true\": Vite開発サーバーを使用 / \"\": ビルド済みアセットを使用\nWORDPRESS_DEBUG=\"true\"\n\n# Vite 開発サーバー（LAN内デバイスからアクセスする場合は IP を指定）\nVITE_API_URL=localhost\n\n# 環境URL（DBエクスポート用）\nURL_LOCAL=http://localhost:8000\nURL_STG=https://stg.example.com\nURL_PROD=https://example.com\n```\n\n\u003e [!NOTE]\n\u003e ポート設定は`.env`で一元管理されています。変更は自動的にVite、PHP、Dockerに反映されます。\n\n### project.config.ts\n\n```typescript\nexport const projectConfig = {\n  name: 'piiiqcy', // プロジェクト名\n  displayName: 'piiiQcy', // 表示名\n  scope: '@piiiqcy', // npmスコープ\n  theme: {\n    name: 'piiiqcy', // テーマディレクトリ名\n    displayName: 'piiiQcy Theme'\n  },\n  docker: {\n    prefix: 'piiiqcy', // Dockerコンテナプレフィックス\n    network: 'piiiqcy_network'\n  }\n}\n```\n\n## Architecture\n\n### PHP Classes (`packages/theme/dist/lib/`)\n\n| Class             | Description                      |\n| ----------------- | -------------------------------- |\n| `Theme_Cache`     | カテゴリ・タームのキャッシュ管理 |\n| `Category_Helper` | カテゴリ関連ユーティリティ       |\n| `Query_Optimizer` | WP_Query引数の構築               |\n\n### TypeScript Path Aliases\n\n`packages/theme/tsconfig.json`で定義：\n\n| Alias | Path    |\n| ----- | ------- |\n| `@/*` | `src/*` |\n\n```typescript\nimport '@/styles/main.scss'\nimport InView from '@/scripts/modules/InView'\n```\n\n### Coding Standards\n\n**PHP**\n\n- [WordPress Coding Standards](https://make.wordpress.org/core/handbook/coding-standards/)\n- [phpstan-wordpress](https://github.com/szepeviktor/phpstan-wordpress)\n\n**TypeScript**\n\n- ESLint with TypeScript plugin\n- Import sorting via `eslint-plugin-simple-import-sort`\n\n**SCSS**\n\n- Stylelint with `standard-scss` config\n- Property ordering via `recess-order`\n- FLOCSS ライクなディレクトリ構造（[詳細](docs/architecture/scss-structure.md)）\n\n## Advanced Topics\n\n### ローカル環境で本番モードを確認する\n\nローカル環境でVite開発サーバーを介さない本番と同様の動作を確認できます。\n\n```bash\n# 1. 本番ビルド\npnpm build\n\n# 2. .envのデバッグモードを無効化\n# WORDPRESS_DEBUG=\"\"  または行をコメントアウト\n\n# 3. コンテナを再起動\nmake restart\n```\n\n\u003e [!CAUTION]\n\u003e `WORDPRESS_DEBUG=\"false\"`は**機能しません**。PHPでは空でない文字列は`true`に評価されます。空文字列またはコメントアウトで無効化してください。\n\n### 本番/ステージング環境用のDBエクスポート\n\nローカルDBを本番やステージング環境用に変換してエクスポートできます。\n\n```bash\n# 対話式（環境を選択）\nmake db-export\n\n# 引数で直接指定\nmake db-export ENV=prod   # → dump-prod.sql\nmake db-export ENV=stg    # → dump-stg.sql\n```\n\n\u003e [!NOTE]\n\u003e エクスポート後、ローカルDBは自動的に元のURLに復元されます。\n\n### 同一ネットワーク内の他デバイスからWordPressにアクセス\n\nWordPressはサイトURLをデータベースに保存するため、`localhost`でインストールすると他デバイスからアクセスできません。\n\n```bash\n# IPアドレスを確認\nifconfig | grep \"inet \" | grep -v 127.0.0.1\n\n# URLを置換（例: 192.168.1.100）\ndocker compose run --rm wpcli wp search-replace 'http://localhost:8000' 'http://192.168.1.100:8000' --allow-root\n\n# localhostに戻す場合\ndocker compose run --rm wpcli wp search-replace 'http://192.168.1.100:8000' 'http://localhost:8000' --allow-root\n```\n\n### トラブルシューティング\n\n**ポートが使用中の場合**\n\n`.env`でポート番号を変更するか、使用中のプロセスを停止：\n\n```bash\nlsof -i :8000  # 使用中のポートを確認\ndocker stop $(docker ps -aq)  # 古いDockerコンテナを停止\n```\n\n**Dockerネットワークエラーの場合**\n\n```bash\ndocker network rm \u003cPREFIX\u003e_network\ndocker network create --driver bridge \u003cPREFIX\u003e_network\n```\n\n### 新しいプラグインを作成する\n\n1. **ディレクトリを作成**\n\n```bash\nmkdir -p packages/plugins/my-custom-block/src/blocks/my-block\n```\n\n2. **package.jsonを作成**\n\n```json\n{\n  \"name\": \"@piiiqcy/my-custom-block\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"type\": \"module\",\n  \"scripts\": {\n    \"dev\": \"vite build --watch\",\n    \"build\": \"vite build\"\n  }\n}\n```\n\n3. **vite.config.tsを作成**\n\n`packages/plugins/sample-block/vite.config.ts`を参考に、`OUTPUT_DIR`を`wp-plugins/`配下に設定。\n\n4. **ソースファイルを作成**\n\n- `src/index.tsx` - エントリーポイント\n- `src/blocks/my-block/edit.tsx` - エディタコンポーネント\n- `src/blocks/my-block/save.tsx` - 保存コンポーネント\n- `src/blocks/my-block/block.json` - ブロック定義\n- `index.php` - プラグインメインファイル\n\n5. **ビルド**\n\n```bash\npnpm --filter @piiiqcy/my-custom-block build\n```\n\n## License\n\nThis project is licensed under the MIT License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftsubasahiga%2Fpiiiqcy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftsubasahiga%2Fpiiiqcy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftsubasahiga%2Fpiiiqcy/lists"}