你想知道如何用WordPress架设网志、食记、旅游部落格(Blog) 吗?这篇笔记会用浅显易懂的方式跟你分享如何用最简单、最低的成本的方法,快速架设出一个出色的个人网站/部落格。

我会不藏私地免费把如何架设部落格的方法铺成阶梯,你只要跟着6大步骤操作,就可以省很多时间,少走很多我以前走过的冤枉路,在架站的路上赢过90%以上的新手。

你的WordPress部落格/个人网站将会拥有

以下是常见的部落格类型,如果你还不确定想做哪类型的部落格的话,可以参考看看。

以前我还不会架设网站的时候就很希望有一个中文教学是我能无脑一步一步照着按就好了,现在我会架设网站了,我就来做这么一个可以简单地照着按、按、按就可以架好个人部落格网站的教学

或许有些人会把这样的教学拿去卖钱,不过我以前也受到网路上很多人的帮忙才学会架网站的,所以我想把制作个人部落格的方法免费跟你分享。如果你想支持我的话,欢迎透过这个网站提供的连结购买,这样我就能够获得一些收益。有的软体或工具有观众的专属优惠折扣,希望能帮你省一些架设网站的成本。

用WordPress架设部落格(Blog)

一开始我会先跟你分享,用WordPress架设部落格(Blog) /个人网站前需要知道的事情。

如果你想直接开始架设Blog可以点击下方按钮。

架设部落格(Blog) /个人网站有什么好处?

《你要如何衡量你的人生?》这本书的作者说过:「我们把自己的时间、精力和才华投入在什么地方,我们的人生就会呈现相同的样貌。」而我觉得架设自己的部落格(Blog) 是一个值得我们投入自己的时间、精力和才华的地方。

架设自己的Blog的好处

  • 学会架设网站这个新技能。
  • 可以自己设计属于自己的Blog版型。
  • 可以用文字、图片抒发心情、记录生活。
  • 可以透过Blog赚取被动收入与主动收入。
  • 可以把自己的Blog发展成网路事业。
  • 可以透过Blog跟自己有相同兴趣的人有所连结。
架设部落格(Blog)个人网站的好处
架设部落格(Blog) 个人网站的好处

免费更多笔记
如何架设可以赚钱的网站

为什么选择WordPress来架站?

WordPress是一个免费的架站平台,全世界有41%的网站是用WordPress架设的,而且这个比例每年都逐渐提高

WordPress.org官网指出WordPress有41%的全网使用率
WordPress.org官网指出WordPress有41%的全网使用率

我会选择用WordPress,更准确来说是WordPress.org来架设个人部落格的主要原因是品牌跟自由(你现在观看的这个教学也是教你使用WordPress.org来架设网站)。

WordPress其实有分成WordPress.com跟WordPress.org,用错的话长久下来就亏大了,你果你不清楚这两个的差别的话,可以看我之前做过的影片。

你可能听过很多人用痞客邦、Blogspot (Blogger) 等等来写Blog,但使用别人的网站来写部落格比较没有建立自己的品牌的感觉。而且版面设计、功能限制也很多,甚至也有可能像过去无名小站倒闭的风险。只要痞客邦或Blogspot倒闭,你经营的内容或努力写的文章可能就没了。

相对来说使用WordPress架设网站的话,我们可以有自己的域名建立品牌形象,在设计与功能也都能客制化调整,也可以很简单地备份你的文章。所以,我推荐使用WordPress来写Blog。

以下我还列了几个WordPress的优点,你可以参考看看。

WordPress的优点

  • 免费。
  • 开源软体。
  • 不用学程式就可以架站。
  • 可以客制化各种设计、排版。
  • 可以根据需求增加功能。
  • 不只可以架部落格,还可以做网路商店、官方形象网站等等。
  • 可以进行搜寻引擎优化(容易在Google有好排名)。

讲完优点还是要讲一下缺点,没有一个东西是完美的。

WordPress需要比较长的学习时间,大概需要几天到几周。不过不用担心,只要跟着这篇教学,你一定可以架好你的个人部落格。

WordPress跟其它架站平台比较
WordPress跟其它架站平台比较

什么是WordPress?

架设个人部落格我们需要什么呢?

想要架设自己的部落格,我们需要3样东西,第一个就是我们刚刚提到的WordPress。WordPress是免费的。但要使用这个免费WordPress软体,我们需要购买主机来安装WordPress软体,然后注册自己的域名(Domain name)。

架设Blog/个人网站需要的东西

  • WordPress (免费)
  • 主机(付费)
  • 域名(付费)

什么是域名?

如果把部落格/个人网站当作家的话,域名简单来说就是家(网站) 的门牌,让全世界的人可以找到你的家。别人只要打你的域名在网址列,按下Enter (输入),就可以找到你的网站。

像是,你想要在苹果的官网买手机,你只要在网址列输入「apple.com」,按下Enter,就可以进入苹果的官方网站。取域名是我最喜欢的步骤,因为很有趣,你可以想像自己是CEO,帮自己的事业取一个品牌名称

域名(Domain Name)
域名(Domain Name)

我把取一个好域名值得注意的地方整理起来,如下:

  • 有品牌感
  • 简短
  • 好记
  • 最好「.com」结尾(如果有人取了「.net」、「.org」 也不错)
  • 不要拼错字(之后要改很麻烦)

当然在想域名的时候不要过度思考,遵从你的内心,完成比完美更重要(Done is better than perfect)。

像我的这个网站的域名是「notesstartup.com」,主要是因为我叫诺特斯(Notes),我想要在这个网站分享有关如何架设网站的资讯,提倡把网站当作是自己的事业的概念,所以后面加上创业的英文(Startup) 就成了「notesstartup.com」。

注册域名要钱吗?

要的,注册域名第一年约$12.99美金($390台币) ,在后面的段落会跟你分享第一年免费注册的方法。第一年过后,续订的价格是18.99美金/年($570台币/年)。

备注:
在这篇笔记中,美金汇率以30做估算,如果现在汇率比30还低,换算成台币的价格会更便宜。

很多知名品牌为了避免跟自己的品牌类似的域名被有心人士注册走,而导致品牌形象受损,他们甚至会花很多钱在购买很多个类似自己品牌的域名。

 

什么是主机?

如果把部落格/个人网站当作家的话,主机就是土地,我们要租一块地才能盖自己的家。通常我们要找资讯,会说去Google,但是我们的网站资料其实不是放在Google上,而是放在自己的主机上。Google就像是导游,带大家找到我们在主机存放的资料。

主机才是真正存放网站资料的地方。有自己的主机的好处是,我们对自己网站的资料有100%的掌控权,可以想写什么就写什么,不会被删掉,或突然违反什么条约,而导致部落格被关掉。

主机(Hosting)
主机(Hosting)

主机要钱吗?

要的。每个月大概$3–$50美金。大概是架网站初期会花最多成本的地方。

不过没关系,用Bluehost主机的话,我有帮你争取到诺特斯观众才有的专属28折优惠,只要$2.75美金/月(原价$9.99美金/月),以购买1年的方案为例,总共可以省$86.88美金(约省2606台币),希望这些折扣对你有帮助。

备注:
在这篇笔记中,美金汇率以30做估算,如果现在汇率比30还低,换算成台币的价格会更便宜。

Bluehost logo

为什么选Bluehost?

因为我觉得Bluehost是对新手最友善的主机。使用Bluehost主机的话,刚刚提到的WordPress、域名、主机,会一次帮我们整合起来,在设定上不会出问题。

