如果您在过去几周访问过 WPBeginner,那么您可能会注意到我们有了新的网站设计。虽然它与上一个有很多相似之处,但幕后有很多变化。

正如我在时事通讯中所承诺的那样,我想分享我们重新设计背后的思考过程、我们学到的东西、网站上的新内容,以及最重要的是,您可以如何利用我们的一些经验来改进您的网站。

一些背景

我于 2009 年创建了 WPBeginner,和大多数新创作者一样,我在前 3 年里四次更改了我们的网站主题设计。

随着我的业务不断发展,我意识到网站重新设计会占用大量时间和资源,而这些时间和资源本可以更好地用于完成我们的核心使命:

通过我们的工具、团队和培训帮助小型企业发展并与大型企业竞争。

因此,我将所有精力集中在我们的核心使命和业务上ness 大幅增长。

WPBeginner 的最后一次重新设计是在 2016 年推出的,从那时起我们已经取得了长足的进步。

以下是过去 5 年发生的事情:

  • 我们在 WPBeginner 博客上创建了一千多个免费 WordPress 教程,并在我们的 YouTube 频道上添加了数百个新视频教程。
  • 我们推出了 WPBeginner Engage Facebook 上的社区,目前是最大的 WordPress Facebook 群组,拥有超过 80,000 名成员(免费加入)。
  • 我们推出了 WPBeginner Growth 基金来投资一些我们最喜欢的 WordPress 插件,包括 MemberPress、Pretty Links、强大的形式、不可思议的自动机和其他 6 个。
  • 我们推出了两个新的 WordPress 插件:TrustPulse(一个 WordPress 社交证明插件)和 RafflePress(一个强大的 WordPress 赠品和竞赛插件)。
  • 我们购买了五个 WordPress 增长插件,包括著名的 AIOSEO (WordPress 的全合一 SEO 插件),SeedProd(拖放式 WordPress 网站构建器)、Smash Balloon(#1 社交媒体提要插件)、PushEngage(网站推送通知插件)和 AffiliateWP(WordPress 联盟管理插件)。
  • 我们还购买了五个WordPress 平台和基础设施插件,包括著名的 WP Mail SMTP 插件(用于修复电子邮件传递能力)、SearchWP(强大的 WordPress 搜索插件)、Easy Digital Downloads(用于销售数字产品的流行电子商务插件)、WP Simple Pay(用于接受信用卡的简单插件)付款)和 Sugar Calendar(WordPress 的简单事件日历插件)。

目前,我们的插件总共被超过 1900 万个网站使用,并且我们的 4 个插件名列有史以来排名前 20 的 WordPress 插件。

虽然所有这些都是伟大的成就,但我们仍然面临着一系列新的挑战需要解决,以便我们能够继续改进并服务于我们的使命。

这让我进入 WPBeginner v6。

设计注重内容的可发现性

WPBeginner 最初是一个简单的教程博客,但它已经真正成为 WordPress 的维基百科。

我们的用户反复告诉我们,当他们想要找到 WordPress 问题的答案时,他们只需 Google 关键字并在末尾添加 WPBeginner 即可找到最佳解决方案。

为了帮助我们的读者快速找到 WordPress 问题的答案,我们在新主页上重点关注了搜索功能。

无论您是搜索我们内容库的回访者,还是刚刚开始使用 WordPress 的新读者,WPBeginner 的主页现在都可以让您轻松找到所需内容。

当您单击搜索图标时,您还会在所有单个帖子页面的侧边栏中以及我们的网站标题上注意到类似的搜索小部件。

WPBeginner 成为最大的 WordPress 资源的原因之一网站适合非技术用户的原因是我们用简单的英语逐步解释复杂的 WordPress 主题。

在新设计中,我们在 WordPress 术语表部分添加了实时搜索功能,因此您可以轻松熟悉常见的 WordPress 术语。这基本上就像一本 WordPress 术语词典。

作为 WPBeginner 用户,您可以独家获得流行插件、高级主题、托管和其他营销工具的最佳 WordPress 折扣。

我们的团队确实在为您协商最优惠的交易方面做得非常出色,并且该部分已发展到拥有超过 100 多个优惠券和交易。

由于广大用户的要求,我们还在“优惠”部分添加了实时搜索,以便您可以快速找到您喜爱的 WordPress 产品的最佳优惠。

