WordPress Blog 教學-輕鬆打造部落格網站的6個步驟

第一步:安裝WordPress

在開始之前可以先讀架站的前導知識文-如何自己架設網站?架站前一定要知道的三件事,再回頭來讀這篇文章,會對架站有更清楚的認識。如果已經看過,請跳過直接往下開始吧!

現在主機商幾乎都有提供WordPress的快速安裝,而不同主機商的安裝方式還是有所差異,需要依照各自主機商的方式來安裝。下面是以 cPanel 平台的安裝流程為例。

1.cPanel網頁,輸入使用者名稱和密碼登入

2.找到SOFTACULOUS APPS INSTALLER選單,並選擇WordPress

3.Install Now

4.選擇網域,安裝目錄和設定管理員的帳號密碼

(1) Choose Installation URL:
Choose Protocol使用預設值為https://, 表示有使用SSL,一般會直接使用。
Choose Domain預設會帶入申請的網域名稱,或是自行輸入域名。
In Directory是指定WordPress的安裝目錄,預設為wp,但網址會變成https://mamachips.tw/wp, 不想要多個wp子目錄,可將wp拿掉,保留空白即可

(2) Site Settings:輸入網站的Site Name和Site Description

(3) Admin Account:設定管理員帳號和密碼,以及管理者的mail。(重要:這裡一定要設定,後面登入網站後台時會用到)

(4) 其他設定的都是使用預設值,接著就按下Install(後面系統就會自動將WordPress安裝完成)

第二步:安裝主題Astra

安裝完WordPres,進入到網站的後台,比如https://自己的網域名稱/wp-admin,必須使用前一步所創建的帳號和密碼登入。以下是安裝Arsta主題的流程。

1.選擇外觀的佈景主題

2.點選安裝佈景主題

3. 輸入Arsta關鍵字

4.安裝 Arsta主題,安裝完成後立即啟用

第三步:使用Elementor編輯頁面

當網站主題安裝完成後,準備開始編輯頁面,比較WordPress的內建編輯器Gutenberg,以及WordPress外掛軟體Elementor,發現後者使用上有以下三個特色,頁面呈現上會比較有設計感,所以後面在製作頁面時,都使用這套外掛來編輯。不過文章編寫時,就建議使用Gutenberg較為簡單易用。

網頁的元素可拖拉到版面上
現成的小工具可以使用
現成版型可下載儲存,提供後續反覆使用

1.安裝Elementor

(1)首先登入自己的WordPress管理介面之後,左下角有個外掛的選項,點選安裝外掛

(2)搜尋外掛:輸入Elementor關鍵字,找到外掛並立即安裝

3.Elementor安裝完成後,可以看到左邊工具列中多了一個Elementor選項,右邊的是設定頁面

2.使用Elementor新增標題

(1)接著開始實際編輯,點選『頁面』,再『新增頁面』

(2)進入Wordpress原始編輯頁面,點選『使用Elementor編輯』

(3)點選『新增段』

(4)『選擇你的架構』,主要看實際想要呈現的版面長甚麼樣子

(5)點選架構後,會出現下面的藍色框框

(6)左邊工具欄中是基本的元素,可以點選標題用拖放的方式來配置版面

(7)將滑鼠按著標題不放,把游標移動到藍色框框裡再放開

(8)點一下藍框框中的”在這裡新增您的標題文本”,左邊工具欄就會切換到編輯標題,這裡可以調整尺寸和html標籤

(9)切換到『樣式』,則可以調整文本顏色,以及排版中可調整字型尺寸等

3.使用Elementor新增圖片

(1)點選圖片用拖放來配置版面

(2)拖放後會有一張大圖出現在右邊

(3)接著點『選取圖片』

(4)選『上傳檔案』,可直接拖放照片或是『選取檔案』上傳圖片

(5)檔案上傳後,選擇『插入媒體』

(6)可以在樣式中去調整圖片的寬度等大小

4.Elementor套用樣板

(1)新增版型

(2)點選區塊,並選擇分類,分類中有許多不同主題的區塊可以使用,比如About, 404等頁面,需要先加入Elementor會員,才能插入模板,再使用現成模板進行調整

(3)點選頁面,選擇喜歡的頁面並插入模板

