WordPress网站开发专家

## WordPress极简品牌官网构建与优化任务说明

### 需求总结
- 设计偏好：极简品牌风、浅色系、大留白、响应式、清晰层级导航。
- 功能需求：自动生成首页/产品/联系页；内置基础SEO与站点地图；线索收集表单；后续一键添加“招聘”和“新闻”模块。
- 性能目标：首屏≤2s；基础SEO体检通过；结构化数据（JSON-LD）；自动更新站点地图。

---

### 详细步骤

#### 1) 主题与信息架构
- 技术路线：自研轻量“区块主题”（block theme）或在官方默认主题上构建子主题，统一用 theme.json 控制样式，尽量零JS、少CSS，确保快速首屏。
- 主题能力：
  - 启用：title-tag、post-thumbnails、responsive-embeds、html5、wp-block-styles。
  - 提供“首页/产品归档/联系页”区块模板与导航区域，包含面包屑与清晰层级菜单。
- 色彩与版式：浅色背景、深色正文对比，使用系统字体栈降低FOIT；大留白（行高1.7+、段间距≥1rem）。

示例 theme.json（精简，作为基础样式与响应式基线）：
```json
{
  "version": 2,
  "settings": {
    "typography": {
      "fontFamilies": [
        { "fontFamily": "-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif", "name": "System Sans", "slug": "system-sans" }
      ],
      "fontSizes": [
        { "slug": "sm", "size": "14px" },
        { "slug": "base", "size": "16px" },
        { "slug": "lg", "size": "20px" },
        { "slug": "xl", "size": "28px" }
      ],
      "lineHeight": "1.7"
    },
    "color": {
      "palette": [
        { "slug": "bg", "color": "#FFFFFF", "name": "Background" },
        { "slug": "text", "color": "#0F172A", "name": "Text" },
        { "slug": "muted", "color": "#475569", "name": "Muted" },
        { "slug": "brand", "color": "#0EA5E9", "name": "Brand" }
      ]
    },
    "spacing": { "spacingScale": { "steps": 8 }, "units": [ "px", "rem", "vw" ] },
    "layout": { "contentSize": "720px", "wideSize": "1100px" }
  },
  "styles": {
    "color": { "background": "var(--wp--preset--color--bg)", "text": "var(--wp--preset--color--text)" },
    "elements": { "link": { "color": { "text": "var(--wp--preset--color--brand)" } } }
  }
}
```

在 functions.php 中启用主题支持与若干性能优化：
```php
<?php
// 主题支持
add_action('after_setup_theme', function () {
  add_theme_support('title-tag');
  add_theme_support('post-thumbnails');
  add_theme_support('responsive-embeds');
  add_theme_support('html5', ['search-form','comment-form','comment-list','gallery','caption','style','script']);
  add_theme_support('wp-block-styles');
  register_nav_menus(['primary' => '主导航']);
});

// 性能微优化：禁用无关输出
add_action('init', function () {
  remove_action('wp_head','wp_generator');
  remove_action('wp_head','rest_output_link_wp_head');
  remove_action('wp_head','rsd_link');
  remove_action('wp_head','wlwmanifest_link');
  remove_action('wp_head','print_emoji_detection_script',7);
  remove_action('admin_print_scripts','print_emoji_detection_script');
  remove_action('wp_print_styles','print_emoji_styles');
  remove_action('admin_print_styles','print_emoji_styles');
  remove_action('wp_head','wp_oembed_add_discovery_links');
  remove_action('wp_head','wp_shortlink_wp_head');
});

// 资源提示（如有CDN可替换域名）
add_filter('wp_resource_hints', function ($urls, $relation_type) {
  if ($relation_type === 'preconnect') {
    $urls[] = 'https://fonts.gstatic.com'; // 若使用Google Fonts则保留，否则移除
  }
  return $urls;
}, 10, 2);
```

#### 2) 数据结构与页面自动化
- 数据模型：
  - 产品（CPT：product；支持分类 taxonomy：product_category）。
  - 线索（CPT：lead，私有，用于存储表单提交）。
  - 后续模块：招聘（CPT：job）、新闻（CPT：news），支持后台一键启用。
- 自动化：
  - 主题启用后自动创建：首页、产品页（归档/查询区块）、联系页（带表单短代码）。
  - 自动生成“主导航”菜单：主页/产品/联系。
  - 设置首页为静态页，固定链接为/%postname%/（如需）。

