【Wordpress教学课程2021】1小时就学会架站
这是一篇全面,适合新手看的Wordpress教学课程 - 1小时就学会架站(2021年更新)。
在这篇教学,你会学习到:
- Wordpress的基本概念
- 购买网址,伺服器,安装WordPress
- Wordpress实战操作
- 安装主题示范
如果你想学习Wordpress,或是想低成本做网站,这篇教学会非常适合你。
准备好了吗?我们开始吧!
目录
第1章
Wordpress基本概念
第2章
购买网址,伺服器,安装WordPress
第3章
Wordpress实战操作
第4章
安装主题示范
第1章Wordpress基本概念
Wordpress是一套非常受欢迎的架站方法。
它免费,开源,也具备大量模版及可扩充的功能。
即使你不懂编程,你也可以利用wordpress架站。
无论你想建立简单网站,或是功能繁复的平台,通常都有对应的模版(Template)。
只要使用合适的模版,再作出一些修改,你便可以简单地成功建立网站!
有不少大型公司的网页,例如Unwire.hk,BBC America,Sony Music等,都是建基于Wordpress去架站的!

什么是Wordpress?
Wordpress是一套非常流行的内容管理系统,简称CMS。
内容管理系统(CMS)的作用是,让一个不懂编程的人,也能够更新网页的内容。
跟据https://trends.builtwith.com/cms,Wordpress是现今最多人用的CMS。

通常,网站开发人员会把设计好的网站,连上CMS,让一个不懂Programming的人,也能够更新网站的内容。
然而,由于Wordpress的功能非常强大,它渐渐变成制作网页的神器。
WordPress 有一个功能叫「theme(主题)」,简单来说,就是一个网页的外观。我们也称次为网页模板。
我们可以合法地买一些别人设计好的各种漂亮外观,把它变成自己的网页。你会发现,这些各式各样的主题竟是如此多,既专业又漂亮。
要注意我们这里讨论的是wordpress.org,而不是wordpress.com。wordpress.org是一套免费,开源的CMS。而wordpress.com则是一个让你Blog的第3方服务。
要了解更多网页设计的基本概念,可参考:
写网页课程2021 - 学写网页的9个重要概念
要利用wordpress架站,大概可以分为2个步骤:
- 前期设置工作
- 利用worpdress架站
下一章,我们会集中处理前期设置工作。
除了文章教学外, 你也可以看看1这篇教学的Youtube版:
第2章购买网址,伺服器,安装WordPress
前期设置工作,就是你要利用wordpress架站前,需要预备的工作。
有人说,前期设置工作很麻烦。的确,前期工作是很麻烦,沉闷,也令许多初学者在这个Step便却步了。但,你不会放弃吧?
前期设置工作可以分为4个部骤:
- 购买网址
- 购买伺服器
- 把网址和伺服器连在一起
- 安装Wordpress
我们先会学习前期设置工作。已经设置好wordpress的朋友,可以直接到Wordpress实战操作。

购买网址
只要一个网址没有被人注册,我们便可以去购买。
选择网址时,网址长度,和你的业务的关联性,易记程度….等等都是考虑因素。
要查看和注册.com .net .org的网址,我们可以到:
http://godaddy.com

选择网址后,通常会问你要不要Privacy Protection。如果你想你的登记资料(如姓名,Email等)不被公开,便可选择加上Privacy Protection。

Godaddy上的「Start your website for FREE」,不用tick。因为Godaddy的Server不太行。
要查看和注册.com.hk .hk的网址,我们可以到:
http://www.hkdnr.hk/

要注意,注册.hk的网站是需要身份证/商业登记证喔。
购买伺服器
由于Wordpress使用PHP为基础编程语言,因此,我们需要一个运行PHP的伺服器。
此外,Wordpress还会使用到数据库(Database)。而Database最常用的就是MySQL。因此,我们的伺服器要支持PHP+MySQL。
Wordpress常用的伺服器环境叫LAMP。意思是Linux+Apache+MySQL+PHP,代表系统OS上用Linux,透个伺服器软体Apache运行PHP+MySQL。
至于伺服器的选择,我以往会推介新手使用Hostgator,因为设定简单。但今天,我会推介新手都使用Google Cloud,原因如下:
- 接近免费。使用Google Cloud最平的机,约7USD一个月。而Google Cloud有300USD免费使用。因此对新手而说,Google Cloud起码头一年费用全免。
- Google信心保正,速度快。
然而,Google Cloud的缺点就是,它只会给你空的电脑,里面什么也没有。你需要自己安装LAMP环境,对新手而言,比较麻烦。
但各位不用害怕,我会一步一步Guide你去做=)
首先,到https://cloud.google.com/,选择「免费试用GCP」

选择你的国家,接受同意条款。按Continue。

填写你的Credit Card资料。按Continue。
你用USD300免费使用,不会被扣钱的。

安装WordPress
接下来,我们便可以去安装WordPress了。到达Google Cloud的主控台。搜寻「Wordpress」,并选择「Wordpress Certified by Bitnami」。
Wordpress Certified by Bitnami是一些Package,里面已经替你设定好Wordpress及LAMP环境。

