我们把今天确定的方案保留下来，今后维护时可以直接参考。

Header #94 — 定稿记录

2026年10月19日

以后维护需要记住两个位置：

• Elementor → Header #94 → Advanced → CSS Classes：管理组件的语言标记。

• Snippets → Website 2.0 – Header Language Switching：管理中英文自动显示规则。

现有的 Desktop、Tablet、Mobile 响应式布局继续保留。

下一阶段

Header 暂时不再调整。中文网站首页接下来可以逐屏检查内容、文字翻译、按钮链接及页面布局。

我们的工作原则不变：已经完成的模块尽量不动，逐步完善整个中文网站。

Website 2.0 开发日记（70）

中英文搜索系统的设计、排查与最终定稿

日期：2026年10月21—22日

项目：PhD Win Acupuncture Clinic — Website 2.0

涉及模块：Header #94、WordPress Search、PHP Snippets、Shortcode、Elementor、Polylang、Clinical Topics、Tags

项目状态：中英文搜索功能测试成功，阶段性定稿。

一、搜索系统的设计目标

Website 2.0 的搜索系统不是单纯寻找某一篇文章，而是帮助患者按照自己的症状、疾病名称和临床问题查找资料。

患者通常搜索“肩痛”“头痛”“手麻”“腰痛”“网球肘”，而不会先区分这些内容属于 Blog、Case Study 还是 Patient Review。

因此，网站搜索需要把三种临床内容整合起来：

1. Posts：Blog、Clinical Reflections、临床科普。
2. Case Studies：病例分析和临床病例。
3. Testimonials：Patient Reviews、Patient Stories。

同时要求：

• 支持中文和英文搜索。
• 通过 Clinical Topics 和 Tags 查找相关文章。
• 保留标题、正文和摘要的常规搜索。
• 排除 Pages 等无关内容。
• 中文搜索保持中文，英文搜索保持英文。
• Header 搜索输入框和按钮保持简洁、稳定。

二、早期尝试及遇到的问题

最初使用 Elementor 自带的 Search Widget，并尝试通过组件设置和 Custom CSS 控制搜索框及按钮。

期间主要遇到以下问题：

第一，输入框和按钮的显示不稳定。

修改 Width、Padding、Font Size 等设置后，有些改变没有实际效果。

第二，中文搜索曾经跳转到英文页面。

中文搜索结果出现英文提示，甚至不能正确显示已经发表的中文文章。

第三，搜索范围不完整。

最初主要搜索 Blog，不能稳定找到 Case Studies 和 Testimonials。

第四，扩大搜索范围后又出现无关内容。

选择 All 后，普通 Pages 等内容也进入搜索结果。

第五，Clinical Topics 和 Tags 无法直接作为搜索关键词。

例如文章已经归类为“肘疼”，但直接输入该词仍可能找不到文章。

这些问题使我们多次调整 Elementor Search、Query、CSS、语言设置和搜索结果模板。

最后认识到：问题不仅在搜索框的外观，而在于搜索表单、数据查询和页面布局混在一起处理。

三、最终技术方案

经过多轮测试，最终采用：

PHP Snippet + Shortcode + Elementor Flexbox + CSS

各部分职责明确：

PHP Snippet

负责生成 WordPress 标准搜索表单，控制搜索范围及扩展搜索匹配规则。

Shortcode

通过 Shortcode 将 PHP 功能嵌入 Elementor 页面。

最终使用的搜索表单调用方式：

[website20_search]

Elementor

负责 Header 中搜索区域的位置和容器布局。

CSS

负责输入框、按钮的尺寸和外观。

Polylang

负责中英文语言环境，确保搜索保持当前语言。

这套方案避免了完全依赖 Elementor Search Widget 内部机制的问题。

最终技术决定：功能由 PHP 控制，Shortcode 负责调用，Elementor 负责显示。

四、Header 搜索框和按钮的关键设置

维护入口：

WordPress → Elementor → Header #94

在 Structure 中找到放置 Shortcode 的 Flexbox。

最初输入框显示过窄，后来发现不是简单调整 CSS 就能解决的问题。

真正的限制来自 Shortcode 外层 Flexbox。

最终确认的桌面端尺寸：

原来的外层 Flexbox 只有 110px，导致输入框空间不足。

