2024 年 7 月 15 日
建站
阅读时间：52 分钟

用 WordPress + Elementor 构建个人网站

我如何用 WordPress + Elementor 来构建你现在正在浏览的这个网站。

写在前面

在做这个网站之前，我其实并没有太多网站搭建相关的经验，所以我可以说算是一个小白。本文主要是以我这个小白的视角，分享一些建站相关的心得，希望能帮助到那些没有太多技术背景，但想构建和定制一个属于自己的个人网站的人。本文不是详细的 WordPress + Elementor 教学，更多的是分享我构建网站的一些步骤和思路，供你权衡和选择。

在选择网站的构建方案时，我最期待三个特性：一是上手简单，支持无代码的构建方式；二是自由度和上限高，能让我自由地设计网站；三是成本低。我最终选择了 WordPress + Elementor 的组合，以 WordPress 为基础，主要使用 Elementor 来完成设计。这套实践比较好地符合了我想要的特性：

上手简单。 WordPress 有海量的主题模板，以及一套完善的内容管理系统，可以做到”即插即用”。而 Elementor 的可视化编辑器支持 drag-and-drop 式的网站构建，无需编码知识也能实现丰富的网站设计；
自由度和上限高。 WordPress 有丰富的插件生态来满足各种需求。而且，作为一套开源软件，如果你懂得编程或者愿意学习简单的编程，你就可以在其中编写包括但不限于 HTML, CSS, JavaScript, PHP 等种类的代码来让丰富网站的功能和设计；
成本低。整套方案只需要支付域名和服务器的钱，不需要额外费用。以 .com 域名 + 腾讯云/阿里云的海外轻量应用服务器为例，运营一个小型个人网站一年的费用不到 500 元。

如果你不差钱，并且只是以最简单的方式设计和拥有一个网站，你可以考虑使用一些全托管类型的建站服务，例如在 Youtube 上广告做得铺天盖地的 Wix 。这类平台的优势是使用起来省事，但价格相对较高，且网站会与平台绑定，不完全属于自己。以 Wix 为例，最基础的套餐就需要 17 刀 / 月。如果你希望不花钱拥有一个网站，可以去了解一下 Hugo 、Jekyll 、Hexo 等静态网页生成器，它们可以免费托管到 Github Pages ，但这种方案需要一些技术知识——尤其是当你想要定制自己的网站时。如果你使用 Notion ，你甚至可以在网上找到用它建站的视频。但如果你恰好和我有类似的需求，那么我相信这套方案很适合你。对我来说，WordPress 的最大魅力是它的包容性，无论你是建站小白、网页设计师还是专业的程序员，它都可以成为你的得力工具。关于这一点在 WordPress.org 的官网有一个很好的阐释：

“People with a limited tech experience can use it “out of the box”, and more tech-savvy folks can customize it in remarkable ways.”

“技术经验有限的人能开箱即用，而精通技术的人能以非凡的方式来定制它。”
WordPress.org

WordPress.org 和 WordPress.com

虽然同根同源，但两者大有不同。本文提到的 WordPress 均指 WordPress.org 所提供的开源 WordPress 软件。它是一个免费、开源的内容管理系统和建站工具，你可以随意使用和改造。而 WordPress.com 则是一个类似于 Wix 的网站构建服务商，是 WordPress 的商业化产物，将 WordPress 的能力和其他建站所需的服务打包成不同的套餐出售。我个人并不推荐在 WordPress.com 构建网站，因为它设置了种种限制，想要使用更高级的功能，需要购买更贵的套餐；而且网站最终也不属于你，而是归平台所有。

购买域名和服务器

使用 WordPress 搭建网站需要购买用于部署网站的服务器，对于小型的个人网站，通常你只需要购买入门级别的配置；一般来说，你也需要购买一个属于自己的域名，否则只能用 IP 地址或者服务器提供商提供的子域名来访问网站。

在中国大陆运营网站需要经过 ICP 备案，时间从几个工作日到几十个不等；如果你不希望备案，可以购买海外或者中国香港的服务器，但缺点是在大陆访问的速度会相对较慢。

WordPress 备份和迁移网站很方便，所以你就算你后悔使用了当前的方案，也可以随时把网站迁移到其他地方。下面我提供三种购买域名和服务器的方法，其中涉及到配置和价格信息仅供参考，以个人实际看到的为准。

在海外平台购买域名和服务器（免备案）