注册CPT/分类与页面自动创建：
```php
// 注册CPT与分类
add_action('init', function () {
  register_post_type('product', [
    'label' => '产品',
    'public' => true,
    'show_in_rest' => true,
    'has_archive' => true,
    'rewrite' => ['slug' => 'products'],
    'supports' => ['title','editor','thumbnail','excerpt','custom-fields']
  ]);
  register_taxonomy('product_category','product', [
    'label' => '产品分类',
    'hierarchical' => true,
    'show_in_rest' => true
  ]);
  // 私有线索
  register_post_type('lead', [
    'label' => '线索',
    'public' => false,
    'show_ui' => true,
    'supports' => ['title','editor','custom-fields'],
    'capability_type' => 'post',
    'map_meta_cap' => true
  ]);
});

// 主题启用时自动创建页面与菜单
add_action('after_switch_theme', function () {
  // 创建页面辅助
  $ensure_page = function ($title, $slug, $content = '') {
    $page = get_page_by_path($slug);
    if (!$page) {
      return wp_insert_post(['post_title'=>$title,'post_name'=>$slug,'post_status'=>'publish','post_type'=>'page','post_content'=>$content]);
    }
    return $page->ID;
  };

  $home_id = $ensure_page('首页', 'home',
    '<!-- wp:heading {"level":1} --><h1>欢迎来到我们</h1><!-- /wp:heading -->
     <!-- wp:paragraph --><p>极简、清晰、可信赖的品牌体验。</p><!-- /wp:paragraph -->');

  $products_content = '<!-- wp:query {"queryId":1,"query":{"postType":"product","perPage":12}} -->
    <div class="wp-block-query"><!-- wp:post-template --><!-- wp:post-featured-image {"isLink":true} /-->
    <!-- wp:post-title {"isLink":true} /--><!-- wp:post-excerpt /--><!-- /wp:post-template --></div><!-- /wp:query -->';
  $products_page_id = $ensure_page('产品', 'products', $products_content);

  $contact_content = '<!-- wp:heading {"level":1} --><h1>联系与咨询</h1><!-- /wp:heading -->
    <!-- wp:paragraph --><p>填写表单将自动生成线索，稍后与您联系。</p><!-- /wp:paragraph -->
    <!-- wp:shortcode -->[mb_lead_form]<!-- /wp:shortcode -->';
  $contact_id = $ensure_page('联系', 'contact', $contact_content);

  // 设置首页
  update_option('show_on_front', 'page');
  update_option('page_on_front', $home_id);

  // 固定链接（可选启用）
  if (get_option('permalink_structure') !== '/%postname%/') {
    update_option('permalink_structure', '/%postname%/');
    flush_rewrite_rules();
  }

  // 导航菜单
  $menu_id = wp_create_nav_menu('主导航');
  if (!is_wp_error($menu_id)) {
    wp_update_nav_menu_item($menu_id, 0, ['menu-item-title'=>'首页','menu-item-object'=>'page','menu-item-object-id'=>$home_id,'menu-item-type'=>'post_type','menu-item-status'=>'publish']);
    wp_update_nav_menu_item($menu_id, 0, ['menu-item-title'=>'产品','menu-item-url'=>get_post_type_archive_link('product'),'menu-item-type'=>'custom','menu-item-status'=>'publish']);
    wp_update_nav_menu_item($menu_id, 0, ['menu-item-title'=>'联系','menu-item-object'=>'page','menu-item-object-id'=>$contact_id,'menu-item-type'=>'post_type','menu-item-status'=>'publish']);
    $locations = get_theme_mod('nav_menu_locations');
    $locations['primary'] = $menu_id;
    set_theme_mod('nav_menu_locations', $locations);
  }
});
```

#### 3) 线索收集表单（短代码 + 安全处理）
- 短代码 [mb_lead_form] 输出轻量表单：姓名、邮箱、信息、隐私同意；含 nonce、honeypot；提交写入 lead，邮件通知管理员。
- 安全：CSRF防护、输入清理、速率限制（基于IP的transient），基础防垃圾（honeypot）。

