Tag Archives: 電腦語言

WordPress 完整教學,新手30分鐘從零架出專業網站

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站

最後更新時間:2021 年 1 月 15 日

你想要自己架設一個網站,但卻不知道如何開始嗎?想透過經營部落格和個人網站賺錢,卻發現架設費用高得嚇死人嗎?你完全不會程式語言,但是老闆叫你幫公司架設一個網站嗎?

如果你是我上面提到的那幾種人,那你知道你可以用 WordPress 去架設嗎?

你好,我是 Brian,目前是一名 WordPress 的網站工程師與接案工作者,這篇文章,我將會完整介紹 WordPress 這個專門設計給程式新手的網站架設軟體,並且手把手地帶你架出你人生中的第一個網站。

除此之外,我還會不藏私地告訴你,我平常幫客戶架設一個 WordPress 網站的完整流程。

因此,這篇文章主要是幫助完全不懂程式碼的網路新手,透過使用 WordPress 這款免費的架設網站軟體,並在一天之內,打造出一個市價 5 萬元以上的專業網站,如果你有興趣的話,那就讓我們一起看下去吧!

WordPress 是什麼?

WordPress Logo

WordPress 是一個專屬設計給不會寫程式的人,也能輕鬆架設網站的一款免費的開源內容管理系統 ( CMS ),它可以讓你透過視覺化地拖曳區塊的編輯方式,讓你在完全不懂程式碼的情況下,也能建立出令人驚豔的網站。

而所謂的內容管理系統 ( CMS ),就是一個讓一個不懂程式語言的人,能在不用接觸程式碼的情況下,自由更新網站的內容的系統。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 3

截至目前,全世界約有 37% 的網站是透過 WordPress 所建立,換句話說,這可是代表全球有將近 1/3 的網站是由 WordPress 所架設的,因此,說 WordPress 是全世界最受歡迎的網站架設方式也不為過!

而根據知名 Buildwith 網站統計,WordPress 還是現今最多人用的 CMS,有高達 52% 的 CMS 網站是由 WordPress 建構的,可以說 WordPress 壟斷了全球網站市場。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 4

除此之外,你可以看到從 2011 年以來,WordPress 完成是呈現一個爆炸性成長,並且完全沒有要停下來的趨勢,所以,如果你還不知道什麼是 WordPress 的話,那就真的太落伍了!

至於為什麼 WordPress 會這麼受歡迎呢?原因我們留到下面繼續討論。

WordPress 起源

說到 WordPress 的起源,我們要先來簡述一下 WordPress 與 WordPress.com 的差別。

如果你曾經有在 Google 搜尋過 WordPress,你可能會在搜尋 WordPress 時,發現怎麼會有兩個 WordPress?分別是 WordPress.com 與 WordPress.org

先講結論,一般而言,大家在稱呼 WordPress 時都是指 WordPress.org。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 5

WordPress.org 是 WordPress 最初的型態,因為 WordPress 一開始是由一群世界各地的工程師志工組成的,然後推出一款叫 WordPress 的開源內容管理系統,這時候 WordPress 主要只是被用來寫部落格。

而這也是為什麼 WordPress.org 後面有 .org 的原因,代表它是非營利組織。

既然 WordPress 是一款開源軟體系統,代表它的程式碼都是公開的,同時也是完全免費的,任何人都有權利拿來做商業用途,也因此,開始越來越多人使用 WordPress,並且將 WordPress 從原本的部落格軟體,升級成可以製作各式各樣網站的架站軟體

但是因為要維持 WordPress 的更新與開發,導致 WordPress 官方人力吃緊,所以 WordPress.org 這個組織另外成立了公司 Automatic,也就是你現在看到的 WordPress.com。

而透過母公司 Automatic 的整合與收入,WordPress 的發展逐漸更加為人所知,直到目前,WordPress 已經囊括了全球 37% 的網站市佔率。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 3

所以 WordPress.com 你可以理解為 WordPress 官方發行的收費版本 WordPress,收費的部分主要在於,官方一條龍式的包辦了主機與網域和網站維護的部分,目的是為了再降低使用 WordPress 上面的技術門檻,讓更多人來使用 WordPress。

WordPress.com 扮演的角色比較貼近 Medium, 痞客邦, Wix 等架站平台,不過仍保留著開源程式碼的特性 ( 可以自由搬家、修改 )。

總結來說,WordPress.org 跟 WordPress.com 本質上是一樣的,即使你現在是用 WordPress.com 架設網站,也很輕易的可以轉成 WordPress.com,你只要把 WordPress.com 想成是 WordPress.org 的簡易版就好了。

為方便討論,本文所提到的 WordPress 一詞均指 WordPress.org 的免費版本,而不是 WordPress.com 的付費版本,不要搞混了唷。

延伸閱讀:WordPress 跟 WordPress.com 的差異

完全不懂程式碼可以架設 WordPress 嗎?

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 7

答案是可以的,這世界上許多透過經營 WordPress 網站好幾年的人,本身都是一點程式碼都不懂的,但他們依舊可以利用 WordPress 網站為自己賺錢或是提升銷售業績。

原因就如同我前面所講的,WordPress 的開發者當初就是將 WordPress 設計成讓完全不懂程式碼的人,也能輕易上手的網站架設框架。

但是,如果你有一些架設網站的程式基礎的話( HTML, CSS, JavaScript, PHP ),對於你在架設 WordPress 上面還是相當加分的!此外,你也能透過修改簡單的 HTML, CSS,就輕鬆達成許多讓網站外觀更好看的效果。

總之,有程式碼基礎會讓你在架設 WordPress 網站上跑得比較快一點,但是真正決定 WordPress 成敗的關鍵,還是在於你願不願意花時間與心力下去經營你的網站。

WordPress 網站實際案例?

那麼在這佔了全球 1/3 數量的網站中,有哪些有名的網站是用 WordPress 做的呢?

接下來,我將列舉出 4 種不同類型的 WordPress 網站,分別是形象網站政府網站媒體網站電商網站,當然 WordPress 能做的網站不僅於此,不過以上應該是最常見的 4 種網站類型了。

如果你想知道哪些網站是用 WordPress 架設的,你可以透過這個 Chrome 插件與 WHAT WORDPRESS THEME IS THAT 這個網站查詢,或是參考下方的 WordPress 官方收錄的知名網站名單。

延伸閱讀:更多世界上知名的 WordPress 網站實際案例

形象網站:Mercedes Benz

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 8

首先是世界上最頂級的汽車品牌之一的賓士,它們的官方網站也是用 WordPress 下去製作的,這是一個很典型的 WordPress 企業形象網站案例,其實從外觀上,你已經完全分辨不出來它是不是 WordPress 所製作的,非常的專業以及充滿設計感。

政府網站:The White House

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 9

還有世界上最高權力機構的美國白宮,它們的網站也是使用 WordPress 建置的,所以你可以思考一下,連白宮這種掌握全世界最高機密的機構,都採用了 WordPress,這也代表了 WordPress 的安全性是非常好、無庸置疑的。

媒體網站:Vogue

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 10

WordPress 網站也可以很有設計感!一起來看看知名的時尚雜誌 Vogue 的官方網站,她們的官網也是由 WordPress 所架設的,是一個結合 WordPress 方便的文章撰寫功能、與前衛設計感的媒體網站。

電商網站:Tramper

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 11

最後放上一個自己的作品,這是我與朋友合夥的公司的線上購物網站 Tramper,基本上是我一個人用 WordPress 就全部做出來了,而裡面的金流、物流、聯盟行銷、電子報等電商重要的串接系統,都是我在完全沒有改寫任何程式碼的情況下,就完成串接了,並且可以正常購買與運作。

所以,如果你是對於架設購物網站有興趣的人,那麼使用 WordPress,將可以幫你省下大筆請工程師的費用。

簡單來說,WordPress 就是一個架設網站用的軟體,你可以用它來免費架設網站。

綜合以上,你一定相當好奇,至於為什麼大家都選擇使用 WordPress 來架設網站呢?

關於這個問題,接下來,我會透過一個簡單的例子解釋給你聽。

為什麼要使用 WordPress 架網站?

在解釋大家為什麼都要使用 WordPress 來架網站之前,首先,我們要先來了解,通常在一間公司裡面,製作一個公司官網的流程是怎樣進行的?

通常在製作網頁的流程中,會先由公司管理階層與行銷人員進行討論,規劃出網站的架構以及內容;接著再將交付給設計師,由設計師開始針對網站外觀進行 UX/UI 的規劃,打造出符合使用者體驗的網站草圖。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 12

最後,才會由工程師開始依照設計師的草圖一步一步地用程式語言 ( HTML, CSS, JavaScript ) 將網站「刻」出來,變成我們可以透過瀏覽器瀏覽的網站。

你可以發現,從上面短短的過程中,就過了三次手,從行銷人員到設計師再到工程師,這三者角色專業領域不同、因此關注的重點也不同:

  • 行銷人員關注在怎樣可以銷售最大化
  • 設計師關注在網站視覺流暢又好看
  • 工程師關注在精簡的程式碼與不出 bug

所以,你可以想見,基本上最後成本出來時,一定跟原本的所預想的相差很多;除此之外,也有可能在製作的過程中發現了許多原本沒想到的問題,因而要進行許多修改。

而通常其中一者角色有東西要修改,便會牽動到其它兩者,這也往往導致了網站上線的日期總是遙遙無期。

因此,內部人員溝通問題,往往是在製作網站的過程中最令人頭痛的部分。

而 WordPress 的出現,則完美地解決了上面的問題。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 13

透過 WordPress,工程師只需要把事先開發好的網站內容,串連上 WordPress,接著,就可以讓不懂程式語言的行銷人員、設計師,在沒有工程師的協助之下,透過 WordPress 對網站的內容進行更新,如此一來,便可以大大降低溝通成本並提升效率!

如此一來,就不需要一直溝通來溝通去,大家可以更加專注做自己負責的部分,讓公司整體運作變得更有效率了。

所以你可以從這個小例子中發現,透過 WordPress 架設網站,我們可以大幅地降低公司內部職員的溝通成本,並且提升網頁製作效率

使用 WordPress 架網站的好處?

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 14

用 WordPress 架網站的最大好處就是,它能讓一個不懂程式碼的人也能架出專業網站,其中主要的原因主要有幾點:

  • 架設容易 – 用 WordPress 架網站非常簡單,現在各大主機商都有推出所謂的一鍵架設 WordPress 的服務,基本上只要照著系統的指示走,大約只要花 15 分鐘你就可以把網站架出來了。
  • 費用便宜 – 跟請一個工程師動輒好幾十萬的薪水來看,你只需要每年花個 $ 4000 NTD 租借主機與網域,就能持續地擁有並經營一個 WordPress 網站,並讓它為你每年帶來更多的收益。
  • 內建擴充功能 – 當你今天想要為你的網站添增新的功能,WordPress 還有一個叫做「外掛」的擴充功能,它可以讓你直接免費安裝別人寫好的程式碼到你的網站中,為你的網站添增任何你想要的功能,例如預約訂位、購物車、線上課程等。

用 Wix 也能輕鬆架網站,為什麼還要用 WordPress?

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 15

有些人可能會有疑問:「我用 Wix 也能很快地把網站做出來,為什麼還要用 WordPress 呢?」

這是因為,用 WordPress 所架出的網站,你擁有 100% 的程式源碼掌控權。

它並不是像你用 Wix Weebly 等架站平台製作出來的網站,雖然這兩者都聲稱是設計給不懂程式碼的人,並讓它們能夠輕鬆架站的工具。

但差別在於,Wix 等架站平台,是由架站平台自己的母公司保存這些程式碼,並且不公開,因此當你在架站平台上架網站時,其實你算是在購買它們的「網站服務」,而不是真正的持有一個網站。

而 WordPress 則是免費且開放給所有人使用的,它是一段被打包好、並且公開在網路上的網站程式碼,任何人只要有能力,都有權使用它、並且運用它來架設自己的網站。

所以,當如果有一天 Wix 像無名小站一般倒閉了,你的網站也就一起消失了,因此,使用架站平台架網站,你是有著網站隨時有可能不見的風險的。( 除非到時候 Wix 願意協助你重建你的網站,但這不太可能。 )

WordPress 厲害在哪裡?跟一般網站有什麼不同?

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 16

WordPress 最厲害的地方在於,它將近代網站工程中的核心概念「CRUD」發揮到淋漓盡致。

所謂的「CRUD」指的是:

  • Create ( 新增 ) – 使用者可以自行新增文章、頁面。
  • Read ( 讀取 ) – 使用者可以讀取所建立的文章、頁面。
  • Update ( 更新 ) – 使用者可以自行更新文章、頁面。
  • Delete ( 刪除 ) – 使用者可以自行刪除文章、頁面。

其實 CRUD 說白了,就是讓使用者可以自行新增、修改網頁,而不僅僅只是閱讀這個網頁內容而已,而這點,應該也是大家普遍想要有一個網站的最大原因。

即使到今天,一般在網站中要做到 CRUD 的事情,都需要透過工程師以撰寫程式碼的方式進行修改。

以一般公司網站來說,通常要改一些網頁中文字、排版、圖片等等的部分,幾乎都是行銷方面的需求,原本只是行銷部門的事情,但現在卻必須動用到 IT 部門,這點是很沒效率的一件事情。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 17

假設我要新增一篇文章在網站上,我可以透過 WordPress 撰寫後,就直接顯示在網頁上,不需要再另外透過工程師協助發送。

