官網設計 :形象網站架設製作(個人品牌+公司企業)

2
301
官網設計 :形象網站架設製作(個人+公司)
官網設計 :形象網站架設製作(個人+公司)

這是一篇完整的「 官網設計 」,幫助你完成形象網站架設&設計。

個人網站製作,想自架品牌官網嗎?幫公司形象網站設計,卻沒完整的網頁製作教學?網頁設計公司高額的網站建置費用,有點超出價格?

個人或公司,可能都有網站建置需求,這篇「 官網設計 」流程,會幫助你用最少預算,快速網站製作成功,章節如下。

這就是個人 or 公司官網製作的流程,我們開始囉!


1. 如何自架網站?

一個 網站製作 流程,不外乎就是由這 3 點組成:

架設網站 3 要素
1. 購買網址
(申請門牌)
2. 申請主機
(租一塊地)
3. 網頁設計
(搭建房子)

不論是自己製作,或是請網頁設計公司做,都需要在網域&虛擬主機上,做些投資,而且無可避免

差別是,你可用最少的預算,開始網站架設之路。

網址如何取名呢?

「 網址 」是網站組成的第一步,它就像家的門牌一樣,讓人可以順利找到。

1. 簡單好記:越簡單的網域名稱越方便使用者查詢和記憶。
例:蘋果 – https://www.apple.com/

2. 品牌名稱:網域名稱以品牌為名,簡單、易記。只要打算發展品牌的公司,都可以用這個方式。
例:愛迪達 – https://www.adidas.com/

3. 與產品名稱有關:網址與產品的關鍵字有關聯。你也可以用關鍵字工具來想網站名稱。
例:博客來 – https://www.books.com.tw/

4. 去除www:目前大部分新網址都不太會在前面加上www,這是比較舊式的用法。

5. .com優先:.com是大多數人的直覺印象,主要方便好記,增加搜尋率。

6. 勿用中文:網址傳輸是以英文為主,所以網址上有中文,就會轉成一長串的特殊符號+數字,除了難記外,對排名也不太理想。

在台灣,一般民眾最常選擇的就是 .com / .com.tw,大概是這兩種最常見,也最符合。

這邊也把其他類型的網址,也一並列出:

  • org – 財團法人才可申請網域,需要財團法人資料。
  • net – 網路事業機構,例如中華電信、seednet等 .. 才可使用或是其他網路事業。
  • edu – 教育機構,一般為學校機關的網址申請,非一般補習班等機構。
  • gov – 政府機構,為政府網頁使用之網址申請,一般人無法申請。
  • tw / cn / jp – 代表不同國家,如台灣/中國/日本等。

虛擬主機是什麼?

把網址比喻成「 門牌 」,那虛擬主機就是「 家 」的角色。

如果網頁設計完成了,就需要放在虛擬主機上,讓網站正常運作。

「 虛擬主機 」是主機公司,在自管的實體主機上,切分成多個虛擬空間,並把這些空間,租給一般使用者使用。

大幅降低使用者的費用,因為養實體主機是很貴的,只需租用現成的即可。

大約 97 % 以上自己架設網站者,都是租用虛擬主機。

如何挑選虛擬主機?

1. 公司:國外知名虛擬主機公司,都是全球性服務,不論公司大小、主機性能、網站速度,通常優於國內主機。

2. 價位:通常國外的價格,會比國內便宜,但切記不要價格取向,如果主機性能不好,之後也會選擇離開的。

3. 功能性:新手可用入門款方案,價錢也不會太貴;有經驗的網站架設者,可看自己需求,選擇方案。

WordPress 是什麼?

WordPress 是全球知名的網頁設計軟體,全球有 30 % 以上的網站,都來自於 WordPress。

WordPress 網站使用人數
WordPress 網站使用人數

擁有上萬個佈景主題(樣板)和功能外掛,只需一鍵安裝即可成為多功能網站。

或許你不知道怎麼選,請參考 最佳 WordPress 佈景主題最佳 WordPress 外掛推薦,會給你應該的幫助。

WordPress 可完成多種網頁設計,如:部落格架設個人品牌或公司企業官網購物網站架設 等 ..

