Whitehouse.gov再次选择WordPress

2021-01-24 09:27:32

随着行政管理的变化,出现了一个新网站,今天早晨,全新的Whitehouse.gov首次亮相。与其前身一样,该网站均由WordPress提供支持-但是该版本具有许多差异和现代的即用型功能,我们很高兴看到在如此庞大的网站上使用这些功能。

Pagely市场总监Dave Amirault和宣传部长Jeff Matson花费了一些时间来收集对该网站的第一印象。

就个人而言,我很喜欢简洁而集中的设计,而新的Whitehouse.gov在这两个方面都提供了帮助。图片是干净的,没有被过度使用,并且可以补充页面上的内容,而不是过度使用。该网站的导航非常简单,它会尽力引导用户进行网站分类。

一个面向所有人的网站应该可以被所有人看到,而Whitehouse.gov所做的出色工作使该网站的可访问性功能成为用户的关注焦点。众所周知,网站可访问性是不断改进的源泉,他们甚至竭力在网站的“可访问性声明”中加以解决。

在2021年,没有一个或两个复活节彩蛋的网站是什么?检查网站的源代码,美国数字服务将向您发送此招聘信息。

马特·穆伦维格(Matt Mullenweg)在他的博客上发现了另一个与此相关的复活节彩蛋–深入主题主题的CSS文件中,您会找到理想的版本号。

通过深入研究正文内容的标记,我们注意到整个网站都在使用Gutenberg编辑器。尽管看起来确实在某些地方使用了自定义块(在样式中找到了一个或两个引用),但最终还是在整个内容中使用了标准的段落和图像块。

古腾堡的怀疑者要注意-古腾堡的编辑经验被选为这种能力的网站。

查看主题,虽然它可能使用了我无法识别的入门主题,但看起来似乎都是定制的。

无论该主题运行在幕后是什么,它都精心打造,高效且易于访问。至少从前端来看,这是WordPress主题应该是一个很好的例子。

很难说出在此特定WordPress网站上使用了哪些插件,因为唯一要加载的资产被编译到主题中并保持在最低限度。但是我可以识别一些不同的插件。

为了创建和管理表格,新的白宫网站似乎正在使用TablePress。由于源地图的存在和一些SCSS文件的命名,这个文件很快就被发现了。我无法在网站上找到使用它的任何地方,但是有一些与之特别相关的样式。

编辑:我听说没有使用TablePress。返回并查看网站上的当前样式时,我不再看到对TablePress的引用。可能是偶然将其留在了那儿,后来又将其删除了。

在研究期间,我已将样式表/源地图保存在本地。回过头来,我已经确认我的眼睛不仅仅是在玩弄我,而且源地图中确实存在一个Sass部分,名为components / _tablepress.scss。我已将这些文件上传到GitHub要点,以备将来参考。

我也能够确定他们正在使用XWP的流来记录对网站的更改,这要归功于源中的一条评论让我大吃一惊。

通过查看网站的sitemap.xml文件,可以看出新的白宫网站正在使用Yoast SEO插件,大概是用于元标记,结构化数据和站点地图生成的事情。

我敢肯定,该网站上有许多用于各种不同目的的自定义和现成的插件正在运行。也许他们会随着时间的流逝而展现自己。

通过浏览正在加载的CSS和JavaScript文件,我们可以看到该站点的很大一部分是建立在Bootstrap,jQuery和Sass之上的。得益于Sourcemap的奇妙之处,我们能够查看每个编译的样式表,以了解幕后情况。

根据我们从源地图中收集的信息,Bootstrap主要用于布局和响应式设计(Bootstrap Grid),尽管此处可能还会使用Bootstrap的其他一些组件。

当然,在加载所有这些样式之前,至关重要的一点是,必须对样式进行清理/标准化,以确保各个浏览器之间的内容保持一致。为此,他们使用的是sanitize.css,虽然是较旧的版本,也可能是fork,但由于链接到10up的文件顶部有注释,因此使用。

一切都可以使用Sass很好地编译在一起,并带有大量变量和mixin以使其可维护。由于专注于可访问性,所以绝对需要Sass或其他预处理器(如LESS)。这里有太多与可访问性相关的样式,如果没有样式,将使其成为噩梦。

在这个崭新的白宫网站上,他们使用2种不同的网络字体:Mercury ScreenSmart用于衬线字体,而Decimal用于无衬线字体。出于好奇,这里是Sass变量。

正如我们之前提到的,这里非常重视可访问性。这确实体现在他们在调色板中的选择上,其中一些选项专门针对不同的辅助功能选项。

调色板也是Sass在此提供的另一个巨大好处。由于调色板都是可变的,因此随时可以使用可访问性变量作为主调色板的替代方案。

就断点而言,除了标准的Bootstrap断点之外,这里没有太多其他内容。尽管它确实表明,Bootstrap中使用的断点是大多数站点应作为最佳实践的目标。

在每个页面的底部,您会看到一份新闻简报选择表单。此表单(或至少是后端邮件列表)似乎由MailChimp提供支持。他们是否使用插件来嵌入表单还是将其直接放置在主题模板中是未知的,但是肯定是MailChimp嵌入了带有自定义表单处理程序的代码,该代码将传递到forms.whitehouse.gov。

快速浏览WordPress REST API端点表明他们将其锁定在基本HTTP身份验证之后。

我的猜测是大幅度降低REST API可在漏洞利用程序中使用的可能性。如果他们没有将其用于任何用途,请将其锁定。尽管这是一种比其他方法(例如RSS提要或标记的原始抓取)消耗内容的好方法。

在浏览该网站时,我注意到,除了通过美国政府的分析程序完成的标准Google Analytics(分析)跟踪(检查一下-那里有一些很酷的数据)之外,他们还使用了其他一些浏览器测试工具。

首先是New Relic的浏览器监视工具。尽管在监视您的活动的任何事物中总有邪恶的可能,但这可能是由于用户体验测试所致。尤其是在一个全新的,以可访问性为中心的网站上,该网站以无穷无尽的变量在全球范围内查看,浏览器监视对于确定任何修复问题而言可能是至关重要的资产。

第二个类似的监控工具可能是Akamai的mPulse实时性能跟踪,并且可能与此相关。我最好的猜测是,他们正在使用mPulse来获取性能数据,并使用New Relic Browser来获取UX数据。

多亏了一些样式表,我注意到了一个名为“ _home-dayone.scss”的部分。从此命名来看,首页在就职日之后似乎将发生变化。我们只需要拭目以待!

总体而言,我们在这个新网站上看到了一些很棒的东西。仅举几例,我们注意到:

非常高兴将WordPress视为白宫的首选平台,特别是因为开发人员正在利用古腾堡的优势。我们会看到WordPress进入其他著名的政府网站吗?只有时间证明一切。

除了政治派别,我想今天我们都可以放心一点,因为他们知道他们没有选择Drupal。

下次我评论时,请在此浏览器中保存我的姓名,电子邮件和网站。