因此,如果你的網站是透過 WordPress 架設的,即使你不懂任何程式碼,你依然可以透過 WordPress 本身自帶的後台,去對網站進行新增、修改,在某種程度上取代了工程師的角色,而這就是為什麼 WordPress 如此受歡迎的原因了。

除此之外,WordPress 還有一個超強大的功能:外掛,外掛其實就是插件,當你覺得你的網站缺什麼功能,你只要去下載別人寫好的外掛就可以輕鬆搞定,把原本需要花好幾萬外包請工程師寫的部分全部省下來。

舉例來說,今天你的 WordPress 網站想要可以收錢賣東西,那就安裝一個電子商務外掛;今天你想要你的網站可以變成論壇讓大家參與討論,那就去安裝一個論壇外掛;總之,你想要什麼功能,幾乎都有人把外掛做出來了,你只要去下載就好了。

WordPress 的缺點是什麼?

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 18

講了這麼多 WordPress 的好,也簡單來說一下 WordPress 的缺點,也以免讓你覺得 WordPress 好像是無所不能的,WordPress 主要的缺點只有一個,那就是:

WordPress 不擅長處理過於複雜的網站架構。

舉例來說,今天你想用 WordPress 做一個像 Facebook 或 Netflix 一樣的網站,那很抱歉,WordPress 是沒有辦法做到的。

因為 WordPress 當初被設計出來,主要的目的要做為部落格以及形象網站,所以它對於撰寫文章的方面比較擅長,而當你的目的是超脫出它原本的框架時,這時候就不建議你使用 WordPress 了。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 19

現在你們比較常見的大型網站,例如 Facebook, Netflix, Twitter, Youtube…等,這種都是由幾千個年薪500萬+的工程師在維護的,絕對不是區區一個 WordPress 能夠相提並論的。

總之,WordPress 最擅長處理的範圍還是在部落格與形象網站,電商網站勉強可以,但並不是最佳選擇;但如果你只是想要架設一個推廣業務用的形象網站,那麼 WordPress 絕對是你的首選。

如何使用 WordPress 架網站?

聽我說完了這麼多用 WordPress 架站的好,我想你應該也迫不及待地想用 WordPress 架一個網站出來看看了吧?

所以接下來,我將會手把手帶你完整走一次整個 WordPress 網站的架設流程,只要跟著文章做,即使你是完全不懂程式碼的網路新手,你也能架出一個完全屬於自己的專業 WordPress 網站。

這篇教學的最終成品

我知道現代人都很忙,而這篇教學很長,你不一定有耐心看完,所以在開始之前,我想先給你看看透過接下來的教學,你最後可以完成的個人網站成品。

下圖這個網站,會是今天這篇教學的最終作品,它是一個我很喜歡的簡潔 WordPress 佈景主題模版 Soledad,可以做出幾乎可以應用在所有行業、領域的個人網站。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 20

你可能會好奇,用這個模版實際做出來的中文網站,會是長怎樣呢?

下圖是我之前使用這個網站模版,幫我客戶做出來的作品:

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 21

你可以看到,這是一個很精美的部落格個人網站,不會像痞客邦一樣有討人厭的蓋版廣告,閱讀起來非常舒服。

但是相信你也看得出來,我其實就只是把上面的文字跟圖片替換掉,所以透過這樣,就可以輕鬆做出一個兼具視覺、與專業感的個人網站了。

架好之後,你可以用它來寫部落格、提供專業技能與服務、推廣聯盟行銷開始賺錢等,你有權透過網站做到你想做的任何事情,並且可以 100% 牢牢地將網站完全掌握在自己手上,不會平白無故因為哪家公司倒閉而消失。

而一般來說,這樣一個簡單的套版網站,大概會是台幣 5 萬元起跳的架設費用。

但接下來,我將會不藏私地把這個方法免費教給你,所以希望你能夠好好把握這個機會學習囉。

好了,看完了前面的範例作品,如果你也想獲得這樣一個漂亮的個人網站,那麼接下來就請你一步一步跟著以下的教學做吧!

WordPress 安裝的部分,主要可以分為 4 個步驟:

  1. 購買網域
  2. 購買主機
  3. 安裝 WordPress 在主機上
  4. 將網域串連至主機

購買主機 ( Hosting )

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 22
主機就是長這樣,在世界上的某個角落

所謂的網站,其實是架在遠端一台 24 小時運行的電腦上面的,而這台電腦,就是主機。

  • 而一個網站,一定要有一個主機讓你去把網站放在上面,這就是為什麼我們需要主機。

因為你不可能架在自己的電腦上,因為只要你不小心把電腦關機了,你網站也就被關掉了,這樣效率與安全性都不太好。

因此,市面上有許多提供租借主機的主機服務商,讓你可以用大約一年 $ 3000 台幣的價格租借他們的主機,並將網站架在上面。

由於一個 WordPress 網站只會用到一台主機,所以我們只要找一家主機商租借就可以了!在這邊我推薦 Cloudways,詳細的原因跟說明可以參考這篇文章:

延伸閱讀:毫無疑問新手最佳 WordPress 主機 – Cloudways 教學

總結一下,我推薦 Cloudways 的主要原因有:

  • 免費 SSL 憑證:在網址前面有 https 與鎖頭,能夠保護你的網站安全,並提升 Google SEO 排名。
  • 免費搬家:提供免費 WordPress 搬家工具,讓你一鍵將網站搬過來。
  • 客服支援:24/7 全年無休的即時線上客服支援 ( 英文 ),有問題可以馬上線上解決。
  • 自動備份:自動備份最近 14 天網站內容,並且可以一鍵還原,不用擔心網站出事救不回來。
  • 免費試用:Cloudways 提供不綁卡 3 天免費試用,試用過不滿意的話再換家也不遲,不會浪費到你任何一毛錢。
  • 價格便宜:基本方案價格約為 $ 10 USD/月,相當於台幣 $ 300/月,即使是學生也都負擔得起。
  • 收費彈性:方案相當彈性,而且收費是以小時來做計算的,不用怕被綁死一年長約,用多少收多少,不會發生買了之後不去用所產生的浪費問題。
  • 主機規格透明:是 VPS 主機,主機規格看得見摸得著,不會像共享主機一樣有超賣主機的問題。
  • 符合所有流量大小:不管你的流量大或小,都可以隨時依自己的需求更改方案;例如可以升級處理突然暴增的流量,而不用因為網站的成長而被迫搬家。

基於以上種種原因,我選擇了 Cloudways 作為我目前的主機,不過每家主機有每家主機的特點,我這邊也只是做一個推薦給你而已。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 23

不過由於 WebLai 我是 Cloudways 的老客戶了,因此官方有提供優惠給我的讀者:使用我專屬的折扣碼:WebLai30註冊,可以獲得購買主機前兩個月 7 折的優惠。

註冊 Cloudways
【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 24

來到 Cloudways 官網,點選中間的 Start A Free Trial

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 25

接下來就照實填寫你的資料,會是你以後登入的帳號,請謹慎填寫,這邊可以輸入我的折扣碼 Weblai30,可以享有前兩個月 7 折的優惠,填好了就按下按鈕繼續。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 26

成功了話,就去你剛剛填寫的信箱收信,並進行驗證。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 27

接著會跳轉到電話驗證的頁面,填寫你的手機號碼進行驗證。

建立主機
【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 28

接下來,主要有四個部分要填寫,依序進行:

  1. 在 WordPress 的部分選擇 WordPress 5.3 版,其它的部分是你的應用程式名稱、伺服器名稱、專案名稱,這邊可以隨意取名,因為之後想改隨時可以改。
  2. 這邊是 Cloudways 提供的主機商,推薦你使用 Linode 這家主機商。
  3. 這邊是主機的 RAM 大小,RAM 越大越貴,這邊你可以先選最低的 1G RAM就好,以後想升級隨時可以升級。
  4. 這邊是主機位置,Linode 的話有東京 ( Tokyo )可以選,離台灣比較近,這也是為什麼我們剛剛選 Linode。

方案方面,我是推薦 Linode 的 1G 方案,價格大約是落在 $ 12 USD/月,如果不夠用的話再升級就好,都選好了就按繼續。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 29

接著要等大約 7 分鐘,Cloudways 正在設定你的網站,這段時間可以參考官方在下面提供的搬家教學,如果你已經有 WordPress 網站的話,可以直接將網站搬過來 Cloudways 上面,非常方便。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 30

完成之後左邊會顯示是綠燈的狀態,接著點擊一下中間的圖示。

設定主機
【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 31

接下來這邊就是你主機最重要的三項數據,分別是:

  1. IP – 你主機的 IP,有點類似你主機的身分證號碼
  2. SSH 帳號 – 使用你主機的管理員帳號
  3. SSH 密碼 – 使用你主機的管理員密碼

SSH 帳密預設系統會給你一組隨機的號碼,你可以修改成自己習慣的樣子,但是切記不要外流,非常重要。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 32

來到左邊的 Setting & Packages,先點選 Basic,這邊可以參考我的配置,詳細設定我就暫時先不說明,當然使用預設也是可以,只是預設的數值太小之後可能會遇到一些問題。

這次選擇右邊的 Advanced 並且往下滑,一樣可以參考我的配置,把時區跟語言改成符合台灣使用者習慣的樣式,都完成之後一樣按下儲存按鈕。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 33
【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 34

最後再選擇右邊的 Packages,一樣可以參考我的配置,把主機環境設定調成最新的版本,這樣出問題的機會也會比較少。

建議 PHP 版本至少要改成 7.3 以上,現在越來越多外掛不支援 7.1 了。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 35
建立 WordPress
【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 36

這樣 Server 端都差不多設定完了,接著點最上面的 Application,再點擊 WordPress 的圖示。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 37

這裡是你的 WordPress 的控制面版,主要分為兩個比較重要的區塊:

  1. Application URL – 你的 WordPress 臨時網址
  2. Admin Panel – 你的 WordPress 登入後台網址、管理者帳密
  3. MySQL Access – 你的 WordPress 資料庫名稱與使用者帳密

資料庫我們暫時不會用到,所以我們先點擊區塊 2 中的那個 URL

登入 WordPress
【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 38

接下來就會進入到 WordPress 後台,這邊回到剛剛上面那邊,複製 WordPress 管理者帳密並進行登入。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 39

看到這個畫面,就代表你成功進來你的 WordPress 後台了!但目前你看到的網址很長一串很醜,因為這是 Cloudways 給你的臨時網址。

接下來的部分,我會再教你如何購買自己想要的網域,並將其取代。

設定 WordPress
【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 40

由於現在一片英文有點難懂,所以你先來後台這邊把語言跟時區調成台灣 ( UTC+8 ),設定完之後按儲存。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 41

最後你就會看到你的 WordPress 後台變成中文了,這樣之後也會比較好進行管理。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 42

回到前台,你就可以看到你的網站已經正式運作了,恭喜你,你已經成功的安裝好 WordPress 了!

購買網域 ( Domain )

現在你網站的網址,是一串很長很醜的網址,因為這是 Cloudways 給你的臨時網址,所以接下來你必須把它換掉,不然沒有人記得住你的網址是多少,因此,你需要去購買你的專屬網域。

網域其實就是公司主網址,如 google.com、facebook.com 等,算是代表你的網站的指標之一,而世界上每個網域都是獨一無二的,意思是如果你要的網域被別人先取走了,那你就只能換一個了,一種先搶先贏的概念。

跟主機一樣,市面上一樣有很多網域商在賣網域,在這邊我推薦你使用 Godaddy 這家網域商。

我推薦 Godaddy 的理由如下:

  • 可以購買 .tw 結尾的頂級網域,代表你的網站屬於台灣。
  • 24/7 全年無休的即時中文客服支援。
  • 全中文介面,新手好操作與上手
  • 最多人使用,出問題的機率低。
購買網域
【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 43

來到 Godaddy 首頁,先點選右上角的「登入」,然後點選「建立我的帳戶」,進行註冊帳號。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 44

建立完帳號之後,找到首頁上方的搜尋欄,並輸入你網站想要的網域名稱 ( ex.example.com ),並進行搜尋。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 45

搜尋結果會告訴你,你想要的網域有沒有人用過了,如果可以用的話,它會上面告訴你,選好之後點選加入購物車。

由於網域是採取先搶先贏的登記制度,因此如果你想要的網域被別人先取走了,那麼你就只能換一個了。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 46

這時候可以在右邊確認到你購買的網域與價格,依照你的網域名稱價格會有所不同,基本上價格大概落在 $ 600 ~ $ 1000 之間,並點選「前往購物車」

網域價格並不會影響網站的表現,建議採取一個簡短、好記的網域名稱就可以了。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 47

接著 Godaddy 會開始推銷一些它們自家的產品,這邊記得全部都改成「不了,謝謝」,並點選前往購物車。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 48

左邊的帳單跟付款方式就照實填寫一下,右邊這邊可以把網域方案改成「1 年」,完成之後按下完成購買。

啟用網域
【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 49

接下來會跳轉到這個畫面,點選左上角的「網域」,再點選「所有網域」。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 50

找到你剛剛購買的網域,並點選「驗證聯絡人資訊」。

來到你註冊 Godaddy 的信箱收信,並點選「立即驗證電子郵件」,驗證完畢之後點選「檢視我的網域」。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 51
【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 52
管理 DNS
【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 53

接著會跳回剛剛的畫面,這時候點選中間的 3 個點點的圖示,再點選「管理 DNS」。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 54

