網站設計 :如何架設形象網站(入門篇)

0
362
網站設計:如何架設形象網站
網站設計:如何架設形象網站

想經營個人品牌, 或是 網站設計 好看的形象網站嗎?我知道好的架設網站教學,並不好找。

在這篇文章我會教你,如何用便宜的預算,完成一個形象 網站設計 (客製化+響應式網頁+前後台)

相比找網頁設計公司,動則好幾萬的花費,和來回的時間溝通成本,便宜多了 ..

你所要做的,就只是跟著我的教學,申請網域+虛擬主機 > 使用 WordPress 進階主題 > 學習使用主題,就這麼簡單!

但由於篇幅關係,我會把部分內容放在「 進階篇 」,本篇學完後,你可以前往學習,讓自己學習更完整。

或許,有些人會選擇免費版的網路空間,但你可能要有心理準備,會容易發生主機不穩、網站速度變慢、公司倒掉等 .. 問題,因為一分錢一分貨,你說是吧?

如果你是打算長期經營網路事業,還是跟著我的教學,走正規的方式吧。

關於架設網站課程(入門篇),我精心製作了 9 個章節,大綱如下:

  1. 虛擬主機推薦
  2. 網域+主機申請
  3. WordPress 安裝
  4. SiteGround 設定
  5. WordPress 基本設定
  6. Avada 主題介紹
  7. 安裝 Avada 主題
  8. 選擇模板
  9. 開始起飛

心動了嗎?開始我們的網頁製作流程吧:)


1. 虛擬主機推薦

虛擬主機推薦

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

  • 網域申請
  • 虛擬主機申請
  • 網頁設計

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

過去網域和虛擬主機,會需要分開申請,現在簡單多了,在同一地方就可以搞定一切,且方便未來管理 .. 前提是,我們必須找一家品質好的主機公司,對吧?

SiteGround 虛擬主機

SiteGround 是高度專業的虛擬主機公司,同時也有經營網域申請服務,在全球有多個數據中心(亞洲有新加坡據點),連線起來一樣快,到目前已經管理超過 800,000 個網域。

這家主機公司,我自己親身使用多年且十分滿意,它們所有的主機,都對 WordPress 進行速度+穩定度的優化。

這也是為什麼能讓 WordPress.org 官方,列為推薦的主機之一,你可以享有 ..

  • WordPress一鍵安裝
  • WordPress 版本+外掛自動升級
  • 免費的 SSL
  • WordPress 搬家
  • SuperCacher 速度優化軟體
  • 每日自動備份
  • 24/7 的客服服務、即時聊天、快速表單回覆 .. 等。

當然它的優點不僅於此,由於篇幅關係,這裡只列舉部分。

專家們對 SiteGround 評論?

SiteGround 是 WordPress 社區中最受歡迎和評分最高的託管服務提供商之一。

他們提供獨特的主機解決方案,讓主機穩定度、主機速度、主機安全性等 ..,都能達到最高的審核標準,且有接近 100% 的正常運行時間。

當然少不了的就是他們一流的客戶服務,由於 SiteGround 的使用者來自世界各地,至少可以說,他們的客戶支持很棒。

如:24/7 的客服服務、即時聊天、快速表單回覆 .. 等。

在國外虛擬主機的品質上,SiteGround 無庸置疑是推薦排行前幾名的,所以受到許多國內外的網站主喜愛。

若是打算經營自己的網站事業, SiteGround 會是你很好的選擇!

SiteGround 正常運行時間&回應時間(毫秒)

少不了的是,它不論在國內外,也有十分優良的使用評價,如下圖:

SiteGround 虛擬主機評價
SiteGround 虛擬主機評價

SiteGround 費用了解

至於費用部分,虛擬主機的原訂價格為$ 11.95 美元 /月,值得開心的是,SiteGround 官方已經同意為我們網站的讀者,提供任一方案 70% Off 的虛擬主機折扣