这是我目前使用的方案。国外有很多提供 WordPress 托管服务的平台，我现在在用的是 Hostinger ，个人觉得用户体验还不错。在这之前我首先尝试了 Bluehost ，但使用国内银行卡支付反复被拒，账号还莫名遭遇封禁，于是放弃。Hostinger 支持支付宝付款，我买的是最便宜的 plan（premium），首年价格是 3 刀 / 月，值得一试，但续订价格会变为 8 刀 / 月（大多数平台会使用这种策略来吸引新客）。

在 Hostinger 购买一年或以上的 plan 会提供一年的免费域名（这也是很多平台的策略），你可以在购买 plan 以后注册一个可用的域名；续费价格的话，以 .com 为例，为 16 刀 / 年。域名和服务器可以在不同的平台购买，只需要将域名关联到服务器上即可，例如我的域名其实是在 WordPress.com 购买的，价格是稳定的 10 欧元 / 年。算下来我的网站首年成本不到 300 块。

关于在哪家买域名比较好我不能给出很好的建议，个人觉得只要是大平台都 OK ，但我可以告诉你一些值得注意的信息：

不同平台的域名价格相差不大，大多数在 70 到 100 多人民币不等；
域名可以在网站上线前随时购买，没有域名前可以使用 IP 地址或者服务器商提供的临时域名；
将域名从一个注册商迁移到另一个注册商需要支付费用，通常约等于一年的域名费用，所以域名一般会一直保持在一个地方；
接上条，一种需要特殊注意的情况是，根据有关规定，在国外的域名注册商购买的域名不能直接在国内备案，需要迁移到国内的服务商并支付迁移费用。所以如果你打算在国内建网站，就在国内购买域名。

这里以 Hostinger 为例，购买和安装步骤为：

在域名注册商注册并购买一个你喜欢的域名，例如我的是 brucecxy.com ，用 Hostinger 的域名就跳过这一步；
到 Hostinger 购买服务器 plan，入门级别（premium）就可以，推荐购买 1 年；
购买完成后自动进入新手向导，根据实际情况选择即可。注意选择 WordPress 而不是 Hostinger Website Builder；创建空白网站即可而不需要提前安装主题模板和插件；服务器选择离你的目标对象近的位置；根据是否需要，可以在 Hostinger 注册域名或者使用你已有的域名；
走完流程后进入 hPanel ，这是 Hostinger 提供的后台管理系统，可以监控网站的运行数据，访问 WordPress 源目录文件等等。Hostinger 会自动安装好 WordPress，点击 Admin Panel 可以进入 WordPress 后台（或者在浏览器输入”你的域名/wp-admin”）；
点击左上角查看站点或者在浏览器输入域名，你会发现网站已经可以访问了。WordPress 会安装一个默认的主题（目前是 2024 主题），后面你要做的就是根据需要定制自己的网站了。

购买国内平台提供的境内服务器（需备案）

国内很多服务器平台例如阿里云、腾讯云等都提供可以选择预装 WordPress 的轻量应用服务器，可以开箱即用；它们也都提供域名购买以及备案的一条龙服务，所以选择一家就 OK。价格上差别也不会很大，对于小型个人网站来说，选择自己喜欢的平台购买最低配置即可——这里以之前提到的两家为例，我在购买页面查到的最低配置的轻量应用服务器，以及域名的价格为：


服务器
最低配置	2 核 vCPU，2 GB 内存，50 GB 硬盘，3 Mbps 峰值带宽，每月流量未说明	2 核 vCPU，2 GB 内存，40 GB 硬盘，3 Mbps 峰值带宽，每月流量 200 GB
新用户首年价格	82 元	82 元
正常价格	60 元 / 月	45 元 / 月

域名（.com）
首年价格	78 元 / 年	75 元 / 年
续订价格	85 元 / 年	85 元 / 年

2024 年 7 月，阿里云和腾讯云在售的国内服务器（最低配置）和域名价格

阿里云 WordPress 配置过程见这里。腾讯云 WordPress 配置过程见这里。购买时都选择 WordPress 镜像即可。

购买国内平台提供的香港、海外服务器（免备案）

国内的很多服务器平台也提供海外和香港的服务器，可以免备案，而且它们相同配置的价格普遍要比境内低很多。但在大陆访问速度会慢一些。其中香港的服务器十分抢手，以阿里云和腾讯云为例，阿里云的香港服务器每日限量销售，腾讯云的香港服务器目前则根本没有低配选项：


海外服务器（最低配置）	24 元 / 月	30 元 / 月
香港服务器（最低配置）	24 元 / 月	335 元 / 月（由于没有低配选项）

2024 年 7 月，阿里云和腾讯云在售的海外和香港服务器价格（最低配置）

配置过程同境内服务器。

熟悉 WordPress