最後如果跳到這個畫面就大功告成了,雖然上面有很多你看不懂的東西,不過別擔心,我們之後會再來這邊進行設定。

將網域串連至主機 ( DNS )

網域跟主機都備妥了,但是你現在輸入 http://你剛剛購買的網域,你會發現應該是沒有東西的,這是因為,你還有一個很重要的步驟要做:將網域跟主機串連起來。

在串接主機與網域的過程中,你會接觸到一個叫做 DNS ( Domain Name Server ) 的概念,不過在這邊我不會去細講它,你只要知道它的功能是串接主機與網域就可以了。

而要進行 DNS 設定這件事情,你會需要用到一個叫做 Cloudflare 的 DNS 託管服務,什麼是 DNS 託管呢?簡單來說就是把你從網域商購買的網域託管給 Cloudflare 進行管理,如此一來便可以免費使用 Cloudflare 強大的功能:SSL、快取、清除 DNS 快取…等等。

Cloudflare 一個帳號有一個網域的免費額度,所以基本上個人使用的話是綽綽有餘的,不過 Cloudflare 的進階使用有點複雜,基本上連 WebLai 我現在都沒完全摸熟,因此如果你是新手的話,建議先使用 Cloudflare 託管 DNS 就好了。

如果你的網站訪客在台灣居多的話,使用 Cloudflare 可以讓你網站的訪客透過它們在台北的資料中心,以一種叫 CDN 的方式讓網站的載入速度更快速!

啟用 Cloudflare
【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 55

來到 Cloudflare 首頁,一樣先申請註冊。

如果你的語言是英文的話,右上角可以切換成繁體中文,閱讀起來比較方便。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 56
【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 57

照實填寫你要申請使用的 Cloudlfare 帳號。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 58

這邊就輸入你剛剛購買的網域。

輸入完之後,Cloudflare 應該會寄一封信到你那邊,所以記得到信箱去收信,進行驗證,完成之後就點選回到主選單。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 59
【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 60
【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 61

因為 Cloudflare 一個帳號有一個網域的免費額度,所以在這邊選擇免費方案。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 62

接著 Cloudflare 會把你所有的 DNS 紀錄搜尋出來,基本上不會有什麼問題,然後就點選下方的 Continue

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 63

接著 Cloudflare 會給你兩個 Nameserver,分別是:

  1. Nameserver 1
  2. Nameserver 2

這是等等設定要用到的東西,先放著不要關掉頁面。

設定網域名稱伺服器 ( Nameserver )
【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 64

回到剛剛購買完網域的頁面,拉到下面找到「網域名稱伺服器」,並點選「變更」。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 65
【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 66

接著點選「輸入我自己的名稱伺服器」,接著將剛剛給你的 Nameserver 1 與 Nameserver 2 依序複製貼上,再按下儲存。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 67

接著會跳轉回剛剛的畫面,如果這時候畫面顯示「您的名稱伺服器不是由我們託管,我們無法顯示您的 DNS 資料。」,就代表你正確設定了。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 68

這時候回到 Cloudflare,按下確認按鈕。

設定 SSL
【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 69

接下來會跳轉到這個畫面,這是一些 Cloudflare 免費提供你的服務,不過我們先不用設定,拉到最下面直接按確認按鈕就好了。

檢查 DNS 是否設定完成
【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 70

點擊左上的 LOGO 回到首頁,你會看見你的網域 DNS 正在更新中,由於 DNS 更新是需要一段時間的,有時可能會需要到 24 小時才會完成。

所以建議你可以先去做點別的事情,好了之後 Cloudflare 會發 Email 通知你。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 71

剛剛實測的結果,我這邊大概是花了 15 分鐘的時間,成功的話會在你的網域旁邊顯示綠色勾勾,接著點選按鈕。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 72

進來之後點選上方的 DNS,這時候你的我們已經成功將 DNS 從 Godaddy 轉移到 Cloudflare 上了,大功告成。

於是,我們就可以進行最後一個步驟:「串接 DNS」,完成之後你就可以透過你剛剛購買的網域,在網路上搜尋到你的網站了。

串接 DNS
【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 31

接下來回到 Cloudways 中,找到它給你的主機 IP,並將其複製。

回到 Cloudflare 中,按下畫面中 Add record 按鈕並填入:

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 74
  • Type – A
  • Name – @
  • IPv4 address – 複製貼上你的IP
  • TTL – 不用動
【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 75

接著,在下面 DNS 的地方就會寫入你剛剛填寫的 A record 了,如果有出現就代表正確設定了。

由於每一家的網域商作法不同,這邊有一個需要注意的地方是,最終你的 DNS A record 應該是要只有 1 個 A record,並且是指向你的主機 IP 的那個,多餘的要進行刪除,否則的話會出現錯誤。

而上圖中有 2 個 A record 是因為我當初在寫教學截圖的時候,並沒有先除掉多餘的 A record,因此在這邊特別註記。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 76

最後回到 Cloudways,來到你網站的 Domain Management 中,在 Primary Domain 的欄位中輸入你的網域,並按下儲存。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 77

點選左邊欄位的 SSL Certificate,填寫你的 Email 信箱以及網域,按下 Install Certificate 的按鈕。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 78

會再跳出一個視窗問你要不要將 http:// 開頭的網址都換成 https:// 開頭,點選確認按鈕。

前往 WordPress
【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 79

最後回到你 WordPress 網站的 Access Details,你會發現你的前台與後台的網址都變了,最後我們點擊 Application URL 的網址測試看看。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 80

查看瀏覽器上方,現在已經是用新網址的狀態,並且也有鎖頭,代表你的 https:// 也有成功啟用了!

升級 Cloudways 帳號
【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 81

最後記得你的 Cloudways 主機試用期只有 3 天,記得要在期限到期之前綁定信用卡,以免主機遭到關閉唷!

設定 WordPress

接著在瀏覽器中輸入你剛剛購買的網域,例如我的是 https://timidwinnie.co,你應該會看到你的網站目前長這樣:

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 82

這是 WordPress 內建的基本外觀,很陽春而且不好看,所以接下來,我們要進到 WordPress 網站的後台,並將它修改成我承諾給你的網站外觀。

如果你還有印象,其實我們剛剛曾經在建立主機時進去過一次 WordPress 的後台,那時候有簡單地把 WordPress 的後台介面改成中文。

總之那邊就是 WordPress 的後台,我們要對網站修改任何東西都要去那邊,相當重要,請牢記。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 83

進入 WordPress 後台的方式很簡單,只要在瀏覽器上方輸入 https://你的網域/wp-admin 即可以進入,例如我的是 https://timidwinnie.com/wp-admin

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 84

接下來就會進入到 WordPress 後台登入畫面,帳號密碼請回到剛剛上面的地方,在 Cloudways 主機中,複製管理者帳密並貼上進行登入。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 85
帳號密碼在 ( 3 ) 的地方

如果你忘記在哪取得 WordPress 後台登入網址與帳號、密碼的話,從 Cloudways 主機中的 Application -> Access Details -> Admin Panel 中可以找到。

如果你不需要輸入帳號密碼,就可以直接進來的話,代表你剛剛沒有把視窗關掉或是登出,就照常使用就好,不用擔心。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 86

進來之後,點選左邊工具列中的「設定」-> 「永久連結」,並選取「文章名稱」的選項,完成之後就按下「儲存設定」。

這點是為了讓你網站的網址變得漂亮且乾淨,這樣對於在 Google 上的搜尋排名會比較好。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 87

接著,來到上方的「控制台」 -> 「更新」 -> 並點選「立即更新」,將 WordPress 更新成目前最新版本。

基本上它叫你更新的東西就更新一下,主要是防護一些網路上的自動化惡意程式的攻擊。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 88

到目前為止,你網站的前台應該是長這樣,這代表你已經架設好一個全新的 WordPress 網站了。

選擇佈景主題

到這邊,總算是前置作業都設定好了,不過我們還剩下最後一件事情:啟用佈景主題

因為剛安裝好的 WordPress 是使用官方預設的佈景主題,功能非常少,非常陽春,比較適合拿來作為個人部落格寫寫日記,並不太像是一個網站,因此,我們需要自行將換成符合我們需求的佈景主題。

首先,我要在這邊先簡單提一下 WordPress 後台最重要的兩個功能:

  1. 佈景主題
  2. 外掛

如果把 WordPress 比作一台電腦的話 ,佈景主題就像是電腦的主機殼、CPU、顯示卡,是不可或缺的;而外掛就像是外接藍芽接受器、耳機、喇叭等,它讓使用者依照自己的需求,去自由地選購、組裝自己所想要的功能,進而成為一台符合自身使用習慣的電腦。

佈景主題是決定你 WordPress 網站功能、以及所有外觀的部分,一個 WordPress 網站可以沒有任何外掛也正常運作,但是卻不可以沒有佈景主題。

但其實說白了,佈景主題就是 WordPress 的衣服,所以我們現在就是要去幫 WordPress 買一件好看的衣服,讓它變成你喜歡的樣子。

不過不同類型的佈景主題,擅長著不同類型的網站,基本上可以依照它們被設計出來的目的,將它們劃分成以下 3 種類型:

  1. 製作部落格網站
  2. 製作形象網站
  3. 製作電商網站

製作部落格網站

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 89

如果你的需求是製作一個可以在上面寫文章,並且透過撰寫業配文、經營聯盟行銷來獲利的網站類型,那麼你在選擇佈景主題的時候,你就應該要去選擇那些標榜可以做為媒體、部落格類型網站的佈景主題。

因為這些主題就是被設計出來做為部落格網站的,所以它們通常會包含相關文章、閱讀更多、無限滾軸、訂閱電子報等與讀者相關的功能,因此,可以幫助你網站上的讀者獲得更舒服的閱讀體驗。

延伸閱讀:如何透過經營部落格賺錢?寫文章其實比你想像中更好賺!

製作形象網站

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 90

如果你的需求是為公司架設起一個對外的形象官網,並提供公司的服務以及業務、客服等聯絡方式,那麼你在選擇佈景主題的時候,你就應該要去選擇與你的產業相關、並且適合製作形象網站的版型。

舉例來說,你是一家餐廳的老闆,那麼你可能會需要在網站上加裝訂位系統的功能,這時候你就該去尋找那些佈景主題的版型有支援訂位的功能,如此一來,你就不需要另外再花錢請人幫你製作新的功能了,可以省下大筆的開發費用。

延伸閱讀:WordPress 主題推薦 – Astra 完整介紹與教學,1 款適合所有人的佈景主題

製作電商網站

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 91

如果你的需求是要架設一個可以上架商品進行販售的品牌購物網站,由於這類型的主題大多數是由歐美廠商開發,所以你在選擇佈景主題的時候,就要先去思考是否能夠換成中文介面、以及符不符合台灣人的使用習慣?否則做出來太像國外網站,這樣可能會影響到消費者的購物流程,並在無形中讓你喪失了訂單。

而基本上在台灣做電商,你會用到 FB 登入、金物流的串接、加購商品、組合商品等功能,因此在尋找電商網站主題的時候,就要一併將這些功能考慮進去,而不能僅僅是看外表順眼就選擇這個主題。

除此之外,因為現在大約有 80% 以上的消費者會透過手機進行購買,因此也要多注意主題在手機介面是否能夠操作順暢。

我自己本人的電商網站作品 Tramper,是用 WoodMart 這款佈景主題製作的。

要去哪裡購買佈景主題?

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 92

一般來說,購買佈景主題有 3 個管道,分別是 WordPress 後台Themeforest獨立開發商

  1. WordPress 後台:你可以在 WordPress 後台的「外觀」 -> 「佈景主題」 -> 「安裝佈景主題」中,而這邊安裝的佈景主題都是有經過 WordPress 官方認證的,所以是非常安全的,並且全部都是免費的,但由於是免費的,因此在功能上也會比較陽春,多半需要另外付費升級成為 Pro 版。
  2. Themeforest:前往 Themeforest 這個網站,這裡的主題價格大多落在 $ 59 USD,雖然便宜到因為沒有 WordPress 官方掛保證,所以並不是那麼穩定與安全,因此建議挑選比較多人討論與使用、並且評價良好的主題。
  3. 獨立開發商:直接向獨立販售的 WordPress 主題開發商購買,例如 StudioPressBrainStormForce 等,這類型的主題通常都比較貴,但品質也會比較好,不過一樣建議你挑選網路上比較多人討論與使用、並且評價良好的主題開發商。

如果你是 WordPress 新手,建議你在挑選主題的時候,一定要選很多人使用的主題,因為這樣在日後遇到問題的時候,才可以比較容易地在網路上找到別人的解決方法,不至於主題突然出現 Bug,而你卻找不到人幫忙解決。

範例:部落格網站實際操作

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 93

而本篇教學為了滿足大部分人的需求,所以我們選擇使用 Soledad 這個佈景主題來製作部落格網站,也是在文章最前面讓你看到的成品。

Soledad 是一款非常適合製作媒體、部落格網站的佈景主題,我個人認為它非常的好看、以及好上手,並且在設計上也相當符合台灣人的使用習慣,因此是我認為相當適合新手的一個佈景主題。

除此之外,Soledad 是在前面介紹的第 2 種佈景主題購買方式 – Themeforest 購買的,價格是 $ 60 美金一個網站,大約台幣 $ 1800,但是可以終身授權使用,因此算是相當的划算。

不過 Themeforest 購買的佈景主題有一點複雜,如果你是第一次架站的 WordPress 新手可能會不知道怎麼安裝,因此接下來,就請你跟著我的步驟一步步地完成吧!

