fabiha01 發表於 2025-5-8 14:45:03

我们从构建可访问的古腾堡友好主题中学到了什么

我们的姊妹公司 CampusPress 构建了一个新主题。让我们来看看我们构建这个主题时使用的开源工具以及我们选择它们的原因。
学院公告 1500@2x
WPMU DEV 的团队与 CampusPress 背后的团队是同一个团队,后者为学校和大学提供托管和 WordPress 服务。

昨天,我们发布了最新产品,一个适用于学校和教育的灵活且易于访问的 WordPress 主题。

这是我们的团队创建的第一个主题,它真正融合了 Gutenberg 块编辑器所提供的一切功能 - 例如可重复使用的块、编辑器样式、内容组和自定义默认块。

粉饰太平毫无意义,这个项目并没有我们想象的那么快,也没有那么简单。但最终的结果非常值得。我们想在这里分享一下我们创作这个项目的原因和过程。这应该对未来选择、设计或开发新 WordPress 主题的任何人都有帮助。

一些背景故事
CampusPress 徽标
我们与全球数以万计的学校和学院合作。从学生博客、电子作品集、新闻网站,到大型大学的主网站,应有尽有。例如,bulletin.hds.harvard.edu和charlestonsouthern.edu就是其中两个例子。

并非每个网站都需要(或能够负担得起)定制设计和开发。但我们的客户主要有三个需求,而且这些需求往往相互冲突:

任何人都可以轻松发布、编辑和创建内容
超越所有无障碍指南
遵守品牌指南,如标识、颜色、字体等。
创建或找到满足其中一两个要求的主题相当容易,但要确保满足所有三个要求,爱尔兰商业传真列表 则是一个全新的挑战。虽然我们还有一些工作要做(详见下文),但我们对结果非常满意。

选择我们的开发堆栈
在开始开发之前,我们花了不少时间确定想要包含的具体功能,并研究了市面上各种不同的框架和工具。我们没必要完全从零开始。

我们的重点是寻找能够帮助我们实现可访问性、性能和用户友好性目标的最佳现有工具和框架。

作为基础,我们选择了UnderStrap,它本身基于 Automattic 的“Underscores”主题和 Twitter 的 Bootstrap 框架。这是一个非常流行的框架,其受欢迎程度显而易见。从 UnderStrap 入手缩短了开发时间,并极大地帮助我们实现了无障碍访问的目标。

我们还知道,我们希望高度依赖 WordPress 定制器来处理所有不同的主题选项和设置。我们爱上了Kirki 框架,并充分利用了它提供的诸多控件。

我们的主题使用了CSS 变量,这也使得开发更加轻松快捷(JavaScript 代码量大大减少,性能也得到了提升)。需要注意的是,这需要特殊的脚本才能在 IE11 中运行(我们不少客户都在使用 IE11),而且并非所有功能都能在 IE11 中使用。

对于字体选项,我们最初在定制器中提供了许多免费的 Google 字体。但我们需要加载所有变体和样式(粗体、斜体等),加载起来会很繁琐,所以我们决定完全不包含 Google 字体,而是只添加免费的可变字体。可变字体提供了足够多的现代字体变体,可以为最终用户提供丰富的选择。

最后,我们学校的客户非常喜欢图标。Iconmoon让我们可以轻松地从免费图标中选择(但我们尽量不添加太多图标,以免降低网站速度或让用户感到不知所措)。因此,我们可以轻松地为菜单和内容块添加和自定义图标。

值得一提的是,我们对WordPress 5.4 中的新钩子功能尤其感到兴奋,它允许我们在定制器中为菜单添加自定义图标选项。目前,用户如果想要管理图标,必须前往“外观”>“菜单”,尽管他们可以直接在定制器中使用菜单进行其他操作。这项 WordPress 核心新功能将极大地提升可用性。

最受欢迎的鲜为人知的古腾堡功能
使用这个主题也是我们团队中许多人第一次使用 Gutenberg 区块编辑器的重要体验。我们对一些鲜为人知的功能非常着迷,并且也通过主题进行了增强。

可重复使用的块


頁: [1]
查看完整版本: 我们从构建可访问的古腾堡友好主题中学到了什么

一粒米 | 中興米 | 論壇美工 | 設計 抗ddos | 天堂私服 | ddos | ddos | 防ddos | 防禦ddos | 防ddos主機 | 天堂美工 | 設計 防ddos主機 | 抗ddos主機 | 抗ddos | 抗ddos主機 | 抗攻擊論壇 | 天堂自動贊助 | 免費論壇 | 天堂私服 | 天堂123 | 台南清潔 | 天堂 | 天堂私服 | 免費論壇申請 | 抗ddos | 虛擬主機 | 實體主機 | vps | 網域註冊 | 抗攻擊遊戲主機 | ddos |