就等於虛擬主機只需 $3.95 美元 /月(一年約 1440 台幣),即可開始享用 SiteGround 主機。

若網址也同樣在 SiteGround 申請,域名的價格通常為$ 15.95 美元 /年(一年約 480 台幣)。

等於網址+主機費用相加起來,可以用不到 2000 台幣,開始你的網路事業!

下一章節,我會帶領大家網域申請+虛擬主機租用,教學很容易上手的,我們開始吧:)


2. 網域+主機申請

這章節,我把申請流程簡化成 3 步驟,幫助你網址+虛擬主機申請,打造自己的網頁製作。

Step 1:挑選主機方案

首先前往 SiteGround ,挑選適合自己的主機方案。

SiteGround 虛擬主機方案

如果你是初學者,推薦使用 StartUp 入門方案 創建第一個 WordPress 網站,是一個不錯的選擇,費用較低方便入門。

若你是有些經驗的使用者,想擁有更好的 SiteGround 服務,如:更好的主機規格、SuperCacher 外掛(提升網站速度)等 .. ,你可以選擇 GrowUp 中階方案

Step 2:申請你的專屬網址

填入想申請的網址( Register a new Domain ),並前往下一步,若是原來就有網址,就選( I already have a domain ),就不另做申請。

siteground:網址申請
SiteGround:網址申請

Step3:填入申請資料

填寫申請帳戶資料(英文),客戶資料,付款方式等 .. ,最後送出付款。

  • 帳戶資訊,請務必記好,是要登入 SiteGround 的帳密唷!
  • 地址 / 郵遞區號,都要用國際方式填寫,這邊上個「 中英地址翻譯 」工具,協助大家填寫:)
siteground:資料填寫
SiteGround:資料填寫
SiteGround:網址+網路空間申請成功
SiteGround:網址+網路空間申請成功

申請完成後,可能需要留意一下信箱,系統可能會寄送確認信 or 申請完成的主機訊息,若都沒收到也無所謂,不會造成影響。

付款成功後,你的網址+虛擬主機就正式申請完成囉!

這章節,是協助你打好網站事業的基底,有點像是基礎設施,下一章節就要來學習如何 WordPress 安裝,也就是網頁製作教學的部分囉!


3. WordPress 安裝

當網域+虛擬主機申請完畢後,下一步就是開始安裝 WordPress。

若還沒有網址&虛擬主機,請點擊下面按鈕,可照本文教學,完成申請。

我們使用 SiteGround 主機的好處,就是它對 WordPress 有著良好的支持,比如:一鍵安裝 WordPress,我來教大夥兒如何使用。

首次登入 SiteGround 後台(輸入剛申請的帳號&密碼,帳號是你的信箱),會看到 Set Up Site,點擊後前往。

SiteGround:點擊網站設計
SiteGround:點擊網站設計

照著下面流程選取,主要分為 Start New WebSite(開始新網站)和 Migrate Website(轉移現有網站)。

SiteGround:網址+虛擬主機+Wordpress安裝完成
SiteGround:網址+虛擬主機+Wordpress安裝完成

小提醒:

  1. 這裡設置的帳號密碼,是未來會用到的 WordPress 後台帳密唷(之後可改密碼,別擔心)
  2. 若有網站要搬家至 SiteGround,他也有提供免費搬家服務。你可以使用 Migrator WebSite 搬家工具(如上圖,任一方案都有),或直接請 SiteGround 公司的專人協助你搬家(需 GrowBig 方案以上)。

點擊完成後,會到 Add Extras(額外服務)頁面,這邊都先不選取,我們只把錢花在刀口上。

送出後,SiteGround 就會開始運行 WordPress 安裝啦,完成後會出現安裝成功的畫面。

SiteGround:DNS指向+網站管理工具
SiteGround:DNS指向+網站管理工具

若網址非在 SiteGround 申請,請看這:

請把上圖的左邊 DNS  兩行複製下來(Site Tools 後台也找得到)。

