wordpress design

如何設計網站及部落格(WordPress 教學)架設網站懶人包

擁有一個自己專屬的網站已經不是一個遙不可及的夢想。不論你是為了興趣,工作,賺點收入或經營一間公司,而設計一個網站或部落格,透過現在的 WordPress 免費設計網站平台,只要跟隨以下簡單步驟,45分鐘就能建立一個網站。(架設網站懶人包 WordPress 教學)

什麼是 WordPress?

WordPress 是一間公司提供兩個免費平台 WordPress.com 及 WordPress.org 給人們去建立自己的網誌或網站。很多人會混淆它們的分別,容我簡單解釋它們的不同之處:

WordPress.com vs WordPress.org

WordPress.com 提供的免費方案就像Blogger,Pixnet,Weebly及痞客邦部落格一樣,讓你透過它們的平台發表你的文章。好處是不需花時間設計網站及免費託管。壞處是網誌的設計不能自由發揮,功能有限,需付費升級方案,才能自訂網誌格式。儲存空間少,只有3GB,不能擁有自己的網站名稱,名稱後面要加上 wordpress.com (例如 www.wingple.wordpress.com) 及不能放置第三方廣告 (例如 Google Ads) 賺取收入,若要賺取廣告費,需付費升級為進階版或商務版,而且利潤會分溥給他們。

按此了解 WordPress.com 方案收費

WordPress.org 是目前最流行的網站設計平台,全球超過33% 以上網站都是使用 WordPress 建立。它讓你自由設計你的網站格式,可以擁有自己的網站名稱 (例如 www.wingple.org),能夠放置第三方廣告賺取收入,而且利潤不會分溥。

因此,如果你對網站的設計沒有什麼要求,沒有打算經營網站賺錢,只想借用一個免費平台分享文章,WordPress.com 適合你。相反,如果你想擁有一個屬於自己的網站,自由地設計,經營網站賺錢,WordPress.org 適合你。以下是透過 WordPress.org 建立自己專屬網站的簡單 7 個步驟。

步驟一 命名網域 (Domain Name)

建立網站前,先要為你的網站命名,網站的名稱 (網域) 也是你的網址。改名的技巧非常重要,記住,一旦你的網名註冊了就不能更改,所以一定要好好想一想。以下是一些建議:

  • 選用認受性高的 .com,其次是 .org 或 .net
  • 網名要短,簡單,易記及方便搜尋,不要太長
  • 網名要獨特,獨出及引人注目
  • 全英文,避免數字,符號及雙重字母 (例如 wingpleeattoast.com)

步驟二 註冊網名及租用虛擬主機 (Web Hosting)

準備好網名後,就需要註冊及租用虛擬主機來寄存你的網站的資料。簡單來說,虛擬主機就是你的網站居住的地方。本人推薦選用 Bluehost 虛擬主機,它是 WordPress 推薦的其中一個虛擬主機,超過2百萬個網站使用,提供一站式服務,包括免費註冊網名,加密網域(SSL),及24小時支援服務。費用也相較於其他公司平宜,月費$7.99美金。按下面的  Coupon 優惠登記,月費只需$3.95美金,非常平宜。

註冊網名及租用虛擬主機步驟:

點選「Get Started」⇓ 

點選「Basic」或 適合你的計劃 ⇓ 

輸入網名,然後點選「Next」⇓ 

確定網名可用後,輸入個人資料 ⇓ 

選擇三年費用 及 推薦選取 Domain Privacy Protection,其他不用選擇 ⇓ 

輸入付款資料,同意條款,然後點選「 submit 」。之後登入你的電子郵箱 進行驗證 及 設定登入密碼 ⇓ 

登入後,在 Pick a theme 畫面點選「 skip this step 」進入 Bluehost,然後點選 Login to WordPress 進入 WordPress 平台。⇓

步驟三 更改 WordPress 設定

進入 WordPress 的平台後,設計網站前,請先更改以下一些設定:

更改 WordPress 網站介面語言:

設定 > 一般 > 網站介面語言 > 選擇「繁體中文」或 適合你的語言

Settings > General > Site Language >「繁體中文」

更改永久連結設定:

選用「文章名稱」能使你的網址更短,更容易搜尋

設定 > 永久連結 > 一般設定 > 文章名稱

Setting > Permalinks > Common Settings > Post name

步驟四 選用佈景主題 (Theme)