进入 2022 年,我们的首要任务是内容的可发现性。

这有助于我们提供最佳的用户体验、增加网站停留时间、提高综合浏览量s,并降低我们的整体跳出率。

我相信,到 2022 年,用户体验优化 (UXO) 将在 SEO 中发挥关键作用。

如果你想击败竞争对手并获得竞争优势,我强烈建议关注UXO。

我将在本文中分享有关如何在您的网站上实现类似功能的提示,就像我们在新主题中所做的那样。

如何改进 WordPress 搜索

默认的 WordPress 搜索功能不是很强大,因此如果您想自定义排名算法并控制每次搜索显示的内容,我建议使用 SearchWP 插件。

或者,您也可以使用 Google 自定义网站搜索,它使用 Google 算法,但缺点是 Google 会在您的搜索页面上显示广告,看起来不太好。

如果您希望在您的网站上添加实时搜索,就像我们在“优惠”部分或术语表中所做的那样,那么请按照本教程了解如何在 WordPress 中添加 AJAX 实时搜索。

您可能会发现有用的其他 WordPress 搜索教程包括如何创建自定义 WordPress 搜索表单以及如何在 WordPress 菜单中添加搜索栏。

新的 WordPress 超级菜单

沿着内容可发现性的主题,我们将旧的 WordPress 下拉菜单升级为新的多列超级菜单。

这使我们的新用户能够快速轻松地找到我们最好的内容。

它还使我们能够更好地突出我们的新产品、我们正在构建的免费商业工具等等。

如何在 WordPress 中添加超级菜单

尽管我们已经为 WPBeginner 构建了自定义解决方案,但您可以按照本教程了解如何在 WordPress 中添加大型菜单以更好地突出显示您的首页。

WordPress 块编辑器(最后)

2019年,WordPress推出了super pow用于创建内容的erful块编辑器(又名古腾堡)。

我立即开始在我的个人博客上使用它,但由于 WPBeginner 使用的是具有大量自定义编码功能的旧主题,因此切换并不那么容易。

因此,在过去的两年里,我们一直在 WPBeginner 网站上使用经典编辑器,而我们所有的新网站都获得了 WordPress 块编辑器的最新、最强大的功能。

最后,通过我们的新主题,我们现在可以使用 WordPress 块编辑器的所有出色功能。

例如,现在我可以添加一个非常酷的“你知道吗”块,而无需编写任何代码:

WPBeginner – 有趣的事实:

我们的团队现已发展到超过 200 人,遍布 39 个不同的国家/地区。我们正在招聘全职远程职位。如果您有兴趣,请查看我们的“职业”页面。

我们还使用 WordPress blo 彻底重新设计了几个登陆页面ck 编辑器。

例如,查看我们新的免费 WordPress 博客设置登录页面。

我们还使用块编辑器重新设计了我们的免费商业工具,以突出显示我们最近构建的一些免费工具。

我们仍将在需要时使用 SeedProd 创建完全自定义的登录页面,因为它是一个合适的拖放 WordPress 页面构建器。

虽然学习如何使用古腾堡创建自定义登录页面很有趣,但在营销团队创建自定义登录页面之前,仍然需要进行大量的设置编码。

而当您使用页面构建器插件时,营销团队可以快速创建自定义登录页面、渠道布局等,而无需开发团队的任何帮助。

WordPress 核心团队正在努力开发全站编辑功能,但它仍然需要大量工作才能与 SeedProd 等页面构建器所提供的强大功能竞争,Divi,或 Beaver Builder。

话虽如此,块编辑器非常棒,并且有很多 WordPress 块插件可以用来创建很酷的设计元素来增强您的内容。

这是我们的新主题的另一个很酷的块,用于突出显示特色插件:

SeedProd 是最适合初学者的 WordPress 拖放页面构建器。它配备了超过 150 个预制模板,其主题生成器功能允许您构建完全自定义的 WordPress 主题(无需任何代码)。立即尝试 SeedProd »

在接下来的博客文章中,我相信您会看到更多内容设计块,我们必须进一步增强内容的可读性。

从 Yoast 切换到 AIOSEO

在很长一段时间里,WPBeginner 网站使用的是非常旧的自定义版本的 Yoast SEO 插件 (v 2.3.5)。

从长远来看,他们使用的是版本 17。现在。

我不想更新 Yoast,因为他们的团队删除了一些我认为对 SEO 很重要的基本功能。