然後到自己的網域商,進行 DNS 設定(把剛複製的兩行貼上去),然後等待半天 ~ 1天作業時間(網址指向主機需要時間)。

就可以順利把你的網址和 SiteGround 主機,串接起來了!

我們先不前往 Site Tools,有關 Site Tools(網站後台管理工具),稍後會跟大夥兒介紹,這是 SiteGround 開發來取代舊版 Cpanel 介面的超好用工具。

接著前往「 網站前台 」,來看一下努力的成果,太棒了一個簡易版的 WordPress 部落格主題,已經完成了:)

兩個重要的路徑位置(要記得唷)

  • wordpress 網站前台: yourdomain.com
  • wordpress 網站後台: yourdomain.com/wp-admin
SiteGround:搞定的 wordpress 網站
SiteGround:搞定的 wordpress 網站

若想學習更多「 WordPress 前後台 」如何使用,我在 WordPress 教學 這篇有良好的範例說明。

若有遇到問題,歡迎加入 FB 社團, WordPress教學時光屋 – 小犬網站,主要提供新手快速解決 WordPress 網站架設的問題,和減少摸索的時間:)

下一章節,我會帶著大家進行 SiteGround 教學設定,因為它們有開發很棒的工具,供我們使用,來看看如何做吧?


4. SiteGround 設定

SiteGround 設定

經過一連串的努力,不知道有沒有順利完成 架設網站教學 呢?

若還沒有網址&虛擬主機,請點擊下面按鈕,可照本文教學,完成申請。

這一章節,我將用簡單 3 步驟,帶大夥兒快速瀏覽 SiteGround 所開發的 Site Tools 工具,對你的網頁製作會有幫助的,開始囉!

Site Tools 是什麼?

是 SiteGround 自己開發,用來取代舊版 Cpanel 的功能介面 ,讓整個後台「 網頁設計 」質感大幅提升,而且提供的功能,也比之前多很多(上圖分類選單,都還能再展開)!

例如:檔案管理員、FTP 帳戶建立、網站備份、SSL 安全憑證、CDN 內容傳遞、Caching 伺服器快取等 ..,都在 Site Tools 操作。

Step1:如何進入 Site Tools?

首先到 SiteGround 登入自己的帳號,登入之後點 Websites > Site Tools,直接進入工具裡面。

Site Tools 進入位置:架設網站軟體
Site Tools 進入位置:架設網站軟體

然後就會看到,超多功能列表 .. 出現了,因為長度限制,還沒全部截圖完成。

SiteGround 虛擬主機租用,多功能面板
SiteGround 虛擬主機租用,多功能面板

Step2:SSL Manager 免費憑證

若是網址+虛擬主機申請,都有照教學安裝(都在 SiteGround 申請 ),這裡的 SSL 憑證,會自動安裝好。若沒有出現,可以照下面流程設定。

若網址不在 SiteGround 申請,就需手動安裝 SSL,這邊跟大夥兒教學一下,如下:

前往 Security 的 SSL Manager > 選擇網址 > 選擇 SSL 憑證種類(Let’s Encrypt)> 點擊 GET > 申請完成

SSL 憑證申請
SSL 憑證申請

Step3:HTTPS Enforce 強制安全傳輸

當 SSL 憑證申請完成,接下來就要讓網站,都使用 HTTPS 加密安全方式,進行資料傳輸啦!

https-enforce 開啟
https-enforce 開啟

其實還有更多 SiteGround 的 Site Tools 工具,還沒辦法一次說完 .. 之後會再寫一篇文章,大夥兒可以先自行玩一下:)

這章節學習到了如何調整 SiteGround 後台功能,下一章節我們就正式進入 WordPress 後台,開始你的個人網站之旅!


5. WordPress 基本設定

WordPress 基本設定

WordPress 網站架設完成後,我們直接登入後台,開始我們的範例教學 🙂 🙂

兩個重要的路徑位置(要記得唷):

  • wordpress 前台: 你的網址.com
  • wordpress 後台: 你的網址.com/wp-admin