佈景主題是 WordPress 的外觀,提供自訂工具編輯你的網站,必須要選用的。WordPress 提供過千個由不同的開發者設計的免費或付費主題下載。本人是選用 OceanWP,除了免費,功能比較多,網速也不錯。

外觀 > 佈景主題 > 安裝佈景主題 > 搜尋佈景主題 > 輸入「OceanWP」> 安裝 > 啟用

Appearance > Themes > Add New Theme > Search「OceanWP」> Install > Active

步驟五 安裝外掛 (Plugins)

外掛程式是用來增加網站的特定功能。WordPress 現有超過5萬個外掛程式,支援及增強你網站所需的功能,以下是初期必須安裝的9個外掛程式:

按此文章取得更多 網站設計外掛插件推薦及優惠劵

1. Elementor Page Builder

Elementor Page Builder 是網站編輯外掛程式,用來設計網頁的頁面構建器。它的拖放式編輯器讓你輕鬆地將每個元素放置在頁面的任何地方。

外掛 > 安裝外掛 > 搜尋「Elementor Page Builder」> 立即安裝 > 啟用

Plugins > Add New > Search 「Elementor Page Builder」> Install Now > Active

2. Ocean Extra

Ocean Extra 是 OceanWP 額外功能外掛程式。

外掛 > 安裝外掛 > 搜尋「Ocean Ectra」> 立即安裝 > 啟用

3. All-in-One WP Migration

All-in-One WP Migration 是儲存網站內容及轉移網站工具外掛程式,輕鬆點擊即可完整匯入或匯出你的網站內容。

外掛 > 安裝外掛 > 搜尋「All-in-One WP Migration」> 立即安裝 > 啟用

啟用後,可以隨時隨地匯出你的網站備份。

4. Really Simple SSL

Really Simple SSL 是啟動網站 SSL/HTTPS 傳輸協議的外掛程式,可確保資料在網站傳輸時,保有完整性和機密性,保持無法被讀取的狀態,防止駭客讀取資料。

外掛 > 安裝外掛 > 搜尋「Really Simple SSL」> 立即安裝 > 啟用

啟用後,請跟隨以下設定:

1. 設定 > SSL > 點選「繼續啟用SSL」

2. 設定 > SSL > 組態 > 確定 「已偵測到的設定」已顯示綠色打勾

3. 設定 > SSL > 設定 > 保持預設設定 – 完成

5. ShortPixel Image Optimizer

ShortPixel Image Optimizer 是調整,優化及壓縮所有圖像的外掛程式,從而減低儲存量及提升網站速度。

外掛 > 安裝外掛 > 搜尋「ShortPixel」> 立即安裝 > 啟用 > 按以下 Coupon 登入取 免費 API Key 。亦可以超底價優惠升級為永久會員,每月享用10000張以上圖片優化。 

6. Wordfence Security

Wordfence Security 是安全性外掛程式,用來防護,防毒及防駭。

外掛 > 安裝外掛 > 搜尋「Wordfence Security」> 立即安裝 > 啟用

啟用後,輸入電郵地址 > 點選 CONTINUE > 點選 No Thanks – 完成

7. WP Fastest Cache

WP Fastest Cache 是快取外掛程式,透過清理快取,壓縮 CSS,JS,HTML,及瀏覽器緩存,來平衡流量,提升網站速度。

外掛 > 安裝外掛 > 搜尋「WP Fastest Cache」> 立即安裝 > 啟用

啟用後,請跟隨以下圖示設定。每一次修改網頁後,請按「Delete Cache and Minified CSS/JS」

8. WPS Hide Login

WPS Hide Login 是更改登入網址外掛程式,讓你能夠隨時隨地更改登入網址,防止駭客登入網站入侵。

外掛 > 安裝外掛 > 搜尋「WPS Hide Login」> 立即安裝 > 啟用

啟用後,可更改你的登入網址名稱「admin」為你喜歡的名稱,防止駭客盜用「admin」名稱登入。

9. Yoast SEO

Yoast SEO 是搜尋引擎優化外掛程式,用來分析及提升網頁的關鍵字排名,提升網站曝光率。

外掛 > 安裝外掛 > 搜尋「Yoast SEO」> 立即安裝 > 啟用

啟用後,請跟隨以下圖示設定 或 按照你的喜好設定:

1. SEO > General > 點選「First time SEO configuration」進行設定

2. SEO > General > Webmaster Tools > 點選「Get your Google verification code in Google Search Console」> 登入 Gmail 進入 Google Seacrch Console