表单与处理：
```php
// 短代码：线索表单
add_shortcode('mb_lead_form', function () {
  $action = esc_url(admin_url('admin-post.php'));
  $nonce  = wp_nonce_field('mb_lead_submit','mb_lead_nonce', true, false);
  $hp     = '<input type="text" name="company" value="" style="position:absolute;left:-9999px" tabindex="-1" autocomplete="off">'; // honeypot
  $redirect = esc_url(add_query_arg('submitted','1', wp_get_referer() ?: home_url('/contact')));

  $html = <<<HTML
  <form method="post" action="{$action}" class="mb-lead-form" novalidate>
    {$nonce}{$hp}
    <input type="hidden" name="action" value="mb_lead_submit">
    <input type="hidden" name="redirect_to" value="{$redirect}">
    <p><label>姓名*<br><input type="text" name="name" required></label></p>
    <p><label>邮箱*<br><input type="email" name="email" required></label></p>
    <p><label>留言<br><textarea name="message" rows="5" placeholder="请简要描述您的需求"></textarea></label></p>
    <p><label><input type="checkbox" name="consent" value="1" required> 我同意隐私政策</label></p>
    <p><button type="submit">提交</button></p>
  </form>
HTML;
  return $html;
});

// 处理提交（登录/未登录）
add_action('admin_post_nopriv_mb_lead_submit', 'mb_handle_lead_submit');
add_action('admin_post_mb_lead_submit', 'mb_handle_lead_submit');
function mb_handle_lead_submit() {
  if (!isset($_POST['mb_lead_nonce']) || !wp_verify_nonce($_POST['mb_lead_nonce'], 'mb_lead_submit')) wp_die('Invalid request');
  if (!empty($_POST['company'])) wp_die('Spam detected');
  $ip = $_SERVER['REMOTE_ADDR'] ?? '0.0.0.0';
  $key = 'mb_lead_rate_' . md5($ip);
  if (get_transient($key)) wp_die('Too many requests, try later.');
  set_transient($key, 1, 30); // 30秒限流

  $name = sanitize_text_field($_POST['name'] ?? '');
  $email = sanitize_email($_POST['email'] ?? '');
  $message = wp_kses_post($_POST['message'] ?? '');
  $consent = isset($_POST['consent']) ? 1 : 0;

  if (!$name || !$email || !$consent) wp_die('Required fields missing.');

  $post_id = wp_insert_post([
    'post_type' => 'lead',
    'post_status' => 'publish',
    'post_title' => $name . ' - ' . current_time('mysql'),
    'post_content' => $message,
    'meta_input' => ['email' => $email, 'ip' => $ip, 'consent' => $consent]
  ]);

  if ($post_id && !is_wp_error($post_id)) {
    wp_mail(get_option('admin_email'), '新线索提交', "姓名: {$name}\n邮箱: {$email}\nIP: {$ip}\n\n{$message}");
  }

  $redirect = esc_url_raw($_POST['redirect_to'] ?? home_url('/contact'));
  wp_safe_redirect($redirect);
  exit;
}
```

#### 4) 基础SEO与结构化数据
- 元标记：title/description、canonical、OG/Twitter Card。
- 结构化数据：Organization（首页）、BreadcrumbList（全站）、Product（产品详情）、ContactPage（联系页）。
- 站点地图：使用 WordPress 核心 sitemap，确保包含 product/news/job；排除 lead。必要时通过过滤器控制。

