单页网站是一个只有一个页面的网站，用户可以滚动浏览。很多单页网站仍然有一个主菜单。人们可以点击菜单项，但不是去另一个页面，而是去同一页面的另一个部分。我们已经向你展示了如何制作一个网站，但在这篇文章中，bluehost多IP站群服务器商将向你展示如何用WordPress创建一个单页网站
好处
如果你正在寻找一些快速的解决方案，单页网站可以是一个很好的解决方案。单页网站有很多优点，例如，网站不必重新加载就可以进入另一个部分。用户可以很容易地在各部分之间进行导航，并快速找到他们想要的内容。有了单页网站，你还可以控制人们看到你的内容的顺序。你可能想先展示你的产品或服务的所有好处，最后再向他们展示价格，也可能反过来。
小型网站的优秀解决方案
对于那些只需提供每个主题的少量信息的网站来说，单页广告是理想的选择。比方说，你有六个主要项目要谈，每个项目有一到两段。如果你把这些内容分成六个不同的页面，就会给人一种你的网站做得不够好的印象。推荐阅读：《WordPress全站编辑(FSE)：功能及其对用户和企业的影响》
以图像为主导
大多数单页网站使用大量的相关图片。将这些图片划分在不同的页面上，每个页面上只有一张图片，又会让人觉得你的网站有点欠妥。正如你所想象的，一个单页的网站，每个主题都有不同的图片，用户滚动浏览时，会有更好的感觉。
更好的移动体验
单页网站通常具有非常好的手机体验，因为网站在每次页面转换后都不必重新加载。人们可以在任何设备上快速找到他们需要的内容，如果他们在你的网站上断开连接，这甚至不是一个问题。由于页面已经加载，他们仍然能够进入不同的部分。这样，你的网站甚至可以感觉像一个移动应用程序，而不是一个普通的网站。事实上，在App Store中也有使用这种方法的应用程序。
什么时候不使用单页网站
如果你要提供大量的内容，可能会使你的单页网站变得非常长，难以滚动浏览。
用WordPress创建单页网站
如果你认为单页网站适合你，那么请继续阅读。在这之后，你将能够创建你自己的单页网站。
披露：FirstSiteGuide是由我们的读者支持的。当你通过我们网站上的链接购买时，我们可能会获得佣金。我们对所有我们推荐的产品进行测试和试用。
设置WordPress
即使你对WordPress和设置服务器不熟悉，也不要害怕。获得你自己的预装WordPress的主机计划将只需要你几分钟的时间。但即使在这之前，你也可以用XAMPP建立一个本地服务器，并尝试创建你的单页网站，而不用花一分钱。
是的，创建一个本地服务器有它的好处，但是如果这是你第一次听说XAMPP，请准备好去经历让它为WordPress做好准备的一个稍长的过程。尽管如此，如果你按照我们为你准备的步骤，你应该不会有任何问题，你可以在15分钟之内开始工作，安装你的私人WordPress。
如何为Windows设置XAMPP并安装WordPress
在弄脏你的手之前，你首先应该知道XAMMP是什么。XAMPP代表跨平台(X)、Apache(A)、MariaDB(M)、PHP(P)和Perl(P)。它是一个免费发行的软件，可以帮助你运行你自己的私人服务器。它包含服务器应用程序、数据库和脚本语言，你需要这些工具来成功地安装WordPress。通常，由XAMPP运行的服务器用于测试目的，这样你就可以自由地练习你的网页设计技能，而不需要支付托管费或让大家看到你的网站操场。
如何在Windows下安装XAMPP
现在，让我们停止讨论理论内容，让我告诉你如何进行设置。虽然名称中的跨平台部分意味着该软件也可以在Linux和Mac电脑上使用，但今天我们要关注的是Windows。
- 进入Apache Friends网站
- 点击按钮下载最新版本并保存到你的电脑上
- 下载后运行安装程序
- 在欢迎屏幕上，点击下一步
在下一个屏幕上，设置将要求你选择你要安装的组件。你可以让一切都保持原样，安装所有的组件。但是，如果你只是想安装一个基本的WordPress，那么选择MySQL和phpMyAdmin选项就足够了。如果你将来需要任何其他组件，你可以在之后通过控制面板添加。在本教程中，你可以不选中所有其他选项，因为你在创建单页网站时并不需要。推荐阅读：《如何在WordPress中添加特定类别的小工具》
- 选择一个你想安装XAMPP的文件夹。它可以是你想要的任何文件夹，你也可以保留默认的文件夹。只要记住它的位置
- 在下一个屏幕上，不要选择 “了解更多关于Bitnami for XAMPP “选项，因为你将手动安装WordPress。
- 点击下一步
现在给安装程序一些时间来传输所有的文件并设置你将用于你的WordPress站点的环境。几秒钟后，安装程序将打开所有文件并完成安装。
- 勾选 “是否要启动控制面板 “选项
- 点击下一步
希望一切顺利，没有问题。如果是这样，你应该看到控制面板被打开，没有任何显示错误的红色文字。你还应该看到Apache和MySQL被标记为绿色，这意味着它们已经启动并运行。要检查你的服务器是否运行正常，请到你的浏览器中访问这个网址：http://localhost。
如果一切正常，你应该看到一个简单的网页，欢迎你进入XAMPP for Windows。如果该页面已经加载，你就可以停止屏住呼吸了，因为这意味着XAMPP已经设置正确，你可以继续安装WordPress。
不幸的是，你可能在你的个人电脑上运行的其他应用程序可能会干扰到XAMPP。例如，Skype以与XAMPP有问题而闻名，所以如果你遇到问题，试着把它关闭，然后试着打开XAMPP控制面板。有时，为了让XAMPP正常工作，有必要打开一些端口，但不幸的是，那是一个完全不同的领域，我们不能在本教程中涵盖一切。
如何使用XAMPP安装WordPress
好的。我们将不得不假设你已经准备好了环境。现在是在你的本地机器上安装WordPress的时候了，这样你就可以登录并开始建立你的单页纸。对于初学者，你需要创建一个WordPress用来存储所有信息的数据库。
- 打开XAMPP控制面板
- 点击MySQL部分的管理按钮。这将打开一个带有phpMyAdmin的新窗口
- 在左上方的菜单中选择数据库标签
- 输入你的数据库的名称，例如，WordPress
- 点击创建按钮
这一部分要求并不高，对吗?现在你可以关闭浏览器窗口，为下一步做准备。
- 下载最新版本的WordPress
- 进入XAMPP文件夹(就是你在前面步骤中安装XAMPP的那个文件夹)。
- 打开该文件夹并导航到htdocs文件夹
- 在那里解压WordPress档案
你最终应该在htdocs文件夹里有一个新的WordPress文件夹。你可以把这个文件夹重命名为你想要的任何内容。这也将是你本地安装地址的一部分。为了本教程的目的，让我们称它为WordPress，这将从http://localhost/wordpress打开你的网站。其实你用什么名字并不重要，所以可以随意根据你的喜好来改变。
- 打开那个文件夹，找到wp-config-sample.php文件
- 将其重命名为wp-config.php
- 打开该文件，找到有关MySQL设置信息的部分(看一下屏幕截图)
- 将 “database_name_here “替换为你的数据库名称，在我的例子中是 “WordPress”
- 将 “username_here “替换为 “root”，”password_here “留空
- 保存文件并关闭
最后，你就可以结束安装过程了。请打开你的浏览器，导航到http://localhost/wordpress(如果你在解压时为WordPress文件夹使用了另一个名字，也可以改变这个名字)。WordPress现在会问你需要选择哪种语言。之后，点击 “继续 “按钮。然后输入用户名和密码的详细信息，并点击安装WordPress。
这就好了! 现在你终于可以登录到你的测试网站，开始制作你的第一个单页网站。第一步将是选择一个主题。
挑选一个主题
你可以为一个单页网站使用任何主题。在这个例子中，我们将使用免费的SiteOrigin North主题，它可以在WordPress主题库中找到。在你的WordPress仪表板中，进入外观->主题->添加新主题，然后输入 “SiteOrigin North”。它现在应该在列表的顶部。
这是一个简单但设计良好的响应式主题，与BigCommerce和WooCommerce的合作也非常好。它是由我们将在本例中使用的网站的页面生成器插件的开发者制作的。同样，你可以自由地使用另一个主题;当你点击一个菜单项时，过渡效果将以两种方式工作。我们建议你使用一个有粘性菜单的主题，这样你的网站的访问者就不必再滚动到页面的顶部来点击一个菜单项，把他们带到一个不同的模块。
插件
对于创建单页网站来说，最重要的是你使用的插件。我们将安装一个名为SiteOrigin的页面生成器和这个插件的小部件扩展。这两个插件都是完全免费的，并且托管在WordPress的插件库中。在你的WordPress网站的仪表板上进入插件->添加新插件，然后输入site origin的页面生成器。该插件将出现在列表的顶部，安装并激活。你可以在同一个屏幕上安装widgets bundle插件，在插件搜索器中输入siteorigin widgets bundle。确保两个插件都被激活。
从2.3版本的这个页面生成器开始，他们增加了单页网站滚动功能。这就是我们需要的，每当有人点击一个ID为 “href “属性(链接)的菜单项，网站就会滚动起来。我们将在本教程的后面解释这一点。
开始建设
现在你已经激活了插件，我们准备建立我们的页面。首先，添加一个新的页面或编辑一个页面。进入页面编辑器顶部的标签，点击新添加的 “页面生成器 “标签。
SiteOrigin页面生成器有很多预设，所以我们不需要从头开始建立整个设计。你会看到页面编辑器上方的一些按钮，其中一个是 “Layouts “按钮，点击它。
你现在会看到一个有各种布局的屏幕：这些是你可以使用的预设。你还可以导入和导出布局，但我们不认为你已经有了这些布局。在这个例子中，我们将选择 “健身馆 “的设计，当然，你可以选择任何你想要的设计或从头开始。点击所选的设计，然后点击右下角的插入按钮。如果你在页面上已经有了内容，你可以选择在内容之前或之后插入，或者完全替换它。对我们来说，这并不重要，因为我们有一个空页面。
继续，保存该页面并进行访问。如果一切顺利，我们可以添加我们的ID。通过点击你刚刚创建的页面顶部的WordPress管理栏中的链接，切换到 “实时编辑器 “模式。
当你把鼠标悬停在你的网站上的元素上时，你可以准确地看到哪个小部件代表哪个元素。进入顶部的SiteOrigin Hero后的第一行，点击工具图标，编辑行。在这个屏幕上，进入 “属性”，添加你的行ID。我们要给我们的ID是 “活动”。
给每一行一个不同的、唯一的ID。当你完成后，保存该页面。
配置你的菜单
我们还没有完成。我们现在必须创建我们的菜单项，所以当用户点击其中一个项目时，页面就会导航到你网站的那个特定部分。继续前进，在你的WordPress仪表板的外观->菜单中创建一个新菜单。我们将只在这个菜单中创建自定义链接。在下面的图片中，我正在为我刚刚添加 “活动 “ID的那一行创建一个链接。
你可以看到，自定义链接的URL现在与该行元素的ID相同。SiteOrigin页面生成器的程序可以识别这一点，并知道它必须滚动到指定的部分。
我的结果
恭喜你!我们已经完成了。我们已经完成了，你现在只需使用两个插件和任何主题，就可以轻松快速地建立自己的个性化单页网站。这将使你的网站保持快速和非常友好的用户体验。建立这个网站花了我们不到一个小时，这是我们发现的建立一个漂亮的单页网站的最简单和最快的方法。最重要的是，它是免费的。
事实是，如果你是第一次做，用XAMPP建立你自己的测试环境可能需要时间，并烧掉一些脑细胞，但你会很快学会欣赏可以运行WordPress的本地服务器。然后，只要有两个插件和一个你选择的主题，即使是完全的初学者也能创建自己的单页网站。
如果你遵循了本教程的所有步骤，你应该不会有任何问题，你的单页网站应该可以很好地启动和运行。一旦你成功创建了页面，你就可以开始升级，并根据你的喜好进行定制。不要忘记查看我们的其他WordPress文章和教程，它们将以任何可能的方式帮助你塑造你的网站。推荐相关阅读：《WordPress 固定链接设置和自定义URL结构》