3. 點選「HTML tag」並複製 the meta tag,然後在 Google verification code 貼上 the meta tag,按「Save Changes」及返回 Google Search Console 按「VERIFY」

4. SEO > Search Appearance > Content Types 及 Taxonomies 進行設定

5. SEO > Seach Console > Settings > 點選「Get Google Authorization Code」> 複製代碼並貼上

6. SEO > Tools > 點選「File editor」> 點選「Create robots.txt file」> 點選「save changes to robot.stxt」

7. 登入 Google Search Console > sitemap > 在新增 Sitemap 填寫 sitemap.xml,然後按「提交」

經營網站賺錢

有沒有打算經營網站賺錢,賺一點收入或成為全職打手。以下是最流行的4個方法賺取收入:

  1. 贊助內容 (Sponsorship) – 為廠商寫文章介紹產品來賺取收入
  2. 聯盟行銷 (Affiliate Marketing) – 為廠商寫文章推銷產品,如果推銷成功,賺取佣金。
  3. 電子商務 (E-commerce) – 設立網店,銷售產品來賺取收入
  4. 廣告收入 (Advertisement) – 放置 Google AdSense 廣告來賺取收入

步驟六 放置廣告賺錢 (Google AdSense)

1. 按此申請 Google AdSense 帳號

2. 按「立即申請」,然輸入 個人資料 及 收款資料

3. 複製 AdSense code

4. 在 WordPress 安裝「Insert Headers and Footers」外掛程式

5. 在「Insert Headers and Footers」外掛程式 貼上 AdSense code,並儲存

 6. 返回 Google AdSense 打勾「已貼上」並按「完成」。之後等待 Google 審查,他們會根據「廣告政策」來審核,通常需要 1 – 2 個星期,甚至更多時間,在乎你的網站內容而定。

7. 審查獲得通過後,會收到電郵通知。之後登入 Google AdSense ,點選「廣告單元」及「新增廣告單元」。

8. 選擇你喜歡的類型廣告

9. 填寫你的廣告單元名稱,選擇廣告大小及類型

10. 選擇廣告樣式及沒有刊登時做法,並按「儲存並取得程式碼」

11. 複製 AdSense code

12. 在 WordPress > 外觀 > 小工具 > 將「自訂HTML」拖放到資訊欄,並貼上 AdSense code 

或使用「Ad Inserter」外掛程式,在任何頁面貼上 AdSense code 放置廣告。在一個頁面,Google 最多容許放置三個廣告。

13. 貼上後,需要等候一些時間,讓 Google 配對廣告才顯示

步驟七 設計頁面及編寫文章

網頁內容分為兩部分: 頁面 及 文章

網頁基本版面:

網頁基本元素:

  1. 選單 (Menu)
  2. 網站 Logo
  3. 廣告 (Ads)
  4. 小工具 (Sidebar)
  5. 內容 (Content)

網頁基本頁面:

  1. 首頁 (Home)
  2. 文章 (Blog)
  3. 關於我們 (About)
  4. 聯絡我們 (Contact)

設計網頁頁面,使用 OceanWP (Theme) 及 Elementor (Builder)  提供的免費或付費模板 或 自行設計

新增頁面 (Page):

頁面 > 新增頁面 > 填寫頁面標題 > 使用 OceanWP 設定版面 > 使用 Elementor 加入元素設計頁面

自訂網頁項目 (Customize):

外觀 > 自訂 > 使用 OceanWP 自訂項目,例如 Logo,顏色,字體,大小,特色,小工具。

新增文章 (Post):

文章 > 新增文章 > 填寫文章標題 (title) > 撰寫內容摘要 (excerpt) > 上傳精選圖片 (featured image) > 新增分類 (category) > 新增標籤 (tag) > 設定 Yoast SEO > 使用 OceanWP 編寫文章 或 使用 Elementor 編寫文章,加入元素

總結:

只要一步一步跟隨以上步驟,你已經很順利架設了網站。新手一開始可能需要較多時間理解及設計,但很快你就會熟練。其實設計網站真的非常好玩及平宜,也可以賺一點錢,將來你還可以全職經營網店或部落格賺錢,成為網絡達人。

架設了網站後,現在你需要開始寫文章及設計你的網頁。往後我會有更多網站教學文章,包括:如何增加訪客流量,提升搜尋引擎曝光率,經營網站賺錢,編寫文章技巧,各式各樣外掛程式教學。記住追蹤我們的 Facebook 及 Instagram 頻道,一起成為網頁設計專家。

Scroll to Top