输出SEO与JSON-LD：
```php
// 基础SEO头部
add_action('wp_head', function () {
  global $post, $wp;
  $title = wp_get_document_title();
  $desc  = is_singular() && has_excerpt() ? esc_attr(wp_strip_all_tags(get_the_excerpt())) : esc_attr(get_bloginfo('description'));
  $url   = (is_singular() && $post) ? get_permalink($post) : home_url(add_query_arg([], $wp->request ?? ''));
  $site  = get_bloginfo('name');
  $img   = (is_singular() && has_post_thumbnail()) ? get_the_post_thumbnail_url(null, 'large') : '';
  echo "\n<meta name=\"description\" content=\"{$desc}\">";
  echo "\n<link rel=\"canonical\" href=\"".esc_url($url)."\">";
  echo "\n<meta property=\"og:site_name\" content=\"{$site}\">";
  echo "\n<meta property=\"og:title\" content=\"{$title}\">";
  echo "\n<meta property=\"og:description\" content=\"{$desc}\">";
  echo "\n<meta property=\"og:url\" content=\"".esc_url($url)."\">";
  echo "\n<meta property=\"og:type\" content=\"".(is_singular()?'article':'website')."\">";
  if ($img) echo "\n<meta property=\"og:image\" content=\"".esc_url($img)."\">";
  echo "\n<meta name=\"twitter:card\" content=\"summary_large_image\">";
}, 5);

// JSON-LD（面包屑）
add_action('wp_head', function () {
  if (is_front_page()) return;
  $items = [];
  $pos = 1; $items[] = ['@type'=>'ListItem','position'=>$pos++,'name'=>get_bloginfo('name'),'item'=>home_url('/')];
  if (is_singular('product')) {
    $items[] = ['@type'=>'ListItem','position'=>$pos++,'name'=>'产品','item'=>get_post_type_archive_link('product')];
  }
  if (is_singular()) {
    $items[] = ['@type'=>'ListItem','position'=>$pos++,'name'=>get_the_title(),'item'=>get_permalink()];
  } elseif (is_post_type_archive('product')) {
    $items[] = ['@type'=>'ListItem','position'=>$pos++,'name'=>'产品','item'=>get_post_type_archive_link('product')];
  }
  if (count($items) < 2) return;
  $data = ['@context'=>'https://schema.org','@type'=>'BreadcrumbList','itemListElement'=>$items];
  echo '<script type="application/ld+json">'.wp_json_encode($data).'</script>';
}, 6);

// JSON-LD（首页Organization、产品详情Product、联系页ContactPage）
add_action('wp_head', function () {
  if (is_front_page()) {
    $org = [
      '@context'=>'https://schema.org','@type'=>'Organization',
      'name'=>get_bloginfo('name'),'url'=>home_url('/'),
      'logo'=>get_site_icon_url() ?: ''
    ];
    echo '<script type="application/ld+json">'.wp_json_encode($org).'</script>';
  }
  if (is_singular('product')) {
    $img = has_post_thumbnail() ? get_the_post_thumbnail_url(null,'large') : '';
    $prod = [
      '@context'=>'https://schema.org','@type'=>'Product',
      'name'=>get_the_title(),'description'=>wp_strip_all_tags(get_the_excerpt() ?: get_the_content()),
      'image'=>$img ? [$img] : []
    ];
    echo '<script type="application/ld+json">'.wp_json_encode($prod).'</script>';
  }
  if (is_page() && get_page_template_slug() === '' && is_page('contact')) {
    $cp = ['@context'=>'https://schema.org','@type'=>'ContactPage','name'=>'联系','url'=>get_permalink()];
    echo '<script type="application/ld+json">'.wp_json_encode($cp).'</script>';
  }
}, 7);

// 站点地图包含/排除
add_filter('wp_sitemaps_post_types', function ($post_types) {
  unset($post_types['lead']); // 不索引线索
  return $post_types;
});
```

#### 5) “招聘/新闻”模块一键启用
- 提供“站点模块”设置页（Settings > Site Modules），勾选即注册CPT并自动创建对应页面与菜单项。
- 保持懒加载：默认不注册，提高首屏性能；启用后自动加入sitemap。

模块开关与CPT注册（精简示例）：
```php
// 设置页
add_action('admin_menu', function () {
  add_options_page('Site Modules','Site Modules','manage_options','mb-modules','mb_modules_page');
});
function mb_modules_page() {
  if (isset($_POST['mb_modules_nonce']) && wp_verify_nonce($_POST['mb_modules_nonce'],'mb_modules')) {
    update_option('mb_modules', [
      'job' => isset($_POST['job']) ? 1 : 0,
      'news'=> isset($_POST['news']) ? 1 : 0
    ]);
    echo '<div class="updated"><p>已保存</p></div>';
  }
  $opt = wp_parse_args(get_option('mb_modules',[]), ['job'=>0,'news'=>0]);
  echo '<div class="wrap"><h1>Site Modules</h1><form method="post">';
  wp_nonce_field('mb_modules','mb_modules_nonce');
  echo '<p><label><input type="checkbox" name="job" '.checked(1,$opt['job'],false).'> 启用招聘</label></p>';
  echo '<p><label><input type="checkbox" name="news" '.checked(1,$opt['news'],false).'> 启用新闻</label></p>';
  submit_button();
  echo '</form></div>';
}

// 注册CPT（根据开关）
add_action('init', function () {
  $opt = wp_parse_args(get_option('mb_modules',[]), ['job'=>0,'news'=>0]);
  if ($opt['job']) {
    register_post_type('job', [
      'label'=>'招聘','public'=>true,'show_in_rest'=>true,'has_archive'=>true,
      'rewrite'=>['slug'=>'jobs'],'supports'=>['title','editor','custom-fields']
    ]);
  }
  if ($opt['news']) {
    register_post_type('news', [
      'label'=>'新闻','public'=>true,'show_in_rest'=>true,'has_archive'=>true,
      'rewrite'=>['slug'=>'news'],'supports'=>['title','editor','thumbnail','excerpt','custom-fields']
    ]);
  }
});
```

可在保存模块设置后，按需自动创建“招聘/新闻”页面与菜单项（复用前述 ensure_page 逻辑）。

