wordpress

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

WordPress Development Workflow Bundle

WordPress开发工作流合集

Overview

概述

Comprehensive WordPress development workflow covering theme development, plugin creation, WooCommerce integration, performance optimization, and security. This bundle orchestrates skills for building production-ready WordPress sites and applications.
全面的WordPress开发工作流,涵盖主题开发、插件创建、WooCommerce集成、性能优化和安全防护。本合集整合了构建可投入生产环境的WordPress网站和应用所需的技能。

When to Use This Workflow

何时使用此工作流

Use this workflow when:
  • Building new WordPress websites
  • Creating custom themes
  • Developing WordPress plugins
  • Setting up WooCommerce stores
  • Optimizing WordPress performance
  • Hardening WordPress security
在以下场景使用此工作流:
  • 构建新的WordPress网站
  • 创建自定义主题
  • 开发WordPress插件
  • 搭建WooCommerce商店
  • 优化WordPress性能
  • 加固WordPress安全

Workflow Phases

工作流阶段

Phase 1: WordPress Setup

阶段1:WordPress环境搭建

Skills to Invoke

需调用的技能

  • app-builder
    - Project scaffolding
  • environment-setup-guide
    - Development environment
  • app-builder
    - 项目脚手架搭建
  • environment-setup-guide
    - 开发环境配置

Actions

操作步骤

  1. Set up local development environment (LocalWP, Docker, or Valet)
  2. Install WordPress
  3. Configure development database
  4. Set up version control
  5. Configure wp-config.php for development
  1. 搭建本地开发环境(LocalWP、Docker或Valet)
  2. 安装WordPress
  3. 配置开发数据库
  4. 搭建版本控制
  5. 为开发环境配置wp-config.php

Copy-Paste Prompts

可复制粘贴的提示词

Use @app-builder to scaffold a new WordPress project with modern tooling
Use @app-builder to scaffold a new WordPress project with modern tooling

Phase 2: Theme Development

阶段2:主题开发

Skills to Invoke

需调用的技能

  • frontend-developer
    - Component development
  • frontend-design
    - UI implementation
  • tailwind-patterns
    - Styling
  • web-performance-optimization
    - Performance
  • frontend-developer
    - 组件开发
  • frontend-design
    - UI实现
  • tailwind-patterns
    - 样式设计
  • web-performance-optimization
    - 性能优化

Actions

操作步骤

  1. Design theme architecture
  2. Create theme files (style.css, functions.php, index.php)
  3. Implement template hierarchy
  4. Create custom page templates
  5. Add custom post types and taxonomies
  6. Implement theme customization options
  7. Add responsive design
  1. 设计主题架构
  2. 创建主题文件(style.css、functions.php、index.php)
  3. 实现模板层级结构
  4. 创建自定义页面模板
  5. 添加自定义文章类型和分类法
  6. 实现主题自定义选项
  7. 添加响应式设计

Theme Structure

主题结构

theme-name/
├── style.css
├── functions.php
├── index.php
├── header.php
├── footer.php
├── sidebar.php
├── single.php
├── page.php
├── archive.php
├── search.php
├── 404.php
├── template-parts/
├── inc/
├── assets/
│   ├── css/
│   ├── js/
│   └── images/
└── languages/
theme-name/
├── style.css
├── functions.php
├── index.php
├── header.php
├── footer.php
├── sidebar.php
├── single.php
├── page.php
├── archive.php
├── search.php
├── 404.php
├── template-parts/
├── inc/
├── assets/
│   ├── css/
│   ├── js/
│   └── images/
└── languages/

Copy-Paste Prompts

可复制粘贴的提示词

Use @frontend-developer to create a custom WordPress theme with React components
Use @tailwind-patterns to style WordPress theme with modern CSS
Use @frontend-developer to create a custom WordPress theme with React components
Use @tailwind-patterns to style WordPress theme with modern CSS

Phase 3: Plugin Development

阶段3:插件开发

Skills to Invoke

需调用的技能

  • backend-dev-guidelines
    - Backend standards
  • api-design-principles
    - API design
  • auth-implementation-patterns
    - Authentication
  • backend-dev-guidelines
    - 后端开发规范
  • api-design-principles
    - API设计原则
  • auth-implementation-patterns
    - 身份验证实现模式

Actions

操作步骤

  1. Design plugin architecture
  2. Create plugin boilerplate
  3. Implement hooks (actions and filters)
  4. Create admin interfaces
  5. Add custom database tables
  6. Implement REST API endpoints
  7. Add settings and options pages
  1. 设计插件架构
  2. 创建插件模板
  3. 实现钩子(动作和过滤器)
  4. 创建后台管理界面
  5. 添加自定义数据库表
  6. 实现REST API端点
  7. 添加设置和选项页面

Plugin Structure

插件结构