当你按照任意方法购买好域名、服务器，并安装了 WordPress 后，恭喜你，你的网站就已经可以访问了。它会显示 WordPress 的默认主题。后面我会告诉你怎么让你的网站真的变成“你的网站”。

当你处于 WordPress 登录状态时，你的网站上方会出现一个只有你能看到的工具栏，你可以用它进入 WordPress 后台，进入网页编辑页面等等。当你未登录时，你可以在浏览器输入”你的域名/wp-admin”来登录 WordPress 。

初次进入 WordPress 后台，你可以看到左侧有很多栏目，最常用的有：

文章，这里是存放你所有博客的地方。WordPress 自带 GutenBerg（古腾堡）编辑器用来编辑博客，它也可以编辑页面；但我们后面会安装 Elementor 来用于编辑页面。Elementor 也可以编辑博客，但从我的经历来看，如果你要同时使用 Gutenberg 和 Elementor，我推荐你只用 Gutenberg 编辑博客，只用 Elementor 编辑页面。
媒体，这里存放所有你上传的图片、视频、文档等多媒体文件；
页面，这里是所有你自己为网站添加的页面。一个 WordPress 网站的页面包含文章（博客）页面、用户自己添加的页面和系统自动生成的页面（例如404页面），这些页面都支持使用 Elementor 进行修改；
外观，这里是你安装的所有主题模板。每个 WordPress 网站必须依托主题存在。一个好的开始是挑选一个你喜欢的主题，然后以这个主题为基础，逐步发展你的网站。
插件，你可以在这里安装和管理插件，WordPress 社区有海量的插件，可以实现很多强大的功能。

最后还有设置。我推荐你首次进入 WordPress 时，对下面的设置进行修改：

进入设置-常规。修改你的站点标题、副标题、logo（可以自己制作一个）。修改管理员邮箱地址为你自己的邮箱地址，这个邮箱会接受 WordPress 发来的通知信息，例如你网站上的最新评论。修改站点语言为简体中文。其余设置可以根据你的个人喜好进行修改；
进入设置-固定链接。推荐将链接形式修改为文章名。

一些现成的主题

WordPress 社区有非常多可用的主题。在进入后面的部分之前，我建议你先去浏览和尝试一下它们，看一下有没有你想要的。如果你很喜欢某个主题，就直接学习怎么使用和自定义那个主题。这样当然是最好的，你可以把精力更多地放在网站的实际内容上，并且也不太需要关注本文后半部分的内容了。

我个人尝试过的主题很少，没有太多发言权。但我可以给你推荐一些来源供参考，你同样也可以自己做一些搜索。如果有任何推荐的主题的话欢迎评论或者联系我~

WordPress 官方主题，以年份命名，今年的主题是 2024，也是默认的主题。你可以在 WordPress 的主题-安装新主题中搜索 ”Twenty“ 来找到这些主题。我觉得官方的主题普遍比较简约、美观，而且和默认的 Gutenberg 编辑器无缝集成。如果你要尝试例如 2024 主题，你可以安装并激活，然后了解一下 Gutenberg 的使用方法，到外观-编辑中去编辑你的网站；
Astra 可能是国外最热门的 WordPress 主题，它有免费版和付费版。你同样可以直接在 WordPress 后台搜索并安装这个主题；
中文社区中有很多免费、功能强大且适合国人使用的主题，例如 Argon 、Sakurairo 等，它们也都配有中文文档。

如果你不差钱可以搜索一些付费的主题。例如 Qode Interactive 是一家我找到的专注于 WordPress 主题开发的公司，它们的主题设计风格很不错，价格普遍在几十刀。

由 Qode Interactive 开发的主题 Elipsa

安装 Elementor

如果你希望自行设计你的网站，那接下来的内容对你可能有帮助。

Elementor 的可视化编辑器，可以让你通过拖拽各种组件的方式来轻松地设计页面，所见即所得。它有非常多方便的特性，例如支持响应式设计，让你的网站在不同的设备上都能完美显示。相比于 WordPress 默认的 Gutenberg 编辑器，它在编辑页面上更好用也更强大。

Elementor 的可视化编辑器，所见即所得。

点击安装新插件，搜索 Elementor，安装并激活。安装好后 Elementor 会推荐你使用它们的 Hello Theme，这也是我在使用的主题，如果你希望从 0 开始设计你的网站，可以选用这个主题；如果你希望有一个样板来作为 starting point，可以安装一个你喜欢的并兼容 Elementor 的主题。我推荐安装 Starter Templates 插件，其中有很多样板，以 Love Nature 为例，它是一个用 Astra 主题制作的样板。你可以在安装好 Starter Templates 后选择 Lover Nature，后面勾选安装 Astra，这样你就同时拥有了 Astra 主题和这些提前做好的页面。它有很多预设的内容，例如主题色、logo等等，你可以到外观-自定义中去变更它们。