最大好處是,它是完全免費的軟體,可完全掌握自己網站資料,不需被任何網路平台、網頁設計公司牽制。

因為你就是網站的擁有者。


2. 虛擬主機推薦

Bluehost 是地球最大的虛擬主機公司之一,全球管理數百萬個網站。

是小犬最愛的 WordPress 主機 ,自己親自使用多年,不論網站速度、客戶服務、價格便宜等 .. ,一切都沒話說。

許多部落客、企業主、電商經營者,都把網站建置在上面,有流暢的操作介面,就算不懂英文(可用 Google 翻譯),還是能操作自如。

有哪家虛擬主機商,對 WordPress 有良好的支援?

Bluehost 是 WordPress 官方認可的虛擬主機商,對 WordPress 有良好的支援。

Bluehost教學 :wordpress.org 認證的虛擬主機公司
wordpress.org 認證的虛擬主機公司(經過官方嚴格審核標準)

Bluehost 正常運行時間+網站速度,表現好嗎?

Bluehost 全年有 99.9% 以上的正常運行時間(沒任何一家能保證 100%),這是重要的,不然訪客無法連上你的網站。

測試 10 多家虛擬主機(網路空間)的速度,Bluehost 是排名前幾名的。

Bluehost教學 :網站正常運行比例&頁面載入時間
Bluehost 網站正常運行比例&頁面載入時間

Bluehost 還有許多優點,它的知名度告訴了一切。

接下來,我將開始「 Bluehost教學 」課程,繼續網頁架設教學。


3. Bluehost 方案選擇

前往 Bluehost,選擇 WordPress > WordPress Hosting(WordPress 主機)。

bluehost教學 :wordpress主機+網域申請
使用 Bluehost 申請 wordpress主機+網域

往下滑,會看到 Bluehost WordPress 主機方案,下面我會給你一些 Bluehost 方案評價。

bluehost 主機方案費用
bluehost 主機方案費用

要選擇哪種 Bluehost 方案?

  • 只有一個網站架設需求:選 Basic 方案
  • 多網站架設需求:選 Plus 或 Choice Plus 方案

以新手來說,若只有一個網站需架設,選擇 Baisc 方案是毫無懸念的,此方案也搭配 50 GB 的儲存空間,是非常夠用。

若架設不只一個網站,建議直接選擇 Plus 方案,因為該方案和 Choice Plus 功能差不多,卻比較便宜。

Bluehost 費用了解

Bluehost 通常費用是,網址 $14.99 美元 / 年(一年約 450 台幣),和主機 $7.99美元 / 月(一年約 2880 台幣)。

值得開心的是,Bluehost 官方同意為我們網站讀者,提供最高 50% 以上的主機折扣(如下表,以台幣計算)

