wp-starter-theme

🛜 WP Environment

本テンプレートはWordPressのアップデートが常に行われていくこと、運用が第三者になる可能性を考慮して互換性に特化したものになっています。
そのためfunctionsのカスタムは最小限に留めて、必要な機能はプラグインに任せる方針になっています。

WordPressは常に最新のバージョンを取得する設定になっています。プロジェクト開始時に .wp-env.json を編集してWordPressとプラグインのバージョンを固定することを推奨しています。

WP ver latest
PHP ver 8.1

🔧 WP Plugins

本番またはテストサーバーでは下記のプラグインをインストールすることを推奨しています。

💰 Paid Plugins

下記の有料のプラグインを使用したい場合は運用者に連絡をしてください。リンクがダウンロードできるようになるので /plugins配下に設置してください。

🐶 Usage Environment

Docker Desktop
Node.js >= 18

😌 Local Environment Setup

package install

npm ci or npm install

wp start up & db import

npm run wp:setup

frontend build start

npm run dev

open http://localhost:3030/

wp login

open http://localhost:3030/wp-admin

user : admin
password : password

💻 Production Upload

npm run build

アップロードの際は/dist以下をアップロードしてください。

🏠 Browser Sync

ネットワーク経由でのアクセスをする場合は.wp-env.jsonのVITE_SERVERの値を自身のローカルIPに変更してください。
こちらは暫定対応で.wp-env.jsonはGit管理されているのでこちらの値を上書きしてコミットしないように注意してください。

"VITE_SERVER": "http://0.0.0.0:3000"

😺 Grid System

案件によっては60分割のグリッドシステムによってデザインされています。
スタイリングがしやすいように補助的な役割を担う機能が既に用意されています。

D キー押下でグリッドラインの表示/非表示が切り替わります。
グリッドラインが表示されるのは開発モードの時のみです。

😻 Styling

クラスの命名については基本的に BEM を採用しています。

ネスト機能の多用は可読性と検索性が落ちるので控えるようにしてください。

// NG
.hoge {
  &__title {
    color: black;
  }
}

// OK
.hoge__title {
  color: black;
}

固定値か相対値でコーディングするかはプロジェクトやデザインによって変わってくるので、最初に協議するようにしてください。

相対値を使用する場合はvw関数を使用するようにしてください。

.hoge {
  font-size: vw(16);
}

グリッドの値を参照したい場合はrem関数を使用するようにしてください。

.hoge {
  width: rem(1); // 1グリッド
}

🌙 How to reference images from Css

$base-dir は設定をするとCSSでローカルと本番で異なる参照をすることができます。

background-image: url($base-dir + "assets/images/icon-blank.svg");

😎 Svg Sprite

<?= get_svg_sprite('logo', 'LIG') ?>

👟 Image

画像最適化用にpicture.phpを用意しています。こちらを使用すると.avifまたは.webpで画像が配信されます。

<?php get_template_part("./parts/picture", null, [
  "images" => [
    "src" => "sample-01.jpg",
    "width" => "1280",
    "height" => "600",
    "alt" => "",
  ],
]); ?>

🍰 Assets

ローカル環境ではVITEの開発サーバー、本番環境ではテーマのルートを参照する必要があるため基本的にvite-config.phpの関数を使用してAssetsにアクセスしてください。

<img src="https://github.com/liginc/wp-starter-theme/raw/master/<?= vite_src_images('sample-01.jpg') ?>" decoding="async" width="1280" height="800" alt="">

<img src="https://github.com/liginc/wp-starter-theme/raw/master/<?= vite_src_images('icon-blank.svg') ?>" decoding="async" width="30" height="30" alt="">

✋ Lint

npm run lint:check

npm run lint:fix

Lint はプリコミット時に必ず実行されます。以下の vscode プラグインをインストールすると vscode 保存時にも Lint を実行することができるので便利です。

👉 Git Flow

開発段階では基本的にfeatureブランチを作成して、mainにマージしてください。CICDが実装されている場合 main ブランチにマージすると自動デプロイの処理が実行されるので誤って本番サーバーにアップしないように注意してください。

👀 Document

wp-env
vite

🚨 Trouble Shoot

All-in-One WP Migrationでローカル環境のデータベースをエクスポートしてテストサイトにインポートした際に、テーマファイルが「src」になる

テーマは通常、Git管理され、CI/CDを通じてデプロイされるため、All-in-One WP Migrationのエクスポートに含めない方が良いです。
データベースのバックアップや移行が主な目的であれば、All-in-One WP Migrationでデータベースのみをエクスポートし、インポートすることが推奨されます。

liginc / wp-starter-theme

readme