#### 6) 性能优化策略（达成首屏≤2s）
- 服务器与PHP：
  - PHP 8.1+、OPcache开启；HTTP/2/3、Gzip/Brotli压缩；Imagick/WebP支持。
  - 数据库开启慢查询日志，按需为wp_postmeta常用查询加索引（慎用）。
- WordPress层：
  - 缓存：根据环境选用LiteSpeed Cache或WP Super Cache；对象缓存（Redis）优先。
  - 媒体：默认懒加载，上传WebP；启用自动缩略图尺寸限制；首页仅加载首屏必要图（Query Loop分页）。
  - 资源：合并/延迟非关键脚本；Critical CSS可通过工具生成并内联（控制在3-5KB）。
  - 移除未用区块样式与表情；限制插件数量，避免大型Page Builder。
- 前端：
  - 使用系统字体，避免渲染阻塞；SVG优先（Logo/图标）；善用CSS容器查询与现代布局减少脚本。
  - 交互渐进增强，确保无JS亦可访问和转化。

#### 7) 导航与可访问性
- 面包屑（语义化nav[aria-label="breadcrumb"]）、跳转到主内容的skip-link。
- 控件符合WAI-ARIA；对比度比≥4.5:1；表单label与错误提示可感知；Tab顺序合理。
- 所有图片包含alt；链接状态有清晰焦点样式。

---

### 注意事项
- 安全
  - 表单已启用nonce、honeypot与速率限制；建议在反向代理层加WAF与reCAPTCHA（可按需集成）。
  - 最小权限原则：仅给必要的用户角色赋权；定期审计插件与主题版本。
- SEO
  - 标题结构：每页仅一个H1，层级清晰；URL语义化；避免薄内容。
  - robots.txt允许核心资源抓取；确保/robots.txt与/sitemap.xml可达。
- 结构化数据
  - Organization的logo与联系信息补全后可提升品牌卡片展示效果；产品页如有价格/库存可扩展Offer/AggregateRating。
- 性能与可用性
  - 首屏测试：Lighthouse移动端分数≥90，FCP≤2s，LCP≤2.5s，CLS<0.1，TTI≤3.5s。
  - 使用WebPageTest/PSI对“首页/产品归档/产品详情/联系页”分别测试并留档。
- 部署与回滚
  - 采用分支+预发布环境；迁移用WP-CLI与官方导出；启用自动备份与一键回滚（数据库+wp-content）。
- 扩展与维护
  - 模块化注册CPT与设置，避免耦合；新模块遵循相同模式（注册、模板、导航、sitemap）。
  - 数据隐私：线索数据遵循当地隐私法规，提供导出与删除流程。

本任务说明覆盖从主题结构、自动化页面生成、CPT设计、线索表单、安全与SEO到性能优化与验收的全流程方案，可直接用于开发与上线执行。

## WordPress电商站点构建与优化任务说明（极简移动优先）

### 需求总结
- 设计偏好：
  - 电商极简风、移动优先、全响应式
  - 卡片式商品列表，突出主CTA（立即购买/加入购物车）
- 功能需求：
  - 商品目录与SKU变体（可管理库存）
  - 购物车与订单提醒（放弃购物车唤回等）
  - 接入常见支付插件（如Stripe/PayPal/本地支付）
  - 促销落地页与倒计时组件（Gutenberg/短代码）
  - 优化移动端下单流程（减少步骤、强化CTA）
- 性能目标：
  - LCP/CLS达标（LCP < 2.5s，CLS < 0.1）
  - 图片懒加载与WebP
  - 关键资源预加载与缓存优化（页面缓存、对象缓存、CDN）

---

## 详细步骤

### 一、架构与插件选型
- 栈与核心：
  - WordPress + WooCommerce（变体、库存、价格规则、结账流）
  - 主题：自研极简Block Theme或为官方主题建子主题（便于稳态升级）
- 插件（精简安装，避免冗余冲突）：
  - WooCommerce Stripe Gateway、PayPal Payments（按市场选择本地化支付）
  - 放弃购物车：AutomateWoo 或 Abandoned Cart Lite for WooCommerce
  - 图片优化与WebP：Imagify / ShortPixel / EWWW Image Optimizer（仅选其一）
  - 缓存：LiteSpeed Cache（LSWS环境）或 WP Rocket（Nginx/Apache通用）
  - 对象缓存：Redis Object Cache（配合Redis）
  - 页面构建（可选）：Gutenberg + 自定义Pattern（不推荐笨重页面构建器）

---

