如何使用任何 WordPress 主题创建单页网站

我们收到很多关于如何制作一页网站或我们是否出售一页 WordPress 主题的问题。 让我从一开始就回答这两个问题。 每个 WordPress 主题都可以是一个单页网站，我将向您展示它是多么简单。

什么是单页网站？

一页网站只不过是一个在单个页面上包含所有基本内容的网站，通常是主页。

它主要用于希望以清晰直接的方式推广单一产品或服务的企业。 一些示例包括向您的客户展示投资组合、组织活动或开展新业务。

在单页网站上，单击导航链接不会将您发送到新页面，但会在同一页面上跳转或向下滚动到与链接连接的内容部分。 这可以使用户体验更好，并提高用户参与度。

网上有许多单页 WordPress 主题，但就像我已经说过的那样，我们可以将任何主题变成单页浏览器，只需一点点工作。

如何使用 WordPress 创建单页网站？

锚链接

对于一个基本的单页网站，我们只需要一个菜单、内容和锚链接。 相信大家都知道menu和content是做什么的，那么我们就来说说anchor links吧。 锚链接由指向锚和锚本身的普通链接组成。 指向锚点的链接是普通链接，以#字符开头。 并且锚点本身是您页面上某处的特定位置。 让我们看一个简单的例子。

这是菜单中指向锚点的链接：

 <a href="#middle">Go to the middle</a>

这是我们与锚本身的内容：

 <h1>Learning about anchor links</h1> <p> Some lorem ipsum content ….</p> <h2>Middle of the page</h2> <p> Some lorem ipsum content ….</p>

在这种情况下， #middle是我们的锚链接， id=”middle”是我们的锚。 当我们点击“Go to the middle”链接时，我们将跳转到标题为“Middle of the page”的锚点。 而已！ 这就是我们如何制作最基本的一页网站的方法。 您可以在网站上添加任意数量的锚点。 让我们把我们新获得的知识用在 WordPress 网站上。

使用 WordPress 菜单创建锚链接

出于这个目的，我已经用我们的 GrowthPress 主题制作了一个简单的单页网站，这将是我们的实际示例。 首先，我创建了一个新页面并添加了一些内容。 内容仅包含一些段落和标题。 我们几乎可以在任何 HTML 元素上添加锚点，但在我们的例子中，我们会将其添加到内容中的所有标题中。

您可以从屏幕截图中看到，为了编辑内容的 HTML，我们需要将编辑器从 Visual 更改为 Text。 我们现在可以看到内容中的所有 HTML 标签。 在我们的例子中，所有标题都使用<h2>标签，我们将使用它们来添加锚点。 就像上面的屏幕截图一样，您需要在这些标签上添加带有锚点的 id。 例如： <h2 id=”our-anchor”>Some Title</h2> 。 请注意，锚点不带# ，但所有锚链接都必须以#开头。 一旦我们在内容中添加了所有锚点，我们就可以将它们与锚点链接连接起来。

如果您熟悉 WordPress，您就会知道我们可以在 wp-admin -> Appearance -> Menus 中更改菜单链接，这正是我们创建锚链接的地方。

从屏幕截图中，您可以看到我选择了自定义链接，而不是经典 URL，我添加了#about-us锚链接。 单击该链接现在将跳转到内容中的锚点id=”about-us” 。 一旦我们添加了所有的锚链接，我们简单的一页网站就完成了。 单击新创建的链接并亲自查看！

平滑滚动

是的，我完全同意，我们到目前为止所做的单页网站很棒，但是那些即时跳转不如平滑滚动那么棒，对吧？ 为了实现平滑滚动，我们需要在我们的网站上添加一点 javascript 代码。

大多数高级主题都有某种用于添加自定义代码的字段。 例如，在我们的主题中，您可以转到 wp-admin -> Customizer -> Theme Options -> Custom Code，您可以在其中找到可用于添加一些自定义代码的字段，就像我们现在所做的那样。

如果您的主题没有自定义代码的位置，您可以使用合适的插件。 我会推荐 WPBeginner 的插入页眉和页脚插件。 激活插件后，您将在 wp-admin -> 设置 -> 插入页眉和页脚中找到添加自定义代码的字段。