WordPress Basic 方案 WordPress Plus 方案
買一年:特價約 2142 元(原價2880 元 買一年:特價約 2682 元(原價 3960 元
買二年:特價約 3564 元(原價 5760 元 買二年:特價約 5004 元(原價 7920 元
買三年:特價約 4266 元(原價 8640 元 買三年:特價約 5886 元(原價 11880 元

小提醒:新手可購買 1 年的 WordPress Basic 方案,用最少預算入門:)

如果網址同樣在 Bluehost 申請, Bluehost 還提供首年網域免費並附帶免費的 SSL 憑證。

等於說,網址+主機費用加起來,最少可用不到 2200 台幣,就能開始你的網路事業!

接下來,我將購買 1 年的 WordPress Basic 入門方案,當作 Bluehost教學 範例。

不管購買的是哪種方案,只要點擊本站 Bluehost 連結,讀者們都享有優惠價格。


4. 網域申請+租用虛擬主機

選擇 Bluehost 方案後,就可以網域申請+虛擬主機推薦租用囉:)

這邊簡化 3 步驟,打造自己的網頁製作。

Step1:網域申請

申請新網址選 Create a new domain,已經有網址選 Use a domain you own,確認點 Next。

如果「 網址 」和「 主機 」都在 Bluehost 註冊的首購申請,Bluehost 會附贈一年的網址(免繳網址費用)唷。

bluehost教學 :網域申請
有建立新網址 & 已經有網址,兩種選項
  • 小提醒:如果你是用「 已有網域 」去申請 Bluehost 主機,請操作 DNS 設定指向,這樣原來的網址才會順利連結上新主機。

Step2:申請資料填寫

填寫使用者資訊,需都填寫英文,郵遞區號需 5 碼(國際碼),可用這個工具查詢。

Email 需填寫正確,申請完成 Bluehost 會寄網域確認信(需點擊啟用)& 購買收據等 .. 敏感訊息。

bluehost教學 :使用者資訊
bluehost教學 :使用者資訊

主要留意租用多久、是否加購商品、確認消費金額,Bluehost 會贈送一年網址和免費的 SSL 憑證。

加購商品只有 Domain Privacy(網域隱私保護)比較值得加購,其他可不勾選,省預算。

bluehost教學 :方案選擇&加購商品
bluehost教學 :方案選擇&加購商品

確認消費金額,接著填入付款訊息,都完成無誤後,勾選服務條款,最後按下 Submit 送出。

bluehost教學 :付款方式
bluehost教學 :付款方式

Step3:創建 bluehost 帳戶

跟著 Bluehost教學 ,如果網域+主機申請成功,會看到歡迎訊息 & 收據明細,接著來註冊 Bluehost 帳戶。

點擊 Create your account 創建帳戶。

bluehost教學 :虛擬主機申請完成
bluehost 主機申請完成,創建 bluehost 帳戶&收據確認

下圖,Domain Name(網域名稱)是未來登入 Bluehost 的帳號,並輸入你想申請的密碼,確認無誤後點 Create Account 建立帳號。

P.S 這裡的資料請妥善保存,是未來登入 Bluehost 的帳密唷:)

bluehost教學 :創建bluehost帳戶
創建 bluehost 帳戶:輸入密碼

到了這裡,恭喜完成了網域申請 > 主機申請 > Bluehost 帳戶註冊的重要流程。

有了這些東西,我們就可以架設 WordPress 網站囉。


5. WordPress 網站製作

到了這邊,應該已經有個人網域、虛擬主機、Bluehost 登入帳密了,我們繼續架設 WordPress 網站。

首先,前往 Bluehost,點 Login 登入。

bluehost 登入教學
bluehost 登入教學

輸入你的網域名稱(或信箱)&密碼, 登入 Bluehost 。

bluehost教學 :後台登入
bluehost教學 :後台登入

如果是第一次登入,Bluehost 會詢問一些問題,並協助你安裝,這些畫面 Bluehost 有可能更改,但未來都可以更改,先任意選擇即可。

下面是示範教學,實際狀況可依個人需求選擇。

首先,選擇網頁製作類型、為誰創建網站等 .. 。

bluehost教學 :網站架設流程
選擇想架設的網站類型等 ..

勾選 Blog 頁面、About me 關於我們頁面等 ..

網頁製作教學:bluehost
選擇想加入的網頁內容

命名網站名稱、設定網站標語,和給 Bluehost 架站幫手一點評分。

bluehost 教學:網頁製作
命名網站名稱、標語、和給 Bleuhost 架站流程評分:)
  • 因為 Bluehost 是英文介面,中文標題在 Bluehost 後台可能呈現問號(除非英文命名),但這不會有任何影響。

然後,挑選 WordPress 主題,可先選個免費版的主題玩玩,看喜歡哪個,不一定要跟我一樣:)

bluehost教學 :wordpress主題挑選
超多 wordpress 主題挑選:)

如果安裝過程中,有出現類似加購商品,先取消它不加購

安裝完成後,會前往 Bluehost 後台首頁。

然後點 My Sites,會出現剛架設完成的網站,可在這裡進入 WordPress 網站前後台。

Bluehost教學 :前往網站前後台
Bluehost教學 :前往網站前後台
  • 此時前台路徑可能是臨時網址,過些時間 Bluehost 會自動更改成你剛申請的網址。

想新增頁面、編輯文章、新增分類 .. ,請參考 WordPress 後台教學課程,有更多的 WordPress 操作。