选择Launch on Compute Engine。

Zone是Server的地区。(当然愈近愈好)
Machine Type选择micro对初学者应该够用。(你想机能强一点便选择贵一点的吧)
Disk就选择40GB应该就行。

等一会。。。安装成功了!记得把所有资料,包括网址,后台网址,后台登入与密码都一一记下。

在浏览器上输入网址,下图就是你刚刚装好的Wordpress了!

你也可以登入Wordpress的后台试试看!

移除 Bitnami 出现于网站右下角的 Banner
现在,我们还有一个问题,就是网站右下角,会出现一个Bitnami的广告icon。
接下来,我们将学习如何把它移除。
到左手边的Menu,按Compute Engine,选择VM Instances。
VM Instances就是你的Server电脑喇!

找到你的VM Instance后,按SSH,选择Open in browser window。
SSH是透过command line,与你的Server沟通的一种方法。

输入以下command:
要一句一句的去输入。每输入完一句按Enter
sudo /opt/bitnami/apps/wordpress/bnconfig --disable_banner 1
*此Command的意思:移除Banner
sudo /opt/bitnami/ctlscript.sh restart apache
*此Command的意思:重新启重apache
sudo /opt/bitnami/ctlscript.sh restart nginx
*此Command的意思:重新启重 nginx
输入以上的3条Command后,右下角的 Banner成功被移除了!

连接网址和伺服器
接下来,你要把网址和伺服器连在一起。在以上的godady + google cloud例子中,一共有两个步骤要做:
- 把Google Cloud Server上的IP设为静态IP
- 把Godaddy网址上的A record指到你的Server IP
把Google Cloud Server上的IP设为静态IP
首先,到你的Google Cloud。搜寻VPC,然后选择External IP Address。

把type由Ephermeral转到Static。

随便改个名字,按Reserve。

把Godaddy网址上的A record指到你的Server IP
到你的Godaddy Panel。找到你的Domain后,按Manage DNS。
DNS全名叫Domain Name System。意思是Domain与IP Address的关系。

把@的A record中的value转为你的Google Cloud IP。
A record用来指定Domain对应的IP。

通常我们会设立两个A record。一个是@,一个是www。
意思是你的网址 xxx.com 及 www.xxx.com 皆会指到你的Server IP。
但在今次这情况,Godaddy本第已经有一个CNAME record:把www转到@。
因此,我们无需要再设立www的A record。
接下来,等待4-24小时,你的网址便会连接到Google Cloud!
第3章Wordpress实战操作
好了!经过一大轮的前期工作,我们终于要学习Wordpress的实战操作了!
我们将会由Wordpress的基本操作开始去学习,包括:
- Page
- Post
- Menu
- Users
- Themes
- Plugins
- Widgets
- General Settings
- 设定首页
我们开始吧!

基本操作 – Page
如果你的网址是xxx.com
那么,你的Wordpress后台地址便是xxx.com/wp-admin
后台就是只有网页管理员(就是你)才可以进入的地方。
Wordpress的后台可以管理整个网站,例如其内容,外观,甚至各种不同的功能等等。
现在大家请开两个浏览器,一个是你的网址,一个是你的后台。
在后台左手边, 是这个后台的主要菜单。你试试按Pages->All Page

什么是Page?
Page就是「页」。
每一页,都会有一个自己独立的网址。
比方说:
xxx.com/about-us
xxx.com/faq
xxxx.com/contact
从以上可见,每一个内页都有一个独立的网址。任何人只要在浏览器上输入这个网址,便能去到相应的页面。
现在,你可以试试新增一个页面。到All Pages -> Add New。然后填下标题,内文,最后按publish。

接一下View Page,便可以成功看到刚刚建立的页面!

Page Address(以前叫Permalink)就是这个页面的网址
接下来,你可以为这个Page新增一个Block。按+,然后按Paragraph

你更可以设定字体颜色,粗体,斜体等等。

另外,你可以按一下那3个圆点,然后按Edit HTML。直接修改HTML。


你可以在左手面,Drag & Drop每个block的位置。

做完所有改动后,记得要按Update!那么所有改动便会储存。
Update完后,你可以接View Page,或在新建的页面上按Refresh,以看到更新后的内容。
另外一个概念叫Featured Image。我们试试按右下角的Set Featured Image。
Featured Image是一张代表这页面的相。(只有一张)

把照片直接拖到这里。

按一下Select。

成功为这页加上Featured Image了。

除了Featured Image外,你也可以在内文加图片。按+ -> Image

按Media Library。然后你就可以上传照片。

按一下上传后的照片,你可以改变该图片的一些设定,如图片大小,置左/中/右等等。
再三提醒:更改完后记著按Update!

Refresh这一页的网址,成功看见上传后的照片。

基本操作 – Post
什么是Post?
Post就是网页上news(新闻)或blog(部落客)的部份。
Post其实和Page很像。但是大部份的Post,外观都是一样的。每一个Post不同地方只在于其Post的内容。
比方说,在apple的网页中,每一刚新闻的外观都是一样的。


现在我们试试去新增一个Post。按Post -> Add New,其他的动作基本上和Page一模一样。