plugin-name/
├── plugin-name.php
├── includes/
│   ├── class-plugin-activator.php
│   ├── class-plugin-deactivator.php
│   ├── class-plugin-loader.php
│   └── class-plugin.php
├── admin/
│   ├── class-plugin-admin.php
│   ├── css/
│   └── js/
├── public/
│   ├── class-plugin-public.php
│   ├── css/
│   └── js/
└── languages/
plugin-name/
├── plugin-name.php
├── includes/
│   ├── class-plugin-activator.php
│   ├── class-plugin-deactivator.php
│   ├── class-plugin-loader.php
│   └── class-plugin.php
├── admin/
│   ├── class-plugin-admin.php
│   ├── css/
│   └── js/
├── public/
│   ├── class-plugin-public.php
│   ├── css/
│   └── js/
└── languages/

Copy-Paste Prompts

可复制粘贴的提示词

Use @backend-dev-guidelines to create a WordPress plugin with proper architecture
Use @backend-dev-guidelines to create a WordPress plugin with proper architecture

Phase 4: WooCommerce Integration

阶段4:WooCommerce集成

Skills to Invoke

需调用的技能

  • payment-integration
    - Payment processing
  • stripe-integration
    - Stripe payments
  • billing-automation
    - Billing workflows
  • payment-integration
    - 支付处理集成
  • stripe-integration
    - Stripe支付集成
  • billing-automation
    - 账单自动化

Actions

操作步骤

  1. Install and configure WooCommerce
  2. Create custom product types
  3. Customize checkout flow
  4. Integrate payment gateways
  5. Set up shipping methods
  6. Create custom order statuses
  7. Implement subscription products
  8. Add custom email templates
  1. 安装并配置WooCommerce
  2. 创建自定义产品类型
  3. 自定义结账流程
  4. 集成支付网关
  5. 设置配送方式
  6. 创建自定义订单状态
  7. 实现订阅产品
  8. 添加自定义邮件模板

Copy-Paste Prompts

可复制粘贴的提示词

Use @payment-integration to set up WooCommerce with Stripe
Use @billing-automation to create subscription products in WooCommerce
Use @payment-integration to set up WooCommerce with Stripe
Use @billing-automation to create subscription products in WooCommerce

Phase 5: Performance Optimization

阶段5:性能优化

Skills to Invoke

需调用的技能

  • web-performance-optimization
    - Performance optimization
  • database-optimizer
    - Database optimization
  • web-performance-optimization
    - 性能优化
  • database-optimizer
    - 数据库优化

Actions

操作步骤

  1. Implement caching (object, page, browser)
  2. Optimize images (lazy loading, WebP)
  3. Minify and combine assets
  4. Enable CDN
  5. Optimize database queries
  6. Implement lazy loading
  7. Configure OPcache
  8. Set up Redis/Memcached
  1. 实现缓存(对象缓存、页面缓存、浏览器缓存)
  2. 优化图片(懒加载、WebP格式)
  3. 压缩并合并资源文件
  4. 启用CDN
  5. 优化数据库查询
  6. 实现懒加载
  7. 配置OPcache
  8. 搭建Redis/Memcached

Performance Checklist

性能检查清单

  • Page load time < 3 seconds
  • Time to First Byte < 200ms
  • Largest Contentful Paint < 2.5s
  • Cumulative Layout Shift < 0.1
  • First Input Delay < 100ms
  • 页面加载时间 < 3秒
  • 首字节时间 < 200ms
  • 最大内容绘制 < 2.5秒
  • 累积布局偏移 < 0.1
  • 首次输入延迟 < 100ms

Copy-Paste Prompts

可复制粘贴的提示词

Use @web-performance-optimization to audit and improve WordPress performance
Use @web-performance-optimization to audit and improve WordPress performance

Phase 6: Security Hardening

阶段6:安全加固

Skills to Invoke

需调用的技能

  • security-auditor
    - Security audit
  • wordpress-penetration-testing
    - WordPress security testing
  • sast-configuration
    - Static analysis
  • security-auditor
    - 安全审计
  • wordpress-penetration-testing
    - WordPress安全测试
  • sast-configuration
    - 静态代码分析配置

Actions

操作步骤

  1. Update WordPress core, themes, plugins
  2. Implement security headers
  3. Configure file permissions
  4. Set up firewall rules
  5. Enable two-factor authentication
  6. Implement rate limiting
  7. Configure security logging
  8. Set up malware scanning
  1. 更新WordPress核心、主题和插件
  2. 实现安全响应头
  3. 配置文件权限
  4. 设置防火墙规则
  5. 启用双因素认证
  6. 实现速率限制
  7. 配置安全日志
  8. 搭建恶意软件扫描

Security Checklist

