归档： 文档

在设计 WordPress 主题时，务必考虑主题的用户界面。

在本课中，您将学习用户界面设计，以及一些设计主题用户界面的最佳实践。

什么是用户界面设计？

网站的用户界面（UI）是人与网站进行交互的空间，通常被称为网站前端。

优秀用户界面设计的目标是促成有效交互（即良好的用户体验），使网站能提供有助于用户决策的反馈。

糟糕的UI设计会导致挫败的用户体验和潜在访客流失，这对主题使用者而言绝非好事。

设计主题时，必须确保各元素能提供良好的用户体验。

下面我们深入探讨WordPress主题用户界面设计的最佳实践。

Logo首页链接

主题Logo应链接至网站首页。

在经典主题中使用custom_logo()函数或在区块主题中使用站点Logo区块时，Logo会自动链接至首页。

若使用自定义页眉，请确保Logo带有首页链接。

以下是使用home_url()函数实现Logo首页链接的示例：

<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
    <img src="<?php echo get_stylesheet_directory_uri(); ?>/logo.png" alt="<?php esc_attr_e( 'Home Page', 'textdmomain' );?>" />
</a>

描述性锚文本

创建主题中的链接时，请使用描述性锚文本。

锚文本是链接的可见文字，应让用户清楚点击后将发生的操作。

反面示例：

学习WordPress的最佳方式是开始使用。点击这里下载WordPress。

“点击这里”并未描述链接行为。

优化后的锚文本：

学习WordPress的最佳方式是开始使用。下载WordPress立即体验。

“下载WordPress”明确说明了链接功能。

带下划线的链接样式

优秀主题设计应保留带下划线的默认链接样式。

禁用链接下划线会导致可用性和可访问性问题，增加识别超链接的难度。

差异化链接颜色

链接颜色是”可点击”的视觉提示。

HTML链接具有多种状态：

• 未访问（默认蓝色）
• 已访问（默认紫色）
• 悬停（鼠标悬停）
• 聚焦（键盘导航）
• 激活（点击瞬间）

Twenty Twenty-Four主题中，菜单链接在鼠标悬停时显示下划线，键盘聚焦时显示边框，是差异化状态的优秀范例。

色彩对比度

色彩对比度指屏幕上两种颜色的差异程度。

例如Twenty Twenty-Four主题的默认按钮采用深色背景配浅色文字。若改用深色文字，可读性将大幅降低。

非营利组织WebAIM提供的色彩对比度检测工具可帮助评估设计是否符合WCAG 2.0标准——常规文本需达到4.5:1的对比度比率（AA级）。

合适字体尺寸

确保文本易于阅读。

增大字号能提升网站可用性和内容可理解性，正文最小字号不应小于14px。

标签与输入框关联

处理输入元素时，请使用for属性将标签与输入框关联。

<label for="name">Name</label>
<input type="text" id="name" name="name" placeholder="John Smith" />

这样用户点击标签时，对应输入框就能获得焦点。

占位文本使用

开发者常在输入框使用占位文本来示范输入格式，但当用户开始输入时这些文本会消失。

<label for="name">Name</label>
<input type="text" id="name" name="name" placeholder="John Smith" />

错误使用占位文本会导致用户体验和可访问性问题。

正确做法：

• 用占位文本来提示输入格式（而非替代标签）
• 或完全不使用占位文本

描述性按钮

避免使用含义模糊的按钮文字（如”确定”、”提交”）。

采用[动词]+[名词]模式能使操作更明确，例如：

• “提交表单”优于”提交”
• 单篇文章模板中的”发表评论”优于”提交”

延伸阅读

更多主题开发中的UI最佳实践，请参阅WordPress主题开发者手册高级主题章节下的UI最佳实践文档。

有时，您可能需要一种在不更改主题代码的情况下修改或扩展现有主题的方法。

这时，子主题就派上用场了。

在本课中，您将了解什么是子主题、为什么要使用子主题，以及如何创建和使用子主题。

什么是子主题？

子主题是父主题的扩展。

使用子主题可以修改父主题的任何部分，而无需更改父主题代码。

让我们通过一个简化示例来理解其工作原理。

为何使用子主题？

在本地WordPress环境中安装并激活任意WordPress主题库中的主题。

本例中使用的是默认的Twenty Twenty-Four主题。

假设您想自定义主题的某些部分，例如页脚布局和结构。

您希望将网站菜单置于左侧，而网站标志、标题和标语显示在右侧。

同时还需要将页脚版权信息更改为您公司的名称并更新URL。

一种方法是通过站点编辑器实现：找到并编辑页脚模板部件，进行相应调整——移动菜单位置，更新版权信息等。

但若要在其他站点复用这些修改，每次都需要在站点编辑器中手动操作。