### 二、主题与UI实现（移动优先 + 卡片列表 + 主CTA）
- 关键要点：
  - 移动优先CSS网格/栅格、Aspect-ratio避免CLS
  - 标注宽高/使用object-fit避免图片抖动
  - CTA采用高对比与大触控区域，移动端固定底部“立即下单”

1) functions.php 基础配置与性能钩子
```php
<?php
// 主题能力与WooCommerce支持
add_action('after_setup_theme', function () {
    add_theme_support('title-tag');
    add_theme_support('post-thumbnails');
    add_theme_support('woocommerce');
    add_theme_support('html5', ['style', 'script', 'gallery', 'caption']);
    add_theme_support('responsive-embeds');

    add_image_size('product-card', 640, 640, true);
    add_image_size('product-hero', 1200, 800, true);
});

// 资源加载（移动优先，去除冗余）
add_action('wp_enqueue_scripts', function () {
    wp_enqueue_style('theme', get_stylesheet_directory_uri() . '/assets/css/app.css', [], '1.0.0', 'all');
    wp_enqueue_script('theme', get_stylesheet_directory_uri() . '/assets/js/app.js', [], '1.0.0', true);
}, 20);

// 预连接关键第三方与CDN
add_filter('wp_resource_hints', function ($urls, $relation_type) {
    if ('preconnect' === $relation_type) {
        $urls[] = 'https://js.stripe.com';
        $urls[] = 'https://www.paypal.com';
        $urls[] = 'https://cdn.example.com'; // 替换为你的CDN域名
    }
    return $urls;
}, 10, 2);

// 图片策略：Hero图提升优先级，其他延迟加载
add_filter('wp_get_attachment_image_attributes', function ($attr, $attachment, $size) {
    if (!empty($attr['class']) && strpos($attr['class'], 'hero-image') !== false) {
        $attr['loading'] = 'eager';
        $attr['fetchpriority'] = 'high';
        $attr['decoding'] = 'async';
    } else {
        $attr['loading'] = $attr['loading'] ?? 'lazy';
        $attr['decoding'] = 'async';
    }
    return $attr;
}, 10, 3);

// 清理Emoji/Embeds等冗余
add_action('init', function () {
    remove_action('wp_head', 'print_emoji_detection_script', 7);
    remove_action('wp_print_styles', 'print_emoji_styles');
    remove_action('wp_head', 'wp_oembed_add_discovery_links');
    remove_action('wp_head', 'wp_oembed_add_host_js');
});

// WooCommerce片段脚本在非结账页禁用，减少JS
add_action('wp_enqueue_scripts', function () {
    if (!is_cart() && !is_checkout()) {
        wp_dequeue_script('wc-cart-fragments');
    }
}, 100);

// 移动端固定CTA（产品页/购物车页）
add_action('wp_footer', function () {
    if ((is_product() || is_cart())) : ?>
        <div class="sticky-cta" role="region" aria-label="快速下单">
            <a href="<?php echo esc_url(wc_get_checkout_url()); ?>" class="button cta">立即下单</a>
        </div>
        <style>
            .sticky-cta {position: fixed; left: 0; right: 0; bottom: 0; background: #111; padding: 12px; z-index: 999;}
            .sticky-cta .cta {display: block; text-align: center; background: #ff2d55; color: #fff; font-weight: 600; border-radius: 10px; padding: 14px; font-size: 16px;}
            @media (min-width: 992px){ .sticky-cta{ display:none; } }
        </style>
    <?php endif;
});
```

2) WooCommerce 卡片式商品列表模板（子主题覆盖）
- 在子主题创建 woocommerce/content-product.php
```php
<?php defined('ABSPATH') || exit; global $product; if (empty($product) || !$product->is_visible()) return; ?>
<li <?php wc_product_class('product-card'); ?>>
    <a href="<?php the_permalink(); ?>" class="card-media" aria-label="<?php the_title_attribute(); ?>">
        <?php
        $img_id = get_post_thumbnail_id();
        echo wp_get_attachment_image($img_id, 'product-card', false, [
            'class' => 'card-img',
            'loading' => 'lazy',
            'decoding' => 'async'
        ]);
        ?>
    </a>
    <div class="card-body">
        <h3 class="card-title"><?php the_title(); ?></h3>
        <?php woocommerce_template_loop_price(); ?>
        <?php woocommerce_template_loop_add_to_cart(['class' => 'button primary cta']); ?>
    </div>
</li>
```