虽然尝试将 CSS 中的搜索输入框宽度扩大到 180px，但实际显示没有改善。

后来修改外层 Flexbox 的 Width 和 Min Width，搜索框及按钮才恢复正常。

维护注意：以后搜索框大小出现问题，先检查外层 Flexbox，再检查 CSS，不要首先修改 PHP 搜索功能。

五、中英文搜索的实现

网站使用 Polylang 管理英文和中文。

Header #94 为中英文共用模板。

原来通过以下 CSS Classes 控制不同语言的显示：

• logo-en
• logo-zh
• search-en
• search-zh

后续搜索表单改用 Shortcode 实现。

中文搜索曾出现跳转到英文结果页的问题。

经过检查搜索表单提交地址、Polylang 当前语言和 PHP 代码，最终使搜索能够保持正确语言。

测试确认：

• 中文首页输入中文关键词，进入中文搜索结果。
• 英文首页输入英文关键词，进入英文搜索结果。
• 按 Enter 可以提交搜索。
• 点击 Search 按钮同样可以提交。

中英文 Header、导航及搜索结果的语言保持正常。

六、搜索文章类型的限定

最初只搜索普通 Posts。

后来尝试 All，虽然扩大了结果范围，但也包含了大量普通 Pages。

最终采用 PHP 代码限定搜索范围，只保留三种文章类型：

$query->set('post_type', array(
    'post',
    'case_study',
    'testimonial'
));

文章类型对应关系：

这样既能统一搜索三类文章，也避免把普通 Pages 混入结果。

七、Clinical Topics 和 Tags 关键词搜索

进一步测试发现，患者最常用的搜索方式是输入症状或疾病关键词。

例如：

肩痛、肘疼、手麻、头痛、失眠、网球肘、坐骨神经痛。

但 WordPress 默认搜索主要匹配标题、正文和摘要，不会自动搜索自定义 Taxonomy 的名称。

我们检查后确认：

Clinical Topics Taxonomy Slug：

clinical_topic

WordPress Tags Taxonomy：

post_tag

Blog 和 Testimonials 等内容已经设置了 Clinical Topics 和 Tags。

因此没有必要重新建立分类系统。

最终通过独立 PHP 搜索增强逻辑，将分类名称匹配加入原来的文章搜索。

搜索原则：

文章内容匹配 OR Clinical Topics 匹配 OR Tags 匹配。

注意不能简单添加 tax_query，否则可能与正文搜索形成 AND 条件，使结果减少。

目前优先使用 Clinical Topics 和 Tags，不单独扩展 Rank Math Focus Keywords。

八、最终 Snippets 及维护入口

后台入口：WordPress → Snippets

主要涉及以下功能：

1. Website 2.0 – Header Language Switching

管理 Header 英文和中文组件的显示。

使用 Polylang 当前语言识别。

2. Website 2.0 – Standard Search Form

负责 WordPress 标准搜索表单及有关搜索范围控制。

Shortcode：

[website20_search]

3. Website 2.0 – Clinical Keyword Search

扩展搜索范围，使 Clinical Topics 和 Tags 的关键词能够参与匹配。

以上模块应分开管理，避免重复注册 Shortcode 或重复修改搜索条件。

如果将来出现问题，应先检查相关 Snippet 是否启用，再检查具体代码。

九、搜索结果页面

维护位置：Elementor → Search Results Template

使用 Archive Posts Widget 显示搜索结果。

主要配置及设计包括：

• 三列文章展示。
• 文章封面位于上方。
• 显示标题和 Excerpt。
• 支持 Read More。
• 搜索结果根据查询动态更新。

以后可以继续统一 Search Results 与 Blog Listing 的视觉样式。

但页面排版与搜索查询逻辑应当分开处理。

不要为了改变搜索结果布局而修改搜索功能的 PHP 代码。

十、最终测试

2026年10月21—22日完成中英文搜索测试。

另外，英文搜索 Teresa Shen，也能够找到标题包含该姓名的相关 Clinical Reflections。

这证明作者姓名出现在可搜索内容时，也能作为搜索入口。

但不能据此认为系统已经直接检索了 Clinical Authors 分类。

最终结论：中英文搜索已达到本阶段预期，可以暂时定稿。

十一、为什么这次走了很多弯路？

回顾整个过程，最大的原因是没有在一开始明确区分三个问题：