購買 Soledad
【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 94

來到 Soledad 的購買頁面後,點選「Buy Now」進行購買。

Soledad 不定期會推出優惠,像我現在就遇上了 66 折優惠,因此降價成 $ 39 美金,遇到這個機會千萬不能放過。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 95

接下來就照實填寫註冊帳號,並完成購買,這邊就不多做說明。

安裝 Soledad
【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 96

購買完成後,點選上方的帳號欄位,並選擇「Downloads」。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 97

找到 Soledad 的部分,點選「Download」 -> 選取「All files & documentation」的選項。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 98

接著應該會自動下載一個 .zip 的壓縮檔到你的電腦中,解壓縮之後,可以留下 soledad.zip 跟 soledad-child.zip 就好,其它不會用到。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 99

回到 WordPress 中,依序點選「外觀」 -> 「佈景主題」 -> 「安裝佈景主題」。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 100

接著再點選「上傳佈景主題」,並先將剛剛留下的 soledad.zip 拖曳至畫框之中,並點選「立即安裝」。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 101

上傳完 soledad.zip 之後,點選「返回 ( 佈景主題 )」,並重複一樣的動作上傳 soledad-child.zip

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 102

不過這次上傳完 soledad-child.zip,改成點選「啟用」,如此一來,我們便成功地啟用了 Soledad 這個佈景主題了。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 103

一鍵匯入網站 Demo

做到這邊,你可以另外開啟一個視窗,並到網站前台去檢查一下是否正確啟用。

要怎麼到網站前台呢?就是在瀏覽器中輸入 https://你的網域,這時,你應該會發現你的網站改頭換面了!

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 104
【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 105

不過我們還沒有完成,回到網站後台,點選「Soledad」 -> 「Active theme」,這邊需要填入一下你購買的驗證碼。

要如何取得驗證碼呢?點選這個連結,輸入一個你自己記得起來的名稱,並確認上方是否有勾選跟我圖片一樣的部分。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 106

都完成了之後,滑到下面點選「Create Token」。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 107
【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 108

接著就會跳出你的驗證碼,由於驗證碼只會出現一次而已,所以請把它複製貼起,貼在其它地方做保存。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 109

複製完驗證碼之後,就回去 WordPress 中把它貼上,接著就可以順利通過驗證了。

然後畫面會跳轉回 Soledad 的安裝主頁,接著點選「Install Plugins」。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 110

這個步驟需要安裝一些 WordPress 的外掛插件,依序進行以下步驟進行啟用:

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 111
  1. 選擇install
  2. 勾選全部。
  3. 點選「套用」。

可能會花一點時間才會完成安裝,完成之後,我們還必須啟用它們,因此接著依序進行以下步驟進行啟用:

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 112
  1. 點選「外觀」。
  2. 點選「Install Plugins」。
  3. 選擇Active
  4. 勾選全部。
  5. 點選「套用」。

如此一來,便可以一次安裝並啟用 Soledad 所需要的 WordPress 外掛,省下一個一個安裝的時間。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 113

最後,回到 Soledad 的安裝主頁,接著點選「Import Demo Now」。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 114

接著會跳轉到一個一堆網站模版的畫面,這是 Soledad 這個佈景主題提供給你的網站模版,你只要滑鼠點一下,就可以輕鬆完成一鍵匯入模版,得到一個跟範例一模一樣的網站,這 $ 60 美金花得很值得吧!

這邊有大約 200 個不同行業的項目的網站模版供你挑選,基本上應該是綽綽有餘,你可以依照自己的需求進行選擇。

不過因為這篇文章是教學示範用,所以我選擇一個比較偏向基本款的個人網站、部落格模版。

如果你想要跟我一樣的話,按下 ctrl + f,並搜尋「Stylist Blog」,就能找到跟我一樣的網站模版了。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 115

找到之後,點選圖中的按鈕「import」即可完成。

接著就稍微等待一下,直到畫面中出現「Import completed」的字樣後,就可以前往網站的前台進行檢查。

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 116

這時你會發現,你的網站已經跟範例網站一模一樣了,恭喜你!你成功獲得了一個價值 5 萬元的 WordPress 網站!

後續經營

到目前為止,你已經架出了一個完美架構的 WordPress 網站。

不過,你還需要將文章中的圖片跟文字換掉,才算是真正完成自己的專屬個人網站。

但由於篇幅的關係,所以這篇文章沒辦法詳細教你如何將文字與圖片替換掉。

如果你是對 WordPress 一竅不通的新手的話,你可以參考我這篇 WordPress 入門教學,建立起對 WordPress 的基礎知識,這樣你之後在架網站的時候,會比較有概念。

如果你已經對 WordPress 有一定程度的熟悉了,那麼你可以直接去看 Soledad 官方提供的佈景主題教學文件,這會幫助你更快上手這個佈景主題。

而如果看完了這些資料,你還是有任何問題或是操作上不懂的地方,你可以直接到文章最下方我的臉書社團提問,我會親自為你解答。

延伸閱讀:
WordPress 後台操作教學,10 分鐘教會你 6 大必學基本功能
Soledad 官方文件

與其它架站方式比較

除了知道 WordPress 是如何架出網站的之外,瞭解一些不用 WordPress 架網站的方法也是同等重要的,它們可以讓你更加釐清網站工程的全貌,進而幫助你知道哪些是 WordPress 擅長的、而哪些不是。

為了方便解說,我將 WordPress 也放進去裡面做比較,如此一來,你就能更加瞭解 WordPress 與其它兩者的差別。

一般來說,架設網站的方法主要有以下 3 種:

  1. 使用架站平台
  2. 撰寫程式碼
  3. 使用 WordPress

這 3 種方式各有各的優缺點,所以接下來,我會將它們各自的特色,用簡單的語言分析給你聽,並讓你自己做出選擇。

架站平台

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 15

架站平台就是像 WixWeeblyShopifyShopline 等等,是一種由某家公司所提供的服務,只要一般的那種註冊、登入會員即可使用。

其中 Wix 與 Weebly 可以做大部分的部落格、品牌網站等,兩者之間並沒有太大的差別,Wix 廣告打比較大所以比較有名一點。

而 Shopify, Shopline 從名字上也可以看出,主要專精在電商網站的架設上,其中 Shopify 是外國公司,所以使用上比較偏向歐美;而 Shopline 則是台灣新創公司,在使用上比較符合台灣人的使用習慣。

使用架站平台架站的好處就是簡單快速,這類型的架站平台主要的客群都是不懂程式碼的一般人,所以多半有提供 Drag & Drop 的拖曳式介面,可以讓你在不懂程式碼的情況下,也輕鬆的製作出一個網站。

撰寫程式碼

【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 7

撰寫程式碼就是一般最典型的架設網站方式,但是要採取這種方式,前提是你要懂得網頁開發的相關程式語言。

例如:

  • 前端程式語言 – HTML, CSS, JavaScript,三者缺一不可
  • 後端程式語言 – PHP, Java, Ruby, Python, JavsScript,擇一即可

利用這種方式進行架設網站,好處就是你可以幾乎一毛錢都不用花,就可以架出任何你想像得到的網站。

例如當初 Facebook 的創辦人 馬克 ‧ 祖克柏格,就是在哈佛大學的宿舍中,僅僅一個晚上就用 PHP 寫出了最原始的 Facebook 雛形。

但是,先決條件就是你要懂上述的幾種程式語言,而這通常都不是一朝一夕可以學會的,所以如果你不會寫程式的話,那你就不能以此方式進行架設。

使用 WordPress

WordPress 36% 網站

最後一種是使用 WordPress 這個開源軟體,WordPress 是一個設計給不懂程式碼的人的內容管理系統 ( CMS ),它可以讓人在不用接觸任何程式碼的情況下,也能架出一個功能完整的網站。

你可能會好奇,前面提到的架站平台跟 WordPress,兩者都是設計給不懂程式碼的人,並讓它們能夠輕鬆架站的工具,但這兩者的差別在哪呢?

差別在於,WordPress 是免費且開源的,它是一段被打包好、並且公開在網路上的網站程式碼,任何人只要有能力,都有權使用它、並且運用它來架設自己的網站。

相較於架站平台,架站平台是由架站平台自己的母公司保存這些程式碼,並且不公開,因此當你在架站平台上架網站時,其實你算是在購買它們的「網站服務」,而不是真正的持有一個網站。

除此之外,如果你是網頁工程師,你也能透過自行修改 WordPress 的程式語法,來為 WordPress 達到你想要的客製化效果,而不需要重新發明輪子。

綜合以上,如果今天只能選一個方式下去架網站的話,我個人最推薦的做法會是使用 WordPress,因為它不僅有架站平台的低入門門檻,同時也具備了自行撰寫程式碼的靈活修改彈性,是一種進可攻退可守的最佳架設方式。

WordPress 常見問題

什麼是 WordPress?

WordPress 是一個專屬設計給不會寫程式的人,也能輕鬆架設網站的一款開源內容管理系統 ( CMS ),它可以讓你透過拖曳區塊的編輯方式,在完全不懂程式碼的情況下,建立出令人驚豔的網站。

使用 WordPress 架網站的費用是多少?

雖然 WordPress 程式本身是免費的,但是你需要另外購買主機網域,才能完成 WordPress 網站的架設。

一般而言,主機的費用約落在 $ 4000 NT/年,而網域則落在 $ 500/年,所以使用 WordPress 架網站,最低花費大約是 $ NT 5000/年 左右。

WordPress.com 跟 WordPress 的差別是什麼?

WordPress.com 是 WordPress 官方推出的 WordPress 架站平台版,主要是設計給那些完全不想碰觸到任何程式相關的架站新手的服務,它可以讓人不需要另外自行購買主機與網域,便直接在上面架設自己的網站,

WordPress.com 採取訂閱制的方式,依照方案的不同而進行收費,價格約落在 $ 150 NT/月 ~ $ 799 NT/月不等。

用 WordPress 可以做出哪些網站?

目前的 WordPress,幾乎可以做出所有類型的網站,從早期的部落格、形象網站為主,到現在流行的電商網站、線上課程網站、會員訂閱網站…等等,WordPress 都能輕鬆勝任。

我完全不懂程式碼,也能架設 WordPress 網站嗎?

答案是可以的,這世界上許多透過經營 WordPress 網站好幾年的人,本身都是一點程式碼都不懂的,但他們依舊可以利用 WordPress 網站為自己賺錢或是提升銷售業績。

如何用 WordPress 架網站賣東西?

要在 WordPress 網站上賣東西,其實就只是架好 WordPress 後,並在上面另外安裝「購物車」外掛就好了。

最知名的 WordPress 購物車外掛叫做 Woocommerce,它是免費的,目前是由 WordPress 的母公司 Automatic 所管理營運。

除此之外 Woocommerce 與台灣各大金流廠商如綠界、藍星都有完整的串接功能,因此相當容易。

整體評價

WordPress
【2021】WordPress 完整教學,新手30分鐘從零架出專業網站 | 119

WordPress 是一個專屬設計給不會寫程式的人,也能輕鬆架設網站的一款免費的開源內容管理系統 ( CMS ),它可以讓你透過視覺化地拖曳區塊的編輯方式,讓你在完全不懂程式碼的情況下,也能建立出令人驚豔的網站。

貨幣: USD

運作系統: Web

應用程式分類: WordPress

推薦指數:
5

結語

架設網站是現代行銷不可或缺的重要手法之一,但是懂有創業頭腦、懂行銷的企業家未必懂得如何架設網站;而懂程式語言、有相關技術的工程師則未必知道怎麼銷售服務與商品。

好在透過 WordPress 這個讓不懂程式碼的人也能輕鬆架設網站軟體,我們得以弭平了行銷人與工程師的距離,並將一個創業的想法、賺錢的點子透過更少的技術來實現,進而推動了這個時代的進步。

希望透過今天這篇教學,能幫助你架設出一個可以真正為你帶來收益的網站,不論你是要寫部落格、打造公司形象官網、銷售品牌商品,希望你能成功利用 WordPress 將你的想法展現給大家看到,那麼,這會是我寫這篇教學文最大的動力了。

最後,這篇教學就到這邊告一段落了,我是 Brian,如果你對於 WordPress 有任何使用上的問題,都歡迎你直接到下方我提供的 FB 臉書社團提問唷,我將會親自為你解答,謝謝。

Astra 佈景主題教學,1 款適合所有人的 WordPress 主題

Astra 佈景主題教學,1 款適合所有人的 WordPress 主題

最後更新時間:2020 年 12 月 8 日

WordPress 佈景主題該如何選擇呢?試用過了很多款 WordPress 主題卻都不滿意嗎?

如果你目前也面臨前面提到的問題,那今天,我將會來介紹你使用我個人最喜歡的佈景主題 – Astra,並且告訴你為什麼我如此喜歡它!

從接觸 WordPress 到現在用過大約快 10 個付費的知名佈景主題,分別有:

  1. Avada
  2. Flatsome
  3. Soledad
  4. Ocean WP
  5. WoodMart
  6. Magazine Pro
  7. Jannah
  8. Astra

如果想知道我對於以上主題的簡短評價,請參閱這篇文章

雖然以上每個主題當初在設計時,就是有不同的功能取向,比如說 Jannah 適合作部落格、 WoodMart 適合做電商、Avada 適合做形象網站,但嘗試了這麼多佈景主題,也因此使我開始思考一個問題:

「有沒有一個佈景主題是可以做所有類型的網站呢?」