這時,點擊上圖前台路徑,會發現 WordPress 網站已經順利出現囉!恭喜你!

如果是 WordPress 登入狀態,前台應該看得到預設主題畫面。

如果用訪客模式(無痕視窗),前台應該會出現網頁準備中頁面,等網頁設計完畢後,再切換 正式上線 即可。


6. Bluehost 其他設定

如果有跟著上面的教學,你應該也順利建立你的 WordPress 網站了。

接著我們還有一些事項需完善它,像是信件認證(WhoIs 網域身份認證)、Bluehost & WordPress 設定、網站正式上線 ..。

這幾個也是必要的步驟,請參考 Bluehost 網站製作,補充尚未學習到的部分。

完成後相信你的個人網站設計,也大功告成了:)


7. 網站基本設定

當網域申請+虛擬主機租用完成,有些 WordPress 後台系統需要調整,方便後續進行。

主要有:網站標題更改系統語言更改文章網址更改選單分類設定新增或編輯使用者

或是可以參考這篇,裡面有完整教學。

更多 WordPress 前後台教學,多個課程前往學習:

WordPress教學 :23 個安裝課程(主題外掛+購物車)

如果設定完成,可繼續往下網頁架設。


8. 形象佈景主題

如何製作理想的網站,讓人愛上你的 WordPress 網頁設計。

好的 WordPress 佈景主題,除了網頁漂亮以外,也能幫助吸引更多的訪客。

WordPress 佈景主題安裝

首先,前往 WordPress 後台 > 安裝佈景主題。

wordpress blog 佈景主題安裝
wordpress blog 佈景主題安裝

WordPress.org 官方提供,有 7000 多種免費佈景主題,可讓你慢慢選擇,是網頁設計的好幫手。

如果想加快效率,可加上搜尋條件尋找,加速建置網站流程。

建立Blog :wordpress 佈景主題選擇
建立Blog :wordpress 佈景主題選擇

方便教學示範,我簡單選擇一個 WordPress 佈景主題,正式安裝前也可先 預覽 ,確認是你想要的,再 安裝 > 啟用 即可。

如果你還沒有頭緒,可先照我的 WordPress 主題選擇。

建立Blog :wordpress 佈景主題安裝
建立Blog :wordpress 佈景主題安裝

主題啟用完成,回到前台看一下成果,看起來還不錯的 WordPress 主題,成功出現啦。

WordPress 佈景主題安裝成功
WordPress 佈景主題安裝成功

到這裡,先恭喜你完成 WordPress 佈景主題安裝,剛入門到這一步就可以了。

但如果你想試看看,更好的 WordPress 佈景主題,可以往下看我的經驗分享。

額外經驗分享

如果是單純記錄筆記、生活日誌、簡單的官網設計製作,就用 WordPress 免費佈景主題即可,因為本來就不需多花錢。

但如果想發展個人品牌,有客製化形象網站設計需求,或表現你的品牌特色 ..

請參考 最佳 WordPress 佈景主題推薦,這是我整理的常用熱門主題,你會得到應該的幫助。


9. 設定網站頁面

「 官網設計 」製作,應該要有一個網站首頁,讓訪客一眼就認識你。

關於如何新增頁面,只要幾個簡單步驟即可完成,開始囉。

Step1:新增頁面

前往 頁面 > 新增頁面,可點左上加號使用區塊編輯器,設計網頁內容。

關於網頁內容設計,請參考 區塊編輯器 會幫助你了解更多。

網頁設計完成,可設定網址名稱和精選圖片(頁面封面),關於網址形式可參考 文章網址設定

WordPress架站教學:設定網址&頁面封面
WordPress架站教學:設定網址&頁面封面

不同的 WordPress 主題會有不同的功能,剛安裝的 Astra 佈景主題,能讓我們更改頁面的排版。

主要調整不顯示側邊欄(No Sidebar),和禁止顯示頁面標題&精選圖片,如下圖。

WordPress架站教學:設定 WordPress 頁面佈局&文章發佈
WordPress架站教學:設定 WordPress 頁面佈局&文章發佈

網頁設計完成,可先 預覽 頁面,沒問題後就 發佈 即可。