我还觉得整个 WordPress SEO 空间已经停止创新。

因此,2020 年初,我们收购了 AIOSEO,这是一款原始的一体化 SEO 插件,我让我的团队对其进行了彻底改造。

我对我们团队所做的工作感到非常自豪,它拥有获得竞争优势所需的所有 SEO 功能。

与块编辑器一样,我们的新网站开始切换到 AIOSEO 并开始看到它们的排名有所提高,因此我渴望开始在 WPBeginner 上使用它。

现在,我们正在使用 All in One SEO 中最新、最强大的 SEO 功能。

我们现在拥有视频站点地图等功能,可帮助提高我们的视频内容排名,RSS 站点地图可帮助我们的内容更快地编入索引,高级 SEO 模块可对我们的网站 SEO 进行更精细的控制,等等。

我坚信它是市场上最好的 SEO 插件,最重要的是,它的价格对于小型企业和机构来说相当公平。

我计划在接下来的几周内写一篇完整的文章,说明为什么我们要进行详细的功能细分,但与此同时,您可以尝试 All in One SEO 的免费版本,或者查看具有以下功能的 Pro 版本:我在 WPBeginner 上使用的所有强大功能。

WordPress 速度改进

大量研究表明,速度更快的网站可以改善用户体验、增加网站停留时间和整体转化率。

这也是 Google 将网站速度作为 SEO 排名因素的原因。

如果您已经关注该网站一段时间了,那么您就会知道我对性能优化非常着迷。

由于我们出色的 WordPress 托管合作伙伴 SiteGround,WPBeginner 网站已经相当快了。他们提供高度优化的 WordPress 托管构建在 Google 云平台之上的解决方案。

当然,我们遵循了 WordPress 速度最佳实践,但通过新的主题设计,我们取得了一些显着的速度改进。

这是我们的 Google Page Speed 结果:

这是 GTMetrix 和 Pingdom 主页的结果:

尽管添加了新的部分、主页更多内容、更宽的图像等,我们还是得到了这个结果。

在你问之前,WPBeginner 网站目前有 68 个活跃插件。

所以您可能想知道我是如何设法在网站上添加更多内容,同时减小页面大小并使一切变得更快?

嗯,我删除了我认为不再需要的东西,这些是我真正希望更多网站所有者也考虑做的事情。

这不仅有助于加快您的网站速度,从而有助于 SEO 排名,而且会减少您的整体带宽消耗、降低成本并提高您网站的碳足迹。

禁用 WordPress 评论中的 Gravatar

WordPress 附带了一个内置的第三方服务,称为 Gravatar,是“全球公认的头像”的缩写。

这使您可以在用户在您的 WordPress 网站上留下评论时看到他们的个人资料照片或头像。

挑战在于,它要求您的网站访问者设置一个 Gravatar 帐户,而大多数用户不需要。因此,您的网站只是加载灰色神秘人头像,这看起来不太好。

现在假设您有一篇热门博文,有 50 条评论,其中只有 10% 的用户拥有 Gravatar 图像,而 90% 的用户没有。好吧,您的页面正在加载 50 张额外的图像,但它们实际上并没有给内容增加显着的价值。

这就是为什么许多热门博客开始禁用 Gravatar,我们也在 WPBeginner 上做同样的事情。

T他的简单改变极大地提高了我们的页面加载时间和网站速度得分。

删除第 3 方自定义字体

说实话,我过去从来没有考虑过自定义字体。

这感觉很正常,并且从排版的角度来看,使网站看起来不错,至少如果你足够幸运拥有快速的互联网的话。

在旧的 WPBeginner 主题中,我们使用了名为 Proxima Nova 的自定义 Adob​​e 字体、名为 FontAwesome 的流行图标字体,而我们的 OptinMonster 弹出窗口则使用 Google 字体中的 Source Sans Pro。

当我从互联网质量较差的远程位置访问该网站时,我真正意识到这些字体对用户体验的性能影响有多大。

在我们的新设计中,我想解决这个问题,这样我们就可以让发展中国家的学生和企业主轻松访问 WPBeginner、学习 WordPress 并扩大他们的在线影响力e.

新的 WPBeginner v6 主题使用默认的系统字体,这些字体已经取得了很大的进步。它们在所有设备上看起来都很棒,当然速度也超级快。

