[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-d06e7b57-b64a-4f92-850d-4ca37d4b39d2":3,"$fxWr6ZeQ8I4iKbMfbDo2_EjKPiBQXKM4Tdk2ldCQyat4":43},{"id":4,"title":5,"description":6,"categoryId":7,"moduleId":8,"tags":9,"prompt":10,"icon":11,"source":12,"sourceUrl":13,"authorId":14,"authorName":15,"isPublic":16,"stars":17,"runs":18,"createdAt":19,"updatedAt":19,"module":20,"category":27,"packages":34},"d06e7b57-b64a-4f92-850d-4ca37d4b39d2","wordpress-theme-development","WordPress主题开发工作流程，涵盖主题架构、模板层次结构、自定义文章类型、块编辑器支持、响应式设计以及WordPress 7.0特性：DataViews、模式编辑、导航叠加和后台刷新。","cat_design_graphic","mod_design","sickn33,design","---\nname: wordpress-theme-development\ndescription: \"WordPress theme development workflow covering theme architecture, template hierarchy, custom post types, block editor support, responsive design, and WordPress 7.0 features: DataViews, Pattern Editing, Navigation Overlays, and admin refresh.\"\ncategory: granular-workflow-bundle\nrisk: safe\nsource: personal\ndate_added: \"2026-02-27\"\n---\n\n# WordPress Theme Development Workflow\n\n## Overview\n\nSpecialized workflow for creating custom WordPress themes from scratch, including modern block editor (Gutenberg) support, template hierarchy, responsive design, and WordPress 7.0 enhancements.\n\n## WordPress 7.0 Theme Features\n\n1. **Admin Refresh**\n   - New default color scheme\n   - View transitions between admin screens\n   - Modern typography and spacing\n\n2. **Pattern Editing**\n   - ContentOnly mode defaults for unsynced patterns\n   - `disableContentOnlyForUnsyncedPatterns` setting\n   - Per-block instance custom CSS\n\n3. **Navigation Overlays**\n   - Customizable navigation overlays\n   - Improved mobile navigation\n\n4. **New Blocks**\n   - Icon block\n   - Breadcrumbs block with filters\n   - Responsive grid block\n\n5. **Theme.json Enhancements**\n   - Pseudo-element support\n   - Block-defined feature selectors honored\n   - Enhanced custom CSS\n\n6. **Iframed Editor**\n   - Block API v3+ enables iframed post editor\n   - Full enforcement in 7.1, opt-in in 7.0\n\n## When to Use This Workflow\n\nUse this workflow when:\n- Creating custom WordPress themes\n- Converting designs to WordPress themes\n- Adding block editor support\n- Implementing custom post types\n- Building child themes\n- Implementing WordPress 7.0 design features\n\n## Workflow Phases\n\n### Phase 1: Theme Setup\n\n#### Skills to Invoke\n- `app-builder` - Project scaffolding\n- `frontend-developer` - Frontend development\n\n#### Actions\n1. Create theme directory structure\n2. Set up style.css with theme header\n3. Create functions.php\n4. Configure theme support\n5. Set up enqueue scripts\u002Fstyles\n\n#### WordPress 7.0 Theme Header\n```css\n\u002F*\nTheme Name: My Custom Theme\nTheme URI: https:\u002F\u002Fexample.com\nAuthor: Developer Name\nAuthor URI: https:\u002F\u002Fexample.com\nDescription: A WordPress 7.0 compatible theme with modern design\nVersion: 1.0.0\nRequires at least: 6.0\nRequires PHP: 7.4\nLicense: GNU General Public License v2\nLicense URI: https:\u002F\u002Fwww.gnu.org\u002Flicenses\u002Fgpl-2.0.html\nText Domain: my-custom-theme\nTags: block-patterns, block-styles, editor-style, wide-blocks\n*\u002F\n```\n\n#### Copy-Paste Prompts\n```\nUse @app-builder to scaffold a new WordPress theme project\n```\n\n### Phase 2: Template Hierarchy\n\n#### Skills to Invoke\n- `frontend-developer` - Template development\n\n#### Actions\n1. Create index.php (fallback template)\n2. Implement header.php and footer.php\n3. Create single.php for posts\n4. Create page.php for pages\n5. Add archive.php for archives\n6. Implement search.php and 404.php\n\n#### WordPress 7.0 Template Considerations\n- Test with iframed editor\n- Verify view transitions work\n- Check new admin color scheme compatibility\n\n#### Copy-Paste Prompts\n```\nUse @frontend-developer to create WordPress template files\n```\n\n### Phase 3: Theme Functions\n\n#### Skills to Invoke\n- `backend-dev-guidelines` - Backend patterns\n\n#### Actions\n1. Register navigation menus\n2. Add theme support (thumbnails, RSS, etc.)\n3. Register widget areas\n4. Create custom template tags\n5. Implement helper functions\n\n#### WordPress 7.0 theme.json Configuration\n```json\n{\n  \"$schema\": \"https:\u002F\u002Fschemas.wp.org\u002Ftrunk\u002Ftheme.json\",\n  \"version\": 3,\n  \"settings\": {\n    \"appearanceTools\": true,\n    \"layout\": {\n      \"contentSize\": \"1200px\",\n      \"wideSize\": \"1400px\"\n    },\n    \"background\": {\n      \"backgroundImage\": true\n    },\n    \"typography\": {\n      \"fontFamilies\": true,\n      \"fontSizes\": true\n    },\n    \"spacing\": {\n      \"margin\": true,\n      \"padding\": true\n    },\n    \"blocks\": {\n      \"core\u002Fheading\": {\n        \"typography\": {\n          \"fontSizes\": [\"24px\", \"32px\", \"48px\"]\n        }\n      }\n    }\n  },\n  \"styles\": {\n    \"color\": {\n      \"background\": \"#ffffff\",\n      \"text\": \"#1a1a1a\"\n    },\n    \"elements\": {\n      \"link\": {\n        \"color\": {\n          \"text\": \"#0066cc\"\n        }\n      }\n    }\n  },\n  \"customTemplates\": [\n    {\n      \"name\": \"page-home\",\n      \"title\": \"Homepage\",\n      \"postTypes\": [\"page\"]\n    }\n  ],\n  \"templateParts\": [\n    {\n      \"name\": \"header\",\n      \"title\": \"Header\",\n      \"area\": \"header\"\n    }\n  ]\n}\n```\n\n#### Copy-Paste Prompts\n```\nUse @backend-dev-guidelines to create theme functions\n```\n\n### Phase 4: Custom Post Types\n\n#### Skills to Invoke\n- `wordpress-penetration-testing` - WordPress patterns\n\n#### Actions\n1. Register custom post types\n2. Create custom taxonomies\n3. Add custom meta boxes\n4. Implement custom fields\n5. Create archive templates\n\n#### RTC-Compatible CPT Registration\n```php\nregister_post_type('portfolio', [\n    'labels' => [\n        'name' => __('Portfolio', 'my-theme'),\n        'singular_name' => __('Portfolio Item', 'my-theme')\n    ],\n    'public' => true,\n    'has_archive' => true,\n    'show_in_rest' => true,  \u002F\u002F Enable for RTC\n    'supports' => ['title', 'editor', 'thumbnail', 'excerpt', 'custom-fields'],\n    'menu_icon' => 'dashicons-portfolio',\n]);\n\n\u002F\u002F Register meta for collaboration\nregister_post_meta('portfolio', 'client_name', [\n    'type' => 'string',\n    'single' => true,\n    'show_in_rest' => true,\n    'sanitize_callback' => 'sanitize_text_field',\n]);\n```\n\n#### Copy-Paste Prompts\n```\nUse @wordpress-penetration-testing to understand WordPress CPT patterns\n```\n\n### Phase 5: Block Editor Support\n\n#### Skills to Invoke\n- `frontend-developer` - Block development\n\n#### Actions\n1. Enable block editor support\n2. Register custom blocks\n3. Create block styles\n4. Add block patterns\n5. Configure block templates\n\n#### WordPress 7.0 Block Features\n- Block API v3 is reference model\n- PHP-only block registration\n- Per-instance custom CSS\n- Block visibility controls (viewport-based)\n\n#### Block Pattern with ContentOnly (WP 7.0)\n```json\n{\n    \"name\": \"my-theme\u002Fhero-section\",\n    \"title\": \"Hero Section\",\n    \"contentOnly\": true,\n    \"content\": [\n        {\n            \"name\": \"core\u002Fcover\",\n            \"attributes\": {\n                \"url\": \"{{hero_image}}\",\n                \"overlay\": \"black\",\n                \"dimRatio\": 50\n            },\n            \"innerBlocks\": [\n                {\n                    \"name\": \"core\u002Fheading\",\n                    \"attributes\": {\n                        \"level\": 1,\n                        \"textAlign\": \"center\",\n                        \"content\": \"{{hero_title}}\"\n                    }\n                },\n                {\n                    \"name\": \"core\u002Fparagraph\",\n                    \"attributes\": {\n                        \"align\": \"center\",\n                        \"content\": \"{{hero_description}}\"\n                    }\n                }\n            ]\n        }\n    ]\n}\n```\n\n#### Navigation Overlay Template Part\n```php\n\u002F\u002F template-parts\u002Fheader-overlay.php\n?>\n\u003Cnav class=\"header-navigation-overlay\" aria-label=\"\u003C?php esc_attr_e('Overlay Menu', 'my-theme'); ?>\">\n    \u003Cbutton class=\"overlay-close\" aria-label=\"\u003C?php esc_attr_e('Close menu', 'my-theme'); ?>\">\n        \u003Cspan class=\"close-icon\" aria-hidden=\"true\">\n            \u003Csvg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                \u003Cline x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\">\u003C\u002Fline>\n                \u003Cline x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\">\u003C\u002Fline>\n            \u003C\u002Fsvg>\n        \u003C\u002Fspan>\n    \u003C\u002Fbutton>\n    \u003C?php\n    wp_nav_menu([\n        'theme_location' => 'primary',\n        'container' => false,\n        'menu_class' => 'overlay-menu',\n        'fallback_cb' => false,\n    ]);\n    ?>\n\u003C\u002Fnav>\n```\n\n#### Copy-Paste Prompts\n```\nUse @frontend-developer to create custom Gutenberg blocks\n```\n\n### Phase 6: Styling and Design\n\n#### Skills to Invoke\n- `frontend-design` - UI design\n- `tailwind-patterns` - Tailwind CSS\n\n#### Actions\n1. Implement responsive design\n2. Add CSS framework or custom styles\n3. Create design system\n4. Implement theme customizer\n5. Add accessibility features\n\n#### WordPress 7.0 Admin Refresh Considerations\n```css\n\u002F* Support new admin color scheme *\u002F\n@media (prefers-color-scheme: dark) {\n    :root {\n        --admin-color: modern;\n    }\n}\n\n\u002F* View transitions *\u002F\n.wp-admin {\n    view-transition-name: none;\n}\n\nbody {\n    view-transition-name: page;\n}\n```\n\n#### CSS Custom Properties (WP 7.0)\n```css\n:root {\n    \u002F* New DataViews colors *\u002F\n    --wp-dataviews-color-background: #ffffff;\n    --wp-dataviews-color-border: #e0e0e0;\n    \n    \u002F* Navigation overlay *\u002F\n    --wp-overlay-menu-background: #1a1a1a;\n    --wp-overlay-menu-text: #ffffff;\n}\n```\n\n#### Copy-Paste Prompts\n```\nUse @frontend-design to create responsive theme design\n```\n\n### Phase 7: WordPress 7.0 Features Integration\n\n#### Breadcrumbs Block Support\n```php\n\u002F\u002F Add breadcrumb filters for custom post types\nadd_filter('wp_breadcrumb_args', function($args) {\n    $args['separator'] = '\u003Cspan class=\"breadcrumb-separator\"> \u002F \u003C\u002Fspan>';\n    $args['before'] = '\u003Cnav class=\"breadcrumb\" aria-label=\"Breadcrumb\">';\n    $args['after'] = '\u003C\u002Fnav>';\n    return $args;\n});\n\n\u002F\u002F Add custom breadcrumb trail for CPT\nadd_action('breadcrumb_items', function($trail, $crumbs) {\n    if (is_singular('portfolio')) {\n        $portfolio_page = get_page_by_path('portfolio');\n        if ($portfolio_page) {\n            array_splice($trail->crumbs, 1, 0, [\n                [\n                    'title' => get_the_title($portfolio_page),\n                    'url' => get_permalink($portfolio_page)\n                ]\n            ]);\n        }\n    }\n}, 10, 2);\n```\n\n#### Icon Block Support\n```php\n\u002F\u002F Add custom icons for Icon block via pattern category\nadd_action('init', function() {\n    register_block_pattern_category('my-theme\u002Ficons', [\n        'label' => __('Theme Icons', 'my-theme'),\n        'description' => __('Custom icons for use in the Icon block', 'my-theme'),\n    ]);\n});\n\n\u002F\u002F For actual SVG icons in the Icon block, use block.json or PHP registration\nadd_action('init', function() {\n    register_block_pattern('my-theme\u002Fcustom-icons', [\n        'title' => __('Custom Icon Set', 'my-theme'),\n        'categories' => ['my-theme\u002Ficons'],\n        'content' => '\u003C!-- Pattern content with Icon blocks -->'\n    ]);\n});\n```\n\n### Phase 8: Testing\n\n#### Skills to Invoke\n- `playwright-skill` - Browser testing\n- `webapp-testing` - Web app testing\n\n#### Actions\n1. Test across browsers\n2. Verify responsive breakpoints\n3. Test block editor\n4. Check accessibility\n5. Performance testing\n\n#### WordPress 7.0 Testing Checklist\n- [ ] Test with iframed editor\n- [ ] Verify view transitions\n- [ ] Check admin color scheme\n- [ ] Test navigation overlays\n- [ ] Verify contentOnly patterns\n- [ ] Test breadcrumbs on CPT archives\n\n#### Copy-Paste Prompts\n```\nUse @playwright-skill to test WordPress theme\n```\n\n## Theme Structure\n\n```\ntheme-name\u002F\n├── style.css\n├── functions.php\n├── index.php\n├── header.php\n├── footer.php\n├── sidebar.php\n├── single.php\n├── page.php\n├── archive.php\n├── search.php\n├── 404.php\n├── comments.php\n├── template-parts\u002F\n│   ├── header\u002F\n│   ├── footer\u002F\n│   ├── navigation\u002F\n│   └── content\u002F\n├── patterns\u002F           # Block patterns (WP 7.0)\n├── templates\u002F          # Site editor templates\n├── inc\u002F\n│   ├── class-theme.php\n│   └── supports.php\n├── assets\u002F\n│   ├── css\u002F\n│   ├── js\u002F\n│   └── images\u002F\n└── languages\u002F\n```\n\n## WordPress 7.0 Theme Checklist\n\n- [ ] PHP 7.4+ requirement documented\n- [ ] theme.json v3 schema used\n- [ ] Block patterns tested\n- [ ] ContentOnly editing supported\n- [ ] Navigation overlays implemented\n- [ ] Breadcrumb filters added for CPT\n- [ ] View transitions working\n- [ ] Admin refresh compatible\n- [ ] CPT meta shows_in_rest\n- [ ] Iframe editor tested\n\n## Quality Gates\n\n- [ ] All templates working\n- [ ] Block editor supported\n- [ ] Responsive design verified\n- [ ] Accessibility checked\n- [ ] Performance optimized\n- [ ] Cross-browser tested\n- [ ] WordPress 7.0 compatibility verified\n\n## Related Workflow Bundles\n\n- `wordpress` - WordPress development\n- `wordpress-plugin-development` - Plugin development\n- `wordpress-woocommerce` - WooCommerce\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.\n","","imported","https:\u002F\u002Fgithub.com\u002Fsickn33\u002Fantigravity-awesome-skills","user_system_seed","SkillOPIC",true,144,1393,"2026-05-16 13:47:32",{"id":8,"name":21,"slug":22,"icon":23,"description":24,"sort":25,"createdAt":26},"设计创意","design","mdi-palette-outline","UI 设计、生成艺术、品牌视觉等创意 Skill",3,"2026-05-16 12:53:40",{"id":7,"name":28,"slug":29,"icon":30,"description":31,"moduleId":8,"sort":32,"skillCount":33,"createdAt":26},"视觉创意","graphic","mdi-brush","海报、Logo、插画等视觉创作",2,48,[35],{"id":36,"skillId":4,"version":37,"fileName":38,"fileSize":39,"filePath":40,"fileHash":41,"manifest":42,"createdAt":19},"25caee8c-0240-4142-b8b3-58de79df5a23","1.0.0","wordpress-theme-development.zip",4473,"uploads\u002Fskills\u002Fd06e7b57-b64a-4f92-850d-4ca37d4b39d2\u002Fwordpress-theme-development.zip","9f4fa7471e6e7a8053b8013157a344c21b8749f747fd53330812c8bf30b209ac","[{\"path\":\"SKILL.md\",\"isDirectory\":false,\"size\":12649}]",{"code":44,"message":45,"data":46},200,"success",{"items":47,"stats":48,"page":51},[],{"averageRating":49,"totalRatings":49,"ratingCounts":50},0,[49,49,49,49,49],{"limit":52,"offset":49,"hasMore":53,"nextOffset":52,"ratedOnly":16},15,false]