在设计 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最佳实践文档。