WordPress Block Theme Multi-tenant Design —

WordPress Block Theme

WordPress Block Theme Multi-tenant Full Site Editing FSE theme.json Block Patterns Multisite Network Global Styles Template Parts Domain Mapping Production

theme.json Configuration

=== theme.json for Block Theme ===

theme.json — Main configuration

{

"$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" }

],

"gradients": [],

"defaultPalette": false

},

"typography": {

"fontFamilies": [

{

"fontFamily": "Inter, sans-serif",

"slug": "inter",

"name": "Inter",

"fontFace": [{

"fontFamily": "Inter",

"fontWeight": "400 700",

"fontStyle": "normal",

เนื้อหาเกี่ยวข้อง — สยามบลอกเชน — คู่มือฉบับสมบูรณ์ 2026

"src": ["file:./assets/fonts/inter.woff2"]

}]

}

],

"fontSizes": [

{ "slug": "small", "size": "0.875rem", "name": "Small" },

{ "slug": "medium", "size": "1rem", "name": "Medium" },

{ "slug": "large", "size": "1.5rem", "name": "Large" },

แนะนำเพิ่มเติม — SiamCafeBook

{ "slug": "x-large", "size": "2.25rem", "name": "Extra Large" }

]

},

"layout": {

"contentSize": "800px",

"wideSize": "1200px"

},

"spacing": {

"units": ["px", "rem", "%"],

"spacingSizes": [

{ "slug": "10", "size": "0.5rem", "name": "XS" },

{ "slug": "20", "size": "1rem", "name": "S" },

{ "slug": "30", "size": "1.5rem", "name": "M" },

{ "slug": "40", "size": "2rem", "name": "L" },

{ "slug": "50", "size": "3rem", "name": "XL" }

]

}

},

"styles": {

เนื้อหาเกี่ยวข้อง — บทความที่เกี่ยวข้อง: Prometheus Alertmanager Network Segmentation

"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": "var(--wp--preset--font-size--x-large)" } },

"button": { "color": { "background": "var(--wp--preset--color--primary)", "text": "#ffffff" } },

"link": { "color": { "text": "var(--wp--preset--color--primary)" } }

}

}

}

from dataclasses import dataclass

@dataclass

class ThemeComponent:

component: str

file_path: str

purpose: str

required: bool

แนะนำเพิ่มเติม — บทวิเคราะห์จาก XM Signal

components = [

ThemeComponent("theme.json", "theme.json", "Global styles and settings", True),

ThemeComponent("style.css", "style.css", "Theme metadata (name, version)", True),

ThemeComponent("Index Template", "templates/index.html", "Main fallback template", True),

ThemeComponent("Header Part", "parts/header.html", "Site header with nav", True),

ThemeComponent("Footer Part", "parts/footer.html", "Site footer", True),

ThemeComponent("Single Template", "templates/single.html", "Single post template", False),

ThemeComponent("Page Template", "templates/page.html", "Page template", False),

ThemeComponent("Patterns", "patterns/*.php", "Reusable block patterns", False),

]

req = "Required" if c.required else "Optional"

เนื้อหาเกี่ยวข้อง — LangChain Agent Team Productivity

Multisite Multi-tenant

=== WordPress Multisite Setup ===

wp-config.php — Enable Multisite

define('WP_ALLOW_MULTISITE', true);

After network setup:

define('MULTISITE', true);

define('SUBDOMAIN_INSTALL', true);

define('DOMAIN_CURRENT_SITE', 'example.com');

define('PATH_CURRENT_SITE', '/');

define('SITE_ID_CURRENT_SITE', 1);

define('BLOG_ID_CURRENT_SITE', 1);

.htaccess for Multisite

RewriteEngine On

RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

RewriteBase /

RewriteRule ^index\.php$ - [L]

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule . /index.php [L]

WP-CLI — Manage Multisite

wp site create --slug=tenant-a --title="Tenant A" --email=admin@tenant-a.com

wp site create --slug=tenant-b --title="Tenant B" --email=admin@tenant-b.com

wp site list

wp theme enable my-block-theme --network

wp plugin activate woocommerce --url=tenant-a.example.com

Domain Mapping (WordPress 4.5+)

wp site create --slug=tenant-c --title="Tenant C"

เนื้อหาเกี่ยวข้อง — บทความที่เกี่ยวข้อง: Great Expectations Developer Experience DX

-- In admin: Settings > Domains > Add tenant-c.com

Nginx Configuration per site

server {

listen 443 ssl http2;

server_name tenant-a.com www.tenant-a.com;

root /var/www/wordpress;

# ... standard WordPress config

}

@dataclass

class TenantSite:

tenant: str

domain: str

theme_variation: str

plugins: str

storage: str

users: int

tenants = [

TenantSite("Tenant A", "tenant-a.com", "Blue Corporate", "WooCommerce, Yoast", "5GB", 12),

TenantSite("Tenant B", "tenant-b.com", "Green Nature", "LearnDash, BuddyPress", "10GB", 45),

TenantSite("Tenant C", "tenant-c.com", "Purple Creative", "Elementor, WPForms", "3GB", 5),

TenantSite("Tenant D", "tenant-d.com", "Red Bold", "WooCommerce, Mailchimp", "8GB", 20),

]

เคล็ดลับ

• theme.json: กำหนดทุกอย่างใน theme.json ลด Custom CSS
• Variations: ใช้ Style Variations แยก Look ต่อ Tenant
• Patterns: สร้าง Block Patterns ให้ Tenant เลือกใช้
• Multisite: ใช้ Multisite สำหรับ 5+ Tenant
• Cache: ใช้ Object Cache + Page Cache ทุก Site

WordPress Block Theme คืออะไร

Full Site Editing FSE Block Editor HTML Template theme.json Block Patterns Global Styles Template Parts WordPress 6.0+ ไม่ต้อง PHP Template