會這樣想是因為,每個主題都有各自不同的操作方法,如果說今天要做 3 種不同類型的網站,就會用到 3 種不同類型的主題,就要學習 3 種不同類型的操作方法,這樣真的實在太累。

直到我見了 Astra,一款適合所有人的佈景主題。

Astra Homepage

Astra 是我目前認為其中最完美的佈景主題,它輕量、速度快、好上手,該有的功能都有,不僅非常適合作為部落格網站,只要透過與頁面編輯器 Elementor 搭配,它也馬上可以處理形象網站、電商網站等類型的網站。

但在這篇文章我們還不會用到太多的 Elementor 去製作頁面,只有在最後時會直接匯入 Elementor 範例網站,關於 Elementor 的教學,可以參考下面這篇。

延伸閱讀:新手也能做出設計感網站:WordPress 頁面編輯器 Elementor 教學

如果你想知道該如何透過 Astra 架設出一個完美的 WordPress 網站,那麼就請你繼續看下去吧!

Astra 是什麼?

Astra 是一個於 2017 由知名 WordPress 主題製造商 Brainstorm Force 所開發的 WordPress 佈景主題,在短短的 3 年內,Astra 在 WordPress 官方主題市集中,已經有高達 1,000,000 + 的啟用人數,並獲得使用者近 5 顆星的滿分好評。

Astra 佈景主題教學,1 款適合所有人的 WordPress 主題 | 3

Astra 最大的特色就是它非常的輕巧,與其它動輒好幾 MB 的主題相比,Astra 僅僅具有 50 kb 的檔案大小!除此之外,Astra 還可以做到高度地客製化,因此可以讓你在做出一個美觀且多功能的網站之餘,也能維持著高速的網頁載入速度。

你現在看到的這個網站就是用 Astra 做的,雖然可能我有裝了一些 Elementor 等大型外掛拉低了網站速度,但整體速度還是挺不錯的了。

使用 Astra 主題有哪些好處?

Astra 佈景主題教學,1 款適合所有人的 WordPress 主題 | 4
你們現在看到的這個網站,就是用 Astra 做的

先來聊一下我自己使用的 Astra 經驗好了,目前我自己手上的 2 個網站 ( 部落格接案網站 ) 也都是 Astra 所建置的,雖然說我的部落格網站 ( 就是你們現在看到的這個 )一共經歷了 5 次主題的更換,分別從 Astra → Ocean WP → Jannah → Soledad → Astra,不過最終還是選擇了 Astra。

為什麼呢?其中原因主要是這幾點:

  • 簡單好上手,方便操作:我個人覺得 Astra 把很多複雜的邏輯都簡化了,例如將自訂選項只留下 6 個項目,不會讓你找不到地方修改。
  • 載入速度快:因為 Astra 本身並不含 jQuery 函式庫,所以在先天性的體質和出問題的機會就比別的主題少了,並且讓整體網頁載入速度提高許多。
  • 與 Elementor 完美搭配:我是一個 Elementor 的愛用者,但 Elementor 最為人詬病的地方就是速度慢,而用 Astra + Elementor 可以補足這個缺點,並可以做出幾乎所有類型的網站。
  • 能夠高度客製程式碼:因為 Astra 本身是非常乾淨的、沒有太多內建的功能,所以你可以依照你的需求自行修改、或是安裝外掛,100% 地掌握整個網站。
  • 幫助你理解 WordPress:這比較難解釋,但這是最讓我想誇獎 Astra 的部分,簡單來說用 Astra,真的就跟自己在撰寫網站幾乎是一樣的,它讓我可以很好地先設計全局設定再設計細節,我認為如果你想快速抓到 WordPress 的邏輯,那使用 Astra 將會使你事半功倍。

為什麼推薦你用 Astra

Astra 佈景主題教學,1 款適合所有人的 WordPress 主題 | 5

對於新手而言,我推薦 Astra 的主要原因是:Astra 擁有非常直覺的前台自訂模式

因為一般而言,我剛接觸一個佈景主題我可能都要花一整天才能上手,但是 Astra 我幾乎是才剛接觸 5 分鐘就上手它的編輯邏輯了,這點讓我相當驚豔,這也是為什麼我相當推薦新手從 Astra 入門。

除此之外,即使你是 WordPress 的老手了,我認為 Astra 仍然會是你的好選擇。

雖然 Astra 本身的功能不算多,但因為它與 Elementor 整合的非常完善 ( Astra 官方本身就是 Elementor 愛用者 ),Astra 所不足的地方,你都能透過 Elementor 去補齊,但同時又保有輕量、彈性的優勢,這也是為什麼 Astra 依然深受 WordPress 進階使用者的喜愛。

另外,你可以看到 Astra 在 WordPress 官方中的統計數字,有高達 1,000,000 + 的網站目前正在使用,而且評分數更是高達 5 顆星滿星,說是目前 WordPress 界中最流行的佈景主題也不為過。

需要購買 Astra 進階版嗎?

Astra 佈景主題教學,1 款適合所有人的 WordPress 主題 | 6

Astra 有分為免費版、以及付費版的 Astra Pro,本篇文章的教學是使用 Astra Pro,不過基本上你使用免費版的 Astra 也是通的,只是可能你的介面跟功能上會少一點東西。

Astra 進階版價格最便宜的方案約為 $ 41 USD/年 或 $ 249 USD 終身,這部分建議你可以先購買最便宜的方案,確認一下 Astra 適不適合自己。

最近 ( 2020/07 ) Astra 官方正在慶祝破百萬使用人數,所以一直有在給出優惠折扣,如果你想入手的話建議就趁現在囉!

Astra 佈景主題教學,1 款適合所有人的 WordPress 主題 | 7

Astra 的進階版方案主要有三個,並且分為年費制與買斷制 ( 以下均以 USD 計價):

  1. Astra Pro – $ 41 /年 或 $ 249 終身
  2. Mini Agency Bundle – $ 169/年 或 $ 499 終身
  3. Agency Bundle – $ 249/年 或 $ 699 終身

詳細的價格與方案,歡迎你前往 Astra 官網查閱,我上面打的價格是我在寫文章當下 Astra 的價格,但基本上 Astra 官方每年都有好幾波促銷,所以可能會更便宜也說不定。

我自己是在 2019 年 Black Friday 時買了 $ 489 的終身 Agency Bundle,但老實說 Agency Bundle 包含的 Convert Pro, Schema Pro,因為我已經有其它更好用的工具替代掉了,所以我都沒有用到,因此整體看下來,其實我當初買 Mini Agency Bundle 就足夠了。

Astra 佈景主題教學,1 款適合所有人的 WordPress 主題 | 8

所以我個人是蠻推薦你直接購買 Astra 的 Mini Agency Bundle 終身版的,除了可以拿到所有的 Astra 官方做好的 Demo Template 之外,WP Portfolio 跟 Ultimate Addons for Elementor 也相當好用,但價格方面不是那麼親民,因此如果只是想嘗鮮的新手的話,建議先買 Astra Pro 1 年就好。

購買前請務必確認是購買一年方案還是終身方案,上面有一個小滑扭可以進行切換。

啟用 Astra

Astra 的購買步驟我就不詳細介紹,照著官方的指示應該都沒什麼問題,接下來的步驟會是從你購買完 Astra 之後開始。

如果你是用 Astra 免費版的話,就直接在 WordPress 佈景主題的地方搜尋 Astra 並啟用即可。

Astra 佈景主題教學,1 款適合所有人的 WordPress 主題 | 9

來到 Astra 官網,點選上方導覽列的 My Account,並點選 Downloads

Astra 佈景主題教學,1 款適合所有人的 WordPress 主題 | 10

登入你購買 Astra 時所註冊的帳號。

Astra 佈景主題教學,1 款適合所有人的 WordPress 主題 | 11

找到 Astra Pro 的欄位,依序下載以下 3 個檔案:

  1. Astra Theme
  2. Astra Child Theme
  3. Astra Pro Addon Plugin
Astra 佈景主題教學,1 款適合所有人的 WordPress 主題 | 12

下載 Astra Child Theme 時,會跳轉到這個畫面,這邊你可以輸入任何你想取的名字,這邊我為了教學方便,就不輸入名稱,而是使用預設的名稱 Astra-Child。

到目前為主,你已經抓了 3 個 Astra 的安裝檔案,以我目前的檔案為例,這 3 個檔案在我的電腦中分別叫做:

  1. Astra Theme:astra.2.4.4.zip ( Astra 母主題 )
  2. Astra Child Theme:astra-child.zip ( Astra 子主題 )
  3. Astra Pro Addon Plugin:astra-addon-plugin-2.5.0.zip ( Astra Pro )
Astra 佈景主題教學,1 款適合所有人的 WordPress 主題 | 13

回到 WordPress 後台,依序進行:

  1. 外觀
  2. 佈景主題
  3. 安裝佈景主題
  4. 上傳佈景主題
  5. 上傳你剛剛下載的 astra.2.4.4.zip
  6. 按下立即安裝
Astra 佈景主題教學,1 款適合所有人的 WordPress 主題 | 14

安裝之後先不要啟用,按下返回佈景主題

Astra 佈景主題教學,1 款適合所有人的 WordPress 主題 | 15

點選安裝佈景主題,跟剛剛做一樣的事情,不過這次我們要上傳的檔案是 astra-chil.zip

Astra 佈景主題教學,1 款適合所有人的 WordPress 主題 | 16

並且在這次上傳完成之後,點選啟用

Astra 佈景主題教學,1 款適合所有人的 WordPress 主題 | 17
Astra 佈景主題教學,1 款適合所有人的 WordPress 主題 | 18

這時候回到網站前台,你已經成功地將網站前台換成 Astra 了!

至於為什麼要啟用子主題而不是母主題呢?這是因為日後如果我們有一些程式端的修改,修改在母主題之上的話,當佈景主題更新的時候就會被洗掉,而修改在子主題上的話則不會有這種問題。

如果你其它的佈景主題有子主題跟母主題,那就請你啟用子主題。

Astra 佈景主題教學,1 款適合所有人的 WordPress 主題 | 19

回到後台安裝外掛的地方,將最後一個檔案 astra-addon-plugin-2.5.0.zip 上傳後並啟用。

Astra Pro 是在安裝外掛的地方上傳,不是佈景主題唷!

Astra 佈景主題教學,1 款適合所有人的 WordPress 主題 | 20

啟用之後點選 Astra Pro 下方的 Setting。

Astra 佈景主題教學,1 款適合所有人的 WordPress 主題 | 21

接著會跳轉到這個畫面,這邊是你管理 Astra 功能的地方,你可以選擇啟用或是不啟用哪些功能,但這邊我們先點選 Activate All 將所有功能打開。

另外,將你在官網上購買的 Astra Pro 的序號填入右邊的框框,並點選啟用序號。

Astra 佈景主題教學,1 款適合所有人的 WordPress 主題 | 22

基本上序號會是在 Astra 官網的這樣的頁面,找到之後就去複製貼上即可。

Astra 佈景主題教學,1 款適合所有人的 WordPress 主題 | 23

這樣子 Astra 就算完整設定完了!接著回到前台,點選上方黑框的自訂,我們即將開始 Astra 的一些基本設定。

這是一個修改 Astra 設定的捷徑,稱為「自訂模式」,要在登入狀態下才會顯示。

Astra 基本佈局

Astra 佈景主題教學,1 款適合所有人的 WordPress 主題 | 24

在正式開始設定之前,我們要先來講解一下 WordPress 網站的劃分方式,基本上所有的 WordPress 網站都可以劃分成這四個區塊:

  1. 頁首 ( Header ):主要用來放置 LOGO、上方導覽列選單的區塊。
  2. 主要內容 ( Content ):文章、頁面內容顯示的區塊。
  3. 側邊欄 ( Sidebar ):主要用來放置小工具的區塊。
  4. 頁尾 ( Footer ):可以用來放置下方導覽列選單、小工具的區塊。

當然,還有一些特殊編排的網站不是這樣劃分,例如有些網站的頁首是在左邊,跟側邊欄合為一體的,但在這邊因為我怕你混淆所以先不講,但基本上 95 % 的情況都會是我上面提到。

頁首 ( Header )

Astra 佈景主題教學,1 款適合所有人的 WordPress 主題 | 25

頁首最主要的功能就是用來放 LOGO、選單、導覽列,方便使用者快速找到網站中不同的文章與分頁,相關的設定你可以在自訂模式中的 Header 中找到。

如何在頁首建立導覽列?

Astra 佈景主題教學,1 款適合所有人的 WordPress 主題 | 26
  1. 進入自訂模式
  2. 點選選單
  3. 點選建立選單
  4. 為你的選單取名字
  5. 選單位置勾選 Primary Menu
  6. 點選新增選單項目
  7. 新增你想要新增的選單項目
  8. 按下發佈
Astra 佈景主題教學,1 款適合所有人的 WordPress 主題 | 27

接著你就可以在右上角看到你新增的選單內容了!

剛剛學完了,透過左邊側邊欄的選項改變佈景主題,但如果你不知道要去哪邊找的話,該怎麼辦?

其實 Astra 有提供一招更快的修改方式:只要在自訂模式之下,將滑鼠移至你想要修改的位置,它就會出現一個小小的鉛筆圖示,點下去就會直接引導你到你想要改的選項位置,非常方便!

Astra 佈景主題教學,1 款適合所有人的 WordPress 主題 | 28

