WordPress Block Theme Automation
WordPress Block Theme Automation Script FSE Full Site Editing theme.json Templates Parts Patterns Build Deploy CI/CD Production
| Component | File | Purpose | Format |
|---|---|---|---|
| Config | theme.json | Settings Styles Layout Colors Typography | JSON |
| Templates | templates/*.html | Page Layout (index single archive) | HTML (Block Markup) |
| Parts | parts/*.html | Reusable Parts (header footer) | HTML (Block Markup) |
| Patterns | patterns/*.php | Block Patterns (Hero CTA Grid) | PHP (with Block Markup) |
| Styles | styles/*.json | Style Variations (Dark Light) | JSON |
| Info | style.css | Theme Name Version Author | CSS Header |
Theme Generator Script
# === WordPress Block Theme Generator ===
# #!/usr/bin/env python3
# """Generate WordPress Block Theme structure automatically."""
# import os, json, zipfile
# THEME_NAME = "my-block-theme"
# THEME_DISPLAY = "My Block Theme"
# THEME_VERSION = "1.0.0"
# THEME_AUTHOR = "SiamCafe"
#
# # Directory structure
# dirs = ["templates", "parts", "styles", "patterns", "assets/fonts", "assets/images"]
# for d in dirs:
# os.makedirs(f"{THEME_NAME}/{d}", exist_ok=True)
from dataclasses import dataclass
@dataclass
class ThemeFile:
path: str
content_type: str
description: str
required: bool
theme_files = [
ThemeFile("style.css",
"CSS Header (Theme metadata)",
"Theme Name Version Author Description License",
True),
ThemeFile("theme.json",
"JSON (Settings + Styles)",
"Colors Typography Layout Spacing Block Settings",
True),
ThemeFile("templates/index.html",
"HTML (Block Markup)",
"Main Template Query Loop Post List",
True),
ThemeFile("templates/single.html",
"HTML (Block Markup)",
"Single Post Template Content Comments",
True),
ThemeFile("templates/page.html",
"HTML (Block Markup)",
"Page Template Content",
True),
ThemeFile("templates/archive.html",
"HTML (Block Markup)",
"Archive Template Category Tag Date",
False),
ThemeFile("templates/404.html",
"HTML (Block Markup)",
"404 Not Found Page",
False),
ThemeFile("parts/header.html",
"HTML (Block Markup)",
"Site Header Navigation Logo",
True),
ThemeFile("parts/footer.html",
"HTML (Block Markup)",
"Site Footer Copyright Links",
True),
ThemeFile("patterns/hero.php",
"PHP (Block Pattern)",
"Hero Banner Section",
False),
ThemeFile("styles/dark.json",
"JSON (Style Variation)",
"Dark Mode Color Palette",
False),
]
print("=== Theme Files ===")
for f in theme_files:
req = "Required" if f.required else "Optional"
print(f" [{f.path}] ({req})")
print(f" Type: {f.content_type}")
print(f" Desc: {f.description}")theme.json Configuration
# === theme.json Generator ===
# theme_json = {
# "$schema": "https://schemas.wp.org/trunk/theme.json",
# "version": 2,
# "settings": {
# "color": {
# "palette": [
# {"slug": "primary", "color": "#1e40af", "name": "Primary"},
# {"slug": "secondary", "color": "#7c3aed", "name": "Secondary"},
# {"slug": "accent", "color": "#f59e0b", "name": "Accent"},
# {"slug": "background", "color": "#ffffff", "name": "Background"},
# {"slug": "foreground", "color": "#1f2937", "name": "Foreground"},
# ]
# },
# "typography": {
# "fontFamilies": [
# {"fontFamily": "Inter, sans-serif", "slug": "inter", "name": "Inter"},
# {"fontFamily": "JetBrains Mono, monospace", "slug": "mono", "name": "Mono"},
# ],
# "fontSizes": [
# {"slug": "small", "size": "0.875rem", "name": "Small"},
# {"slug": "medium", "size": "1rem", "name": "Medium"},
# {"slug": "large", "size": "1.25rem", "name": "Large"},
# {"slug": "x-large", "size": "2rem", "name": "XL"},
# ]
# },
# "layout": {"contentSize": "800px", "wideSize": "1200px"},
# "spacing": {"units": ["px", "rem", "%", "vh", "vw"]},
# },
# "styles": {
# "color": {"background": "var(--wp--preset--color--background)",
# "text": "var(--wp--preset--color--foreground)"},
# "typography": {"fontFamily": "var(--wp--preset--font-family--inter)",
# "fontSize": "var(--wp--preset--font-size--medium)"},
# "elements": {
# "h1": {"typography": {"fontSize": "2.5rem", "fontWeight": "700"}},
# "h2": {"typography": {"fontSize": "2rem", "fontWeight": "600"}},
# "link": {"color": {"text": "var(--wp--preset--color--primary)"}},
# },
# },
# }
# with open(f"{THEME_NAME}/theme.json", "w") as f:
# json.dump(theme_json, f, indent=2)
@dataclass
class ThemeJsonSection:
section: str
key_settings: str
example: str
tip: str
sections = [
ThemeJsonSection("settings.color.palette",
"Custom Color Palette สำหรับ Editor",
"primary secondary accent background foreground",
"ใช้ 5-8 สี ตั้งชื่อ slug ชัดเจน"),
ThemeJsonSection("settings.typography",
"Font Families Font Sizes",
"Inter sans-serif | small medium large x-large",
"ใช้ Local Fonts (assets/fonts) ลด External Request"),
ThemeJsonSection("settings.layout",
"Content Width Wide Width",
"contentSize: 800px wideSize: 1200px",
"ไม่เกิน 1400px สำหรับ Wide Content"),
ThemeJsonSection("styles.elements",
"Default Styles สำหรับ HTML Elements",
"h1-h6 p a button",
"ตั้ง Base Style ที่นี่ ไม่ต้องเขียน CSS"),
ThemeJsonSection("styles.blocks",
"Default Styles สำหรับ Specific Blocks",
"core/button core/heading core/paragraph",
"Override Block Default Styles ได้ละเอียด"),
]
print("=== theme.json Sections ===")
for s in sections:
print(f" [{s.section}]")
print(f" Settings: {s.key_settings}")
print(f" Example: {s.example}")
print(f" Tip: {s.tip}")Build & Deploy Pipeline
# === CI/CD Pipeline ===
# GitHub Actions (.github/workflows/deploy.yml)
# name: Deploy Theme
# on:
# push:
# tags: ['v*']
# jobs:
# build:
# runs-on: ubuntu-latest
# steps:
# - uses: actions/checkout@v4
# - name: Validate theme.json
# run: |
# python -c "import json; json.load(open('theme.json'))"
# - name: Create ZIP
# run: |
# zip -r my-block-theme.zip . -x '.git/*' '.github/*' 'node_modules/*'
# - name: Deploy to WordPress
# run: |
# wp theme install my-block-theme.zip --activate \
# --ssh=user@server:/var/www/html
@dataclass
class PipelineStep:
step: str
tool: str
command: str
purpose: str
pipeline = [
PipelineStep("Lint",
"theme-check / jsonlint",
"npx jsonlint theme.json && wp theme check",
"ตรวจ theme.json ถูกต้อง Theme มาตรฐาน"),
PipelineStep("Validate Templates",
"Custom Script",
"python validate_templates.py templates/ parts/",
"ตรวจ Block Markup ถูกต้อง ไม่มี Syntax Error"),
PipelineStep("Build ZIP",
"zip",
"zip -r theme.zip . -x '.git/*' 'node_modules/*'",
"สร้าง ZIP พร้อม Install"),
PipelineStep("Deploy Staging",
"WP-CLI + SSH",
"wp theme install theme.zip --activate --ssh=staging",
"ทดสอบบน Staging ก่อน Production"),
PipelineStep("Smoke Test",
"curl / Playwright",
"curl -s https://staging.example.com | grep 'theme-name'",
"ตรวจ Theme ทำงานบน Staging"),
PipelineStep("Deploy Production",
"WP-CLI + SSH",
"wp theme install theme.zip --activate --ssh=production",
"Deploy Production หลัง Staging ผ่าน"),
]
print("=== Pipeline Steps ===")
for p in pipeline:
print(f" [{p.step}] {p.tool}")
print(f" Command: {p.command}")
print(f" Purpose: {p.purpose}")เคล็ดลับ
- theme.json: ใช้ theme.json ควบคุม Style ไม่เขียน CSS มาก
- Patterns: สร้าง Block Patterns ใช้ซ้ำได้ทุกหน้า
- Local Fonts: เก็บ Font ใน assets/fonts ลด External Request
- Variations: สร้าง Style Variations สำหรับ Dark/Light Mode
- WP-CLI: ใช้ WP-CLI สำหรับ Deploy อัตโนมัติ
Block Theme คืออะไร
WordPress FSE Full Site Editing Block Editor HTML Templates theme.json Parts Patterns Styles Visual Editing ไม่ต้อง PHP มาก
theme.json ตั้งค่าอย่างไร
Version 2 settings color palette typography fontFamilies fontSizes layout styles elements blocks customTemplates templateParts
Automation Script ทำอะไร
สร้าง Directory Structure theme.json style.css Templates Parts Patterns Variations ZIP Export Build Lint Validate Deploy Pipeline
Deploy อย่างไร
WP-CLI wp theme install activate SSH Git CI/CD GitHub Actions Staging Smoke Test Production Multisite Network Activate ZIP Upload
สรุป
WordPress Block Theme Automation FSE theme.json Templates Parts Patterns Build CI/CD WP-CLI Deploy Staging Production