再來,我們用一樣步驟,再新增一個頁面,來當文章列表頁面。

簡單輸入頁面標題、頁面網址、精選圖片,內容部分先空白即可,等等設定完成後,這頁會變成文章列表。

官網設計 :設定網址&頁面封面
官網設計 :設定網址&頁面封面

一樣把文章標題、精選圖片隱藏,Sidebar 側邊欄位照預設即可(會顯示),如下圖。

官網設計 :設定 WordPress 頁面佈局&文章發佈
官網設計 :設定 WordPress 頁面佈局&文章發佈

完成後 發佈 即可,等等會用到剛新增的兩個 WordPress 頁面。

Step2:設定首頁和文章列表頁面

WordPress 佈景主題,首頁預設是文章列表,我們來學習如何變更首頁。

前往 設定 > 閱讀,顯示內容改為靜態頁面,分別設定剛新增的兩個頁面,一個當首頁,另一個當文章列表頁。

WordPress架站教學:閱讀設定
WordPress架站教學:閱讀設定

文章顯示方式改為 內容摘要,預防頁面過長,然後 儲存設定

Step3:選單設定

頁面設定完畢後,需要把頁面放置選單中,前台選單才會看的到。

前往 外觀 > 選單,將剛設計的頁面新增至選單,選單部分可以拖移排序,完成後 儲存選單

WordPress架站教學:選單設定
WordPress架站教學:選單設定

太好了,我們剛設計的頁面,已經順利出現在網站選單上囉。

輸入主網址或點擊首頁分類,應該會出現剛設計的首頁,太棒了。

WordPress架站教學:新增的頁面,順利出現在選單上
WordPress架站教學:新增的頁面,順利出現在選單上

但是點選文章內容分類,可能有預設文章或是一篇文章都沒有。

沒關係,下一章節我會帶你新增 WordPress 文章,豐富你的「 官網設計 」。


10. 新增文章

一個好的「 官網設計 」完成,可以寫一些網誌文章,經營良好的個人自媒體、或品牌企業形象。

不論你的文章內容頁面,是否有文章,這章節我會教你如何新增。

前往 文章 > 新增文章,這裡可編寫你的網站文章。

左上角的加號,可新增不同的 區塊編輯器,你可以用它設計文章內容。

WordPress架站教學:新增文章
WordPress架站教學:新增文章

文章正式發佈前,可以設定文章網址、文章分類、精選圖片(網站封面)、是否開放留言等 .. ,我在 文章管理 有詳細教學。

關於新增管理 WordPress 文章分類,請參考 分類+選單管理 會幫助你了解更多。

如果文章尚未編寫完,可點 儲存草稿 防文章丟失,等內容都編寫完成,就可點 發佈 ,文章就會正式上線囉。

現在點選文章內容選單,會發現有文章出現了,太好了。

官網設計 :wordpress新增文章
官網設計 :wordpress新增文章

11. 自訂 WordPress 外掛

WordPress 有上萬多個外掛,可以幫助你擴充網站功能。

wordpress 外掛生態圈
wordpress 外掛生態圈

原因是 WordPress 是完全開源軟體,任一個軟體工程師,皆可在上面開發功能。

WordPress 外掛要如何安裝,請參考 新增外掛 會幫助你了解更多。

除此外, WordPress 有幾個常用外掛,使用起來很理想,請參考 最佳 WordPress 外掛推薦 ,或許會對你有幫助。


12. 小工具設定

通常一個網站設計,都會有側邊欄的存在,可以多提供訪客一些訊息。

不同的 WordPress 佈景主題、WordPress 外掛,可能會幫小工具增加額外功能。

你可以選擇適合的工具,放置你的網頁側邊欄,這是我選擇的功能。

小犬網站,側邊欄工具
小犬網站,側邊欄工具

當然你的選擇可能跟我不同,這是我安裝 JetPack 外掛,增加的額外工具。

關於如何修改網站側邊欄位,請參考 小工具修改 ,會對你有所幫助。


13. 建立聯絡表單

到了這邊,感覺還少了一個聯絡頁面,除了在頁面寫上聯絡資訊外,或許你需要一個聯絡表單,可以搜集訪客資料,並進一步聯繫。