接下來,我們來測試看看如何修改 LOGO:

  1. 在自訂模式下,將滑鼠移至左上角 LOGO 位置
  2. 點擊出現的鉛筆圖示
  3. 接著就會自動引導你到修改 LOGO 的地方
  4. 上傳想要的 LOGO,並按下發佈
Astra 佈景主題教學,1 款適合所有人的 WordPress 主題 | 29

記得要去下面的欄位把預設的 Display Site Title 關掉,這樣才會只剩下 LOGO。

如何變更頁首排版?

Astra 佈景主題教學,1 款適合所有人的 WordPress 主題 | 30

回到 Astra 自訂模式最外面的部分,找到 Header -> Primary Header,Astra 提供了 3 種不同的頁首排版給你選擇,而本次教學我會使用 LOGO 在中間的排版。

主要內容 ( Content )

Astra 佈景主題教學,1 款適合所有人的 WordPress 主題 | 31

主要內容 ( Content ) 就是你後台編輯的 WordPress 的文章、頁面顯示在前台的區塊,以 Astra 這佈景主題來說,它們只有定義文章為它們的主要內容,相關的設定你可以在自訂模式中的 Blog 中找到。

至於為什麼沒有頁面 ( Page ) 呢?如同前面所說的,頁面的部分 Astra 官方是叫大家去用 Elementor 這個頁面編輯器,所以它們就沒有再自訂模式中設立一個 Page 欄位了。

在調整主要內容的設定之前,請你先去後台隨便寫個 3 ~ 5 篇文章,如果不知道要寫什麼的話,可以先使用這個假文章產生器

Astra 佈景主題教學,1 款適合所有人的 WordPress 主題 | 32

然後再到後台的設定 -> 閱讀之中,去將首頁顯示改為最新文章。

如何改變文章的排列方式?

Astra 佈景主題教學,1 款適合所有人的 WordPress 主題 | 33

隨便創了幾篇文章後,其實網站看起來也有模有樣了,但如果你不希望文章的排列是這樣的話,該怎麼辦?

Astra 佈景主題教學,1 款適合所有人的 WordPress 主題 | 34

一樣很簡單,回到 Astra 自訂模式最外面的部分,找到 Blog -> Blog/Archive,Astra 提供了 3 種不同的文章列表排版給你選擇,而本次教學我會使用圖片在左邊的排版。

Astra 佈景主題教學,1 款適合所有人的 WordPress 主題 | 35

修改過後,現在的部落格就有點煥然一新了!

側邊欄 ( Sidebar )

Astra 佈景主題教學,1 款適合所有人的 WordPress 主題 | 36

修改側邊欄的選項主要會是 Sidebar 以及 WordPress 內建的小工具,前者比較多是修改整體外觀,而後者則是新增、編輯、修改內容為主。

在側邊欄 ( Sidebar ) 的部分,Astra 能修改的花樣並不多,只有一些基本的設定,例如:把側邊欄縮短、或是移至左邊等等。

例如你可能想要新增一個「關於作者」的欄位,或是在側邊欄標題前面加上 Icon 作為凸顯,雖然這些東西都可以透過寫 HTML/CSS 的方式達成,但是 Astra 本身沒有提供這個功能,算是我覺得稍微有點可惜的地方。

在側邊欄新增關於作者欄位

Astra 佈景主題教學,1 款適合所有人的 WordPress 主題 | 37

前往小工具 -> Main Sidebar -> 新增小工具 -> 自訂 HTML

接著在標題中輸入「關於作者」,然後在內容中輸入我幫你寫好的一個 HTML 樣版,將下面全部複製貼上:

<img alt="profile picture" src="https://weblai.co/wp-content/uploads/2020/04/92799542_237553367625930_2105653325121716224_n-300x300.jpg" style="border-radius: 100%; margin:0 auto; display: block;" width="150px">

行銷人出身,喜歡跳舞,但自從架了 WordPress 後便沈迷於 Coding 的世界。除此之外,也略懂設計與攝影,介於行銷人與工程師之間,目標是希望能夠整合這兩個不同的領域,為客戶打造出真正能創造收益的網站。
Astra 佈景主題教學,1 款適合所有人的 WordPress 主題 | 38

如此一來,你便可以在不使用任何外掛的情況下,得到一個「關於作者」的欄位,而如果你想要換成自己的圖片的話,只要將 src="圖片網址" 中的圖片網址換成你要的圖片網址,即可換圖片!

頁尾 ( Footer )

Astra 佈景主題教學,1 款適合所有人的 WordPress 主題 | 39

頁首最主要是用來放 CopyRight 聲明,或是放一些網站的隱私權政策、服務條款等等比較法律性的內容,當然也可以當作導覽列來用,相關的設定你可以在自訂模式中的 Footer 中找到。

如何修改 CopyRight 聲明?

Astra 佈景主題教學,1 款適合所有人的 WordPress 主題 | 40

回到 Astra 自訂模式最外面的部分,找到 Footer -> Footer Bar,Astra 提供了 3 種不同的頁尾排版給你選擇,而本次教學我會使用 CopyRight 在中間的排版。

在框起來的地方可以去修改頁尾的文字,基本上我不太會去動它,總之就是記得寫上以下字樣,作為一個著作權的聲明:

Copyright © [current_year] [site_title]

[current_year] 跟 [site_title] 是 WordPress 的短代碼,總之你先照抄,他會隨著現實生活的年份以及你網站的名稱去做動態變動,這樣你就不用一直改了。

全局設定

Astra 佈景主題教學,1 款適合所有人的 WordPress 主題 | 41

全局設定主要是用來改一些網站共同的東西,例如字體、容器、顏色、按鈕…等等,相關的設定你可以在自訂模式中的 Global 中找到。

如何修改字體?

回到 Astra 自訂模式最外面的部分,找到 Global -> Typography,在這邊可以選擇 Google 推出的免費中文字體 Noto Sans TC ( 思源黑體 )。

我的習慣數值如下,你可以參考:

Astra 佈景主題教學,1 款適合所有人的 WordPress 主題 | 42
  1. 字體 ( Family ) : Noto Sans TC
  2. 字體大小 ( Size ) : 16
  3. 字重 ( Weight ) : Light 300
  4. 行高 ( Line Height ) : 1.6

這邊有個小技巧,就是在網頁設計的領域,盡量要選擇 8 的倍數,例如字體大小 16px、行高 1.6,這樣會是一個比較好看的比例,你可以多觀察一些好看的網頁設計,基本上都會遵照這個法則。

Astra 佈景主題教學,1 款適合所有人的 WordPress 主題 | 43

回到前台,修改完字體後,現在網站應該又變得更好看許多了!

如何修改容器大小 ( Container )?

你可能會對於目前網站的佈局 ( Layout )不太滿意,可能覺得一塊一塊的不好看,這時候你就得去修改網站的容器設定 ( Container )。

Astra 佈景主題教學,1 款適合所有人的 WordPress 主題 | 44

回到 Astra 自訂模式最外面的部分,找到 Global -> Container,Astra 提供了 4 種不同的網站佈局給你選擇,而本次教學我會使用 Full Width/Contained

Astra 佈景主題教學,1 款適合所有人的 WordPress 主題 | 45

將 Layout 的部分從 Contented Boxed 修改成 Full Width/Contained,接著你就可以在前台確認到,整個網站的佈局都改變了!

我個人是比較喜歡 Full Width/Contained,覺得原本的 Contented Boxed 切成一塊一塊太刻意,不過這部分就見仁見智了。

匯入範例網站

學會了前面的基本操作,接下來我建議你可以來嘗試,所謂俗稱「套版」的一鍵匯入範例網站功能。

基本上現在所有的 WordPress 主題都有提供這個功能,Astra 當然也不例外,不過值得一提的是,Astra 是用 Elementor 這家頁面編輯器作為範例網站。

這樣做的好處在於,只要找到一個你喜歡的版型匯入之後,再將文字跟圖片換掉,就得到一個全新的美觀網站了!

由於 Astra 官方跟 Elementor 官方是合作夥伴關係,因此如果你是使用 Astra 作為佈景主題,那麼你就能一鍵匯入 Astra 官方提供的 Elementor 範例網站。

Astra 佈景主題教學,1 款適合所有人的 WordPress 主題 | 46
Astra 佈景主題教學,1 款適合所有人的 WordPress 主題 | 47

登入 Astra 官網,找到之前下載 Astra 檔案的地方,並下載 Premium Starter Templates

Premium Starter Templates 要購買 Astra Mini Agency Bundle 以後的方案才有唷!

Astra 佈景主題教學,1 款適合所有人的 WordPress 主題 | 48

將下載的檔案至 WordPress 後台外掛處,執行上傳外掛並啟用。

Astra 佈景主題教學,1 款適合所有人的 WordPress 主題 | 49

安裝完後,點選啟用 License,回去 Astra 官網找到你當時購買的 License 填入,完成之後,點選左邊的 See Library

Astra 佈景主題教學,1 款適合所有人的 WordPress 主題 | 50

接著會顯示所有 Astra 官方所提供的 Demo,確認在右上方選擇 Elementor 頁面編輯器。

Astra 佈景主題教學,1 款適合所有人的 WordPress 主題 | 51

接下來,我以一個簡單好看的「Digital Agency」版型,作為本次教學的示範網站。

選擇好後,請點選右下方的 Import Complete Site 按鈕。

Astra 佈景主題教學,1 款適合所有人的 WordPress 主題 | 52

如果是第一次匯入的話,最上面的選項不要勾選,然後點選 Import 按鈕進行匯入。

匯入完成後,就回到網站前台,你應該會看到你的網站變成這個樣子:

Astra 佈景主題教學,1 款適合所有人的 WordPress 主題 | 53

如此一來,你便發現你的網站成功變得跟範例網站一樣了!

Astra 佈景主題教學,1 款適合所有人的 WordPress 主題 | 54

如果你想要修改網站上的內容,只需要點擊網站上面黑框的使用 Elementor 編輯按鈕,即可切換到 Elementor 的編輯模式。

Astra 佈景主題教學,1 款適合所有人的 WordPress 主題 | 55

Elementor 提供你許多常用的頁面元素去製作網站,基本上都還蠻視覺化的,只要用拖拉的方式即可完成你心目中網站的樣貌,這部分就先讓你自行摸索囉!

更多 Elementor 的使用詳細教學,歡迎參考下面這篇文章。

延伸閱讀:新手也能做出設計感網站:WordPress 頁面編輯器 Elementor 教學

Astra 進階功能

最後,來分享一些 Astra 提供的進階功能,這部分算是比較深入的功能,我個人認為比較沒那麼重要。

所以,如果你是 WordPress 新手的話,這邊建議你可以先看過有個印象就好。

在 Astra 上啟用 AMP

AMP ( Accelerated Mobile Pages ),又被稱作加速行動頁面,是一個 Google 於 2016 年提出的開源程式專案,目的是為了提升行動裝置對網站的載入速度

簡單來說,AMP 是一種針對手機版網頁的加速技術,它主要的原理是透過縮限網頁上的 CSS 與 JavaScript 的使用,來達成讓手機使用者幾乎可以秒開網頁的高速讀取速度。

不過,如同前面所說的,如果你網站上很多元素是使用 CSS 和 JavaScript 製作而成的話,貿然啟用 AMP 可能會造成嚴重的跑版問題,因此請先在測試站測試完成之後再啟用。

總之,Astra 本身也有提供與 AMP 的功能整合,所以如果你已經簡單了解 AMP 帶來的利與弊了,接下來,我將會教你如何在 Astra 上啟用 AMP。

下載 AMP 外掛
Astra 佈景主題教學,1 款適合所有人的 WordPress 主題 | 56

前往 WordPress 後台外掛專區,搜尋並啟用外掛AMP

設定 AMP 外掛
Astra 佈景主題教學,1 款適合所有人的 WordPress 主題 | 57

啟用之後,在左邊工具列中找到AMP的選項,點擊後請選擇過渡模式

Astra 佈景主題教學,1 款適合所有人的 WordPress 主題 | 58

接著,依照你想要讓網站上那些頁面產生 AMP 的效果,以我自己為例,因為我的網站除了文章之外,都有使用 Elementor 頁面編輯器,而正常來說 Elementor 等大量用到 JavaScript 的外掛是不能開啟 AMP 的。

因此,如果你跟我一樣,只要只顯示 AMP 在文章的話,就只要勾選文章即可;如果不是的話,你可以選擇最上方的全部勾選。

檢查 AMP 是否生效
Astra 佈景主題教學,1 款適合所有人的 WordPress 主題 | 59

設定完之後,我們就到剛剛有設定要讓 AMP 生效的頁面去查看,這時候請點擊 WordPress 前台上方工具列中的檢視 AMP 版內容,即可查看啟用 AMP 版本的頁面。

Astra 佈景主題教學,1 款適合所有人的 WordPress 主題 | 60

如果你還是不確定 AMP 有沒有成功生效的話,可以前往 Google 官方提供的 AMP 測試網頁進行檢測。

更多詳細的 AMP,可以參考下方 Astra 官方的 AMP 設定文件:
Native AMP Support in Astra
Configure AMP Plugin

Page Headers

如果你覺得 Astra 原本預設的文章版型不夠好看的話,可以利用 Astra Pro 提供的 Page Header 來修改成 Page Header 形式的設計。

Astra 佈景主題教學,1 款適合所有人的 WordPress 主題 | 61

啟用方法非常簡單,只要前往 WordPress 後台左側工具列中的外觀 -> Page Header,再進行相關設定即可完成。

Astra 佈景主題教學,1 款適合所有人的 WordPress 主題 | 62