功能问题：搜索表单如何提交、WordPress 如何执行搜索。

数据问题：搜索哪些文章类型、哪些关键词、如何过滤语言。

布局问题：输入框和按钮如何在 Header 中显示。

最初过于依赖 Elementor Widget 设置和 CSS，试图同时解决所有问题。

但 CSS 无法改变 WordPress 的查询逻辑，Elementor 的组件尺寸又受到父级容器约束。

因此，某些调整反复测试仍然失败。

直到采用 PHP + Shortcode + Elementor 的分层方案，问题才逐渐得到解决。

这一经验应成为 Website 2.0 今后开发的参考。

十二、未来开发的技术复用原则

这是本次开发最重要的经验。

Website 2.0 已经使用并验证了多个可复用的动态功能：

• Blog Listing Shortcode。
• Conditions Hub 动态临床内容系统。
• 中英文标准搜索 Shortcode。
• Clinical Topics 和 Tags 查询。
• Polylang 中英文切换。

以后建设类似功能，应当先检查现有系统是否能够复用，而不是重新尝试不同的 Elementor Widget。

特别是涉及以下功能：

• 按医生自动筛选文章。
• 按临床主题显示文章。
• 统一展示不同 Post Types。
• 分类查询。
• 中英文动态列表。
• 个人专页文章展示。

应优先评估：

一个 PHP Snippet + 一个可配置的 Shortcode + Elementor 容器布局。

但并不是所有页面都必须使用代码。简单静态内容仍然可以直接使用 Elementor。

出现问题时的排查顺序

1. 先确认原有功能是否仍然正常。
2. 判断问题属于功能、数据查询还是布局。
3. 检查是否已有成功的 PHP 或 Shortcode 可以复用。
4. 如果连续多次调整没有效果，重新评估技术方向。
5. 尽量独立新增功能，不随意修改已经稳定运行的模块。
6. 测试成功后记录关键代码、参数和后台入口。

这样可以减少重复试验，也降低以后网站维护的难度。

十三、下一阶段的应用

我们下一步计划建立 Teresa Shen 和 Dr Win Huang 个人专页的动态临床文章展示。

每位医生分别展示：

• Clinical Reflections
• Case Studies
• Patient Reviews / Stories

这些内容将通过 Clinical Authors 等已建立的数据分类进行归属筛选。

计划继续采用本次验证的技术方式：

PHP Snippet + Shortcode + Elementor

目标是一个统一代码系统，支持两位医生、三种文章类型及中英文页面。

新增文章以后，只要设置正确的作者和分类，就能够自动显示在个人专页中。

不需要再为每篇文章手工创建卡片。

最终总结

这次搜索模块虽然经历了多次失败和反复修改，但最终建立了一套适合 Website 2.0 内容结构的搜索方案。

更重要的是，我们形成了以后可以持续复用的技术路线：

PHP 负责功能，Shortcode 负责连接，Elementor 负责显示，Polylang 负责语言，Clinical Topics 和 Tags 负责临床内容组织。

网站建设不是不断增加新插件和新代码，而是逐步建立一套可靠、简单、能够长期维护的系统。

阶段状态：搜索系统完成，正式转入后续内容建设及个人专页开发。

Website 2.0 维护日记｜2026年10月22日(71)

首页第二屏 Clinical Expertise（临床专长） 两个入口已完成设置。直接使用 Teresa 和 Dr Win 个人专页中已有的专长区块，通过锚点定位，无需另建页面或重复内容。

第一屏 About Our Team 用于进入个人专页、了解医生；第二屏 Clinical Expertise 直接进入相应医生的专长区块。

设置位置：个人专页 → Elementor → 选中专长区块外层容器 → General → Settings → ID。填写 ID 时不加 #，不要填入 Style → Classes。

首页 Teresa’s Expertise 的 Link 为：

/meet-our-team/teresa-shen/#teresa-expertise

Dr Win 的首页入口也已按同样方法连接到其个人专页，链接末尾为 #win-expertise。

保存后，点击首页入口直接显示相应专长区块；上下滑动仍可浏览完整个人专页。Teresa 入口已测试，定位效果符合预期，本项建设收尾。

Website 2.0 开发日记（72）

中文“治疗疾病”页面——中英文转换与动态连接维护记录