首先,我們先到 設定 > 一般 ,更改「 網站標題、網站說明、網站語言 」。

預設 WordPress 語言是英文,先把它調成「 繁體中文 」,方便我們後續操作!

更換標題+語言切換
更換標題+語言切換

設定完成後,點擊頁面下方的「 儲存設定 」就順利更改,網站標題+描述+語言調整囉:)

若想學習更多「 WordPress 前後台 」如何使用,我在 WordPress 教學 這篇有良好的範例說明。

額外小教學

WordPress 有關文章+頁面標題,在 Google 上呈現的方式,如下:

WordPress教學 網站,你不能錯過的課程(文章標題) – 小犬程式(網站標題)

建議「 網站標題 」字數不要太長,不然會影響到未來文章標題,可取名的長度。

因為太長的字,在 Google 搜尋結果上,都會以省略號符號表示唷:)

設定完成後,下一章節我們將開始 Avada 的教學之旅,它是 WordPress 的超好用佈景主題,期待一下吧。


6. Avada 主題介紹

Avada 主題介紹

Avada 是一款 WordPress 的佈景主題,截至目前已經狂銷 550,000 套以上,在 WordPress 主題上是個絕無僅有的數字 ..

你可以用它架設個人或公司網站、部落格、媒體網站、購物網站等範例 ..

原因是,它有超棒的客製化網頁設計功能,我列出幾個優點:

  • 超多展示網站,可一鍵安裝
  • 有拖拉編輯器,可客製化網頁設計
  • 超多功能元件,可完成需求
  • 與 WordPress 多數熱門外掛相容
  • 很棒的客服體驗

在之前接案的過程 .. 發現,大多數客戶不太曉得,自己想要怎樣的設計,或是 .. 找到很雷的設計師。

與其這樣,不如直接使用 Avada 上的展示網站(超過 60+ 個展示推薦,下面只列舉部分),在做部分修改,也可達到客製化設計。

Avada 展示網站
Avada 展示網站

它的使用元件,也真的讓人歎為觀止,重點是佈景主題速度,一點也沒被影響。

Avada 超客製化面板
Avada 超客製化面板
Avada 使用元件
Avada 使用元件

所見即所得的線上編輯器,也是新版加上來的特色,整個也很實用,可線上切換電腦、平板、手機方便檢視,如下圖:

Avada 線上編輯器
Avada 線上編輯器

少不了的還是放上它的熱銷數字 .. ,有這麼多人購買,代表它的好口碑,和使用分享教學也比較豐富:)

Avada 超熱門銷售
Avada 超熱門銷售

驚人的銷售數字下,是有超多可客製化元件 & 應用模板 & 佈景主題速度等 .. 特色,所以熱銷是有原因的。

下一章節,我會帶著大夥兒,開始安裝 Avada 主題,Let’s GO!


7. 安裝 Avada 主題

安裝 Avada 主題

首先,前往 Avada 佈景主題,點擊「 Buy Now 」,進行購買流程,也有線上預覽的功能,可以先觀看。

Avada 佈景主題
Avada 佈景主題

購買完成後,前往 downloads 頁面,會發現剛買的 Avada 主題,然後點擊 「 Download 」按鈕,下載「 WordPress 主題檔案 」,如下圖:

下載主題文件&認證文件
下載主題文件&認證文件

回到 WordPress 後台,到 外觀 > 佈景主題 > 安裝佈景主題 > 上傳佈景主題,安裝剛下載的 Avada 主題檔案(副檔名是zip),安裝成功後就直接「 啟用 」。

啟用成功後,前往 Avada > Registration,往下滑點擊「 Generate A Personal Token(生成個人憑證)」,如下圖:

Avada 註冊面板
Avada 註冊面板

接著「 命名憑證 」,然後照下圖「 勾選允許權限 」,完成後就「 確認送出 」,開始生成憑證號碼。