3) 样式（移动优先）
```css
/* assets/css/app.css */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
@media (min-width: 768px) { .product-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; } }

.product-card { list-style: none; background: #fff; border: 1px solid #eee; border-radius: 12px; overflow: hidden; }
.card-media { display: block; aspect-ratio: 1 / 1; background: #f7f7f7; }
.card-img { width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: 12px; }
.card-title { font-size: 14px; line-height: 1.4; margin: 0 0 6px; min-height: 2.8em; }
.price { font-weight: 700; color: #111; margin-bottom: 8px; }
.button.primary.cta { display: block; width: 100%; background: #111; color: #fff; padding: 12px; text-align: center; border-radius: 10px; font-weight: 600; }
.button.primary.cta:active { transform: scale(0.98); }

@media (hover: hover) {
  .product-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.06); transform: translateY(-1px); transition: .2s; }
}
```

---

### 三、业务功能实现（SKU变体、库存、提醒、支付）
1) SKU变体与库存
- 启用WooCommerce“管理库存”，在“产品 > 属性”创建全局属性（如颜色/尺码），在可变产品中绑定属性与对应变体SKU/库存
- 校验SKU唯一性，设置低库存提醒阈值（库存阈值邮件提醒）

2) 购物车与订单提醒（放弃购物车）
- 使用AutomateWoo或Abandoned Cart插件：
  - 触发：客户将商品加入购物车后X分钟未结账
  - 渠道：邮件/短信/推送（根据法务合规获取用户同意）
  - 模板：包含购物车摘要、优惠码、单击回流链接（自动跳转结账页）

3) 支付接入（示例：Stripe/PayPal）
- 安装官方网关插件，启用测试模式验证
- 在结账页仅保留2-3种主流支付以减少干扰
- 开启Apple Pay/Google Pay（Stripe）以提升移动端转化
- 确保3D Secure、Webhook回调与订单状态同步

---

### 四、促销落地页与倒计时组件
1) 倒计时短代码（轻量、即插即用）
- 在自定义插件或主题 functions.php 中加入：
```php
<?php
function promo_countdown_shortcode($atts) {
    $a = shortcode_atts([
        'end' => '2025-12-31T23:59:59+08:00',
        'label' => '限时优惠'
    ], $atts);
    $id = 'cd_' . wp_generate_uuid4();
    ob_start(); ?>
    <div id="<?php echo esc_attr($id); ?>" class="promo-countdown" data-end="<?php echo esc_attr($a['end']); ?>" aria-live="polite">
        <span class="label"><?php echo esc_html($a['label']); ?></span>
        <span class="time">
            <b class="d">00</b>d <b class="h">00</b>h <b class="m">00</b>m <b class="s">00</b>s
        </span>
    </div>
    <script>
    (function(){
      var el = document.getElementById('<?php echo esc_js($id); ?>'); if(!el) return;
      var end = new Date(el.dataset.end).getTime();
      function pad(n){return n<10?'0'+n:n}
      function tick(){
        var diff = Math.max(0, end - Date.now());
        var d = Math.floor(diff/86400000);
        var h = Math.floor(diff%86400000/3600000);
        var m = Math.floor(diff%3600000/60000);
        var s = Math.floor(diff%60000/1000);
        el.querySelector('.d').textContent = pad(d);
        el.querySelector('.h').textContent = pad(h);
        el.querySelector('.m').textContent = pad(m);
        el.querySelector('.s').textContent = pad(s);
        if (diff <= 0) { clearInterval(timer); el.classList.add('ended'); }
      }
      tick(); var timer = setInterval(tick, 1000);
    })();
    </script>
    <?php return ob_get_clean();
}
add_action('init', function(){ add_shortcode('promo_countdown', 'promo_countdown_shortcode'); });
```
- 在落地页使用：
  - [promo_countdown end="2025-11-11T23:59:59+08:00" label="双11限时"]

2) Gutenberg Pattern注册（快速搭建落地页结构）
```php
<?php
add_action('init', function () {
    if (function_exists('register_block_pattern')) {
        register_block_pattern('promo/landing-minimal', [
            'title' => '极简促销落地页',
            'content' => '
                <!-- wp:cover {"url":"https://cdn.example.com/hero.jpg","dimRatio":60,"minHeight":60,"isDark":false} -->
                <div class="wp-block-cover"><span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span>
                    <img class="wp-block-cover__image-background hero-image" alt="" src="https://cdn.example.com/hero.jpg" data-object-fit="cover"/>
                    <div class="wp-block-cover__inner-container">
                        <!-- wp:heading {"textAlign":"center","level":1} --> <h1 class="has-text-align-center">限时优惠</h1> <!-- /wp:heading -->
                        <!-- wp:paragraph {"align":"center"} --> <p class="has-text-align-center">现在下单，立享折扣</p> <!-- /wp:paragraph -->
                        <!-- wp:shortcode -->[promo_countdown end="2025-11-11T23:59:59+08:00"]<!-- /wp:shortcode -->
                        <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
                        <div class="wp-block-buttons"><div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="/shop">立即购买</a></div></div>
                        <!-- /wp:buttons -->
                    </div>
                </div>
                <!-- /wp:cover -->
            ',
        ]);
    }
});
```

