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（精简，作为基础样式与响应式基线）：

{
  "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
// 主题支持
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/分类与页面自动创建：

// 注册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）。

表单与处理：

// 短代码：线索表单
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：

// 基础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注册（精简示例）：

// 设置页
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到性能优化与验收的全流程方案，可直接用于开发与上线执行。