将下面的代码粘贴到其中一个字段中（我们建议在页脚设置中使用脚本），现在您可以在锚链接上平滑滚动。 恭喜！ 您刚刚使用任何 WordPress 主题创建了一页网站！

 <script> ( function( $ ) { $(document).on('click', 'a[href*="#"]:not([href="#"])', function(e) { if (location.pathname.replace(/^\//,'') === this.pathname.replace(/^\//,'') && location.hostname === this.hostname) { var hashStr = this.hash.slice(1); var target = $(this.hash); target = target.length ? target : $('[name=' + hashStr +']'); if (target.length) { $('html, body').animate({ scrollTop: target.offset().top }, 1000); window.location.hash = hashStr; return false; e.preventDefault(); } } }); }(jQuery)); </script>

当您单击锚链接时，上面的代码将动画滚动效果，它还将更新当前浏览器 URL 以反映单击的锚链接。 在完成的一页网站上检查我们的最终结果。

如何设置平滑滚动的偏移量？

如果您有固定的粘性菜单，我建议您也设置偏移量，因此内容的开头从您的粘性菜单下方开始。 为此，您需要编辑这行代码：

 $('html, body').animate({ scrollTop: target.offset().top}, 1000);

我们在这里唯一需要做的就是添加我们的偏移值。 它应该至少与固定粘性菜单的高度一样大。

 $('html, body').animate({ scrollTop: target.offset().top - 180 }, 1000);

这样，我们将避免内容的开头隐藏在菜单后面的问题。

一页网站的优点

既然您知道如何创建单页网站，那么让我们来看看使用单页网站的优点。

一页网站提供更好的移动用户体验

一页网站由一个长滚动页面组成，非常适合移动查看。 想想 Facebook 及其新闻提要。 您不禁继续向下滚动兔子洞。 单页网站就是为了做到这一点而设计的，连续滚动非常适合移动设备。

鉴于移动设备上的屏幕空间有限，保持向下滚动比找出菜单隐藏的位置然后单击正确的链接进入网站的下一页要容易得多。 换句话说，单页网站将为在移动设备上访问您网站的任何人提供出色的用户体验。

一页网站需要更少的文字

一个传统的、多页的网站需要大量的文字，所以它看起来不会太空，或者更糟糕的是，未完成。 相比之下，如果您的内容太多，单页网站会显得杂乱无章。 因此，您需要尽量减少副本，并使用简短的句子和段落来传达最重要的信息。

这种方法的另一个好处是，编写副本可能是与启动网站相关的更艰巨的任务之一。 如果您的网站副本没有完全充实，单页网站可能是一个不错的选择。

一页网站适用于图像

图像可以为任何类型的网站创造奇迹，包括一页网站。 事实上，当您使用与视差效果配对的图像时，您可以在您的网站上产生视觉上吸引人的效果。

即使您决定不使用视差效果，您仍然可以在单页网站上有效地使用图像。 您可以使用它们来区分不同的部分，更不用说共享照片库或投资组合图像了。

您还可以利用图像来提升您的网站 SEO，因为图像在正确优化后往往会出现在搜索引擎结果中。 因此，请务必使用描述性标题为您的图片添加名称，并为您添加到网站的每张图片添加 alt 标签。

一页网站可以提高用户参与度和转化率

根据一项研究，与多页网站相比，单页网站可以带来更高的转化率。 这背后的原因很简单：单页网站通常非常专注，旨在让访问者采取行动。

它具有更集中的信息，并且当访问者到达页面末尾时，更容易理解您希望他们做什么。

当您只有一个选择时，很容易单击该按钮或号召性用语，而不是从一个页面到另一个页面想知道下一步应该做什么。

一页网站更易于浏览

还值得一提的是，一页网站更易于浏览。 由于所有内容都在一个页面上，因此很难迷失方向并回到起点，尤其是在移动设备上。

虽然您可以使用锚链接跳转到页面的不同部分（如本文所示），但向上或向下滚动并找到您想要的部分同样容易。

除此之外，精心设计的单页网站会引导访问者踏上一段以合乎逻辑的方式讲述您的业务或品牌故事的旅程。

一页网站可以更轻松地定位特定受众

如前所述，单页网站旨在让访问者采取行动。 您可以利用它来发挥自己的优势，并针对准备好采取下一步行动的非常具体的受众。 通过引导他们浏览您网站的不同部分，您可以展示您的产品或服务，向他们展示它如何解决他们的问题，并以号召性用语的形式为他们提供解决方案。

当您定位一个非常具体的关键字或已经知道他们有特定问题并正在寻找解决方案的受众时，这种方法非常有效。

使用单页网站的缺点

让我们看看使用单页网站的一些缺点。

分析谷歌分析数据将更加困难

到目前为止，您可能已经知道 Google Analytics 可以为您提供有关网站访问者的大量有用信息。 在您的网站上安装后，您可以查看哪些页面很受欢迎，哪些帖子带来了新访问者，以及哪些页面需要优化以使人们在您的网站上停留更长时间。

使用单页网站，您仅限于一页。 您的访问者登陆同一页面并在同一页面上下车，这使得您更难知道您网站的哪些部分需要改进。 如果您决定采用单页网站路线，请务必注册像 Hotjar 这样的工具，以获取人们如何使用您的网站的可视化热图。

在社交媒体上分享您的网站比较棘手

使用单页网站，您只有一个 URL 可以在社交媒体上分享。 这很快就会变得重复，更不用说它没有提供很多机会将人们发送到您网站的不同部分以找到他们问题的答案。 共享主 URL 后，您的整个网站将被共享，而不是像多页网站那样共享特定页面或部分。

一个简单的解决方法是在您的网站上加入一个博客，您可以在其中分享有用和有用的内容，从而吸引您的观众。这使得在社交媒体上分享您的网站更加容易，同时仍将大部分信息浓缩在一个页面上.

一页网站可能需要更长的时间才能加载

根据您的单页网站的大小和您共享的内容类型，请注意您的网站可能需要更长的时间才能加载。

一般来说，单页网站往往很轻，但是如果您有很多未针对网络优化的图像，您会遇到加载时间缓慢的情况。 如果您的网站上有很多视频内容，这同样适用。

因此，在将图像添加到您的站点之前，以适当的格式保存图像并压缩它们的大小非常重要。 要考虑的另一件事是对图像和视频使用延迟加载，以便在用户向下滚动到您网站的特定部分时加载它们，而不是立即加载它们。

您受限于关键字定位

单页网站不会为您提供很多定位多个关键字的机会。 使用多页网站，您可以为要定位的每个关键字创建一个单独的页面。 一页网站的工作方式不同。

如专业部分所述，一页网站的设计考虑了特定目的和受众。 这通常转化为定位特定关键字及其变体，这意味着如果您需要定位多个不同的关键字，最好创建一个多页网站。

虽然没有规定每页不能包含多个不同的关键字，但您将无法充分优化您的页面，尤其是当您考虑到轻量级副本更适合单页网站时。

您不能使用高级 SEO 策略

说到 SEO，单页网站不允许您使用称为孤岛的高级 SEO 策略。 孤立是指将您的网站构建成主要兴趣领域的做法，以便您可以在这些领域展示您的权威。 用外行的话来说，这是创建类别和子类别来组织您的内容的做法。

孤立的主要好处是它为众多关键字和关键字词组提供了排名的可能性，这些关键字和关键字短语几乎涵盖了感兴趣的访问者可能遇到的所有问题，以及所有可能的反对意见。

虽然多页网站在这方面表现出色，但单页网站很快就会变得过于拥挤和混乱，让您的观众感到沮丧。

一页网站可能缺乏提供详细信息

最后，由于简短而简洁的副本和消息传递，单页网站可能无法为您的访问者提供所有必要的详细信息。 这可能会导致要求澄清或让访问者感到困惑的电子邮件数量增加。

您可以通过将博客添加到您的单页网站并为访问者提供更深入的内容并在出现问题时回答他们来克服这个问题。

您应该使用单页网站吗？

如您所见，使用单页网站肯定有优点和缺点。 那么，您如何知道单页网站是否适合您的业务呢？

如果您刚刚开始开展业务并通过口耳相传产生大量业务，那么单页网站可以让您将业务放到网上，而无需花费太多时间在设计和开发上。

另一方面，如果您想通过专注于 SEO 来专注于获得更多的自然流量，并且如果您正在扩展您的业务运营，那么多页网站将更适合您。

最后，这取决于个人喜好和您的业务目标。 评估您的业务所处的位置，并记下您要完成的工作。 然后，在做出最终决定之前考虑上面提到的利弊。

结论

我们确实收到了很多问题，询问我们是否有某种单页主题，我相信其他主题作者的情况也是如此。 本文应该明确指出，所有 WordPress 主题也可以用作单页网站，如果您愿意，您可以立即将当前网站更改为单页浏览器。 我们还介绍了单页网站的优缺点，并分享了如何确定这是否是您网站的正确选择。

让我知道这篇文章是否有助于您更好地理解一页网站，如果您有任何其他问题，请给我留言。