日期：2026年10月24日
涉及系统：WordPress / Elementor / Polylang / Snippets / REST API

一、系统结构与管理位置

中文“治疗疾病”页面使用英文网站已经建立的 Clinical Hub 动态系统，没有重新创建独立的中文系统。

整套连接关系：

中文首页 → 中文“所有疾病”页面 → 中文 Clinical Topics → Frontend Controller → REST API → 中文文章。

以后管理这套系统，主要涉及四个位置：

二、后台 Clinical Topics：建立中英文对应分类

后台位置：

WordPress → Posts → Clinical Topics

英文 Clinical Topics 已经存在，中文版本通过 Polylang 建立。

具体方法：

1. 进入 Clinical Topics 列表。
2. 找到英文疾病主题。
3. 点击中国国旗下面的 ＋。
4. 填写中文 Name。
5. 中文 Slug 使用英文 Slug 加 -zh。
6. Language 选择中文。
7. Translations 保留与英文主题的关联。
8. 保存中文分类。

例如：

维护重点：

不要直接把英文 Clinical Topic 改成中文。

以后新增疾病主题时，先建立英文分类，再通过 Polylang 建立中文翻译，并检查两者关联。

中文文章应勾选中文 Clinical Topic，而不是英文 Clinical Topic。

三、后台 Clinical Hubs：九大疾病系统中英文分离

后台位置：

WordPress → Posts → Clinical Hubs

九大 Clinical Hubs 同样通过 Polylang 建立中英文对应分类。

例如：

英文：Musculoskeletal & Injuries

中文：肌肉骨骼与损伤

中文文章编辑页面中，应选择对应的中文 Clinical Hub。

注意：Clinical Hubs 与 Clinical Topics 是两个不同的分类系统。

Clinical Hubs 表示文章属于哪个疾病大系统。

Clinical Topics 表示文章属于哪个具体疾病主题。

以后文章没有出现在正确位置时，两项都需要检查。

四、Elementor：中文疾病主题怎样连接后台

编辑位置：

Pages → 中文“治疗疾病”页面 → Edit with Elementor

当前中文页面地址：

/zh/condition-we-treat-zh/

找到左侧九大疾病分类及下属具体 Clinical Topics。

每个可点击的疾病主题，都通过 Elementor 的属性连接到后台。

需要检查两个设置：

1. Advanced → CSS Classes

保留：

clinical-topic-trigger

这个 Class 用于让 JavaScript 识别疾病主题的点击事件。

2. Advanced → Attributes

英文页面原来的设置，例如：

data-clinical-topic|elbow-pain

中文页面修改为：

data-clinical-topic|elbow-pain-zh

这里的 elbow-pain-zh 必须与 WordPress 后台中文 Clinical Topic 的 Slug 完全一致。

这是本次中文动态连接最关键的修改。

仅仅把前台疾病名称翻译成中文是不够的。如果 Attributes 仍然指向英文 Slug，右侧就可能继续抓取英文文章。

以后新增一个中文疾病主题时，必须同时确认中文显示名称和 data-clinical-topic 的值。

五、Frontend Controller：右侧中文标题在哪里修改

后台位置：

WordPress → Snippets →
Website 2.0 – Clinical Topic Frontend Controller

这是管理右侧动态内容的主要代码。

本次关键修改位置在代码原第23–28行附近。

原来的标题生成方法：

const heading = document.createElement(‘h2’);

heading.textContent = topic

    .split(‘-‘)

    .map(word => word.charAt(0).toUpperCase() + word.slice(1))

    .join(‘ ‘);

root.appendChild(heading);

原代码自动将 Slug 转换成英文标题。

例如：

elbow-pain-zh → Elbow Pain Zh

因此中文页面虽然能够抓取中文文章，但大标题仍然是英文。

修改后的方法：

const heading = document.createElement(‘h2’);

const trigger = Array.from(

    document.querySelectorAll(‘.clinical-topic-trigger’)

).find(el =>

    el.getAttribute(‘data-clinical-topic’) === topic

);

const topicName = trigger

    ? trigger.textContent.trim()

        .replace(/[›→]/g, ”).trim()

    : ”;

heading.textContent = topicName || topic

    .replace(/-zh$/, ”)

    .split(‘-‘)

    .map(word =>

        word.charAt(0).toUpperCase() + word.slice(1)

    )

    .join(‘ ‘);