創造憑證頁面
創造憑證頁面

成功生成後,記得複製憑證密碼,打勾確認會妥善保管密碼,最後點擊確認。

複製憑證密碼
複製憑證密碼

回到 WordPress教學 後台,把剛複製的憑證密碼,貼至憑證註冊框,點擊 Submit,完成後會出現打勾的符號,代表憑證已經註冊成功!

Avada 安裝流程,到這裡也差不多要完成了,只剩最後佈景主題,需安裝搭配的外掛,所以前往 Avada > Plugins,整個流程如下:

啟動憑證密碼&前往 Avada 外掛安裝
啟動憑證密碼&前往 Avada 外掛安裝

開始安裝 Avada 必要外掛,分別是「 Fusion Core 」和「 Fusion Builder 」,是用來做頁面編輯的工具。

安裝 Avada 必要外掛
安裝 Avada 必要外掛

最後,我們去前台網站看一下,是否 Avada 已安裝成功,答案是 .. BingGo,搞定!

一個 Avada 的「 經典版 」模板主題,呈現在我們面前:)

Avada 經典版出現~
Avada 經典版出現~

這章節你已經學會了,如何安裝+啟用 Avada 佈景主題,但 .. 美中不足的是,可否把網頁設計的更美?

下一章節,我會教你如何使用 Avada 的高質感模板,往下看囉:)


8. 選擇模板

Avada 有內置許多高質感的模板(目前有超過 60+),可以直接引入使用,節省要重新設計的時間,我來教大家如何操作。

首先前往 Avada > Demos,會發現有非常多模板,這邊先跟著我用「 Food 模板 」學習(之後都可以做更換),然後點「 import 」安裝。

安裝喜歡的模板~
安裝喜歡的模板~

接著會跳出小視窗,先安裝模板相關外掛( Food 模板是表單外掛&輪播外掛,必裝),再點選 All,匯入模板資料文件,最後點「 import 」匯入。

安裝模板相關外掛&資料
安裝模板相關外掛&資料

等待模板安裝完,會發現 .. 一個很美的食物主題出現了,話說 .. 還滿愛這種風格的:)

Avada 的 Food 模板~
Avada 的 Food 模板~

當模板套用後,若是想要改 網站設計 ,要如何操作呢?

其實,Avada 有一個「 主題選項 」,讓你調整 Logo、選單、頁面、文章列表、版面等 .. ,等於是可以客製化自己的網站,如下:

Avada 超多調整功能~
Avada 超多調整功能~

除了一般文章編輯功能,也提供了可線上編輯的功能,超棒的所見即所得:)

Avada 線上編輯器
Avada 線上編輯器

有了所見即所得編輯器,在網頁設計的速度上,又變的更快了許多!

Avada 除了能夠讓你客製化頁面+版面外,也提供許多元件,讓你在 網站設計 時,能夠直接套用,即可立馬使用:)


9. 開始起飛

網站設計,開始囉

經過一連串的努力,相信你跟著我的教學,也從 0 到 1 完成了 網站設計 流程,先給自己一個熱烈的掌聲!!

完成了「 入門篇 」的學習,若想學習使用 Avada 客製化網站(如:更換頁面&元件使用等 ..),你可以看「 進階篇 」學習(我的下一篇文章,請期待一下)。

若都學習完成,相信你對 網站設計 ,也會變得十分上手了:)

最後,回想起過去在自己摸索的路上,曾經遇到了許多 WordPress 網站架設的問題 .. 卻不知道問誰。

若有遇到問題,歡迎加入 FB 社團, WordPress教學時光屋 – 小犬網站,主要提供新手快速解決 WordPress 網站架設的問題,和減少摸索的時間:)

若有任何的 WordPress 網站設計疑問,除了可以到社團詢問外,也可以直接在文章下面留言給我,我會盡力協助的。

大夥兒,我們下篇文章見:)

我是站長小犬,長期關注 WordPress 教學的大小事:)

發表迴響