很多人一开始会不小心用到一些烂主机或太高阶的主机。太烂的主机效能不够,太高阶的主机除了太贵之外,还要花很多时间去设定,还没开始写部落格就把自己搞得灰头土脸,我觉得很不值得,我们应该要多把时间花在制作内容上。

我记得我还在台大读书的时候架了我的第一个网站就是使用Bluehost

我在学生时期就开始边打工边尝试开始自己的网路事业。我还记得那时候我利用打工的空档,用邮局金融卡买了Bluehost主机(对,当时我还是学生没有信用卡),一开始不知道为什么还刷不过,后来是把邮局金融卡绑订PayPal才付款成功。

虽然现在看起来很便宜,但对我当时来说,几千块也是一大笔钱,那时我花了好多时间看要用哪个主机,看了很多国内外分析文章,最后选择了Bluehost,到现在还在用。Bluehost真的是蛮不错的,我蛮推荐新手使用Bluehost来架设网站。

Bluehost logo

我把我长期使用Bluehost过后体验到的优点整理下来:

Bluehost优点

  • 对新手非常友善。
  • 值得信赖,是WordPress官方推荐的主机。
  • CP值超高,$2.75美金/月(诺特斯观众专属,原价$9.99美金/月),该有的功能都有。
  • 客服很棒,有问必答。
  • 第一年免费注册域名(价值约$12.99美金)。

Bluehost缺点

  • 属于共享主机,速度较慢。
  • 对速度有要求的话,需要另外做网站速度优化,或升级高阶的云端主机。

用Bluehost主机架设WordPress网站要花多少钱?

透过诺特斯观众的专属优惠连结购买高CP值Bluehost主机,每个月最低只要$2.75美金(约$83台币),还会送你1年免费域名。也就是说,以购买1年的方案为例的话,只要$33美金(约$990台币),就可以开始架设属于自己的网站了。

使用高阶主机+注册域名费用,可能每年超过$200美金(约$5600台币),而且设定起来也比较复杂,所以建议新手可以使用Bluehost主机来架设网站,比较便宜,也比较容易。

我觉得最基本的方案对新手来说就很够用了,这个教学会以Bluehost主机的Basic(基本)方案为例,以下是我整理的规格与费用表格。

项目

WordPress Bluehost (一年)

 

主机

 

原价:$9.99美金/月( $300台币/月)
特价:$2.75美金/月($83台币/月)

 

域名

 

第1年免费

SSL凭证

 

免费

访客数量

 

无限

总费用

 

$33美金
(约990台币)

 

总节省费用
(透过优惠连结)

省$86.88美金

(省$2606台币)

 

优惠连结

取得优惠

备注:
1. 主机优惠只有首次购买时才有,续约时价格会变回原价。
2. 域名免费第一年后的价格约$18.99/年(约570台币/年)。

有推荐Bluehost主机之外的其他主机吗?

Bluehost主机的价格是每个月$2.75美金/月(约$83台币/月),CP值非常高。

但如果你的单月预算比较高,有超过$10美金/月(约$300台币/)的话,可以考虑直上Cloudways主机。使用Cloudways主机,网站速度会超级快

如果你想要使用Cloudways主机架设网站的话,可以参考这篇Cloudways主机架站教学。如果还不确定自己适合哪个主机的话,可以参考这篇Bluehost主机vs Cloudways主机。

#1 开始架设网站(使用Bluehost主机)

在第1步骤,我会教你如何透过Bluehost购买主机注册域名安装WordPress,也会教你一些WordPress重要的基本设定

  • 点击下方优惠连结,用诺特斯观众专属的28折优惠价格购买Bluehost主机(点击连结会自动套用专属优惠,最低$2.75美金/月)
Bluehost logo
  • 点Get Started Now (现在开始) 按钮
点击Get Started Now (现在开始) 按钮,开始购买Bluehost主机
点击Get Started Now (现在开始) 按钮,开始购买Bluehost主机

如果想架设一个网站,建议选择Basic (基本) 方案,假如果想要架设多个网站,建议选择Plus (加) 方案。

大多数新手一开始只需要架设一个网站,所以我们以Basic方案做示范。

  • 新手选最便宜的Basic (基本) 方案
  • 按Select (选择) 按钮
选择Basic (基本) 方案
选择Basic (基本) 方案
  • 填写域名→ 按Next (下一步) 按钮。
  • 如果还没想好→ 按I′ll create my domain later (我之后再创建域名)。
在Bluehost免费注册新域名
在Bluehost免费注册新域名
  • 选择注册新域名的人,如果输入的域名可以使用会出现下面的讯息。
域名可以使用(没有其他人注册)会显示的讯息
域名可以使用(没有其他人注册) 会显示的讯息
  • 填写帐户资讯(Account Information)
填写Bluehost帐户资讯(姓名以以周杰伦,地址以101为例)
填写Bluehost帐户资讯(姓名以以周杰伦,地址以101为例)

怎么把中文地址翻译成英文地址?

在台湾的话,可以利用中华邮政的中文地址英译服务,把中文地址翻译成英文地址。

邮递区号打3码即可,打6码可能会出现错误讯息。

错误讯息:
Zip / Postal Code did not match country requirement

解决方法:
邮递区号打前3码就好。

中华邮政的中文地址英译服务
中华邮政的中文地址英译服务
  • 选择套餐资讯(Package Information)

选择Bluehost主机租用方案

在帐户方案(Account Plan) 可以选择一次租用12个月或36个月。

下方为Basic(基本)方案中,12个月方案与36个月方案比较表:

项目

一次租用12个月

 

一次租用36个月

原价

 

$9.99美金/月
(约$300元台币/月)

$9.99美金/月
(约$300台币/月)

 

特价

 

$2.75美金/月
(约$83台币/月)

$4.95美金/月
(约$149台币/月)

 

折扣

28折

5折

总节省费用
(透过优惠连结)

 

省$86.88美金

(约省2606台币)

省$181.44美金
(约省$5443台币)

 

优惠连结

取得优惠

取得优惠

备注:
主机优惠只有首次购买时才有,续约时价格会变回原价。

这个教学以Basic(基本),一次租用12个月的方案做示范。

选择Bluehost主机的方案
选择Bluehost主机的方案

勾选与取消套餐加购项目(Package Extras)

诺特斯建议新手的2种选择:

1. 适用大多数新手

加购项目全部取消。

基本上这边的加购项目大多都不必要,取消可以为你省一些不必要的成本,之后想要也可以在Bluehost后台购买。

取消所有Bluehost加购选项
取消所有加购选项

2. 适用注重隐私的人

只选择加购域名隐私与保护(Domain Privacy Protection)。

这个项目勾选后可以保护你的个资,以后别人Google你的域名的时候,就查不到你填的资讯(像是姓名、地址、电话等等)。

取消所有加购选项,只留下Domain Privacy Protection (适用注重隐私的人)
取消所有加购选项,只留下Domain Privacy Protection (适用注重隐私的人)
  • 填写付款资讯(Payment Information)
填写付款资讯
填写付款资讯
  • 勾选同意自动更新
  • 按submit (提交) 按钮
勾选同意条款并按Submit(提交)按钮
勾选同意条款并按Submit (提交) 按钮

提交时如果遇到无法付款的请形,我有帮观众问过Bluehost客服,可以透过更换其它浏览器(Firefox、IE、Edge、Chrome等等) 解决。更换浏览器之后记得要再次点这个连结,28折优惠才会生效!

  • 按Create your account (创建你的帐户) 按钮