如果你找不到 Page Header 的話,記得先到 Astra Pro 的設定中確認 Page Header 的功能是否開啟,要開啟才能使用唷。

Astra 佈景主題教學,1 款適合所有人的 WordPress 主題 | 63

Custom Layouts

如果你想要在網站中不同位置插入客製化的程式碼,例如<head><body>,那麼你可以透過 Astra Pro 中的 Custom Layouts 功能來達成。

舉例來說,假設我今天想要在<head>的位置插入一串 JavaScript 程式碼,那麼該怎麼做呢?

開啟 Custom Layouts 功能
Astra 佈景主題教學,1 款適合所有人的 WordPress 主題 | 64

前往 WordPress 後台左側工具列,在 Astra Pro 的設定中找到 Custom Layouts,並進行啟用。

新增一個 Layouts
Astra 佈景主題教學,1 款適合所有人的 WordPress 主題 | 65

啟用之後,新增一個新的 Layouts。

Astra 佈景主題教學,1 款適合所有人的 WordPress 主題 | 66

接著會跳轉到一個新增的頁面,此時記得先點選上方的Enable Code Editor

輸入客製程式碼

接著,在編輯處輸入你要插入的程式碼,例如我插入了一串由 Font Awesome 提供的 icon 功能 JavaScript 程式碼。

Astra 佈景主題教學,1 款適合所有人的 WordPress 主題 | 67

接著,在下方選擇你要插入的位置,在 Layout 的部分請選擇 Hook ,而 Action 的部分則依照你的需求而有所不同,但因為我要插入在 <head> 之中,所以我選擇 wp_head

Astra 佈景主題教學,1 款適合所有人的 WordPress 主題 | 68

最後 Display On 也記得填寫你要觸發這串程式碼的所有地方,如果沒什麼特別問題可以跟我一樣選擇 Entire Website,接著按下發佈即可完成。

其它學習資源

如果你想要學習 Astra 完整教學,可以參考這位外國的 Youtuber 的頻道,雖然影片的部分可能沒我新,但是大部分都差不多。

如果你想要學習 Elementor 完整教學,一樣可以參考這位外國的 Youtuber 的頻道,他講得非常詳細,我當初也是看他的影片學的。

Astra 常見問題

Astra 是什麼?

Astra 是一個於 2017 由知名 WordPress 主題製造商 Brainstorm Force 所開發的 WordPress 佈景主題,在短短的 3 年內,Astra 在 WordPress 官方主題市集中,已經有高達 900,000+ 啟用人數,並獲得使用者近 5 顆星的滿分好評。

Astra 最大的特色就是它非常的輕巧,與其它動輒好幾 MB 的主題相比,Astra 僅僅具有 50 kb 的檔案大小!除此之外,Astra 還可以做到高度地客製化,因此可以讓你在做出一個美觀且多功能的網站之餘,也能維持著高速的網頁載入速度。

Astra 與其它 WordPress 佈景主題差別在哪?

一般 WordPress 主題都是將整體架構寫的很固定,如果你不太滿意主題的某些小地方,你也沒有辦法進行修改,因為整個主題是綁死在一起的。

而 Astra 是一個非常靈活、並且簡約的佈景主題,它可以讓你透過一個開啟/關閉的按鈕,讓你自行去決定要不要啟用原本主題提供給你的功能,這點在很大的程度上給予了你客製化網站的空間。

Astra 是免費的嗎?

Astra 是免費的,你可以直接在 WordPress 後台的官方佈景主題市集中,直接下載並啟用它,但是 Astra 官方也有推出它的付費版本 Astra Pro,你可以先行試用 Astra 再進行購買。

Astra 免費版 與 Astra Pro 的差別是什麼?

有一些更細微的進階設定只有 Astra Pro 能夠使用,例如:Sticky Header, 與 Woocommerce 的整合, Scroll to Top 按鈕,詳細可以參考官方說明,所以如果你目前的預算不足的話,可以先使用免費版的 Astra。

Astra Pro 值不值得買?

Astra Pro 的價格是 $ 59 美金/年,與一般 WordPress 主題 $ 59 美金 終身買斷來說,並不算特別便宜。

不過我認為 Astra Pro 是相當值得購買的,因為 Astra 官方對於主題上的支援與回覆都相當快速且令人滿意,基本上出問題都能解決;與其它買斷制但出問題卻求助無門的主題相比,我認為 Astra Pro 相當地適合程式能力沒那麼好的新手站長。

Astra 可以搭配哪些頁面編輯器?

Astra 主要可以搭配目前市場上最熱門的 Elementor 與 Beaver Builder 頁面編輯器。

除此之外,Astra 官方也自行開發了免費的 Gutenberg 編輯器外掛 Ultimate Addons for Gutenberg,讓你也可以使用 WordPress 的內建編輯器 Gutenberg 進行編寫網頁。

Astra Pro 跟 Agency Bundle 差在哪?

Astra Pro 僅針對 Astra 本身的功能進行了解鎖與延伸,而 Agency Bundle 則包含了 Astra 官方所製作的其它付費外掛,並且讓你可以以更優惠的價格進行購買。

這些外掛由於是同一家公司出的,因此具有相當好的兼容性,可以彌補 Astra 本身缺少的功能,因此如果你的預算許可的話,升級成 Agency Bundle 是一個不錯的選擇。

Astra 與 Ocean WP 哪個比較好?

Astra 與 Ocean WP 是兩款類型相同、常常會被拿出來比較的主題。

整體而言,Astra 具有更好的速度與官方的協助、文件支援;而 Ocean WP 則兼容更多的頁面編輯器、更便宜的價格,兩者各有優缺點,因此,其實並沒有一個一定的答案。

總之,我認為 Astra 與 Ocean WP 都是相當好的主題,建議你可以先使用它們的免費版本,然後再自行做比較,並從中選出最適合你自己狀況的主題。

哪裡可以學習如何使用 Astra 主題?

中文版的 Astra 教學可以參考優異教學網;而英文版的 Astra 教學可以參考
Ferdy Korpershoek 這位 Youtuber。

換回 Astra 之後的 2 項改動

最後,來稍微紀錄一下除此之外,這次我換回去 Astra,主要還進行了 2 項改動:

  1. 撰寫 Counter – 因為我實在很懶得在每篇文章的標題中標註 ” 1, 2, 3 , 4 “,以及寫 ” Step ” 這四個字,於是我使用了比較進階的 CSS Counter 與虛擬元素 ( pseudo-class )中的 :before,在 h2 ~ h5 前面直接進行計算與套用,讓數字自動生成。
  2. 製作 SEO Schema – 新增了 FAQ 的 Schema Markup,目前文章在 Google 搜尋結果有顯示複合式資訊卡 ( Rich Snippet ),也因為所佔據的區域更大了,所以最近的 SEO 排名也有所提升。

個人覺得現在的文章呈現方式是我蠻喜歡的,所以這次換回來 Astra,沒意外應該是不會再更換主題了,改主題都要在半夜偷偷改,很多 CSS 要重新寫,也是蠻累的。

整體評價

Astra

Astra 是一個於 2017 由知名 WordPress 主題製造商 Brainstorm Force 所開發的 WordPress 佈景主題,在短短的 3 年內,Astra 在 WordPress 官方主題市集中,已經有高達 1,000,000 + 的啟用人數,並獲得使用者近 5 顆星的滿分好評。

價格: 59

貨幣: USD

運作系統: WordPress

應用程式分類: Theme

推薦指數:
5

 

Astra 佈景主題教學,1 款適合所有人的 WordPress 主題 | WebLai

WordPress 佈景主題該如何選擇呢?今天,我要來教學你使用我個人最喜歡的佈景主題 – Astra。Astra 是我目前認為其中最完美的佈景主題,它輕量、速度快、好上手,該有的功能都有,不僅非常適合作為部落格網站,只要透過與頁面編輯器 Elementor 搭配,它也馬上可以處理形象網站、電商網站等類型的網站。

結語

Astra 大概 80% 的功能就這樣了,有些人可能會覺得外觀稍嫌簡陋了一點,但我的建議是,新手時期先不要在網站的外觀上花太多時間,而是要將時間花在充實網站內容上。

Astra 其實也可以做到很好看的,請參考:我的 Astra 作品

不然你做出一個超級好看的網站,但是 0 個使用者,其實也沒什麼意義。

除此之外,現代流行的網頁設計,其實都是極簡的元素 + 大量留白,這樣反而更能凸顯內容。

因為目前的網路上的流量以手機使用者佔多數,所以其實你把電腦版的網站弄得多有設計感,到了手機上其實看起來都差不多。

當然我知道有些新手往往有一個迷思,就是一個網站好像動畫越多、外觀越絢麗,就感覺越厲害,但其實不是,我覺得做網站最難的地方,永遠不是在於你要寫什麼放在網站上,而是你「不寫什麼」放在網站上。

這也是我為什麼會這麼喜歡 Astra 的原因,就在於它與我做網站的設計概念一致:簡約。

因此,如果你問我只能選擇一個佈景主題的話,我會選誰?我會毫不猶豫的回答:「Astra」,這就是我給 Astra 的評價。

不過對於新手來說,Astra 其實並不一定能滿足你們的需求,因為如果不用 CSS,很多 Astra 的選項你們是無法修改的。

但是如果你有意要好好經營 WordPress 網站,我認為學一點 HTML + CSS,搭配 Astra + Elementor 真的就可以千變萬化了!

最後,如果你還沒有購買 Astra Pro 的話,可以點擊下面的連結進行購買,這個佈景主題真的是我用過快 10 個主題以來讓我最滿意的。

重點整理▪ Astra:我覺得目前 WordPress 中最好的佈景主題。
▪ 頁首 ( Header ):網站最上面那條的導覽列,通常用來放 LOGO、主選單。
▪ 主要內容 ( Content ):你 WordPress 寫的文章、頁面顯示的地方。
▪ 側邊欄 ( Sidebar ):網站左右兩邊的區塊,通常用來放一些補充資訊。
▪ 頁尾 ( Footer ):網站底部的區塊,通常用來放一些法律性的聲明,例如 Copyright。

在WordPress中更改字體的五種方法

在WordPress中更改字體的五種方法

使用WordPress建立網站時,排版很重要。與其他品牌元素一起,它可以建立您的品牌形象,使網站訪問者舒心悅目,這是至關重要的。這也是在WordPress中更改字體可以讓您的網站與眾不同的原因。

然而,對字體的更改有重大影響(有時會使其複雜化)的是,您選擇的WordPress主題會限制您對字體的選擇。

但是WordPress默認的TinyMCE編輯器允許您自定義某些字體。有幾種方法可以更改WordPress中的字體:

1.使用WordPress主題定制器;

2.借助字體插件;

3.通過應用CSS代碼;

4.調整主題的style.css樣式表

5.通過website builder訪問Google字體庫。

在本文中,我將通過5種方法來指導您如何調整網站的排版。

1.使用主題定制器更改字體樣式

WordPress中的每個主題都有一個主題定制器,包括原生(默認)或自定義的。這是一個方便的內置WordPress功能,無需更改編碼(包括字體)即可更改主題的設計

請注意,WordPress主題定制器的功能取決於您使用的主題。由於每個主題都有不同的自定義選項,因此您可能無法更改字體樣式。

WordPress有數千個主題,因此這裡很難贅述特定主題中字體選項的豐富程度。某些主題可能提供的選項非常有限,而其他主題則可能具有功能豐富的工具來修改字體的每一細節。

作為示例,我們可以進入Visual Composer Starter主題,該主題使用默認的主題定制器來修改字體樣式。

因此,要更改字體時,首先要檢查的是您使用的主題是否具有執行此操作的選項。如果有的話,您將可以在WordPress儀表板中找到它。要進行檢查,第一步是轉到外觀定制

現在,您將看到主題具有的所有自定義選項。下面是Twenty Nineteen和Visual Composer Starter兩個主題定制器之間的區別:

如您所見,Visual Composer Starter主題具有如下可更改字體選項:樣式和所有您可能需要調整的參數的選項,諸如單獨的標題層次結構(H1、H2等)、段落以及按鈕。

更改版式設置後,請不要忘記應用更改以保存在主題定制器中。之後,您網站上的所有字體將會自動更改生效。

2.安裝WordPress字體插件以更改字體

如果您的主題沒有提供您所需的字體,或者根本沒有提供更改字體的選項,那麼最好(便捷的方法)是使用專用的字體插件。通過使用字體插件之一,無需更改您網站的代碼或手動配置字體。

字體插件有兩種常見的類型:內嵌字體和允許您上傳使用的特定字體。如果您在如何匹配字體方面苦苦掙扎一籌莫展,那麼可以從FonPair工具中獲取大量靈感。

有許多插件比默認TinyMCE編輯器提供了更多的排版功能。

擁有一個可以讓您使用Google字體的插件始終是一個不錯的選擇,因為它們大約有900種字體可供選擇。就像一個流行的Easy Google Fonts插件一樣,這種插件可讓您添加自定義Google字體並通過主題定制器控製字體。或者您可以選擇Google字體排版插件來更改特定部分或整個網站上的字體,該插件提供了有用的實時預覽功能,可以實時採樣字體。

但是,如果您要上傳自己的自定義字體而不依賴於預定義的庫,則可以選擇使用知名的“任何字體”插件。

但是,您可以在其他WordPress插件(例如website builder)中訪問富字體庫。或者確切地說,現在Google字體已集成到Visual Composer插件中,這意味著您可以直接從Frontend編輯器中使用它。