当然也可以直接修改Twenty Twenty-Four的页脚图案文件，但主题更新时会覆盖所有更改！

这正是子主题的价值所在。

创建仅包含特定修改的子主题后，激活子主题即可应用变更。

即使父主题（本例为Twenty Twenty-Four）未来更新，子主题中的修改仍会保留。

创建子主题

让我们通过实践来理解子主题的运作方式。

在wp-content/themes目录下创建名为twentytwentyfourchild的空文件夹。

在其中创建style.css文件，并添加以下主题头部信息：

/**
 * Theme Name: Child theme of Twenty Twenty-Four
 * Template:   twentytwentyfour
 */

进入WordPress后台的主题页面，即可看到新创建的子主题。

激活子主题后访问网站前端，外观与之前完全一致——因为所有元素都继承自父主题。

子主题工作原理

所有WordPress主题（除非明确声明为子主题）在技术上都是父主题。

子主题的特殊性在于其style.css文件中定义了Template字段，该字段值必须与父主题文件夹名称（相对于wp-content/themes目录）完全匹配。

本例中，由于Template字段定义为twentytwentyfour，因此成为Twenty Twenty-Four的子主题。

现在可以选择要修改的父主题特定部分。

例如若只需修改页脚，可以在子主题目录的相同相对位置创建footer.html文件。

通过站点编辑器修改页脚模板后，切换到代码编辑器视图复制代码，粘贴至子主题的footer.html文件即可。

值得注意的是，子主题几乎可以扩展父主题的所有部分：模板部件、图案、样式，甚至通过functions.php扩展主题功能。

使用Create Block Theme插件

除了手动创建，还可以使用Create Block Theme插件基于站点编辑器的修改生成子主题。

操作步骤：

1. 激活Twenty Twenty-Four并删除之前创建的子主题

2. 安装并激活Create Block Theme插件

3. 在站点编辑器修改页脚模板部件

4. 点击编辑器右上角插件图标，选择”创建子主题”

5. 命名后点击创建按钮

系统将自动创建子主题并重新加载编辑器。在WordPress后台主题页面可以看到新建的子主题已激活，前端页脚修改也已生效。

延伸阅读

更多关于子主题的信息，请参考《主题开发者手册》”高级主题”章节中的子主题页面，以及”核心概念”章节中关于子主题特定头部字段的说明。

无障碍测试是主题开发流程中至关重要的一环。

它确保安装了您主题的网站能够供所有人使用，无论其能力如何。

本课程将向您介绍一些用于测试主题无障碍性的工具和技巧。

测试、修复、重复

早期且反复测试有助于在发布前发现新组件或页面中的潜在问题。

测试主题的方法

自动化测试

基于Chromium的浏览器在开发者工具中内置了Google Lighthouse。

Lighthouse也可作为独立网页和NPM包使用。

Firefox提供无障碍检查器，Safari提供审计功能。

WebAIM的Wave是适用于Firefox和Chromium浏览器的扩展程序。

Deque Systems的axe是一套无障碍测试工具：包括浏览器扩展、Figma插件、VS Code扩展、代码检查器等。

Pa11y是面向开发者的免费开源替代方案。

WordPress插件 (1:13)

Sa11y、WP Tota11y和Editoria11y是可用于测试WordPress网站无障碍问题的插件。每种插件的检查方式略有不同，建议全部试用以选择最适合的。

最后推荐Accessibility Checker，它能在文章编辑器和前端运行，不仅能标记错误，还提供详细说明（含相关代码片段）和修复建议。虽然功能强大，但目前仅在生产环境稳定运行。

手动测试

此外还可进行以下手动测试：

• 仅用键盘（不用鼠标）操作主题：使用Tab键在链接/按钮/表单字段间切换，用回车或空格键激活交互元素
• 通过浏览器开发者工具切换配色方案，确保深色模式/高对比度模式下的显示效果
• 使用设备内置语音控制或专用屏幕阅读器浏览网站——这是视障用户的主流上网方式，有时甚至是唯一方式

结语

将”无障碍优先”的开发理念与正确的测试工具相结合，才能创建出真正全民可用的网络主题。

基础原则

HTML本身具备强大的无障碍特性。

您可以亲自尝试：打开代码编辑器创建一个符合规范的HTML页面——正确使用地标、标题、文本、按钮、链接、表单等元素。如果愿意，可以直接使用下方代码示例。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My website</title>
</head>
<body>

<header>
    <h1>Welcome to My Website</h1>
    <nav>
        <ul>
            <li><a href="#home">Home</a>
            <li><a href="#about">About</a>
            <li><a href="#services">Services</a>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
</header>