Elementor 有免费版和付费版，付费版有很多非常实用的功能，例如一些高级组件、自定义代码、主题设计器等等。Elementor Pro 一年 59 刀起，但我找到了另一个插件—— Pro Elements ，相当于破解 Elementor 的工具，能让你使用 Elementor 付费版的绝大部分功能。Elementor 遵循 GPLv3 协议，所以这类插件是合规的。关于安全性的话，我目前在使用这个插件，没有遇到问题；而且你可以在 Github 上找到它的源项目，目前已有 800 颗星。

点击链接下载 Pro Elements，然后到插件-安装新插件-上传插件，将下载好的压缩包安装并激活。这时你的 Elementor 就解锁了绝大部分功能。

用 Elementor 构建你的第一个页面

你的网站可能会包括一些单独的页面，例如主页、网站信息页等等，对于这些页面，你可以在 WordPress 页面栏目中新建页面（如果你在之前安装了 Starter Templates 中的样板网站，那这里就会有一些已经建好的页面）。在安装 Elementor 后，你的页面会出现 ”用 Elementor 编辑”的选项，点击即可。然后你就可以到 Elementor 中去设计你的页面。

你不需要在设计页面时考虑页眉和页尾，下一部分我会告诉你怎么在 Elementor 的 Theme Builder 中创建可在多个页面复用的模板，这其中就包括页眉和页尾。当你设计好你网页的页面以后，你需要在 WordPress 后台的设置-阅读中，设置其中一个为首页，才能让你的域名指向这个页面。

听起来一头雾水，是吗？Elementor 上手以后使用起来十分简单和流畅，但对于新手来说需要一定的学习。最好的办法就是实践，一个好的思路是你可以找到一个你喜欢的网页，然后尝试在 Elementor 中复刻。我没法在这里手把手地教你怎么使用 Elementor（你也许也注意到我没有告诉你怎么用 Gutenberg），不过 Youtube 和 B 站都有很多 Elementor 的使用教程。这里推荐一个 B 站上的视频，全程没有废话，你可以看到作者是怎么一步一步复刻一个静态网页的内容的——如何用Elementor一步一步定制自己的页面 – 雪梨建站笔记。

视频中的 Elementor 和现在的版本略有区别，但绝大部分操作都一样。其中开头一处用到了 Inner Section来实现分栏，目前这个组件已经被删除了。因为用容器（Container）就能更好地替代。例如要实现一行分成多列，只需要在容器的设置中设置方向为水平向右，然后在这个容器里面添加多个容器即可。

视频中也提到了两个非常好用的 Chrome 插件，我把链接放在下面。

WhatFont

快速识别网页中出现的字体信息。

CSS Peeper

让你方便地获取网页中的 CSS 样式信息，而不需要查看源码。

用 Elementor 的 Theme Builder 为你的网站构建可复用模板

Elementor 的 Theme Builder 可以为你的网站构建一些可以复用的结构，这个功能需要 Elementor Pro，或者安装我之前提到的 Pro Elements 插件。点击模板-Theme Builder，在这里你可以自定义网站的很多部分，包括页眉、页尾、文章页面、Loop Items（例如文章列表）等等，并在你想要的地方使用它们。下面是两个简单的 Demo：

Demo 1：用 Theme Builder 制作 header（页眉）

我录了一个简单的视频来演示怎么用 Theme Builder 制作一个很 basic 的 header，并把它设置为在整个网站显示，具体步骤如下：

在 Theme Builder 中新建模板，类型选择 header，Elementor 会自动分配一个名字，你需要后面再给模板重命名；
Elementor Pro 会提供一些预设的模板，如果使用 Pro Elements 破解的免费版，能看到这些模板但无法导入；
用 Elementor 设计你的 header；
永远记得查看你的设计在不同尺寸的设备上的显示效果，尤其是移动设备，往往都需要调整。正常情况下，总是先从桌面设备开始，再到移动设备，因为在 Elementor 中后者的更改不会影响前者。这里我简单调整了一下移动设备上的效果；
保存你的 header，保存时，Elementor 会让你设置你的模板应用条件，这里选择“Entire Site”，即让所有页面都显示。这里的应用条件可以非常灵活，你可以让模板应用于某个特定的页面、某一类页面（例如所有带某个标签的文章）或者全体页面，也可以设置反向条件让你的模板不要应用于哪些页面；
检验 header 在实际网站上的效果，有时候你会发现效果没有更新，这多半是由于缓存问题，可以尝试清除缓存或者用无痕模式打开。