3.自定義CSS代碼以調整版式

調整網站字體的另一種方法是使用CSS。如果您熟稔CSS代碼,這將特別方便。如果您要使用的主題不能自定義更改字體,也只能通過修改css代碼來實現。但是,請注意,如果您更換了WordPress主題,您先前對css代碼的更改將會失效。

舉例來說,假如您使用的是WordPress默認的“Twenty Nineteen”主題,該主題不提供自定義修改主題功能,但它支持自定義修改CSS。要找到此選項,請打開定制器,然後單擊“其他CSS”選項卡

如下圖,我創建了一個頁面,顯示默認情況下標題1、標題2、標題3和段落文本的外觀。

並且我在下圖中添加了一些自定義CSS來更改樣式。添加自定義CSS可以讓您修改網站的排版,並可以在屏幕右側預覽修改效果。您也可以在開頭添加*,以將所需的字體添加到整個網站。

注意:如果使用的是Visual Composer,則可以直接從編輯器添加自定義CSS,以在本地或全局更改字體。

4.在style.css樣式表中更改字體樣式

如果您是精通WordPress的高手,您可以通過修改主題文件來自定義網站。通過這種方法,您可以將CSS代碼直接添加到主題style.css文件中,從而更改WordPress中的字體。

要在WordPress儀表板中找到此文件,請轉到外觀主題編輯器,然後在主題文件選項卡下選擇style.css文件。

WordPress主題中的字體取決於特定主題作者的設定,並且在主題的不同區域可能配置了不同的字體。這意味著尋找字體以進行更改可能非常耗時。而且,如果您打算修改主題文件,則為安全起見,最好創建一個子主題,這樣可以避免在更新主題後丟失您所做的更改。

最好的建議是簡單地查找、刪除和覆蓋任何現有的(或特定的)字體樣式,避免被具有更高CSS特異性的任何配置所影響。

如果要使用自定義字體,有兩個選項可將字體嵌入WordPress網站。

首先,您可以使用@ font-face規則來定義要使用的新字體系列。查找、下載沒有版權問題的字體並將其上傳到您的服務器,以便您能指定字體文件的URL。例如,您可以使用Google字體庫來查找和下載所選字體系列。

然後,指定字體名稱,並通過@ font-face規則將這些值(字體名稱和字體文件的URL)放在主題CSS樣式表的頂部。例如:

@font-face {

font-family: 『MyWebFont』;

src: url(『myfont.woff2』) format(『woff2』),

url(『myfont.woff』) format(『woff』);

}

如果要在整個主題中全局更改字體,請將*放在開頭。

第二個方法是使用字體網站提供的代碼嵌入特定字體(在我們的示例中,我們仍以Google Fonts庫為例)。選擇一種特定的樣式,然後單擊矩形圖標以獲取代碼。

使用標記將其插入網站HTML代碼的中,或使用@import規則在style.css文件頂部添加字體。

無論您的偏好是什麼,使用Visual Composer,您可以使用CSS HTMLJavaScript編輯器添加自定義代碼段,或者在站點範圍內或特定頁面上修改代碼。

5.使用Website Builder添加Google字體

如今,大多數人都會使用網站構建器來創建網站。它們通常提供的功能之一就是可以調整字體,包括更改字體。

例如,使用Visual Composer Website Builder,您將獲得很多自定義選項。它具有高級的TinyMCE編輯器,除默認選項外,您還可以使用所有Google字體,更改字體大小、行高、字母間距等。

這無疑是處理您網站排版的最簡單方法之一,就像任何所見即所得編輯器一樣,所有內容都集中在一個地方。在Visual Composer中,您可以輕鬆地嘗試使用字體:搜索特定的字體並預覽。

此外,在Visual Composer Hub (具有定期更新的現成模板、元素和加載項的免費云庫)中,您可以添加Google Fonts Heading Element來製作精美的自定義標題。

結論

此時,您應該熟悉有關如何在WordPress中更改字體的所有現有方法。這裡沒有魔術,只需確定是否要處理一點編碼問題即可。然後,應用上述選項之一,並以精美的字體使訪問者的體驗飛速增長。

但是,調整現有字體並添加新字體的最簡單方法是使用插件,或者更好的是使用網站構建器。下載免費的WordPress網站構建器,您不僅可以控製網站的版式,還可以自定義頁面和文章的其它區域。

如何更換 WordPress 網站字體?利用自訂 CSS 功能 1 分鐘搞定!

如何更換 WordPress 網站字體?利用自訂 CSS 功能 1 分鐘搞定!

最後更新時間:2020 年 12 月 8 日

你是否也有遇到這樣的情形過?在 Themeforest 上看到好看的 WordPress 佈景主題,但買回來的範例網站更換成中文字後,卻發現奇怪,怎麼感覺沒有原本的好看?

接下來這篇文章,我將教你如何透過簡單的自訂 CSS 功能,更換你的網站字體,1 分鐘將你的網站變好看!

為什麼你的網站不好看?

很多人覺得買回來的佈景主題不好看,絕大多數的原因是因為,這些佈景主題都是以英文字體下去設計的,因此如果你直接替換成預設的中文字體,那確實會沒原本的那麼好看。

而要解決這個問題其實很簡單,就是把預設的中文字體換掉,但是,該如何更換網站上的字體呢?

預設網站字體
英文字體
如何更換 WordPress 網站字體?利用自訂 CSS 功能 1 分鐘搞定! | 3
預設中文字體

如何更換網站字體?

要修改 WordPress 網站上的字體,你會需要透過 WordPress 內建的一個「自訂 CSS」的功能,而所謂的 CSS,則是用來掌管網站外觀的程式語言。

接下來,我將教你把預設的中文字體改成「微軟正黑體」,是一款相當適合作為在網頁上瀏覽的字體,同時也是目前 Weblai 網站上所使用的字體。

更換成微軟正黑體

如何更換 WordPress 網站字體?利用自訂 CSS 功能 1 分鐘搞定! | 4

在登入 WordPress 後台的情況下,點擊前台上方的黑框,進入自訂模式。

如何更換 WordPress 網站字體?利用自訂 CSS 功能 1 分鐘搞定! | 5

找到最下面的附加的 CSS 選項。

如何更換 WordPress 網站字體?利用自訂 CSS 功能 1 分鐘搞定! | 6

將以下代碼複製貼上至空白處,並按下發佈

body {
    font-family: Helvetica, 'PingFang TC', "微軟正黑體", "Microsoft JhengHei", sans-serif !important;
}

h1,h2,h3,h4,h5,h6{
    font-family: Helvetica, 'PingFang TC', "微軟正黑體", "Microsoft JhengHei", sans-serif !important;
}

這段 CSS 程式碼的意思,是將你網站的內文以及標題預設字體都更改成別的字體,在這邊我搭配的組合為:

  1. Helvetica – 一款經典的現代化英文字體,你網站的之後的英文文字體會是這個
  2. PingFang TC – IOS 系統內建的字體「蘋方」,如果是你 Mac, iPhone 即會顯示此字體
  3. 微軟正黑體 – Windows 系統內建的字體,如果你是 Windows 電腦即會顯示此字體
  4. Microsoft JhengHei – 微軟正黑體的英文版,這是確保非中文語系的使用者也能正常顯示
  5. sans-serif – 預設的字體,如果在上面的情況下都不符合,則會出現此字體

簡單來說,英文字體會顯示 Helvetica,中文字體則依據你的瀏覽裝置顯示 PingFang TC 或 微軟正黑體

如何更換 WordPress 網站字體?利用自訂 CSS 功能 1 分鐘搞定! | 7

接著回到網站前台,你就會發現你所有的字體都改變了,變得更好看、更現代感的中文字體。

補充

如果你對字體沒有任何想法的話,可以直接用下面這組程式碼,讓字體回歸成所有系統預設的字體組合。

body {
    font-family: -apple-system, Segoe UI, Noto Sans, Ubuntu, Cantarell, Helvetica Neue !important;
}

結語

其實在網站上,中文字體的選擇不多,最常見的選擇就是 Microsoft 的「微軟正黑體」以及 Google 的「思源黑體」( Noto Sans TC ),95% 以上的中文網站應該都是使用這兩個字體。

你可能會好奇,為什麼中文網站都只有這兩種字體可以使用呢?難道我不能使用新細明體甚至標楷體嗎?

這是因為在網站工程的領域中,中文字體相較英文字體有一個先天性的劣勢,就是中文字體的量太多,導致字體的檔案大小太大,進而影響到網站速度。

影響的速度有多大呢?一套中文字體往往有高達數萬字的中文字,檔案大小動輒 10 MB 上下;而相較於中文字體,英文字體只有 26 個字母,檔案大小往往不到 100k,這中間的差距大概是 100 倍的載入速度。

這也是為什麼我們只用微軟正黑體和思源黑體的緣故,微軟正黑體是因為如果你有安裝 Windows,它就直接在你電腦中安裝好了。

而思源黑體則是因為 Google 將此字體放上雲端開源公開,讓你的網站能夠透過某種方式取得此字體的資料,解決了載入速度的問題。

值得一提的是,台灣有一家新創公司 Justfont 致力於解決網頁中文字體的不足,你可以透過它們的服務,取得一些特別的中文字體,並且也不會影響太多速度。

例如我的接案網站就是使用 Justfont 的字體「金萱」:

如何更換 WordPress 網站字體?利用自訂 CSS 功能 1 分鐘搞定! | 8

所以,如果你想要讓自己網站的字體跟別人不一樣的話,可以參考看看 Justfont 的網頁字體服務,不過確實會影響到一點網站速度,因此這部分再請你自行評估看看了。

最後,除了換字體之外,如果你想要進一步讓文章標題變得更好看的話,可以參考下面這篇,將預設的標題樣式換掉:

延伸閱讀:如何自訂 WordPress 文章標題樣式?5 步驟學會用 CSS 自己改樣式!

額外資訊

我目前正在製作一部 WordPress 網站的線上課程,主要內容會是教你如何從完全不懂程式碼的新手,透過學習架設 WordPress 網站與 SEO,打造出一個在一年內能為你帶來 100 萬收入的個人網站。如果你有興趣的話,歡迎填寫下方的訂閱表單,我將會告訴你最新的開課資訊。

.

加入 FB 討論社團

另外,我開設了一個 Facebook 社團,叫做「WordPress 網站架設 | 網路賺錢 | 部落格經營 – WebLai 交流區」,社團中討論的主題主要會是關於 WordPress 網站架設部落格經營、以及網路賺錢

W3C 教程-W3C 術語表和詞典

W3C 術語表和詞典

W3C 詞彙與字典- 「W3C Glossary and Dictionary」 的中文譯文。

原始版本:http://www.w3.org/2003/glossary/

翻譯:W3School 項目組

尊敬的讀者朋友們請注意,這是關於W3C 文章的網頁翻譯。

原文版權受法律保護,請瀏覽原文中的參閱部分。翻譯本文的權利只歸屬於譯員。翻譯不能保證準確無誤,合法有效的只有W3C 原文英語版。

針對本文翻譯所要指出的就是譯員的權利不被侵害。此段落不屬於英語部分。

提示:目前內容為測試版本。如有紕漏,敬請來函指正。

術語表索引

Index:

A | B | C | D | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | U | V | W | X | Y | Z

W3C 術語表中以字母A 開頭的條目

英文條目 簡體中文翻譯
abstract module 抽像模塊
access 訪問
access control 訪問控制
access control information 訪問控制信息
access mechanism 訪問機制
access rights 訪問權限
accessibility 可訪問性
accessibility information 可訪問性信息
accessibility problem 可訪問性問題
accessible 可訪問的(無障礙的)
accessible authoring practice 可訪問創作實踐
acquired infoset 已獲取信息集
ACSS (Audio cascading style sheets) 音頻層疊樣式表
activate 激活(啟用)
active grammar 正在使用的語法
active perceivable unit 使用中的可視單元
activity 活動
actor 角色
adaptation 適應
adaptation preferences 適配參數選擇
additional characters 附加字符
advisory board 諮詢常委會
advisory committee 諮詢委員會
age 壽命
agent 代理
aggregated authored units 集成創作單元
aggregation 集成
alert 警告
alpha alpha
alpha compaction alpha 壓縮
alpha separation alpha 分色
alpha table alpha 表
alternative information 替代信息
amaya amaya
ancestor 祖先
anchor
ancillary chunk 附加數據塊
animation 動畫
annotation 註釋
anonymity 匿名性
antecedent 前提
apache apache
applet applet(應用小程序)
application 應用程序、應用
application personalization 應用程序個性化
application programming interface (API),

conventional input/output/device API

應用程序編程界面、

常規輸入/輸出/設備API

arc
architecture 構架
argument 參數
artifact 非自然信號,人工製品
ASCII art ASCII 藝術
ASR 自動語音識別
assertion 斷言
assistive technology 輔助技術
asynchronous 異步的
asynchronous exchange 異步交換
at user option 用戶可選擇的
atomic 原子的
atomic test 原子測試
attribute 屬性
attribute name 屬性名稱
attribute specifications 屬性規範
attribute value 屬性值
attribute, or CC/PP attribute CC/PP 屬性
attribute-list declarations 屬性列表聲明
audio 音頻
audio description 音頻描述
audio track 音軌
audio-only presentation 純音頻呈現
audit guard 稽核防護機制
auditory description 聽覺描述
authentication 身份驗證
author 作者
author styles 作者樣式
authored unit 創作單元
authoring 創作
authoring tool 創作工具
authorization 授權
axis