付款成功,并开始创建Bluehost帐户。
付款成功,并开始创建Bluehost帐户。
  • 设定Bluehost密码
创建Bluehost帐户密码
创建Bluehost帐户密码
  • 登入Bluehost帐户
帐户创建成功,点击按钮开始登入Bluehost帐户。
帐户创建成功,点击按钮开始登入Bluehost帐户。
登入Bluehost帐户
登入Bluehost帐户
在Bluehost自动安装WordPress
  • 开始创建网站
开始Bluehost引导流程,点击Create your website(创建你的网站)按钮。
开始Bluehost引导流程,点击Create your website (创建你的网站) 按钮。
  • 跳过Bluehost所有引导流程

我会从头开始教你如何创建一个WordPress网站,Bluehost的引导流程可以跳过,都先选择Skip this step (跳过这个步骤)。

点击skip this step(跳过此步骤)
点击skip this step (跳过此步骤)
点击skip this step(跳过此步骤
点击skip this step (跳过此步骤)
  • 点击左边的Limitless customization(无限制客制化)选项,Bluehost会为你自动安装WordPress.org。右边的选项是有附加Bluehost提供的Website Builder(网页编辑器),选右边反而会限制网站的功能
点选左边的选项,开始安装WordPress.org软体。
点击左边的Limitless customization(无限制客制化)选项,开始安装WordPress.org软体
  • 继续跳过引导步骤
点击skip this step(跳过此步骤)
点击skip this step (跳过此步骤)
往下拉,选择skip this step(跳过此步骤)。
往下拉,选择skip this step (跳过此步骤)
  • 点击Get Started (开始) 按钮,进入Bluehost后台
点击Get Started (开始) 按钮
  • 正式进入Bluehost后台
    一开始网站仍为暂时域名,过一段时间后,会自动变成当初注册的域名。
进入Bluehost后台(一开始网站仍为暂时域名,过一段时间后,会自动变成当初注册的域名)
Bluehost后台
  • 在Bluehost为你自动安装WordPress后,会自动帮你转跳到WordPress后台。
  • 到侧边栏「Users」(使用者) → 「All users」(全部使用者)
  • 点击使用者
点击使用者
点击使用者
  • 往下拉→ 点击「Set New Password」(设定新密码) 按钮→ 设定WordPress密码
设定新WordPress密码
设定新WordPress密码

收Bluehost寄的重要验证信件

  • 登入Email
  • 找到WHOIS域名注册验证信件
到信箱收取域名注册验证信
到信箱收取域名注册验证信
  • 点击Verified your Email (验证你的Email)
点击Verified Your Domain(验证你的域名)按钮
点击Verified Your Domain (验证你的域名) 按钮

认识WordPress后台、WordPress前台

  • 前台:观众/访客会看到的画面
    路径:xxxxxx.com (xxxxxx.com请带入你的域名)
前台
前台
  • 后台:网站管理者才看得到的画面
    路径:xxxxxx.com/wp-admin (xxxxxx.com请带入你的域名)
后台
后台

更多免费笔记
WordPress后台教学(未来开放)

如何登入WordPress后台?

从Bluehost登入(第一次)

  • 登入Bluehost后台
  • 选「My site」 (我的网站) → 「Manage Site」(管理网站)
透过Bluehost后台登入WordPress
透过Bluehost后台登入WordPress

从网址列登入(后续登入较方便)

  • 在任何浏览器的网址列打:「你的域名/wp-admin」。

范例

域名:notesblogdemo.com

输入:notesblogdemo.com/wp-admin

在网址列输入:你的网域/wp-admin(以示范网站notesblogdemo.com为例)
在网址列输入:「你的域名/wp-admin」
  • 选择「Log in with username and password」(用使用者名称跟密码登入)
选择Log in with username and password(用使用者名称跟密码登入)
选择「Log in with username and password」(用使用者名称跟密码登入)
  • 打使用者名称/Email。
  • 密码打之前设好的密码。
输入使用者名称/Email和密码
输入使用者名称/Email和密码

做WordPress一般设定

  • 进入WordPress后台→ Settings (设定) → General (一般)
  • 把WordPress语言改成繁体中文→ 储存
  • 填写网站标题
  • 填写网站说明
  • 选择日期格式
  • 选择时间格式
  • 储存所有一般设定
WordPress一般设定
WordPress一般设定

WordPress位置(网址)、网站位置(网址) 原本会显示类似「http:// box2123.temp.domains/xxxxxx」。这是Bluehost给你的暂时域名,让你在等待域名设置的期间,可以先顺利架站。

Bluehost给的暂时域名
Bluehost给的暂时域名

过几个小时之后,Bluehost会自动帮你修改成你当初注册的域名,请不用紧张。

过一段时间Bluehost会自动帮你改成你当初注册的域名
过一段时间,Bluehost会自动帮你改成你当初注册的域名

自己修改的话会导致无法登入WordPress,请小心!

如果已经不小心修改了的话,可以联络Bluehost客服。

设定预设永久连结

  • 进入WordPress后台→ 「Settings」(设定) → 「永久连结」
  • 改成文章名称
永久连结设定
永久连结设定

这样以后文章连结预设就会变成文章名称,如果不小心忘记自己自订的文章连结,也不会出现乱码。

#2 安装WordPress主题

在第2步骤,我会带你了解什么是WordPress布景主题,然后跟你分享一个很好的免费布景主题,并教你怎么安装它

WordPress布景主题的功能是什么?

WordPress布景主题(或简称主题) 是可以控制网站版型设计的工具。透过主题,你可以像玩游戏换造型那样,动动手指一按就可以更改网站外观。

WordPress布景主题可以调控的东西

  • 文字大小、颜色
  • 网站版型
  • 页首、页尾
  • 文章设计
  • 页面设计
  • 侧边栏设计
  • Logo位置

看看使用预设主题网站的样子

WordPress预设主题的样子
WordPress预设主题的样子

新增布景主题

  • 到WordPress后台→ 「外观」 → 「布景主题」
点击WordPress侧边栏外观的布景主题
点击WordPress侧边栏外观的布景主题
  • 点击「安装布景主题」
点击「安装布景主题」
点击「安装布景主题」

你可以选择任何你想要的布景主题,这个教学会以Blocksy布景主题为例。

Blocksy是我最喜欢的WordPress主题之一,这个网站就是用Blocksy主题制作的。这个主题是我目前测试过所有免费WordPress主题当中最好的,这个主题给我一个很简约创新的感觉。

它有很多免费的功能在其他主题是要付费的,像是固定/透明页首固定侧边栏网站客制化调色盘、电脑/手机/平板响应式设计(Responsive Web Design) 等等。

你可以去试试其它主题,试过之后会发现Blocksy免费的功能就给得很大方,而且这些功能永久免费。在所有WordPress主题中,是一个很简单而强大的存在。

Blocksy的logo

Blocksy优点整理

  • 简约好看(我喜欢简约一点的设计)。
  • 免费版就很够用(跟其它免费主题比起来有更多功能)。
  • 强大(甚至比很多付费主题有更强大的功能)。
  • 公认最快的WordPress主题之一。
  • 操作简单,容易使用。
  • 可以客制化的页首、页尾。
  • 全网站调色盘(很好用,不用每次都手动调整)。
  • 内建固定侧边栏功能。
  • 手机/平板响应式设计。
  • 内建其它社交平台分享功能。

我自己一开始是使用免费版的Blocksy主题,后来跟客服联络之后,觉得很喜欢这家公司,不想白用这些好功能,想要支持一下,再加上我想要让选单可以有小图标,所以就果断升级付费版了。

但对成本有限的人来说,其实免费版的Blocksy就很够用了,在一大堆WordPress主题当中是一个很好的选择。

我们来安装免费Blocksy布景主题。

  • 到Blocksy网站点击右上角「Free Download」按钮,免费下载Blocksy布景主题。
在Blocksy官网点击Free Download(免费下载)按钮
在Blocksy官网点击Free Download (免费下载) 按钮
点击Download(下载)按钮
点击Download (下载) 按钮
  • 上传Blocksy布景主题
点击上传布景主题按钮
点击上传布景主题按钮
上传下载好的Blocksy主题zip档
上传下载好的Blocksy主题zip档
  • 安装Blocksy → 启用Blocksy
点击立即安装按钮
点击立即安装按钮
点击启用
点击启用

安装完Blocksy主题后网站的样子(简约、干净)
安装完Blocksy主题后网站的样子(简约、干净)

#3 安装WordPress外挂

在第3步骤,我会跟你介绍什么是WordPress外挂,然后教你怎么安装WordPress外挂,也会跟你分享一些我觉得很好用的免费WordPress外挂。

什么是WordPress外挂?

WordPress外挂是能扩展你的网站功能的工具。就像是你手机的APP那样,只要安装了,就可以让你的手机有特殊功能。

就像手机APP那样,WordPress外挂有免费的,也有付费的。付费的外挂通常是一开始基础功能免费,进阶功能要付费的模式。

我的观念是能用免费的就用免费的,真的有需要再付费就好。所以,我在这个WordPress Blog 教学会跟你讲我花很多时间搜寻、研究、比较后,找到的免费且强大的外挂。

把不需要用到的外挂删除

安装完WordPress之后,它会为我们自动安装一些外挂。我们要先把不会用到的外挂删掉。之后想要也还可以再安装回来。删掉不会用到的外挂的好处是可以让网站速度变快,画面也变更简洁。

  • 到WordPress后台→ 「外挂」 → 「已安装外挂」
  • 先停用外挂,再删除所有预设外挂
在外挂的已安装外挂停用并删除预设外挂
在外挂的已安装外挂,停用并删除预设外挂

学习如何安装外挂

  • 到WordPress后台的侧边栏→ 「外挂」 → 「安装外挂」

安装外挂有两种安装方法:

① 透过搜索栏安装WordPress外挂

  • 搜寻外挂→ 输入你想安装的外挂
透过搜索栏安装WordPress外挂
透过搜索栏安装WordPress外挂
  • 点击「立即安装」按钮→ 点击「启用」按钮
点击「立即安装」按钮
点击「立即安装」按钮
点击「启用」按钮
点击「启用」按钮

② 透过自己上传外挂来安装外挂(以Rank Math外挂为例)

  • 到Rank Math官网下载免费外挂(要下载其他外挂就去它的官网下载,步骤都类似)
点击「DOWNLOAD FOR FREE」按钮免费下载Rank Math外挂
点击「DOWNLOAD FOR FREE」按钮免费下载Rank Math外挂
  • 点击「上传外挂」按钮→ 上传自己从外挂官网下载的外挂zip档
透过自己上传外挂来安装外挂
透过自己上传外挂来安装外挂
  • 点击「立即安装」按钮→ 点击「启用」按钮
点击「立即安装」按钮
点击「立即安装」按钮
点击「启用外挂」
点击「启用外挂」

安装这个教学需要用到的外挂

① Blocksy Companion
② Really Simple SSL
③ Rank Math

  • 安装完Rank Math需先连结帐户才能开始使用。
  • 点击侧边栏的「Rank Math」
点击侧边栏的Rank Math
点击侧边栏的Rank Math
  • 点击「Connect Your Account」按钮开始连结你的帐户
点击「Connect Your Account」按钮连结你的帐户
点击「Connect Your Account」按钮连结你的帐户

可以选择Google或Facebook帐户连结

连结Facebook或Google帐户
连结Facebook或Google帐户

诺特斯有推荐什么好用外挂?

  • Blocksy Companion → 强化Blocksy主题的功能
  • Really Simple SSL → 让你的网站有安全锁头(SSL凭证)
  • Rank math → 帮助你提升Google排名
  • Site Kit by Google → 分析网站数据
  • Wordfence Security → 防止骇客入侵
  • Loco Translate → 翻译其它外挂

#4 新增部落格文章、页面、选单

在第4步骤,我会跟你分享如何在WordPress网站新增文章页面选单。包括在文章、页面新增图片、影片、自订连结,还有自订页首选单等等。也会跟你分享重要的网站/部落格搜寻引擎优化(SEO) 的技巧,让你的文章、页面可以出现在Google搜寻的第一页。

文章(post) 跟页面(page) 的差别

在WordPress里,当我们想打一些内容,可以选择建立文章或页面,但是这两种类型差在哪里呢?这个问题是WordPress新手一定会遇到的问题。

要用文章还是页面来发布,需要根据你的内容来判断,以部落格来说,大部分内容都该用文章来建立,以下给你一个简单的准则。

文章

区分方法:

  • 文章会有作者
  • 文章会有分类标签
  • 文章会有发布时间更新时间

备注:

这些区分方法是指WordPress预设的一般状况,网站管理者有可能会隐藏作者、分类/标签、发布时间/更新时间。

使用时机:

会想频繁分享的内容

例如:

  • 你的部落格文章(食记、网志、任何你想长期分享的主题)
  • 新资讯(像是新ipad的功能、旅游资讯)

你现在看到的这篇笔记,就是用文章来建立的,但因为我叫诺特斯(Notes,笔记),所以我特别把我的文章都叫做笔记。

页面

区分方法:

  • 页面不会有作者
  • 页面不会有分类标签
  • 页面不会有发布时间更新时间

备注:

这些区分方法是指WordPress预设的一般状况,网站管理者有可能会自己新增作者、分类/标签(需使用外挂)、发布时间/更新时间。

使用时机:
不会很频繁更新的内容

例如:

  • 关于我
  • 联络资讯
  • 服务项目

你可以参考我的网站,以下这些都是用页面做的。

删除预设文章

  • 到WordPress后台→ 「文章」 → 「全部文章」
  • 选取预设文章「Hello world!」 → 点击「移至回收桶」
把预设文章移至回收桶
把预设文章移至回收桶

新增第一篇文章

  • 到WordPress后台→ 「文章」→ 「新增文章」
WordPress文章介面
WordPress文章介面

这个教学,我以旅游部落格当作范例。我先教你怎么写第一篇文章。

我在台大读研究所的时候,有一次做完实验和朋友在附近巷子吃晚餐。原本就只是随便聊聊,讲到是不是该一起出国玩了。原本我们只是起哄说:「走呀!走呀!」。没想到我们吃完后,马上真的订机票,跟教授请好假,几天后,就飞往冲绳开始我们6天5夜的冲绳自驾旅行了!

我就以这次有趣的经验为标题,写这个旅游部落格的第一篇文章。

这边我跟你分享我写文章的架构。

WordPress文章架构
文章架构

新增标题

  • 打上标题:冲绳自由行|一趟说走就走的旅行。

新增文章段落

  • 段落(一般文字,非标题) 直接打就可以了。

标题标签(Heading Tags) 的功能

标题标签用得好,可以让我们的文章更容易爬到google搜寻的第一名。

标题标签可以让文章有阶层,这可以让google更容易读懂我们的文章,也就进而让我们的文章有更高的机率在google搜寻有好的排名。

标题标签有H1—H6。H1 (Heading 1) 代表第一阶,H2 (Heading 2) 代表第二阶,以此类推。

标题标签怎么用呢?

主标题→ H1 (预设)
副标题→ H2
其他小标题→ H3、H4、H5、H6

通常一篇短文章用H1、H2就很够了,比较长的文章的可以用H1、H2、H3

文章主标题在WordPress里预设是用H1,我们不用特别去调。

副标题,我们则需要自己设成H2。

因为这是示范教学,我用中文假文产生器先生产一些假的文章内容,好让你知道文章写好后大概长什么样子。

新增标题标签

  • 点击「 」
  • 选择「标题」区块
在文章新增标题区块
在文章新增标题区块
  • 选择标签(H2—H6)
  • 输入标题文字
输入标题并选择标签阶层(H2-H6)
输入标题并选择标签阶层(H2—H6)

新增图片

如何在文章新增图片?

① 从文章介面上传

从文章介面上传的方法适合一张一张上传

  • 点击区块右边的「 」
  • 点击「图片」
新增图片区块
新增图片区块
  • 图片区块→ 点击「上传」按钮插入图片
点击「上传」按钮来上传图片
点击「上传」按钮来上传图片
  • 点击图片→ 右上角的「齿轮」→ 区块→ 加入替代文字(Alt Text)
新增替代文字
在图片新增替代文字
  • 点击文章内的图片→ 右上角的「齿轮」→ 「区块」 → 进阶设定→ 在「title 属性」加入文章标题
在图片新增标题文字
在图片新增标题文字

替代文字(Alt Text) 是什么?

替代文字(Alt Text) 是用来描述图片的文字,为了给无法看到图片的观众看,跟告诉搜寻引擎机器人图片的内容。

当图片因为某些原因无法显示的时候,浏览器也会把图片用替代文字显示。

图片标题(Image Title) 是什么?

图片标题是当你滑鼠移动到图片时会显示的文字

替代文字跟图片标题,哪个对搜寻搜寻引擎优化(SEO) 比较重要?

替代文字是比较重要的,因为搜寻引擎机器人会看它。

所以,我们可以适当地把关键字放在替代文字里面,让我们的文章在特定关键字有机会有更好的排名。

举例来说,我想让文章在「冲绳象鼻岩」这个关键字有比较好的排名的话,就可以在替代文字加入像是「冲绳必拍,巨大的象鼻岩。」这样的描述文字,如果的有人搜寻「冲绳 象鼻岩」的话就更有机会找到我的文章。

更棒的是,在图片的替代文字加入「冲绳象鼻岩」这组关键字的话,之后有人在google搜寻「冲绳象鼻岩」就有机会找到我放的图片。所以我们要好好利用替代文字这个功能。

① 从媒体库上传

从媒体库上传的方法适合批量操作,可以一次把替代文字跟标题打好再一次从文章介面用「媒体库」插入

  • 选择「新增媒体」
点击「媒体库」来新增图片
点击「媒体库」来新增图片
  • 点击「上传」→ 透过「拖曳」或「选取档案」批量上传图片
在媒体库上传图片
在媒体库上传图片
  • 点击「媒体库」 → 新增替代文字及图片标题
在媒体库新增替代文字
在媒体库新增替代文字

新增影片

如果你想要在文章内嵌入影片也是可以的,加入影片可以让文章更丰富,我自己就很常把YouTube影片放到自己的网站文章里面。

  • 点击左上角的「 」
  • 浏览全部区块
浏览全部区块
浏览全部区块
  • 媒体→ 选择「视讯」
新增视讯区块
新增视讯区块

透过上传按钮影片

  • 视讯区块→ 点击「上传」
  • 从电脑上传影片
透过「上传」按钮上传
透过「上传」按钮上传

从「媒体库」按钮上传

  • 视讯区块→ 点击「媒体库」
  • 从「媒体库」上传影片
透过「媒体库」按钮上传

加入YouTube影片

  • 视讯区块→ 点击「从网址插入媒体」
  • 贴上YouTube网址
  • 点击「套用」图示
上传YouTube影片
上传YouTube影片

设定精选图片

精选图片就像是书的封面那样。

  • 齿轮→ 文章→ 精选图片
  • 设定精选图片
新增精选图片
新增精选图片

设定永久连结

永久连结就是你可以分享给其他人的网址。永久连结可以设定中文或英文。我喜欢用英文,因为中文在分享网址的时候,有机率会变成一串乱码,用英文看起来比较简短、比较舒服。

像这篇是冲绳(Okinawa) 旅游,那我就可以把网址代称叫做okinawa。

这篇的永久连结就变成:「https://notesblogdemo.com/okinawa」。

把这个网址分享给你的朋友就好了。

新增永久连结
设定永久连结

设定分类(Category)

分类是要分文章的类别,如果我们的目标是要做一个美食+旅游+生活的部落格,那我们类别就可以分成美食、旅游、生活。如果想专写旅游那我们可以分成日本、台湾、韩国等等,以一个刚开始的部落格来说,3—5个分类就很够了,等网站做大了,再慢慢加就好。

以这个示范网站为例,我想专写旅游,所以我把类别分成日本、台湾、韩国。

新增文章分类
设定分类

设定标签(Tag)

标签就有点像IG的#hashtag。如果没用过IG的话,简单来说,标签就是关于这篇文章的关键字。以我们这篇为例的话,就可以把标签设定成:冲绳、自驾、自由行等等。

新增文章标签
设定标签

设定内容摘要(Excerpt)

内容摘要不填也没关系,WordPress会自动帮你把文章的前几个字当做摘要。

搜寻引擎优化

搜寻引擎优化(Search Engine Optimization) 在网站架设的领域通常会直接讲SEO。做好SEO,你就很容易在Google有免费的流量。SEO是一门有趣而且博大精深的学问,之后有机会会再多写几篇笔记跟你分享我学到的SEO技巧,这篇笔记我就先跟你分享如何用WordPress的SEO外挂来做优化。

WordPress的SEO外挂有很多,最知名的就是Rank math跟Yoast,在我自己实际用过之后,觉得Rank math比较好,所以这个教学就以Rank math来示范。

Rank math可以帮你在Google有更好排名,只要用之前跟你说要安装的Rank math的检查清单调整,在SEO上就可以赢其他没在管SEO的人了。

安装好Rank math外挂之后,文章介面的右上角会有一个图标,点进去就可以设定我们的目标关键字。下面可以看到SEO检查清单。打勾是你已经做到的,打叉是你还没做到的,越多勾勾,分数就会变越高。

我们的目标是尽量把叉叉都都变成勾勾,但是因为我们是中文使用者,这个外挂则是针对英文用户,所以有一些项目永远没办法达成,我们只要尽力就好,通常能调到70以上就已经很好了。

Rank Math 介面
Rank Math 介面

举例来说(请参照上图),像是第一个项目要我把这篇文章的关键字放在标题,我已经做到了,所以这个项目就会显示勾勾。第二个项目,要我们把关键字放在说明,我已经放进去了,所以已经显示勾勾。

第三个项目Focus Keyword not found in the URL (目标关键字没有在网址) 不用达成也没关系。因为URL我喜欢设定英文,所以没有达到很正常。

字数统计还有关键字密度的项目,因为范例文章是用中文写的,现在的SEO外挂中文都会有统计错误的问题,所以显示叉叉是正常的。

中文字数统计/关键字密度的问题,官方已经说之后会修改了。

这个SEO检查清单,我们只要尽量调整就好,不需要太过度在意分数。太执着于每个项目都要打勾,这样反而会让自己很痛苦。还是那句话,完成比完美更重要(Done is better than perfect)。

更多免费笔记
Rank math详细教学(未来开放)

发布文章

文章写好、做好基本设定与SEO之后,就可以发布我们的第一篇文章啰!

直接发布:

  • 按右上角的「发布」
  • 在发布前检查项目再次按右上角「发布」
  • 你的文章正式上线啰!
发布文章

排程发布:

  • 按右上角的「发布」
  • 在发布前检查项目中的「发布时间:立即排程」,选择你想要发布文章的时间。
  • 你的文章会在你排程的时间正式上线。
排程发布
排程发布

新增多篇文章

接下来我们要用相同的方法,发布多篇文章,然后看看Blocksy简约、漂亮的设计。

发布多篇文章
发布多篇文章网站的后台

发布后

发布多篇文章后网站的样子
发布多篇文章后网站的样子

Blocksy真的是蛮扯的,用预设的就蛮漂亮的。我用过数不清的外挂之后, 发现Blocksy是我目前最喜欢的主题。在第5步骤,会教你用Blocksy主题的自订器客制化你网站设计的方法,让你的网站变成你心目中最想要的样子。

删除预设页面

  • WordPress 后台→ 「页面」 → 「全部页面」
  • 选取预设页面→ 删除预设页面
删除预设页面
删除预设页面

新增页面

你可以新增各种你想要的页面。这次的教学,我们先设定一个「我的故事」页面。

我们先在标题打我的故事,然后加入一些文字并发布它。

  • WordPress 后台→ 「页面」 → 「全部页面」
  • 点击「新增页面」按钮
点击「新增页面」按钮
  • 新增我的故事页面
  • 写关于你的故事
  • 发布文章
撰写页面内容并发布
撰写页面内容并发布

新增选单

接下来,新增选单是很多架站新手会卡关的地方,不过跟着操作就没问题了。

还没设定选单前:

  • Blocksy会自动把我们的选单加在Menu上
Blocksy预设选单
Blocksy预设选单

开始设定选单:

有两个方法可以进入选单设定页面。

① WordPress 后台→ 「外观」 → 「选单」 (范例操作使用①)

从WordPress后台选单功能来建立选单
从WordPress后台选单功能来建立选单

② WordPress 后台侧边栏→ 「外观」 → 「自订」 → 会转跳到WordPress自订器

点击WordPress后台侧边栏的自订
点击WordPress后台侧边栏的自订
从WordPress前台新增并建立选单
从WordPress自订器来建立选单

接下来我们用方法①建立一个主要选单。

  • 在WordPress后台,进入设定选单页面
  • 新增选单名称:主要选单
  • 点击「建立选单」按钮
  • 找到想新增的页面、文章、分类等等
  • 在新增选单项目的分类→ 把「日本」、「台湾」、「韩国」分类加入选单
  • 在新增选单项目的文章→ 把多篇文章加入选单
  • 在新增选单项目的页面→ 把「我的故事」页面加入选单
  • 在新增选单项目的自订连结→ 把YouTube频道连结加入选单
从WordPress后台建立选单
从WordPress后台建立选单
  • 在新增选单项目→ 点开「分类」
  • 把我们想要的类别新增进选单
把分类新增至选单
把分类新增至选单

💡如何把页面新增进选单?

页面是最常被加入选单的项目,可以加入我的故事、服务项目、联络资讯等等页面。

  • 在新增选单项目→ 点开「页面」
  • 点选「新增至选单」按钮,把页面新增进选单

如何把文章新增进选单?

我们可以把觉得写得最棒或核心文章的文章新增进选单。

  • 在新增选单项目→ 点开「文章」
  • 把我们想要的文章新增进选单

如果我们觉得去日本旅游一定要考虑看看冲绳,观众应该先看看「冲绳自由行」这篇文章的话,我们可以把「冲绳自由行」放进日本的子选单。

  • 在新增选单项目→ 点开「文章」把「冲绳自由行」新增进选单
  • 放在「日本」下面,往右拉,就会变成子项目了

因为文章原本的标题太长了,我们可以修改显示的文字。

  • 在「选单结构」中把「冲绳自由行|一趟说走就走的旅行」点开
  • 把「导览选单项目标签」修改为「冲绳自由行」

如何把自订连结新增进选单?

举例来说,如果我们在YouTube有一个介绍网站的影片,可以用自订连结功能把影片加入选单。

  • 在新增选单项目→ 勾选「自订连结」
  • 填入「网址」、「连结文字」
  • 把我们想要放的连结新增进选单

因为我们不想要让观众点开连结之后,就转跳到YouTube,离开我们的网站,所以我们要让YouTube在新视窗打开。

  • 点开右上角「显示项目设定」
  • 把「连结目标开启方式」打勾
在显示项目设定勾选连结目标开启方式
在显示项目设定勾选连结目标开启方式
  • 点开自订YouTube影片连结的选单项目
  • 把「在新分页中开启连结」打勾
勾选在新分页中开启连结
勾选「在新分页中开启连结」

看看网站现在的样子

终于设定好选单了,我们来看看现在网站的样子吧。现在我们有了文章之后,网站已经越来越完整了!

新增文章、页面、选单后网站的样子
新增文章、页面、选单后网站的样子

更多免费笔记
WordPress后台设定详细教学(未来开放)

#5 客制化网站外观

在第5步骤,我会跟你分享如何设计网站外观。包括如何使用WordPress的自订器来自订网站的logo网站标题文章/页面的排版设计等等,也会跟你分享怎么用自订器做响应式网页设计,也就是让你的网站在电脑、平板、手机能有不同显示的方法。结束之后,你就会拥有一个漂亮的WordPress部落格网站。

安装Blocksy Companion

Blocksy Companion是Blocksy主题的团队开发的外挂。

安装完之后(已在第3步骤安装过),我们就可以免费获得很多很棒的功能,像是:透明页首、固定页首、模版网站、联络资讯小工具、社交图标等等。

这些功能在很多其它主题都是要付费的,我们可以好好利用这些免费资源。

进入自订器(Customizer)

进入自订器(Customizer) 有两个方法,第一个是从网站前台,第二个是从网站后台,两个方法最后到的自订器都是一样的。

从前台:

  • 进入网站前台
  • 点击上方「自订」
从前台进入自订器
从前台进入自订器
  • 进入自订器介面
自订器介面
自订器介面

从后台:

  • 进入网站后台
  • 点击左边「外观」→「自订」
从后台进入自订器
从后台进入自订器
  • 进入自订器介面
自订器介面
自订器介面

自订器的功能是什么?

自订器是一个可以调整你的网站外观设计,还有部分功能的工具,如果想调整网站的外观、设计,来这边就对了。

只要在自订器里设定好,就会适用在整个网,不用一篇文章、一篇文章或者是一个页面、一个页面调整,很方便。

在自订器也可以调整部落格在各种装置的外观,你可能也看过一些部落格,用电脑看起来很漂亮,但用手机、平板看起来字体大小、设计都怪怪的。透过自订器的响应式网页设计(Responsive Web Design),我们就可以在不同装置有不同的排版设计。

每个布景主题,都有不一样的自订器,可以调整的外观、功能也不一样。而我会选用Blocksy布景主题就是因为它免费的版本,能控制的项目就有很多,而且操作跟其它布景主题的自订器比起来直观很多,算是蛮佛心的布景主题。

因为里面可以调整的项目很多,新手可能不太清楚里面的名称是对应到哪个外观设计,所以很容易就迷失在自订器里面。我先做简单的名词解释,这样你就会比较清楚,你想要调整的外观要去哪边设定。

每个布景主题控制同一个项目的名称可能略有不同,有的是英文的,但Blocksy主题下载完后就已经中文化了。以下名词解释以Blocksy主题为例,如果你选用其它布景主题的话,名称可能会略有不同。

自订器名词解释

我这边就先介绍最常用而且比较容易搞混的功能。

网志文章

你有看过其他部落格的话,应该会比较好理解这个项目,我们写完一篇一篇部落格文章之后,通常会有一个页面把所有部落格文章汇整起来,放在同一个页面,如下图。如果想控制这个汇整页面设计的话,就到网志文章里面设定。

网志文章
网志文章

单一文章

这个比较好理解,就是可以控制你的文章版型。像是文章标题、精选图片等等。

单一文章
单一文章

分类

我们在写文章的时候,会把每篇文章都加进某个分类,而Blocksy会帮我们把同个分页的文章加进同一个分类汇整页面(Category archive page)。

举例来说,我们把所有去日本旅游的文章都加到「日本」分类,那我们点进「日本」这个分类的话,就会进入日本旅游的文章的汇整页面,所有加进「日本」分类的文章都会在里面。而在自订器的「分类」可以调整汇整页面的设计。

分类的汇整页面
分类的汇整页面

页面

「页面」可以控制像关于我、服务项目、联络资讯等等页面的设计。

页面
页面

资讯栏

资讯栏可以控制我们的侧边栏版型设计。

我们可以添加搜寻功能、社交网站图标等等。

资讯栏(侧边栏)
资讯栏(侧边栏)

响应式网页设计

响应式网页设计(Responsive Web Design,简称RWD),又称回应式网页设计。响应式网页设计是一种让网站能跨平台使用的设计。有做响应式网页设计的网站会根据使用者的装置尺寸,调整网站显示的排版,像是文字大小、行距、图片大小等等,让使用者不管是在电脑、平板、手机都能有良好的体验。

响应式网页设计(Responsive Web Design)
响应式网页设计(Responsive Web Design)

修改网站的标题:

  • 进入自订器→ 「核心」 → 「网站识别」
  • 填写网站标题、网站说明、网站图示
自订网站标题、说明、网站图示(logo)
自订网站标题、说明、网站图示(logo)

因为这是示范网站,我的标题就填「诺特斯旅游」。

网站说明:

网站说明是要填你网站的主题是什么。因为这个示范网站的主题是在讲台湾、日本、韩国旅游,所以我就填「台湾、日本、韩国旅游」。

网站图示(logo):

我们的logo可以放在浏览器分页左上角的图示,也可以放在选单上,有自己的logo可以增加我们的品牌形象。

logo建议可以花个几千块请专业的设计师设计,不过我知道很多人一开始预算比较有限。

我有找到一个可以免费设计logo的网站叫作Canva。在架站初期,我们应该要把时间、成本花在生产内容上。所以我们可以先用这个网站快速设计自己的logo,节省一些初期架站的成本还有学习设计软体的时间。等网站比较有规模之后,有需要的话,再请设计师设计新的logo就好。

在Canva制作网站图示(logo)
在Canva制作网站图示(logo)

上传网站图示:

  • 网站识别→ 网站图示
  • 传制作好的logo

自订单一文章(single post) 设计

  • 自订器→ 文章类型→ 单一文章
透过自订器来自订单一文章的设计
自订单一文章的设计

自订侧边栏(Sidebar) 设计

  • 自订器→ 一般选项→ 资讯栏

我们可以来调整侧边栏的宽度,我比较喜欢用33%,这样主文章页面才不会太宽,适合大家阅读。

自订资讯栏(侧边栏)设计
自订资讯栏(侧边栏) 设计

自订页首设计

  • 在Canva制作页首标志(logo)
在Canva制作页首logo
在Canva制作页首logo
  • 自订器→ 一般选项→ 页首→ 元件
  • 把「标志」放到主要列
  • 把「选单」放到主要列
  • 点击主要列→ 调整页首最小列高
自订页首设计
自订页首设计

响应式网页设计

  • 点击下方的电脑、平板、手机的页首设计
  • 看看不同平台显示的样子
  • 微调不同装置的设定
透过响应式网页设计来设计页首
透过响应式网页设计来设计页首

PS 响应式网页设计不只可以用在页首设计,所有的自订项目都可以调整在不同装置的排版,你可以自己点点看、玩玩看。

固定页首功能

  • 自订器→ 一般选项→ 页首→ Headers分页
  • 点选Global Header (通用页首)
  • 开启Sticky Functionality (固定功能)
    PS 这是要安装Blocksy companion 才有的功能
开启固定页首功能(Sticky Functionality)
开启固定页首功能(Sticky Functionality)

自订页尾设计

  • 自订器→ 一般选项→ 页尾→ 下面列
  • 点选版权
  • 删除「- 使用{theme_author} 布景」
  • 加入「|你的域名」
自订页尾设计
自订页尾设计

看看自己网站现在的样子

现在我们可以看看网站现在的样子,你可以再自己调整成你喜欢的设计。

透过WordPress自订器设计排版后网站的样子
透过WordPress自订器设计排版后网站的样子

使用诺特斯模板(选用)

现在你已经会自己设计网站了,你现在看到的这个网站「notesstartup.com」就是用Blocksy布景题做的,如果你有觉得不错的地方可以参考一下,如果有觉得可以再改进的地方,也可以在下方留言给我建议。

这是我花了好几个小时调整好的设计,我也不藏私,把这个模板免费送给你,如果你喜欢我网站的设计的话,可以直接套用,再根据你的需求做微调就好。这应该可以帮你省下好几个小时调整排版的时间,你可以点击下方按钮,下载诺特斯网站的模板设计。

备注:新版的Blocksy可能无法套用

诺特斯网站(notesstartup.com)的设计
诺特斯网站「notesstartup.com」的设计

套用诺特斯Blocksy模板的方法

  • 一般→ 管理选项
  • 透过Click or drop to upload a file来上传档案
  • 点击Import Customizations (汇入自订档案)
  • 上传刚刚下载的诺特斯网站模板档案
上传诺特斯的Blocksy模板
上传诺特斯的Blocksy模板

#6 强化网站功能

在第6步骤,我会跟你分享要如何加入订阅电子报/表单功能、如何加入强化网站资安功能,还有如何安装Google Search ConsoleGoogle Analytics网站分析工具。这些是加码的教学,你可以看你自己的需求,来决定要不要为你的网站加入这些功能。

加入订阅电子报、表单功能

Sendinblue的功能

Sendinblue是一个将订阅电子报、网站表单、Email自动化等等功能合一的工具。我们可以透过它跟网站观众建立更好的连结

注册免费Sendinblue

注册Sendinblue步骤

  • 点击下方按钮免费注册Sendinblue
  • 点击右上角Sign up free (免费注册)
  • 开始填写注册资料
Sendinblue的评价4.8颗星
免费注册Sendinblue
免费注册Sendinblue

在Sendinblue后台制作订阅表单

我们可以透过Sendinblue在WordPress里加入漂亮的订阅表单,来搜集网站观众的Email。搜集到观众的Email之后,以后更新部落格文章或是有什么优惠资讯、新消息都可以透过Email跟观众分享。

制作订阅电子报表单步骤

  • 点选Contacts (联络人)
  • 点选侧边栏的List (名单)
  • 点选add a new list (加入新名单)
  • List name (名单名称) 填「订阅电子报名单」
  • 回到Contacts (联络人) → Forms(表单)
  • Create new subscription form (创建新的订阅表单)
  • ① Setup (设置) → Form name (表单名称) 填「订阅电子报表单」
  • ② Design (设计) → 设计表单
  • ③ Lists (名单) → 选择刚刚填的「订阅电子报名单」
  • ④ Settings (设定) → 客制化表单设定
  • ⑤ Messages (讯息) → 客制化表单讯息
  • ⑥ Share (分享) → 选择分享表单方式
依照①-⑥制作订阅表单
依照①—⑥步骤制作订阅表单
设计订阅电子报表单
设计订阅电子报表单

把订阅电子报表单加入WordPress Blog/网站

  • 在⑥Share (分享) → 点选HTML
  • 复制订阅电子报表单的HTML码
在步骤⑥复制订阅电子报表单的HTML码
在步骤⑥复制订阅电子报表单的HTML码
  • 在WordPress后台新增订阅电子报页面
  • 新增HTML区块
  • 贴上刚刚复制的HTML码
在WordPress贴上HTML码
在WordPress贴上HTML码
  • 看看订阅电子报表单成果
订阅电子报表单在网站呈现的样子
订阅电子报表单在网站呈现的样子

在Sendinblue后台制作联络表单

制作联络表单步骤:

  • 点选Contacts (联络人)
  • 点选侧边栏的List (名单)
  • 点选add a new list (加入新名单)
  • List name (名单名称) 填「填写联络表单的名单」
  • 回到Contacts (联络人) → Forms (表单)
  • Create new subscription form (创建新的订阅表单)
  • ① Setup (设置) → Form name (表单名称) 填「联络表单」
  • ② Design (设计)

我们要新增一个Text Attribute (文字属性),来收集观众想传的文字。

到Contacts (联络人) → Setting (设定) → 点击Add a new attribute (新增新的属性) 按钮→ Attribute Name (属性名称) 输入MESSAGE → Attribute Type (属性种类) 选择Text (文字)

新增一个新的Text(文字)属性
新增一个新的Text (文字) 属性

Attribute list (属性清单) 选MESSAGE,Field size (场域大小) 选Multi lines (多行)。

设计联络表单
设计联络表单
  • ③ Lists (名单) → 选择刚刚填的「填写联络表单的名单」
  • ④ Settings (设定) → 客制化表单设定
  • ⑤ Messages (讯息) → 客制化表单讯息
  • ⑥ Share (分享) → 选择分享表单方式

把联络表单加入WordPress Blog/网站

  • 在⑥Share (分享) → 点选HTML
  • 复制联络表单的HTML码
  • 在WordPress后台新增联络资讯页面
  • 新增HTML区块
  • 贴上刚刚复制的HTML码
  • 看看联络表单成果
联络资讯表单在网站呈现的样子
联络资讯表单在网站呈现的样子

 

强化网站资安功能

我们可以透过安装免费的「Wordfence Security」外挂来强化网站资安功能

Wordfence Security的功能

「Wordfence Security」是一个安全性防护外挂,可以保护我们不被骇客入侵。这个我建议刚开始架设Blog的时候就先安装好。

安装Wordfence Security

  • 下载Wordfence Security外挂
  • 安装并启用
安装并启用Wordfence Security外挂
安装并启用Wordfence Security外挂
  • 设定Wordfence Security外挂
  • 填写Email并开启通知
设定Wordfence Security外挂
设定Wordfence Security外挂
  • Premium License Key (付费认证金钥) → No thanks (不了谢谢)
免费使用Wordfence,选择No thanks,不使用付费金钥。
免费使用Wordfence,选择No thanks,不使用付费金钥。
  • 选择是否要自动更新
  • 优化网站防火墙
设定Wordfence Security
设定Wordfence Security

加入网站分析工具

Google Search Console的功能

「Google Search Console」是监测你的网站在Google搜寻引擎中表现结果的工具。举例来说,它可以告诉你,你的网站在3个月内的曝光总数、总点击次数、平均点击率、热门查询项目等等。其中我最常用到的功能是查看网站文章在特定关键字的排名。

Google Analytics的功能

「Google Analytics」是Google推出的一个免费网站分析工具,安装了之后,它会在后台默默帮你搜集使用者的数据,并自动帮你分析网站的数据。

有一些蛮酷的功能是,你可以即时看到逛你的Blog的人是位在世界的何处,也可以看到他们是使用电脑还是手机浏览等等资讯。

Google Analytics我也是建议刚开始架设Blog就先装好,你之后会感谢我这么早就先跟你说要安装这个的。

安装「Site Kit by Google」

以前要安装Google Search Console和Google Analytics还蛮麻烦的,不过现在只要安装「Site Kit by Google」这个外挂就好了。

  • 在WordPress安装并启用Site Kit by Google。
安装Site Kit by Google外挂
安装Site Kit by Google外挂
  • 点击START SETUP (开始设置),连结你的Google帐号连结。
连结Google帐号
连结Google帐号
  • 会需要进行一些授权跟同意条款。
进行授权予同意条款
进行授权予同意条款
  • 连结Google Search Console跟Google Analytic服务。
连结Google Search Console跟Google Analytic
连结Google Search Console跟Google Analytic
  • 等48小时后,就可以看到数据分析了!

结语

恭喜你,跟着这个WordPress部落格/个人网站教学操作的话,你已经有能力制作出一个属于自己的Blog了。

这个教学中,我带你注册域名租用主机安装布景主题安装外挂,然后示范写一篇有架构、SEO友善的文章,也教你如何设计网站的外观强化网站的功能。

能把这个系列做完,其实我还蛮感动的。

之前,有观众希望我做详细的WordPress教学。后来,为了完成这个教学,我婉拒掉很多案子跟合作的邀约,因为我想要专注在这个计划上。

我花了很多个人的时间在收集资料、评测软体工具、编排课程、录影实作跟后置剪辑上。

我什至另外花钱找了助理帮忙上影片字幕、编辑文章。她也很用心地帮大家核对文字跟翻译我用英文说的地方。

我同时制作了网站笔记(文章)YouTube影片版本。网站笔记用文字与图片的方式让你能快速浏览会学到的内容,YouTube影片我结合了手绘动画跟萤幕录制的方式,让你能更有效率的吸收网站架设的相关知识,也让你能更清楚了解每一步骤的实际操作。

这些都是为了让你能够更好地学习如何用WordPress架设部落格/个人网站。

我们总共花了288个小时以上的时间来制作图文跟影片教学,并把这些内容100%免费地分享给你。

希望这样的教学对你有帮助。

我最后来提倡一个理念,就是把网站当作自己的事业来经营。坚持每天花一点时间,让你的网站变得更好更丰富。

就算是从每天花个五分钟、十分钟开始也很好,相信之后会有很大的回报的。

祝大家架设部落格网站顺利!

发表回复

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