Demo 2：用 Theme Builder 制作文章列表

这个 Demo 展示了如何自定义一个文章列表的简单模板，然后在页面中使用模板。这次我没有对样式进行太多修改，只是演示功能。具体步骤如下：

除了上面提到的在 Theme Builder 里新建，你也可以在模板中点击新增模板来创建。这里类型选择 loop items ，源选择 posts，然后给你的模板起一个名字；
设计你的文章列表模板，Elementor 提供了一些细分的组件，例如特色图片、文章标题、简介等等，你可以自由排版组合；
设计好以后，保存模板；
在你想要应用模板的页面使用 Elementor 编辑，选择 loop grid 组件，在 layout 中输入你创建的模板名，就可以使用了；
你可以在 loop gird 中做更多设置，例如调整布局，在 Query 中设置查询条件来展示那些你想要展示的文章等等。

为你的网站添加自定义代码

有多种方式能为你 WordPress 网站添加自定义代码，包括但不限于：

点击外观-自定义-额外 CSS，你可以在这里为你的网站添加全局的 CSS 代码；
点击外观-主题文件编辑器，你可以在这里修改主题文件；
点击 Elementor – Custom Code，你可以在这里添加代码，并选择在哪些页面使用；
在 Elementor 的可视化编辑器中选择任意组件，点击高级设置，下拉到底部，可以在这里为这个组件撰写局部 CSS；
Gutenberg 和 Elementor 都支持直接在页面中写 HTML；
你也可以安装插件例如 Code Snippets，来在一个地方写和管理各种类型的代码。

你可以按照你喜欢的工作方式来写和管理代码。WordPress 中主要涉及到 HTML 、CSS 、JavaScript 和 PHP 代码。一些特定的需求必须要用代码来完成，最常见的是用 CSS 来调整元素的样式；如果你没有写过代码，我推荐你了解一些 CSS 的相关知识，它们很容易上手，而且也会给你的页面带来显著的变化。我个人觉得两个很实用的技巧是：

使用浏览器的开发者工具，定位到你要变更的元素位置，找到它的 CSS 类名，然后在外观-自定义-额外 CSS 中为该类编写 CSS 代码，你能够在这里看到实时渲染的变化；
灵活使用 AI。我自己用 GPT-4o 试了一下，复制网页的 HTML，并提出需求，大多数时候它都能生成不错的代码。

本文不会对写代码深入讨论。这里举一个简单的例子，来展示怎么用代码来让你构建的 header 在用户下滑时隐藏，上滑时出现，来营造更为沉浸式的浏览体验。

具体步骤如下：

打开在 Elementor 中用 Theme Builder 提前创建好的 header；
选择最外层的容器，在高级设置-布局中找到 CSS 类，给它设置一个自定义的类名，这里以 hide-header 为例；
在 Elementor 的 Custom Code 中，新建一个文件，编写下面的代码；
位置选择 </body> – End（优化网页加载速度），在右侧设置条件为 Entire Site，保存；
查看效果，如果没有效果可以清除缓存或改用无痕模式。

<script>
var prevScrollpos = window.pageYOffset;
var header = document.getElementById("hide-header");
var scrollThreshold = 200; // 效果生效的位置

window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
	if (currentScrollPos > scrollThreshold) {
		if (prevScrollpos > currentScrollPos) {
    header.style.transform = "translateY(0)";
  } else {
    header.style.transform = "translateY(-70px)"; // 设置为 header 高度
  }
	}
	else {
		header.style.transform = "translateY(0)";
	}
  prevScrollpos = currentScrollPos;
}
</script>

<style>
#hide-header {
  transition: transform 0.4s ease;
}
</style>

插件推荐

WordPress 有海量的插件，例如帮助你轻松构建电商网站的 WooCommerce、帮你优化 SEO 的 Yoast SEO 等等。我个人觉得非常实用的两个插件：

All-in-One WP Migration and Backup

All-in-One WP Migration and Backup 能让你一键备份和迁移 WordPress。做法是用该插件将整个网站导出成一个文件，然后在你要迁移的网站安装该插件，上传文件即可。

Advanced Custom Fields (ACF)

ACF 能让你在 WordPress 中自定义字段，例如博客默认只有一张 featured image，但如果你希望展示多张，你可以用这个插件给你的博客添加新的图片字段，这样你就能为每个博客上传多个 featured image 了，而且你可以在 Gutenberg 和 Elementor 中轻松调取和展示这些图片，不需要代码介入。更进阶的用法需要一定的代码知识。如果你想了解 ACF，可以阅读这篇文章或者搜索视频教程。