没有无样式文本的闪烁 (FOUT),没有累积布局偏移 (CLS),并且显着减少了阻塞时间。

如果您登录 WordPress 仪表板或使用 Github,那么您会注意到我们的字体很相似,因为这两个平台都更早地切换到系统字体。

虽然删除自定义字体可能不是所有商业网站的可行解决方案,但我认为设计师和开发人员在速度方面绝对应该注意这一点。

一些可以提供帮助的最佳实践:

  • 不要对标题和内容使用两种单独的字体,而是考虑对两者使用相同的字体。
  • 不要使用多种不同的字体粗细和样式例如细、常规、半粗体、粗体、超粗体、b缺少,然后是所有这些的斜体版本,请考虑将字体粗细减少到只有两种:常规和粗体。
  • 不要加载整个 FontAwesome 或其他图标字体库,而是考虑添加图标的直接 SVG你需要。

在 OptinMonster 中禁用自定义字体

主题设计和编码完成后,我还需要解决一个字体问题。

我的网站弹出窗口和电子邮件订阅表单使用 OptinMonster,并且它们仍在加载 Google 字体。

现在禁用 OptinMonster 不再是一个选择,因为它可以帮助我获得更多电子邮件订阅者并提高我们的网站转化率。

幸运的是,这是我的公司之一,所以我向开发团队询问了禁用 Google 字体的解决方案。

事实证明,我并不是第一个请求此功能的人,OptinMonster 已经有了一个 API 解决方案,不仅可以禁用 Google 字体,还可以加载您自定义的任何自定义 Web 字体想要。

我相当精通技术,可以实现团队在文档中共享的小片段,但我知道我们的许多客户都不是。

现在我们的团队实际上已经在活动构建器中构建了此功能(无需编码)。

但是,如果您熟悉代码并且不想为每个广告系列手动关闭此设置,则可以按照我正在使用的技巧进行操作。

首先添加以下 JS 片段以禁止 OptinMonster 加载您网站上的任何网络字体:

document.addEventListener(‘om.Scripts.init’, function(event) {
event.detail.Scripts.enabled.fonts= false;
});

由 WPCode 与 ❤️ 主办

在 WordPress 中一键使用

接下来,在 style.css 文件中添加以下 CSS:

html .Campaign * { font-family: “Proxima Nova”, Helvetica, “Helvetica Neue”, Arial, sans-serif !imp或现; }

由 WPCode 与 ❤️ 主办

在 WordPress 中一键使用

当然,不要忘记更改字体以匹配您的网站字体。这基本上会将上面的字体系列应用于您网站上加载的所有 OptinMonster 活动。

从 W3 Total Cache 切换到 WP Rocket

在最长的时间里,我在 WPBeginner 上运行 W3 Total Cache 插件的高度自定义配置。

虽然它完成了工作,但它无法与我们在所有产品网站上使用的 WP Rocket 相媲美。

通过这次重新设计,我最终转向了 WP Rocket,它具有很多出色的网站速度功能,最显着的是可靠的缓存预加载和文件缩小功能。

如果您想提高网站速度,这个插件至关重要。

请注意,如果您使用 ThirstyAffiliates 或 Pretty Links 来管理您的联属链接,请确保将它们排除在外正在缓存。

只需转到“高级规则”选项卡,然后在“从不缓存 URL”设置下添加您的联属营销链接即可。

如果您不这样做并且启用了缓存预加载,那么 WP Rocket 将尝试缓存您的联属链接,因为它们看起来像内部链接。

这可能会人为地增加您的点击次数并影响您的联属网络营销指标。

我已经要求 WP Rocket 团队看看他们是否可以自动检测流行的联盟插件并预填充排除的 URL 标签以使其对初学者更加友好,我希望他们实施该建议。

接下来会发生什么?

我对 2022 年有宏伟的计划,因此我希望在今年年底之前启用新的网站设计。

我们计划在 WPBeginner 上推出一个全新的部分,这是很多人在过去两年里一直询问的问题。

即将推出,希望能在开始时推出2022 年第二季度的宁日。

我还计划在新的块编辑器中进行更多尝试,为您创造更好的整体阅读体验。

除此之外,请关注我们的 YouTube 频道,因为我们将在 2022 年在那里做一些非常酷的事情。

一如既往,我要感谢大家多年来持续的支持和反馈。

此致,Syed Balkhi WPBeginner 创始人

By

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注