安全检查清单

  • WordPress core updated
  • All plugins/themes updated
  • Strong passwords enforced
  • Two-factor authentication enabled
  • Security headers configured
  • XML-RPC disabled or protected
  • File editing disabled
  • Database prefix changed
  • Regular backups configured
  • WordPress核心已更新
  • 所有插件/主题已更新
  • 强制使用强密码
  • 已启用双因素认证
  • 已配置安全响应头
  • XML-RPC已禁用或受保护
  • 文件编辑已禁用
  • 数据库前缀已修改
  • 已配置定期备份

Copy-Paste Prompts

可复制粘贴的提示词

Use @wordpress-penetration-testing to audit WordPress security
Use @security-auditor to perform comprehensive security review
Use @wordpress-penetration-testing to audit WordPress security
Use @security-auditor to perform comprehensive security review

Phase 7: Testing

阶段7:测试

Skills to Invoke

需调用的技能

  • test-automator
    - Test automation
  • playwright-skill
    - E2E testing
  • webapp-testing
    - Web app testing
  • test-automator
    - 测试自动化
  • playwright-skill
    - 端到端测试
  • webapp-testing
    - Web应用测试

Actions

操作步骤

  1. Write unit tests for custom code
  2. Create integration tests
  3. Set up E2E tests
  4. Test cross-browser compatibility
  5. Test responsive design
  6. Performance testing
  7. Security testing
  1. 为自定义代码编写单元测试
  2. 创建集成测试
  3. 搭建端到端测试
  4. 测试跨浏览器兼容性
  5. 测试响应式设计
  6. 性能测试
  7. 安全测试

Copy-Paste Prompts

可复制粘贴的提示词

Use @playwright-skill to create E2E tests for WordPress site
Use @playwright-skill to create E2E tests for WordPress site

Phase 8: Deployment

阶段8:部署

Skills to Invoke

需调用的技能

  • deployment-engineer
    - Deployment
  • cicd-automation-workflow-automate
    - CI/CD
  • github-actions-templates
    - GitHub Actions
  • deployment-engineer
    - 部署实施
  • cicd-automation-workflow-automate
    - CI/CD自动化
  • github-actions-templates
    - GitHub Actions模板

Actions

操作步骤

  1. Set up staging environment
  2. Configure deployment pipeline
  3. Set up database migrations
  4. Configure environment variables
  5. Enable maintenance mode during deployment
  6. Deploy to production
  7. Verify deployment
  8. Monitor post-deployment
  1. 搭建预发布环境
  2. 配置部署流水线
  3. 搭建数据库迁移
  4. 配置环境变量
  5. 部署期间启用维护模式
  6. 部署到生产环境
  7. 验证部署结果
  8. 监控部署后状态

Copy-Paste Prompts

可复制粘贴的提示词

Use @deployment-engineer to set up WordPress deployment pipeline
Use @deployment-engineer to set up WordPress deployment pipeline

WordPress-Specific Workflows

WordPress专属工作流

Custom Post Type Development

自定义文章类型开发

php
register_post_type('book', [
    'labels' => [...],
    'public' => true,
    'has_archive' => true,
    'supports' => ['title', 'editor', 'thumbnail', 'excerpt'],
    'menu_icon' => 'dashicons-book',
]);
php
register_post_type('book', [
    'labels' => [...],
    'public' => true,
    'has_archive' => true,
    'supports' => ['title', 'editor', 'thumbnail', 'excerpt'],
    'menu_icon' => 'dashicons-book',
]);

Custom REST API Endpoint

自定义REST API端点

php
add_action('rest_api_init', function() {
    register_rest_route('myplugin/v1', '/books', [
        'methods' => 'GET',
        'callback' => 'get_books',
        'permission_callback' => '__return_true',
    ]);
});
php
add_action('rest_api_init', function() {
    register_rest_route('myplugin/v1', '/books', [
        'methods' => 'GET',
        'callback' => 'get_books',
        'permission_callback' => '__return_true',
    ]);
});

WooCommerce Custom Product Type

WooCommerce自定义产品类型

php
add_action('init', function() {
    class WC_Product_Custom extends WC_Product {
        // Custom product implementation
    }
});
php
add_action('init', function() {
    class WC_Product_Custom extends WC_Product {
        // Custom product implementation
    }
});

Quality Gates

质量关卡

Before moving to next phase, verify:
  • All custom code tested
  • Security scan passed
  • Performance targets met
  • Cross-browser tested
  • Mobile responsive verified
  • Accessibility checked (WCAG 2.1)
进入下一阶段前,需验证:
  • 所有自定义代码已测试
  • 安全扫描已通过
  • 性能指标已达标
  • 跨浏览器测试已完成
  • 移动端响应式已验证
  • 可访问性已检查(符合WCAG 2.1标准)

Related Workflow Bundles

相关工作流合集

  • development
    - General web development
  • security-audit
    - Security testing
  • testing-qa
    - Testing workflow
  • ecommerce
    - E-commerce development
  • development
    - 通用Web开发
  • security-audit
    - 安全测试
  • testing-qa
    - 测试工作流
  • ecommerce
    - 电商开发