root.appendChild(heading);

修改后的原理：

右侧疾病大标题直接读取左侧对应 Clinical Topic 的文字。

例如：

左侧显示“颈椎病” → 右侧标题显示“颈椎病”。

左侧显示“手肘痛” → 右侧标题显示“手肘痛”。

因此，以后要修改右侧中文疾病名称，通常只需要修改 Elementor 左侧的中文名称，不必再增加 JavaScript 标题翻译表。

六、Frontend Controller：三个栏目在哪里翻译

同一个 Snippet：

Website 2.0 – Clinical Topic Frontend Controller

在代码前部，const isChinese 附近设置语言判断，并在 sections 中定义三个栏目。

栏目对应关系：

维护方法：

以后如果要把“临床病例”改成“真实病例”，或者把“患者反馈”改成“患者评价”，应进入 Frontend Controller 修改 sections 中对应的中文 title。

不要去 Elementor 中寻找这三个标题，因为它们是 JavaScript 动态生成的。

七、右侧文章抓取由哪里控制

涉及两个 Snippets：

1. Frontend Controller

负责读取：

data-clinical-topic

并发送 REST API 请求：

/wp-json/website20/v1/clinical-content

主要参数：

• topic：Clinical Topic Slug
• type：文章类型

2. Clinical Topic Query Content

负责 WordPress 后台实际文章查询，包括：

• 根据 Clinical Topic 分类查找文章
• 根据内容类型筛选 Posts / Case Studies / Testimonials
• 返回文章标题与文章链接

本次没有重新建设 REST API。

重要：目前截图所示的 Frontend Controller 请求只明确传递 topic 和 type，没有单独传递 lang 参数。

因此，当前中文文章抓取主要依赖中文 Topic Slug 和后台文章分类的正确对应。中英文严格隔离仍需要在后续测试中持续验证，不能仅凭栏目显示中文就认为语言过滤完全完成。

八、右侧 HTML 动态显示区域不要修改

Elementor → HTML Widget

原有代码：

<div id=”clinical-dynamic-content”></div>

这个 ID 是 Frontend Controller 定位右侧动态内容区域的依据。

英文、中文页面均保持相同的 HTML ID。

不要改成：

clinical-dynamic-content-zh

否则 JavaScript 可能找不到显示区域，导致右侧文章全部消失。

九、以后出现故障，在哪里检查

十、后续维护原则

1. 前台文字在 Elementor 修改。
2. 疾病分类、Slug 和翻译关联在 Clinical Topics / Clinical Hubs 管理。
3. 右侧动态标题和栏目名称在 Frontend Controller 修改。
4. 文章筛选与返回结果在 Clinical Topic Query Content 检查。
5. 英文与中文共用现有动态架构，但分别使用各自的 Clinical Topic Slug。

以后修改之前，先备份相应 Snippet，尽量只改变需要调整的代码段，避免影响已经运行正常的英文网站。

维护核心：页面文字、分类 Slug、点击属性、动态标题、REST API 查询，是五个不同的管理环节。出现问题时，应先确定属于哪个环节，再到对应位置修改。

Website 2.0 开发日记（73）

中文首页疾病导航连接与默认文章隐藏

日期：2026年10月24日
涉及：中文首页、Conditions We Treat、Clinical Topics、Frontend Controller

一、中文首页九大疾病分类链接

修改位置：

WordPress → Pages → 中文首页 → Edit with Elementor

打开 Structure（结构）：

Main Card 01–09 → Flexbox → General → Settings → Link

九大分类的每张卡片都有自己的链接。

以“肌肉骨骼与损伤”为例：

/condition-we-treat-zh/#hub-musculoskeletal

链接分为两部分：

• condition-we-treat-zh：进入中文“治疗疾病”页面。
• #hub-musculoskeletal：定位到对应疾病大类。

重要设置：

目前 Local 网站的 Polylang 已能自动识别中文页面，实际跳转地址会出现 /zh/。

因此，已测试成功的链接不需要在最前面手动再加 /zh/。

九大分类分别保留各自原有的 #hub-… 锚点。

以后某个大类跳转错误，首先检查该卡片的 Link 和目标页面的锚点 ID。