---

### 五、性能优化（LCP/CLS、懒加载、WebP、预加载、缓存）
1) 图片与媒体
- 使用插件批量生成WebP，并在模板中保留width/height或使用CSS aspect-ratio
- Hero首屏图片添加fetchpriority="high"（上方已实现），避免首屏被懒加载
- 视频/第三方小组件延迟加载（IntersectionObserver或点击后加载）

2) 关键资源预加载
- 字体预加载（仅Woff2）：
```php
add_action('wp_head', function(){
    echo '<link rel="preload" href="'.esc_url(get_stylesheet_directory_uri().'/assets/fonts/Inter.woff2').'" as="font" type="font/woff2" crossorigin>';
}, 1);
```

3) 服务器缓存与浏览器缓存（Apache示例 .htaccess）
```apache
# 压缩
<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/plain text/css application/javascript application/json image/svg+xml
</IfModule>

# 浏览器缓存
<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/webp "access plus 6 months"
  ExpiresByType image/jpeg "access plus 6 months"
  ExpiresByType image/png  "access plus 6 months"
  ExpiresByType text/css   "access plus 7 days"
  ExpiresByType application/javascript "access plus 7 days"
  ExpiresDefault "access plus 1 day"
</IfModule>

# WebP优先（存在即用）
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_FILENAME} (.+)\.(jpe?g|png)$
  RewriteCond %{DOCUMENT_ROOT}/%1.webp -f
  RewriteRule (.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]
</IfModule>
AddType image/webp .webp
```

4) 页面缓存与对象缓存
- 启用WP Rocket/LiteSpeed Cache的：页面缓存、预加载、延迟JS、移除阻塞CSS（或Critical CSS）
- Redis对象缓存（wp-config.php）：
```php
define('WP_CACHE', true);
define('WP_REDIS_HOST', '127.0.0.1');
define('WP_REDIS_PORT', 6379);
```

5) WooCommerce专项优化
- 仅在必要页面加载结账/购物车脚本（已通过wp_dequeue处理）
- 减少结账字段（WooCommerce > 设置 > 账户与隐私/结账表单）与自动地址补全（可选）
- 合理分页与每页产品数（避免一次性加载过多）

6) CDN与边缘
- 使用Cloudflare/阿里云CDN：开启HTTP/2/3、Brotli、边缘缓存规则、图片自适应缩放（可选）

---

### 六、测试与验证（验收标准）
- 性能验证：
  - PageSpeed Insights（移动端）：LCP < 2.5s、CLS < 0.1、INP < 200ms
  - WebPageTest：首字节、LCP资源瀑布检查（确保首屏图与CSS优先）
- 功能验证：
  - SKU变体切换迅速无重排，库存扣减准确
  - 放弃购物车自动化流程触发正确（阈值、频率、退订链接）
  - 支付测试（Stripe/PayPal Sandbox）全链路打通，订单状态同步、Webhook正常
- 可用性与移动端：
  - 单手操作CTA可达（48px触控）、底部固定栏不遮挡系统手势
  - 2-3步完成下单（购物车可选直达结账）
- 稳定性：
  - Query Monitor检查：产品列表页查询数与加载时间可控，无慢查询
  - 错误日志无PHP Notice/Warning

---

## 注意事项
- 子主题覆盖WooCommerce模板时，保持与当前版本的模板标记同步，升级后检查模板版本号
- 精简插件，避免功能重复（仅保留一个缓存插件、一个图片优化插件）
- 倒计时与促销内容须合规展示，明确条款、时间与适用范围
- 第三方脚本延迟加载时，确保不影响支付与必需交互
- 生产环境启用HTTPS、HSTS、安全HTTP头；限制xmlrpc、强密码与双因子（WP 2FA）
- 定期备份与演练回滚；使用预发布环境对变更进行A/B或灰度验证
- 若使用多语言/多货币，请选用兼容WooCommerce的多语言与价格插件并做缓存排除规则配置

以上方案覆盖从主题与UI落地、业务功能实现到性能与稳定性的全链路，面向移动端转化优化与核心Web指标达标，提供可直接应用的代码片段与配置参考。