WpForms 是最熱門的 WordPress 表單設計外掛,全球超過 300w 個網站使用,可幫助你完成多種表單設計。

如果有預算的考量,我建議使用 WpForms 的免費版本,它在 WordPress 後台就可以直接安裝,教學開始囉。

前往 外掛 > 安裝外掛,搜尋 WpForms 安裝和啟用它。

WordPress 聯絡表單外掛:WpForms教學
WordPress 聯絡表單外掛:WpForms教學

前往 WpForms > Add New 選擇表單類型,選擇 Simple Contact Form 簡易留言表單。

WordPress 聯絡表單外掛:新增一個簡單聯絡表單
WordPress 聯絡表單外掛:新增一個簡單聯絡表單

可以把左側你想要的區塊,拖曳至右側,點擊右側表單欄位,可以個別編輯。

完成後,記得 Save 儲存。

WordPress 聯絡表單外掛:編輯聯絡表單內容
WordPress 聯絡表單外掛:編輯聯絡表單內容

前往 頁面 > 新增頁面,新增聯絡我們頁面,並使用區塊編輯器,把 WpForms 放至其中。

wordpress教學 :使用區塊編輯器,添加 WpForms 功能
wordpress教學 :使用區塊編輯器,添加 WpForms 功能

選擇剛建立的 WpForms 表單,這是我的表單命名,你的可能跟我不一樣。

wordpress教學 :選擇一個 WpForms 表單
wordpress教學 :選擇一個 WpForms 表單

選擇完成,頁面就會看到表單,確認網頁製作OK,最後 發佈 送出。

官網設計 :wpforms 聯絡我們表單
wpforms 聯絡我們表單

頁面新增完成,一樣要記得把頁面放到選單裡,如果不太會做,請參考 頁面管理 會幫助你了解更多。

最後來看一下成果,前往「 官網設計 」的首頁,點選剛新增的聯絡頁面。

太好了,有聯絡訊息和聯絡表單的頁面完成了,可以和訪客互動了。

官網設計 :網站前台,聯絡表單設定成功
網站前台,聯絡表單設定成功

14. WordPress 學習資源

學習 WordPress 網站架設流程中,或許會遇到一些解決不了問題。

但沒關係,你可以在下方留言給我,我會盡力協助你解答。

當然,如果怕問題描述不清楚,可以加入 WordPress 教學時光屋 – 小犬網站 ,我同步也會在社團中幫忙。

小犬網站:wordpress教學社團
小犬網站:wordpress教學社團

希望這對你有所幫助,祝架站順利啦。

我是站長小犬,長期關注:WordPress 網站架設、WordPress 後台教學、WordPress 佈景主題、WordPress 外掛、網路行銷等 ..:)

2 COMMENTS

  1. 站長你好,你的教學文章對於身於中小企業的我來說非常棒
    已一個只學過古早年代的網頁設計者來說,是時候該動手更新古早版公司網頁了
    一直觀望著各種玲瑯滿目的網頁設計教學
    又怕真的花了錢卻學到不是自己所想要的內容
    你的教學網頁真的是太棒了

    想請教一個問題,是否有教學下面這種情況
    我已有買了網域 也有買主機空間 (公司古早網頁運作中 繳費過的租約都還很長)
    想大改版網站勢必要花一點時間設計與製作
    是否有方法可以讓我先在平時用的主機上設計製作後
    才用備份的外掛轉至外購的網站空間的方法?
    再次非常感謝你的大方教學

    • Hi 鄭小姐:

      謝謝你的鼓勵,我會繼續加油的:)

      至於你提的問題,如果想在貴司原來的主機上先安裝 WordPress,

      首先可先確認主機是否有 WordPress 一鍵安裝功能,這樣的方式是最簡單。

      如果沒有的話,就需自行手動安裝,可先至 WordPress.org 下載安裝包,

      然後修改 wp-config.php 檔案的網站名稱、帳號、密碼、資料庫等資訊,

      最後再上傳至主機跑安裝流程,

      因為目前網站教學還沒出,所以大概也只能先教學到這,

      希望有幫助到你唷:)

發表迴響