二、中文首页每个大类下方的六个 Clinical Topics

修改位置：

中文首页 → Edit with Elementor → Structure

找到：

Main Card → Secondary Panel → 对应 Clinical Topic 的 Heading

左侧进入：

General → Settings → Link

以“胃痛”为例：

原来的英文链接：

/condition-we-treat/?topic=stomach-pain

修改为中文链接：

/condition-we-treat-zh/?topic=stomach-pain-zh

需要修改两个位置：

1. 页面 Slug：condition-we-treat → condition-we-treat-zh
2. Topic 参数：stomach-pain → stomach-pain-zh

?topic= 本身不变。

中文 Topic Slug 必须与后台 Posts → Clinical Topics 中实际保存的中文 Slug 一致。

作用：

患者从中文首页点击具体疾病后，进入中文“治疗疾病”页面，Frontend Controller 读取 ?topic= 参数，自动显示对应的中文疾病标题和文章。

以后新增或修改首页疾病入口，直接在 Heading 的 Link 中操作，不需要修改 REST API。

三、中文“治疗疾病”页面的动态连接

修改位置：

Pages → 中文“治疗疾病” → Edit with Elementor

地址：

/zh/condition-we-treat-zh/

每个具体疾病主题需要保留：

CSS Classes

clinical-topic-trigger

Advanced → Attributes

例如：

data-clinical-topic|stomach-pain-zh

这里控制的是患者在“治疗疾病”页面点击左侧具体主题后，右侧显示哪一组文章。

注意区分：

• 首页 Heading 的 Link：负责跨页面跳转。
• 治疗疾病页面的 Attributes：负责点击后的动态内容切换。

两处的中文 Topic Slug 应一致。

四、取消中文页面默认出现英文 Shoulder Pain

修改位置：

WordPress → Snippets →

Website 2.0 – Clinical Topic Frontend Controller

找到代码最后的初始加载逻辑，原来约第97–109行。

旧代码在没有指定 Topic 时自动执行：

loadTopic(‘shoulder-pain’);

因此，从中文首页点击九大分类进入时，右侧自动出现原来的英文肩痛内容。

修改办法：

将原来的初始加载判断整段替换为：

if (requestedTopic) {

    const target = Array.from(

        document.querySelectorAll(‘.clinical-topic-trigger’)

    ).find(el =>

        el.getAttribute(‘data-clinical-topic’) === requestedTopic

    );

    if (target) {

        loadTopic(requestedTopic);

    } else if (!isChinese) {

        loadTopic(‘shoulder-pain’);

    }

} else if (!isChinese) {

    loadTopic(‘shoulder-pain’);

}

修改原理：

• 中文页面没有 ?topic=：不自动加载任何疾病文章。
• 中文页面有有效的 ?topic=…-zh：自动加载指定中文文章。
• 英文页面：保留原来的默认 Shoulder Pain。

这里取消的是自动加载行为，不是隐藏整个右侧 Container。

必须保留动态内容区域：

<div id=”clinical-dynamic-content”></div>

这样患者以后点击具体 Clinical Topic，文章仍能正常出现。

注意：以上为本次确定的修改方案。维护记录中应以实际保存并测试成功的 Snippet 为最终依据。

五、最终页面预期

入口 A：中文首页九大疾病分类

点击大类 → 中文“治疗疾病”页面 → 左侧展开对应分类 → 右侧不出现默认 Shoulder Pain。

原有“准备您的下一步”“在线预约”“临床评估”等 Elementor 内容继续保留。

入口 B：中文首页具体 Clinical Topic

点击“胃痛”等主题 → 中文“治疗疾病”页面 → 自动显示该疾病中文标题及对应文章。

入口 C：治疗疾病页面内点击具体主题

通过 data-clinical-topic 切换右侧内容，不重新加载整个页面。

六、以后维修在哪里检查

七、维护原则

九大分类通过 #hub-… 定位，具体 Clinical Topics 通过 ?topic=…-zh 加载文章。

两种入口使用同一个中文“治疗疾病”页面，但作用不同。

维护时尽量只修改对应的 Elementor 链接或 Frontend Controller 初始加载逻辑，不改动已经正常工作的文章查询系统。

修改 Snippet 前，先复制保存当前正常版本；修改后同时测试中文大类入口、中文 Topic 入口和英文页面。