(4)插入之後,就可以依照實際情況調整,調整完再發佈旁按下三角形圖示,將網頁儲存成版型

(5)輸入版型名稱,按儲存

(6)剛才的template就儲存在我的版型中,當下次準備要製作頁面時,可以回到第一步,新增版型後選擇我的版型,點選插入就可以套用此template

以上就是針對Elementor的操作,熟悉幾個基本操作之後,就開始實際製作頁面了。

第四步:WordPress選單製作

使用上一步的教學來製作頁面,一般常見的有關於我、作品集和聯絡我等頁面,製作完成後就可以開始把這些頁面放到對應的選單當中。

1.首先進入到WordPress控制台中,選擇左列工具列中的外觀,並點擊選單

2.在新增選單項目的『頁面』中,勾選第一個項目About,並新增至選單

3. 選單結構中,在導覽選單項目標籤中填入About 洋片,選單的第一個項目「About 洋片」就完成

4.接著設定第二個項目「Product 作品」,新增選單項目中的『自訂連結』,主要這個項目並不能點選,所以網址填寫https://#, 連結文字填寫Product 作品,這是一個父項目,可以帶出子項目的一個源頭

5.再來是新增「Blog 文章」,一樣是使用選單項目的『自訂連結』,網址填寫網域名稱, 連結文字為Blog 文章,主要可以連結到網站的首頁

6.最後一個項目是「Media 報導」,在新增選單項目的『頁面』中,勾選媒體專訪,並點選新增至選單網域名稱

7.完成四大類選單的設定,就可以依照上面相同方式,將子項目新增進來,一開始新增進來會在第一階層,需要利用滑鼠點選項目,往右移動就會變成第二階層,如果需要第三階層,就再往右移動,最後如下呈現方式

8.可勾選下方設定,Primary menu,再點儲存選單

8.選單最終會出現在網站最上方,以下為實際選單的呈現結果

第五步:Blog 文章分類

當我們開始在部落格寫些文章之後,如果能將文章做分類,讓使用者在選單中,針對不同的分類去搜尋自己有興趣的文章。

1.點選文章中的分類,並新增一個分類

2.點選全部文章,挑選一篇文章作編輯

3. 內容中有個分類,點選適合的類別

4.點選外觀中的選單,分類=>勾選手作教學=>新增至選單

5.把新增的手作教學分類,拖曳到Blog文章的下方,並往右移成為第二階層的子項目

6.再按右下方的儲存選單

7.回到網站上方的選單,就可以看到下拉選單中有新增的分類

8.可勾選下方設定,Primary menu,再點儲存選單

第六步:製作站內導航

參考一些知名網站大都在網站底部做一個站內導航的功能,也就是導覽選單,其實和Header上的選單是相同的東西,只是將所有頁面連結完整呈現在最下方,讓使用者在切換不同頁面時,可以更加直觀和快速。

1.點選外觀=>小工具

2.在可用的小工具中,選擇導覽選單,勾選「Footer Widget Area 1」,並點選新增小工具。由於要呈現的項目很多,所以重複運用相同方式,分別勾選「Footer Widget Area 2」, 「Footer Widget Area 3」和 「Footer Widget Area 4」再新增小工具

3.由於總共新增了四個小工具的區塊,所以必須有四個對應的選單,再到外觀=>選單

4.建立選單

5.填入選單名稱

6.在選單中加入想要顯示的頁面

7.四個選單都設定完畢,再回到外觀=>小工具,Footer Widget Area 1中選取選單,選擇了Other並Save。而剛才新增的Footer Widget Area 2-4的小工具,也運用相同方法分別選取對應的選單

8.最後站內導航會出現在網頁最下方

這篇 WordPress Blog 教學,應該可以讓妳對架站有了基礎的認識,如果妳還想要架設出高轉換率的網站,從「5步驟打造高轉換率網站」裡,將會得到:

• 我打造出高轉換率網站的5個步驟
• 利用SEO優化帶來穩定流量和曝光
• 如何讓訪客來到網站不再看完就走
• 即使在休息時間，網站還能不斷替我收集到更多潛在客戶

會讓妳發現其實架站真的很簡單！歡迎點這裡免費下載。