WordPress Block Theme ?????????????????????
WordPress Block Theme (Full Site Editing Theme) ???????????? theme ???????????????????????????????????????????????? Gutenberg Block Editor ???????????????????????????????????????????????????????????????????????? ????????????????????? header, footer, sidebar, templates ????????????????????????????????????????????? blocks ???????????????????????????????????? PHP templates ?????????????????????
???????????????????????? Block Theme Visual editing ?????????????????????????????????????????? (WYSIWYG), ???????????????????????????????????? PHP code ?????????????????? templates, Global Styles ?????????????????? design ?????????????????????????????????????????????????????????, Pattern Library ?????????????????? design patterns, Responsive design built-in, Performance ?????????????????? classic themes (?????? PHP processing)
Freelance IT Career ????????? WordPress ????????????????????????????????????????????????????????? WordPress ???????????? 43% ?????????????????????????????????????????? ????????????????????????????????? developers ??????????????? Block Theme ????????? ?????????????????????????????????????????????????????????????????? WordPress ?????????????????? ?????????????????? freelance WordPress developer ???????????????????????????????????? 30,000-150,000 ?????????/??????????????? ????????????????????? skill level
??????????????? Block Theme ?????????????????????????????????????????????
???????????????????????????????????? WordPress Block Theme
# === Create WordPress Block Theme ===
# 1. Theme structure
mkdir -p mytheme/{parts, templates, patterns, assets/css, assets/js}
# 2. style.css (Theme metadata)
cat > mytheme/style.css << 'CSS'
/*
Theme Name: MyBlockTheme
Theme URI: https://example.com/mytheme
Author: MyName
Author URI: https://example.com
Description: Custom Block Theme for freelance projects
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.5
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: mytheme
*/
CSS
# 3. theme.json (Global Styles & Settings)
cat > mytheme/theme.json << 'EOF'
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 2,
"settings": {
"color": {
"palette": [
{"slug": "primary", "color": "#2563eb", "name": "Primary"},
{"slug": "secondary", "color": "#7c3aed", "name": "Secondary"},
{"slug": "accent", "color": "#06b6d4", "name": "Accent"},
{"slug": "dark", "color": "#1e293b", "name": "Dark"},
{"slug": "light", "color": "#f8fafc", "name": "Light"}
],
"gradients": [
{"slug": "primary-to-secondary", "gradient": "linear-gradient(135deg, #2563eb 0%, #7c3aed 100%)", "name": "Primary to Secondary"}
]
},
"typography": {
"fontFamilies": [
{"fontFamily": "'Inter', sans-serif", "slug": "inter", "name": "Inter"},
{"fontFamily": "'Noto Sans Thai', sans-serif", "slug": "noto-thai", "name": "Noto Sans Thai"}
],
"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": "Extra Large"},
{"slug": "xx-large", "size": "3rem", "name": "2X Large"}
]
},
"spacing": {
"units": ["px", "em", "rem", "%", "vw"],
"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"}
]
},
"layout": {
"contentSize": "800px",
"wideSize": "1200px"
}
},
"styles": {
"typography": {
"fontFamily": "var(--wp--preset--font-family--inter)",
"fontSize": "var(--wp--preset--font-size--medium)",
"lineHeight": "1.7"
},
"color": {
"background": "var(--wp--preset--color--light)",
"text": "var(--wp--preset--color--dark)"
},
"elements": {
"link": {
"color": {"text": "var(--wp--preset--color--primary)"},
":hover": {"color": {"text": "var(--wp--preset--color--secondary)"}}
},
"h1": {"typography": {"fontSize": "var(--wp--preset--font-size--xx-large)"}},
"h2": {"typography": {"fontSize": "var(--wp--preset--font-size--x-large)"}}
}
}
}
EOF
# 4. Template parts
cat > mytheme/parts/header.html << 'HTML'
HTML
cat > mytheme/parts/footer.html << 'HTML'
?? 2024 MyBlockTheme. All rights reserved.
HTML
# 5. Index template
cat > mytheme/templates/index.html << 'HTML'
HTML
echo "Block theme created: mytheme/"Freelance IT Career ????????? WordPress
???????????????????????????????????? freelance WordPress developer
#!/usr/bin/env python3
# freelance_career.py ??? Freelance WordPress Career Guide
import json
import logging
from typing import Dict, List
logging.basicConfig(level=logging.INFO)
logger = logging.getLogger("career")
class FreelanceCareerGuide:
def __init__(self):
pass
def career_levels(self):
return {
"junior": {
"experience": "0-1 ??????",
"skills": ["WordPress installation", "Theme customization", "Plugin setup", "Basic CSS"],
"rate_th": "500-1,500 ?????????/?????????????????????",
"monthly_income": "15,000-30,000 ?????????",
"project_types": ["Simple websites", "Blog setup", "WooCommerce basic"],
"project_price": "5,000-20,000 ?????????/project",
},
"mid_level": {
"experience": "1-3 ??????",
"skills": ["Custom theme development", "Block themes", "PHP/JavaScript", "SEO", "Performance optimization"],
"rate_th": "1,500-3,000 ?????????/?????????????????????",
"monthly_income": "40,000-80,000 ?????????",
"project_types": ["Custom themes", "E-commerce", "Multi-language sites"],
"project_price": "20,000-80,000 ?????????/project",
},
"senior": {
"experience": "3+ ??????",
"skills": ["Full stack WP", "Custom plugins", "REST API", "Headless WP", "Block development", "Performance audit"],
"rate_th": "3,000-6,000 ?????????/?????????????????????",
"monthly_income": "80,000-200,000 ?????????",
"project_types": ["Enterprise sites", "Custom applications", "Consulting"],
"project_price": "80,000-500,000+ ?????????/project",
},
}
def revenue_streams(self):
return {
"project_based": {
"description": "????????????????????????????????????????????????",
"income": "5,000-500,000 ?????????/project",
"platforms": ["Fastwork.co", "Freelancer.com", "Upwork", "LinkedIn"],
},
"retainer": {
"description": "???????????????????????????????????????????????? (maintenance)",
"income": "3,000-15,000 ?????????/????????????/???????????????",
"services": ["Update WordPress/plugins", "Backup", "Security monitoring", "Content updates"],
},
"theme_sales": {
"description": "????????? Block Theme ?????? marketplace",
"income": "$29-79/license",
"platforms": ["ThemeForest", "WordPress.org", "Own website"],
},
"training": {
"description": "????????? WordPress development",
"income": "2,000-10,000 ?????????/?????????????????????",
"platforms": ["Udemy", "Skillshare", "YouTube", "In-person workshops"],
},
}
def skill_roadmap(self):
return {
"month_1_3": {
"focus": "WordPress Fundamentals",
"learn": ["WordPress admin", "Gutenberg editor", "Basic HTML/CSS", "Theme customization"],
"project": "???????????????????????????????????????????????? + 2-3 portfolio projects",
},
"month_4_6": {
"focus": "Block Theme Development",
"learn": ["theme.json", "Block templates", "Global styles", "Patterns", "PHP basics"],
"project": "??????????????? Block Theme ???????????????????????????????????????",
},
"month_7_12": {
"focus": "Advanced Development",
"learn": ["JavaScript/React", "Custom blocks", "REST API", "WooCommerce", "Performance optimization"],
"project": "?????????????????? freelance 3-5 projects",
},
}
guide = FreelanceCareerGuide()
levels = guide.career_levels()
print("Freelance WordPress Career Levels:")
for level, info in levels.items():
print(f"\n {level} ({info['experience']}):")
print(f" Income: {info['monthly_income']}")
print(f" Rate: {info['rate_th']}")
print(f" Project: {info['project_price']}")
streams = guide.revenue_streams()
print(f"\nRevenue Streams:")
for name, info in streams.items():
print(f" {name}: {info['description']} ({info['income']})")
roadmap = guide.skill_roadmap()
print(f"\nSkill Roadmap:")
for period, info in roadmap.items():
print(f" {period}: {info['focus']}")??????????????? Custom Blocks
??????????????? custom blocks ?????????????????? Block Theme
# === Custom Block Development ===
# 1. Create block plugin scaffold
npx @wordpress/create-block my-custom-block --namespace mytheme
# 2. Block registration (PHP)
cat > my-custom-block/my-custom-block.php << 'PHP'
my-custom-block/src/pricing-card/edit.js << 'JAVASCRIPT'
import { __ } from '@wordpress/i18n';
import { useBlockProps, RichText, InspectorControls } from '@wordpress/block-editor';
import { PanelBody, TextControl, ToggleControl } from '@wordpress/components';
export default function Edit({ attributes, setAttributes }) {
const { title, price, period, features, highlighted } = attributes;
const blockProps = useBlockProps({
className: `pricing-card `,
});
return (
<>
setAttributes({ price: val })}
/>
setAttributes({ period: val })}
/>
setAttributes({ highlighted: val })}
/>
setAttributes({ title: val })}
placeholder={__('Plan Name')}
/>
{price}
/{period}
setAttributes({ features: val })}
placeholder={__('Add features...')}
/>
);
}
JAVASCRIPT
# 4. Block JSON
cat > my-custom-block/src/pricing-card/block.json << 'JSON'
{
"apiVersion": 3,
"name": "mytheme/pricing-card",
"title": "Pricing Card",
"category": "design",
"icon": "money-alt",
"description": "A pricing card block for service pages",
"attributes": {
"title": {"type": "string", "default": "Basic"},
"price": {"type": "string", "default": "???999"},
"period": {"type": "string", "default": "???????????????"},
"features": {"type": "string", "default": ""},
"highlighted": {"type": "boolean", "default": false}
},
"supports": {
"html": false,
"color": {"background": true, "text": true},
"spacing": {"padding": true, "margin": true}
},
"editorScript": "file:./index.js",
"editorStyle": "file:./index.css",
"style": "file:./style-index.css"
}
JSON
# Build
cd my-custom-block && npm run build
echo "Custom blocks ready"SEO ????????? Performance Optimization
Optimize Block Theme ?????????????????? SEO ????????? speed
#!/usr/bin/env python3
# wp_optimization.py ??? WordPress Optimization Checklist
import json
import logging
from typing import Dict, List
logging.basicConfig(level=logging.INFO)
logger = logging.getLogger("optimize")
class WPOptimization:
def __init__(self):
pass
def performance_checklist(self):
return {
"hosting": [
{"item": "????????? managed WordPress hosting (Cloudways, Kinsta, WP Engine)", "impact": "HIGH"},
{"item": "???????????? PHP OPcache", "impact": "HIGH"},
{"item": "????????? PHP 8.2+ (???????????????????????? 7.x 20-30%)", "impact": "MEDIUM"},
{"item": "????????? HTTP/2 ???????????? HTTP/3", "impact": "MEDIUM"},
],
"caching": [
{"item": "Page caching (WP Super Cache, W3 Total Cache, LiteSpeed Cache)", "impact": "HIGH"},
{"item": "Object caching (Redis/Memcached)", "impact": "HIGH"},
{"item": "Browser caching headers", "impact": "MEDIUM"},
{"item": "CDN (Cloudflare, BunnyCDN)", "impact": "HIGH"},
],
"images": [
{"item": "????????? WebP format", "impact": "HIGH"},
{"item": "Lazy loading (built-in WordPress 5.5+)", "impact": "MEDIUM"},
{"item": "Responsive images (srcset)", "impact": "MEDIUM"},
{"item": "Image compression (ShortPixel, Imagify)", "impact": "HIGH"},
],
"code": [
{"item": "Minify CSS/JS", "impact": "MEDIUM"},
{"item": "Remove unused CSS (PurgeCSS)", "impact": "MEDIUM"},
{"item": "Defer non-critical JS", "impact": "HIGH"},
{"item": "Reduce plugins (< 20 active plugins)", "impact": "HIGH"},
],
"database": [
{"item": "Clean post revisions", "impact": "LOW"},
{"item": "Remove spam comments", "impact": "LOW"},
{"item": "Optimize database tables", "impact": "MEDIUM"},
],
}
def seo_checklist(self):
return {
"technical": [
"Install Yoast SEO ???????????? Rank Math",
"Submit XML sitemap to Google Search Console",
"???????????? permalink structure (/%postname%/)",
"????????? HTTPS ????????????????????????",
"???????????? breadcrumbs",
"Optimize Core Web Vitals (LCP < 2.5s, FID < 100ms, CLS < 0.1)",
],
"content": [
"????????? heading hierarchy (H1 ??? H2 ??? H3)",
"??????????????? meta title 50-60 characters",
"??????????????? meta description 150-160 characters",
"????????? alt text ??????????????????",
"Internal linking 3-5 links ???????????????????????????",
"Schema markup (JSON-LD)",
],
}
opt = WPOptimization()
perf = opt.performance_checklist()
print("WordPress Performance Checklist:")
for category, items in perf.items():
print(f"\n {category}:")
for item in items:
print(f" [{item['impact']}] {item['item']}")
seo = opt.seo_checklist()
print(f"\nSEO Checklist:")
for category, items in seo.items():
print(f" {category}:")
for item in items[:3]:
print(f" - {item}")??????????????????????????????????????????????????????????????????
?????????????????????????????????????????????????????????????????????????????? freelance
#!/usr/bin/env python3
# pricing_strategy.py ??? Freelance Pricing Strategy
import json
import logging
from typing import Dict, List
logging.basicConfig(level=logging.INFO)
logger = logging.getLogger("pricing")
class FreelancePricing:
def __init__(self):
pass
def pricing_models(self):
return {
"hourly": {
"description": "???????????????????????????????????????",
"range_th": "500-6,000 ?????????/??????.",
"pros": ["????????????????????????", "?????????????????????????????? effort"],
"cons": ["?????????????????????????????????????????????????????????????????????????????????????????????", "?????????????????????????????????????????????????????????"],
"best_for": "?????????????????? scope ??????????????????, maintenance, consulting",
},
"fixed_price": {
"description": "????????????????????????????????????????????????????????????",
"range_th": "5,000-500,000+ ?????????",
"pros": ["??????????????????????????? (???????????????????????????????????????????????????????????????)", "??????????????????????????????????????????????????????"],
"cons": ["Scope creep risk", "???????????? estimate ??????"],
"best_for": "?????????????????? scope ??????????????????, ????????????????????????????????????",
},
"value_based": {
"description": "?????????????????????????????????????????????????????????????????????????????????",
"example": "???????????? e-commerce ?????????????????????????????????????????????????????? 500,000/??????????????? ??? ????????? 150,000 ?????????",
"pros": ["????????????????????????????????????", "????????????????????????????????????????????????"],
"cons": ["???????????? prove value", "???????????? experienced"],
"best_for": "E-commerce, landing pages, conversion optimization",
},
"retainer": {
"description": "????????????????????????????????????",
"range_th": "3,000-30,000 ?????????/???????????????",
"pros": ["?????????????????????????????????????????? (recurring)", "???????????????????????????????????????"],
"cons": ["????????????????????????????????????????????????????????????????????????????????????"],
"best_for": "Maintenance, support, content updates",
},
}
def project_pricing_guide(self):
return {
"landing_page": {"price": "5,000-15,000 ?????????", "time": "1-3 ?????????"},
"blog_website": {"price": "10,000-30,000 ?????????", "time": "3-7 ?????????"},
"corporate_website": {"price": "30,000-80,000 ?????????", "time": "2-4 ?????????????????????"},
"ecommerce_basic": {"price": "40,000-100,000 ?????????", "time": "3-6 ?????????????????????"},
"ecommerce_custom": {"price": "100,000-300,000 ?????????", "time": "2-3 ???????????????"},
"custom_block_theme": {"price": "50,000-150,000 ?????????", "time": "3-6 ?????????????????????"},
"monthly_maintenance": {"price": "3,000-15,000 ?????????/???????????????", "time": "ongoing"},
}
pricing = FreelancePricing()
models = pricing.pricing_models()
print("Freelance Pricing Models:")
for name, info in models.items():
print(f"\n {name}: {info['description']}")
print(f" Range: {info.get('range_th', info.get('example', ''))}")
print(f" Best for: {info['best_for']}")
guide = pricing.project_pricing_guide()
print(f"\nProject Pricing Guide:")
for project, info in guide.items():
print(f" {project}: {info['price']} ({info['time']})")FAQ ??????????????????????????????????????????
Q: Block Theme ????????? Classic Theme ??????????????????????????????????
A: Block Theme ???????????????????????????????????? WordPress ??????????????? Visual editing ????????????????????? ????????????????????? PHP templates, Global Styles ?????????????????? design ????????????, Performance ??????????????????, WordPress ?????????????????????????????????????????? Block Editor ????????????????????? ??????????????? limitations ????????????????????????, Plugin compatibility ??????????????????????????????????????????????????????, Learning curve ?????????????????? developers ?????????????????? PHP Classic Theme ??????????????? Mature ecosystem, Plugin support ?????????, Flexible ?????????????????????????????? complex logic ????????????????????? ??????????????????????????? PHP, ??????????????? visual editing ?????????????????? templates ??????????????? Project ???????????? ??????????????? Block Theme, Project ????????????????????? complex functionality ????????? Classic Theme + Gutenberg blocks
Q: ???????????????????????? freelance WordPress ??????????????????????
A: ????????????????????? ???????????????????????? WordPress basics (1-2 ???????????????) ?????????????????????, ??????????????????, customization, ??????????????? portfolio 3-5 ???????????? (?????????????????????????????????????????????????????????????????????????????????/NPO), ????????????????????????????????? platforms (Fastwork, Upwork, Freelancer), ??????????????? personal website ???????????????????????????, ???????????????????????????????????????????????? ????????????????????????????????????????????? ???????????? reviews, ??????????????? ???????????????????????????????????? experience, ??????????????????????????????????????????????????? Block Theme, WooCommerce, SEO ??????????????????????????? ???????????????????????? perfect ??????????????????????????? ????????????????????????????????????????????????????????????????????????????????? ????????????????????????????????????????????????????????????????????? ???????????? portfolio ????????? reviews ??????????????????????????? certificates
Q: Freelance WordPress ???????????????????????????????
A: ??????????????????????????? WordPress ????????????????????? 43% market share, ??????????????????????????????????????????????????????????????????????????????????????????, E-commerce (WooCommerce) ?????????????????????????????????????????????, Block Theme ?????????????????????????????????????????? ??????????????????????????????????????????????????? ???????????????????????????????????? skill ???????????? ????????????????????? install theme + plugins ???????????? custom development ?????????, ???????????????????????? JavaScript/React ?????????????????? Block development, ???????????????????????? SEO, Performance, Security, ????????????????????? headless WordPress (Next.js, Gatsby) ?????????????????? project ???????????? ????????????????????? No-code tools (Wix, Squarespace) ????????? market ???????????? basic websites ????????? custom development ?????????????????????????????? developers
Q: ???????????????????????????????????????????????????????????????????????????????
A: ????????????????????? ??????????????????????????????????????? 50% ???????????????????????????????????? (????????????????????????), ??????????????????????????????????????????????????????????????????????????? ???????????? scope, timeline, payment terms, ???????????? milestone payments (30%-40%-30%), ???????????????????????????????????????????????????????????????????????????????????????????????????, Host ?????????????????? server ??????????????????????????????????????????????????????????????? ???????????? migrate ????????????????????????????????? ????????? reminder email ?????????????????????????????????????????????, escalate ????????????????????????????????????????????????, ????????? platform ??????????????? escrow (Upwork, Fastwork) ????????????????????????????????????????????? ?????????????????? project ???????????? ????????? contract ?????????????????????????????????????????????????????????????????????