<main>
    <article id="home">
        <h2>Home</h2>
        <p>This is the home section where introductory content can be found.</p>
        <form name="Just a button">
            <button type="button">Click Me!</button>
        </form>
    </article>

    <article id="about">
        <h2>About</h2>
        <p>This section contains information about the website or the person/company behind it.<p><a href="https://example.com">Visit their full profile</a></p>
    </article>

    <article id="services">
        <h2>Services</h2>
        <p>Details about the services offered can be found here.</p>
    </article>

    <article id="contact">
        <h2>Contact</h2>
            <form action="#" method="post" name="contact" autocomplete="on">
                <fieldset>
                    <legend>Let's chat</legend>
                    <div><label for="name">Name:</label></div>
                    <div><input type="text" id="name"></div>
                    <div><label for="email">Email:</label></div>
                    <div><input type="email" id="email"></div>
                    <div><label for="message">Message:</label></div>
                    <div><textarea id="message" rows="4" cols="50" spellcheck="true"></textarea></div>
                    <div><input type="submit" value="Submit"></div>
                </fieldset>
            </form>
        </article>
</main>

<footer>
    <p>© 2024 My Website</p>
</footer>

</body>
</html>

然后通过Web Accessibility Checker等在线无障碍检测工具运行代码，您会发现它检测不到任何无障碍问题。

问题通常出现在后期添加样式、脚本或媒体资源时。作为现代WordPress主题开发者，您将主要处理这些技术——基于React的区块、PHP注入的模板模式，以及从theme.json编译的CSS。

关键在于编码和设计时始终保持无障碍意识。

语义化HTML

与其用<div>包裹所有内容，不如充分利用HTML的语义化元素。这能避免重复造轮子的尴尬。

地标元素

地标元素用于定义页面结构，帮助屏幕阅读器更轻松地导航内容。

例如，与其定义一堆带class的div：

<div class="header">
    <h1>Welcome to My Website</h1>
</div>

<div class="nav">
    <ul>
        <li><a href="#home">Home</a>
        <li><a href="#about">About</a>
        <li><a href="#services">Services</a>
        <li><a href="#contact">Contact</a></li>
    </ul>
</div>

您可以为相关区块使用地标元素。

<div class="header">
    <h1>Welcome to My Website</h1>
</div>

<div class="nav">
    <ul>
        <li><a href="#home">Home</a>
        <li><a href="#about">About</a>
        <li><a href="#services">Services</a>
        <li><a href="#contact">Contact</a></li>
    </ul>
</div>

如果在站点编辑器中设计主题，也可以直接设置地标：选中区块后，在区块设置的”高级”选项中，根据功能将HTML元素设为header/main/section/article/aside/footer。

标题层级

添加模板标题时，请始终从H2开始按降序使用标题层级。在站点编辑器中可通过”文档概览>大纲”检查层级是否连贯。

按钮与链接

设计用户操作时请注意：

• 需要触发操作时使用button元素
• 需要跳转页面时使用a标签
• 若链接需要按钮样式（如着陆页的号召性用语），通过CSS实现

表单设计

设计表单时请遵循：

• 始终用form元素包裹
• 为input设置正确的type和匹配属性（如tel类型会在移动端显示数字键盘）
• 不要依赖占位文本说明，必须提供可访问标签
• 搜索表单使用search元素
• 登录表单可使用autocomplete属性帮助密码管理器自动填充

<input type="tel" name="phone" id="phone" required>

浏览器默认会为获得焦点的元素显示焦点环。如需修改样式，请使用:focus-visible伪类，切勿完全移除焦点环。

色彩与排版

色彩对比

必须创建具有足够对比度的无障碍配色方案。编辑模板时，WordPress会提示不符合要求的文字/背景色组合。

不要仅靠颜色传递信息。例如链接应有颜色之外的标识，焦点状态同理。不确定时，参考默认HTML链接和焦点样式。

排版规范

• 使用rem等相对单位设置字体大小，避免px
• 将内容宽度限制在50-70个字符（推荐使用ch单位）
• 根据字体大小设置合适的行间距

尊重用户偏好

媒体查询是响应式设计的基石。其中prefers-color-scheme和prefers-reduced-motion等类型专门针对无障碍优化，而pointer/hover/scripting等查询则根据用户设备调整组件行为。

ARIA解决方案

ARIA（无障碍富互联网应用框架）常被视为快速提升屏幕阅读器兼容性的方案。但其核心原则是：仅在绝对必要时使用。理想情况下应优先使用HTML原生语义。

误用的ARIA属性反而会降低可访问性。除非无法控制HTML或需要处理动态内容，否则应避免使用。更多信息请参考MDN的WAI-ARIA基础知识章节。

总结与延伸阅读

无障碍优化永无止境。即使微小改进也能显著提升访客体验，且绝无负面影响。

推荐访问W3C网络无障碍倡议(WAI)教程章节深入学习。