我们更可以把Post归类。到All Post -> Categories。随便新增一些Category。在Name 输入后按Add New Category 便可。

然后我们回到讲讲新建的Post,剔下这个Post的Category便可以。

基本操作 – Menu
每一个多于一页的网站, 都会有一个主要导航(Navigation)。他们会出现在每一页上,目的是供用家可以看站内的其他页。
这个主要导航,我们在Wordpress上称次为Menu。

到Appearance -> Menus,按Create a Menu。然后随便输入一个Menu名称,按Create Menu。

在左手边我们可以选择一些想加进这Menu的Page,然后按Add to Menu。你也可以选择Custom Links,加上其他连结。
Display Location一定要剔。它代表你的menu要放到这个网站上的哪一个位置。

你也可以按一下小三角,去更改Menu上的文字。
你更可以Drag & Drop,去为Menu重新排序。

看!成功地放置Menu了!

基本操作 – Users
Wordpress已经内建了一个用家管理系统,我们称之为User。
到Users -> All Users

正常的情况下,Users就只有你一个用家 - 你自己的管理员帐号。
另外,你也可以到Users -> Your Profile,去重新设定你的登入密码。
通常的情况下,我们并不需要利用到这个用家管理系统。
但如果你的网页可以开放给用户注册,你便可以借助这个系统,管理你的用户。
基本操作 – Themes
Themes就是你Wordpress的外观。透个使用不同的themes,你可以更改网站的外观。
到Appearance->Theme

Wordpress内置的theme store都是免费的theme,但通常都不太漂亮。
我自已通常会使用themeforest上的收费theme。
同一个Wordpress上,你可以install多个theme,但只能active一个。
基本操作 – Plugins
Plugins可以为你的Wordpress新增功能,例如Ecommerce,多国语言等等。
到Appearance->Installed Plugins

Wordpress上内置的Plugin Store都是免费的Plugin,但通常已经够用。
一个Plugin在install后,必须activate才可以启用。
基本操作 – Widgets
接下来,你会学习Widgets。
Widgets是网站的一小片位置,我们可以随意在这片位置上加上我们需要的东西。
Widgets通常应用于一个网页Sidebar(侧栏)或者Footer(网页最底部的位置,通常每页都会出现)上。
到Appearance->Widget


在这个主题,你可以看到,只有一个位置可以给我们放Widget,就是Footer。
Footer Widget上面写着「Add widget here to appear in your footer」,因此,我们知道这个widget用作footer。
你可以使用Drag & Drop,把左边的Available Widgets drag到右边的Footer Widget上。

基本操作 – General Settings
最后,我们要学习一些Wordpress的基本设定。
第一个常用的设定是Settings->General。你可以更新网站的title及tagline。
Title是你网站的名称。而Tagline则是一至两句的短句子,去描述你的网站。

Settings->Permalinks可以设定你的网址结构。
Permalinks我通常使用的设定是postname,因为可以让用家更容易大概知道该页是什么。

基本操作 – 设定首页
最后的最后,我们可以为wordpress设定首页。
到Settings->Reading

预设的Front Page Display设定是Your latest posts,代表你最新的post。
你可以选择A static page,让你在Page中选择一页作首页。
第4章安装主题示范
终于来到最后一课了。在这一课,我将会示范从头开始,去使用一个theme,来建立一个新闻网站。
你将会把前面学习了的知识,都用一次。
我们会使用一个免费的theme - Neila,去建立一个新闻网站。
然而, 我其实自己什少使用免费的theme,因为免费的theme都不太漂亮。我通常是使用themeforest上的收费theme。不过大家今天初学, 用免费theme试试做也不要紧!

安装主题示范 — 建立新闻网站
首先,到Appearance->theme。按Add New。

在右上角搜寻"Neila",然后按install。

按"Activate",去启动主题。

到前端外观看看,整个网页的外观转换了!

这是一个新闻网站。每一个新闻都会在wordpress中用post去表示。而且,你可以把它们分类。
我们先去新增一些分类。到Posts->Category,输入分类名称,然后按「Add New Category」。

接下来,到Post->Add New新增一些Post。记得要放入Featured Image及把它们Tick到对应的Category。

关于网页的照片,我喜欢使用一个免费图片库,叫pexels。
到达pexels.com后,搜寻图片。

然后按Download。Size的话选择Larget就够用。Original通常File Size会太大,不建议使用。

下一步,就是去建立Menu。到Appearance->Menus,输入Menu的名称,然后按Create Menu。

然后,在Menu上加上你要用的页(就是你的Category)。在Display Location上Tick「Primary Menu」,按Save Menu。

接著,你可以到Appearance->Widgets修收你的Sidebar。今次,我的Sidebar只放了3样东西:Search, Categories及Recent Posts。

最后,到Settings->General,更改你的Site Title及Tagline。

就这样,你很快便利用一个theme,建立了网页!

总结
Wordpress其实并不难学。但要充分理解及运用,也要时间去练习。以上的内容,已教授了你很多基础wordpress知识。大家好好学习吧!
如有任何问题,欢迎Email我!
