如何架設 Blog?部落格建立+設計教學(Soledad 主題)

如何架設 Blog?WordPress 網站建置+部落格設計(Soledad 主題)

這是一篇完整的「 如何架設 Blog 」教學。

到了自媒體時代,也許你也想有一個 Blog 網站,能夠記錄心情、分享學習經驗、分享技術、展示作品等 ..,讓更多人能夠認識你。

比較過多家 Blog 平台,我最終使用 WordPress 網頁製作平台,完成了 Blog 架設和寫了多篇網誌,而且成效非常的理想。

這是一個好的開始,因為你將會學到,如何架設獨立的個人網站,它不依附於任何公司(代表你能永久保存網站資料),這是很好的開始。

★☆ — 重要資訊 — ☆★

犬哥網站與 Bluehost 主機有長期合作關係,點擊網站上的 Bluehost 連結 前往官網(包含點擊此連結),最高可享有 3 折的讀者折扣優惠,請一定要把握唷!

此外,我們也會得到些許收益,這可以幫助我們繼續創作更多優質內容,也謝謝你對我們的支持:)

這篇文章非常完整,我會帶你從 0 到 1 打造自己的部落格(使用 Soledad 主題),章節如下。

如何架設 Blog ?完整影片教學(手把手架設個人、公司部落格)

如何架設 Blog ?部落格建立+設計教學(Soledad 主題)

1. 如何自架網站?

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

網站能正常運作,就需有「 個人網域 」+「 虛擬主機 」,這是基本配備。

這也是每個站長都需負擔的小投資,沒有例外。

差別是,跟著我的架站教學,你可用最少的預算,建置你的網站:)

網域如何取名呢?

網域是什麼?「 網域 」是網站組成的第一步,就像家的門牌一樣,讓人可以順利找到你的網站。

  • 簡單好記:越簡單的網域名稱越方便使用者查詢和記憶。例:蘋果 – https://www.apple.com/
  • 品牌名稱:網域名稱以品牌為名,打算發展品牌的公司,可用這個方式。例:愛迪達 – https://www.adidas.com/
  • 與服務 or 產品有關:與服務或產品有關聯。例:博客來 – https://www.books.com.tw/
  • 去除 www:目前大部分新網址都不太會在前面加上 www,這是比較舊式的用法。
  • .com 優先:.com 是大多數人的直覺印象,主要方便好記,增加搜尋率。
  • 勿用中文:網址傳輸是以英文為主,所以網址上有中文,就會轉成一長串的特殊符號+數字,除了難記外,對排名也不太理想。

網域取名完成後,接下來可以看一下網域後綴部分(或稱為頂級域名),要如何選擇呢?

一般最常選擇的就是 .com 類型的頂級域名,它適用於任何場合或服務,通常也是最熱門的選擇(會建議優先選擇)。

但有時候喜歡的網域名字,剛好偏偏被註冊走了,就能用更換頂級域名的方法,還是有機會註冊到自己喜愛的名字。

有關於網域後綴名(頂級域名),有哪些常見的類型呢?下面僅列出一些分享。

  • tw / cn / jp:代表不同國家,如台灣、中國、日本等 ..(選擇這類型的網域,可挑選網站主要訪客的居住地)。
  • co:可解讀為公司或企業的英文縮寫,但基本上適用於任何情況,可當作 com 申請不到的替代方案(簡單好記)。
  • net:網路相關行業可使用,但無明確限制。
  • info:資訊性類型網站可使用,但無明確限制。
  • org:organization(組織)縮寫,適合非營利組織、基金會、人文組織、宗教組織等 ..,但無明確限制。

虛擬主機是什麼?

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

這樣可大幅降低使用者的費用,因為養實體主機是很貴的,所以絕大部分的站長,通常都是租用現成的。

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

如果網頁製作完成了,就需放置在優質的虛擬主機,才能確保網站不會受到攻擊,和速度穩定。

如何挑選虛擬主機?

  • 公司規模:國外知名虛擬主機公司,都是全球性服務,不論公司規模、營運歷史、主機性能、規格服務,通常優於國內主機。
  • 主機性能&功能性:主機穩定度&安全性是重要的,網站才會安全有保障。還有主機的方案規格是否理想。
  • 方案價位:通常國外的價格,會比國內便宜,但建議不要都價格取向,如果主機因此性能不好,之後你也會選擇離開的。

WordPress 是什麼?

WordPress 網站使用人數(持續增加中)
WordPress 網站使用人數(持續增加中)

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

擁有上萬個佈景主題(樣板)和功能外掛,只需一鍵安裝即可成為多功能網站。或許你不知道怎麼選,請參考 優質佈景主題優質外掛推薦,會給你應該的幫助。

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

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

且不會因為任一網頁製作平台的營運問題,造成網站消失(舉例來說,無名小站結束營運,原來的內容也隨著關站而消失,但這不會發生在 WordPress 身上)。

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


3. Bluehost 方案價格

了解完 Bluehost 這款優質的主機之後呢,這章節就來點評一下主機方案部分,幫助你選擇最適合自己的。

前往 Bluehost,點擊「 Get Started Now(立即開始)」,如下圖。

使用 Bluehost 申請主機+網域
使用 Bluehost 申請主機+網域

點擊後,會看到 Bluehost 主機方案。

如果不知道如何選擇最適合你,下面我會給你一些 Bluehost 的方案建議。

Bluehost 主機:選擇 Basic 入門方案功能

要選擇哪種 Bluehost 方案?

Bluehost 的 WordPress 主機提供多種選擇,分別是 Basic 方案、Choice Plus 方案、Online Store 方案、Cloud 方案。

依照不同方案,全都享有 WordPress 自動安裝和更新、24/7 全年無休客服,這是超值的功能服務。

基本來說,Bluehost 的 Basic 方案會比較建議選擇,因為費用較便宜且功能已經足夠。

這邊我簡單的統整,方便你找到適合自己的方案。

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

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

如果是有多個網站架設需求,建議直接選擇 Choice Plus 方案,且此方案可享有大儲存空間,較適合有多網站需求的站長。

Bluehost 費用了解

Bluehost 原價入門費用是,網址 $12.99 美元 / 年(一年約 $400 台幣)和主機 $7.99美元 / 月(一年約 $2,876 台幣)。

值得開心的是,Bluehost 官方同意為我們網站讀者,提供最高可享有 3 折的主機折扣。

下表是用台幣計算,美元 / 台幣匯率用經常的 1:30 換算。

Basic 方案Choice Plus 方案
買一年:特價約 716 元(原價 2,876 元買一年:特價約 1,602 元(原價 5,036 元
買三年:特價約 3,229 元(原價 7,549 元買三年:特價約 5,389 元(原價 15,109 元

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

如果網址同樣在 Bluehost 申請, Bluehost 有提供首年網域免費和 SSL 憑證,請多加利用。

這等於說,在 Bluehost 申請個人網域和主機,最少可用不到 1,000 台幣,就能開始啟動你的網路事業,並享有完整的主機規格服務。

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

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


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

選擇心目中的 Bluehost 方案,我們就可以開始申請網域和虛擬主機了,這邊簡化 3 步驟,打造自己的網頁製作。

Step1:選擇方案和申請網域

前往 Bluehost,點擊「 Get Started Now(立即開始)」,如下圖。

使用 Bluehost 申請主機+網域
使用 Bluehost 申請主機+網域

點選你想租用的方案,如果預算有限可從 Basic 方案開始,想架設多個網站就選 Choice Plus 方案。這邊先以租用 12 個月(1 年)為範例。

Bluehost 主機:選擇 Basic 入門方案功能
Bluehost 主機:選擇 Basic 入門方案功能

選擇方案後,可能會跳出一個彈跳視窗,推薦其他特價方案,不過建議新手還是先以 Basic 方案為主即可,所以這邊點選 Skip 跳過就好囉!

點選 Skip 跳過特價方案廣告

接著來註冊網域,這邊有提供 3 個選項。

申請新網址 Create a new domain、已經有網址 Use a domain you own、稍後申請網域 I’ll create my domain later,確認後點 Next。

有建立新網址、已經有網址、稍後再申請網域,這 3 種選項
有建立新網址、已經有網址、稍後再申請網域,這 3 種選項

小提醒:如果購買 Choice Plus 以上的方案,Bluehost 會附贈一年的網址(免繳網址費用),且 DNS 已經設定完成。

Step2:申請資料填寫

使用者資訊需都填寫英文,姓名可到 外交部 查詢,地址可用 中華郵政 查詢。

Phone Number 電話因為需輸入國際碼,可以先點選「 Use an international number(使用國際號碼)」的英文字,就會自動出現國際碼欄位。如果你是輸入手機,就把開頭 0 去掉直接輸入手機號碼即可(手機範例:932667812),如下圖。

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

此外,這一步會需設定密碼,這個密碼是未來登入 Bluehost 的帳密,記得要妥善保存唷:)

Bluehost 主機申請欄位

小提醒:密碼須設定 8-16 個字元,包含大小寫英文+至少一個數字+至少一個特殊符號(例如:!@#$%^)

接著,主要留意租用多久、是否加購商品、確認消費金額,建議可不勾選加購項目,以節省預算。

Bluehost 主機申請欄位
Bluehost 主機申請欄位

小提醒:Bluehost 方案費用依照官方當時為準,上圖購買費用僅供參考使用(記得使用 折扣連結 前往,才會享有專屬折扣價格)。

然後填入付款資訊,最後按下 Submit 送出。

Bluehost教學 :付款方式

這樣一來,個人網域和 Bluehost 主機就都申請完成囉,太好了。

Step3:創建 Bluehost 帳戶

申請完成後會看到歡迎訊息 & 收據明細,可把收據保存下來,Bluehost 也有同步傳到你的信箱。

接著註冊 Bluehost 帳戶,這是用來登入 Bluehost 後台的,點擊 Create your account 創建帳戶。

bluehost教學 :虛擬主機申請完成
Bluehost教學 :虛擬主機申請完成

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

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

Step4:建立 WordPress 網站

Bluehost 會繼續引導建置 WordPress 網站,這裡會有多個步驟,都先點選 Next 略過設定流程(這些之後都可再做設定),最後就會直接進行網站安裝。

進行 WordPress 網站安裝
進行 WordPress 網站安裝

走到最後一步,就可以順利看到 WordPress 後台了!恭喜!

WordPress 網站建置完畢!
WordPress 網站建置完畢!

5. 前往 Bluehost 後台

這章節,我們將前往到 Bluehost 後台,逐一了解有哪些可使用的功能。

登入 Bluehost 後台
登入 Bluehost 後台

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

輸入 Bluehost 帳號&密碼
輸入 Bluehost 帳號&密碼

接著會有簡易的 Bluehost 安全驗證設定,目的是幫你的帳號提升安全性。

可分別設定 Pin 碼& 手機號碼(因為是國際碼,可把開頭 0 去掉,系統會寄封簡訊驗證碼),就能驗證成功。

備註:若後面有出現「 開啟兩步驟驗證 」功能,這個可以先點選略過。

設定 Pin 安全碼
設定 Pin 安全碼

接著就會看到 Bluehost 後台介面了,有關左側的「 Websites 」選項,裡面會列出所有的 WordPress 網站。

以下圖為範例,選項「 Settings 」是顯示網站資訊,選項「 Edit Site 」是前往到 WordPress 後台。

Bluehost 呈現網站資訊
Bluehost 呈現網站資訊

進來之後,Bluehost 給予的網站設定項目,大致上都會放在這邊。這裡面功能很多,大家都可以再玩看看。

這邊主要列出必用路徑,分別是 WordPress 前後台路徑,也可以從這裡前往。

更多網站資訊呈現
更多網站資訊呈現

補充訊息:WordPress 網站前台

如果網址列出現臨時網域(非剛申請的網域)是正常的。

那是因為 Bluehost 需把你的新網域,通報給全世界的主要伺服器基地,讓它們收錄你的網域,如此一來你的網域才會被找到(這個也稱為 DNS 指向,通常生效時間約 24 ~ 48 小時不等)。

等系統作業完成後,Bluehost 會自動把臨時網域,更改成你剛申請的網址(在此之前,如果要登入 WordPress 後台,建議先從 Bluehost 後台前往)。

補充訊息:WordPress 網站後台

首次登入 WordPress 後台,建議可優先更改網站語言、網站標題、永久連結 等 .. 主要項目,方便未來操作。可參考 WordPress 後台教學


6. Bluehost 其他設定

bluehost 網站架設,功能設定
Bluehost 其他設定

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

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

如果網域是在第三方網域商申請(不是在 Bluehost 一起申請),別忘了需設定網域的 DNS 指向,把網域指向剛申請好的 Bluehost 主機,這樣搜尋網域才會順利看到網站唷。

上面提到的待辦事項,可以參考 Bluehost 網站製作,補充尚未學習到的部分。

完成後,我們的基礎設施就都建置完成了,恭喜大家。


7. Soledad 主題介紹

WordPress 的 Soledad 佈景主題推薦

Soledad 是一個功能強大且靈活的 WordPress 佈景主題,不需會任何編碼能力,就能幫助你短時間內架站成功。更多 Soledad 主題教學

它是一款專門為部落格、雜誌、媒體類型的網站,所特別打造的主題,而且它的銷售數量非常的好,是許多站長愛不釋手的佈景主題。

Soledad 有非常多種風格的主題模板,你只需找到自己喜歡的,同樣一鍵安裝即可馬上套用!

soledad 多種風格的主題模板
Soledad 多種風格的主題模板

Soledad 可調整的設定項目非常的多種,像是頁首 / 頁尾設定、輪播圖功能、文章列表佈局、單一文章排版、社群媒體分享、文字翻譯等 ..,都充分整合在主題功能裡面。

再來是 Soledad 在主題速度提升方面做了很大的優化提升,在 Google、Pingdom、GTmetrix 都有良好的表現。

Soledad 良好的主題速度
Soledad 良好的主題速度

Soledad 與主流的頁面編輯器也有完美的支持,像是 Elementor、WPbakery 等 ..。

並且在 Elementor 頁面編輯器上,同步新增擴充多種版型樣式、區塊功能,可直接用來做網頁設計。

Soledad 對 Elementor 有完美的功能擴充

當然,Soledad 強大的地方還不僅於此,這裡只列舉部分特色。

總結來說,Soledad 是一款很棒的 WordPress 部落格 / 媒體 / 雜誌主題,如果有這方面的需求,相信它會是你的強大幫手!


8. 購買 Soledad 主題

這章節會示範,如何在 themeforest 主題森林購買 WordPress 佈景主題,詳細流程請繼續學習。

首先,前往 Soledad 佈景主題,點擊「 Buy Now 」進行購買。

建立Blog:購買 Soledad 主題
建立Blog:購買 Soledad 主題

使用者資訊需都填寫英文,姓名可到 外交部 查詢,完成後點 Next。

創建 themeforest 帳號
創建 themeforest 帳號

設定 themeforest 主題森林的帳號+密碼,這是未來要登入的憑據,請妥善保存。

創建 themeforest 帳號
創建 themeforest 帳號

填入帳單資訊,如果沒有公司可以空白,地址需填入英文,郵遞區號需填國際碼(4 – 9 碼),可用 中華郵政 翻譯查詢,完成後點下一步。

填入帳單明細
填入帳單明細

輸入付款資訊,常用的有信用卡或 PayPal 付款,這裡用信用卡示範,點擊按鈕確認付款。

輸入付款資訊
輸入付款資訊

這樣一來 WordPress 佈景主題就購買完成囉!下一章節,我們會進行主題安裝教學。


9. 安裝 Soledad 主題+激活憑證

這章節會示範如何安裝第三方主題,還有激活憑證,我們開始吧。

安裝第三方主題

主題購買完成後,點擊右上角圖像前往 downloads 頁面。

登入 themeforest 帳號,和前往 downloads 頁面
登入 themeforest 帳號,和前往 downloads 頁面

在購買清單,會看到剛買的 Soledad 佈景主題,點擊 Download > Installable WordPress file only,下載 WordPress 主題安裝檔。

下載 WordPress 主題安裝檔
下載 WordPress 主題安裝檔

接著,前往並登入 WordPress 後台,到 外觀 > 佈景主題 > 安裝佈景主題 > 上傳佈景主題。

上傳 Soledad 主題檔案(副檔名是zip),安裝成功後就直接「 啟用 」。如果不太會安裝,也可參考 WordPress 主題安裝

上傳第三方的 WordPress 主題
上傳第三方的 WordPress 主題

激活主題憑證

主題安裝完成後,前往剛下載 Soledad 主題 的地方,這次改下載 License(PDF)。

複製裡面的 Item Purchase Code 產品購買序號,這是激活 Soledad 主題的憑證,預防盜版的機制,等等會使用到。

下載購買憑證
下載購買憑證

前往 Soledad > Activate theme 分頁,貼上剛複製的購買序號激活主題。

貼上產品購買序號
貼上產品購買序號

這樣一來,就正式安裝+激活主題了,全部的 Soledad 功能就正式解鎖囉。

查看網站前台

接著,前往網站前台,就會看到 Soledad 的基本版型出現啦!先恭喜大家!

Soledad 主題設定成功啦!
Soledad 主題設定成功啦!

因為 Soledad 還有很多現成模板可以套用,但我會放在比較後面的章節(方便統一教學),主要讓大家都能先進入狀況,上手這款主題。

等主題大致上功能掌握完畢,如果對其他模板的設計有興趣,也能自行安裝套用唷:)


10. 安裝基本外掛

Soledad 提供的外掛,有些是強制性需要安裝的,有些是選擇性的,這邊先帶大家安裝其中幾個,方便後續教學。

前往 WordPress 後台 > Soledad 首頁,點選 Install Plugins(安裝外掛)。

建立blog :安裝 Soledad 必要外掛
建立blog :安裝 Soledad 必要外掛

下面示範 Soledad 比較會用到的外掛進行安裝,如果有覺得其他可能會用到的,也能額外勾選安裝。

把需要的外掛打勾,然後切換到 Install,進行批次安裝。

建立blog :批次安裝外掛
建立blog :批次安裝外掛

下面是剛示範安裝的外掛,簡易介紹(除了有標示必裝的以外,其他外掛如果未來用不到,也能進行刪除)。

  • Penci Shortcodes & Performance:必裝。串連整個主題的外掛,Soledad 必裝外掛。
  • Elementor Page Builder:Elementor 是頁面編輯器,可用拖曳的方式製作頁面,更多 Elementor 教學
  • Mailchimp for WordPress:在 WordPress 嵌入 MailChimp 電子報訂閱表單(需設定 API Key),可參考 MC4WP 教學
  • Penci Portfolio:實現作品集的相關外掛。
  • Penci Soledad Demo Importer:Soledad 模板導入工具。
  • Penci PageSpeed Optimizer:Soledad 網站速度優化。
  • Vafpress Post Formats UI:創造不同的排版形式。
  • WPForms:方便製作表單的好外掛,更多 WordPress 表單外掛

再度前往當前頁面,會看到剛勾選的外掛已經「 Install 安裝 」好了,接下來再重複勾選一次,進行批次「 Activate 啟用 」。

建立blog :批次安裝外掛
建立blog :批次安裝外掛

好溜,這樣網站功能就變得更齊全了!


11. 自訂功能一覽

在網站前台上方點選「 自訂 」,Soledad 大約 90% 以上的功能,都是在這邊設定的(或是從 WordPress 後台,前往外觀 > 自訂,同樣可前往)。

Blog教學 :WordPress 自訂外觀
Blog教學 :WordPress 自訂外觀

因為功能非常多,這邊先標記提示,下面章節會對其中幾個功能,進行說明。

架設blog:Soledad 功能一覽
架設blog:Soledad 功能一覽
  • General (一般設定):設定主視覺顏色、網站文字、部分頁面排版、網站圖示、顯示網站路徑、置頂頁首等 ..。
  • TopBar(上層頁首):頂端欄相關設定。
  • Logo&Header(logo&頁首):設定 Logo、頁首排版、頁首顏色、手機版選單、選單文字大小&間距、嵌入程式碼等 ..。
  • Vertical Navigation & Hamburger Menu(垂直導航&漢堡鈕):設定垂直導航、漢堡鈕樣式。
  • Homepage(頁首編輯):首頁文章排版、首頁熱門文章、文字&顏色設定等 ..。
  • Featured Slider(特色輪播):啟用大圖輪播&設定。
  • Featured Video Background(特色影片背景):啟用影片背景&設定。
  • Posts Layouts(文章列表佈局):文章列表頁設定,像是列表排版、顯示社群分享、顯示作者、顯示日期等 ..。
  • Sidebar(側邊欄):側邊欄寬度、側邊欄樣式、文字&顏色 ..。
  • Single Posts(單一文章):佈局樣式設定、相關文章、功能區塊開啟 / 隱藏、文字&顏色 ..。
  • Pages(頁面設定):顯示頁面標題、隱藏評論、開啟透明頁首、頁面頁首設計 ..。
  • Footer(網站頁尾):網站頁尾設定、小工具區塊、文字顏色 ..。
  • Social Media(社群媒體):社群分享功能設定。
  • Quick Text Translation(文字翻譯):文字翻譯設定。
  • Portfolio(作品集):作品集的相關設定。
  • Speed Optimization(速度優化):Soledad 自開發的速度優化功能。
  • Custom CSS(自訂CSS):自訂 CSS 程式碼。
  • 切換裝置: 可切換不同裝置,方便網頁設計。

12. 設計網站頁首(Header)

這章節,來調整一下頁首的相關設計。

頁首佈局設計

前往 Logo & Header > General,選擇喜愛的 Header Layout,會發現頁首的排版改變了。

因為預設版型有社群分享 Icon,如果要移除的話,可把 Disable Header Social Icons 勾選,然後點「 發佈 」(也可等都修改完成,再一次發布)。

Blog教學 :編輯網站頁首 Header
Blog教學 :編輯網站頁首 Header
  • Custom Font Size for Social Icons:調整社群 Icon 大小。
  • Add Custom Code Inside <head> tag:程式代碼嵌入,像是 GA / FB Pixel 等 ..。

更換網站 Logo

前往 Logo & Header > Logo,可上傳網站 Logo,然後調整大小等。更多 Logo 設計+網站配色教學

架設blog :更換網站 Logo
架設blog :更換網站 Logo
  • Set A Max Width for Logo:設定 Logo 的最大寬度。
  • Logo Padding Top & Bottom:設定 Logo 的上下間距。

更改網站標語(Slogan)

前往 Logo & Header > Slogan Text,輸入網站標語(不需要就空白即可),然後調整字體大小。

架設blog :設定網站標語
架設blog :設定網站標語

在 Logo & Header 路徑下,還能調整選單相關樣式&顏色,因為目前還沒新增選單,下面新增後會再來介紹這一塊。

好溜,這樣頁首就簡單更換成功囉:)


13. 設定永久連結&文章顯示方式

這裡對 WordPress 做一些基本設定,方便後續的網頁建置。

設定永久連結

這裡示範網址連結更改,把它改成適合的形式,提升 SEO 優化+訪客閱讀體驗。

前往 WordPress 設定 > 永久連結,選擇「 文章名稱 」形式,然後儲存。更多 永久連結教學

WordPress後台教學 :更改永久連結
WordPress後台教學 :更改永久連結

設定文章顯示方式

預設的文章顯示方式是「 完整內容 」,這樣會有頁面過長的問題,我們來做個小調整。

前往 WordPress 設定 > 閱讀,把文章顯示方式改為「 內容摘要 」即可。

建立blog :設定文章顯示方式
建立blog :設定文章顯示方式

好,那這樣簡單的小設定,就完成啦。


14. 新增第一篇文章

這章節,來示範如何新增網站文章,操作方式一樣很簡單唷:)

首先,前往文章 > 新增文章,可輸入文章標題&內容。更多 WordPress 文章新增教學

架設blog :輸入網站標題&內容
架設blog :輸入網站標題&內容

點選左上角的「+」,會打開 WordPress 區塊編輯器的所有元素,裡面功能非常多,像是圖片、清單、傳統編輯器、表格等 ..。

下圖示範新增一個圖片,把圖片上傳到 WordPress 即可使用,或是直接拖曳至編輯器,也能直接呼叫圖片功能。

架設blog :新增圖片
架設blog :新增圖片

額外教學:可以使用「 閱讀全文 」的區塊功能,避免前台文章會顯示過長的問題:)

如果文章編寫完畢後,可進行簡單的內容設定,像是網址更改(可改成與文章內容有關的,建議用英文)、設定分類、設定精選圖片、設定內容摘要等 .. 。

設定完成後,點「 發佈 or 更新 」即可送出。

WordPress 文章新增&編輯
WordPress 文章新增&編輯

前往前台瀏覽一下,太棒囉!我們的第一篇文章出現了!

架設blog :新文章出現啦~
架設blog :新文章出現啦~

15. 設定文章分類&標籤

WordPress 有完整的網站分類&標籤功能,方便你統整文章和維護更新,且有助於訪客搜尋。

WordPress 文章分類

前往 WordPress 後台的文章 > 分類,可新增+編輯文章分類(依自己需求設定即可)。

備註:「 代碼 」是分類網址的設定(建議英文),文章分類可設定父子階層。

新增 WordPress 文章分類
新增 WordPress 文章分類

可對現有的分類進行 編輯,或是點 快速編輯 可直接修改重點。

如何架設 Blog :WordPress 分類編輯&刪除
如何架設 Blog :WordPress 分類編輯&刪除

WordPress 文章標籤

前往 WordPress 後台的文章 > 標籤,可新增+編輯文章標籤(依自己需求設定即可)。

WordPress 標籤編輯&刪除
WordPress 標籤編輯&刪除

以上是簡單的 WordPress 分類&標籤教學:)


16. 新增網站頁面

WordPress 原生的區塊編輯器,能讓我們製作頁面,如果你的頁面需求比較簡單,就直接用原來功能設計即可,更多 新增頁面教學

如果你有比較客製化的需求,這時就需使用 WordPress 頁面編輯器

其中最知名的頁面編輯器,大概非 Elementor 莫屬了,而且 Soledad 主題與 Elementor 有良好的支援,建議使用 Elementor 編輯頁面。更多 Elementor 教學

前往 WordPress 頁面 > 新增頁面,就能製作頁面溜,下面我用「 區塊編輯器 」進行簡單頁面製作。

如何架設 Blog :設計網站頁面
如何架設 Blog :設計網站頁面

小提醒:區塊編輯器&頁面編輯器,兩個二選一設計「 當前頁面 」就好囉。

頁面往下滑,會看到 Page Options 區塊,這是 Soledad 的客製化頁面功能。

下圖左側有 General 一般設定、Header 頁首設定、Footer 頁尾設定、Page Header 頁面標題等 ..,可進行設定。

建立網誌 :Soledad 主題,客製化當前頁面
建立網誌 :Soledad 主題,客製化當前頁面

General(一般設定)裡面,會看到側邊欄的調整項目,可選擇是否顯示側邊欄,和要顯示哪個側邊欄。

建立網誌 :是否顯示側邊欄
建立網誌 :是否顯示側邊欄

有關網站小工具(側邊欄)設定方法,可參考 WordPress 後台教學 的相關章節,或是更多 WordPress 小工具教學

好囉,最後來看一下簡單的頁面成果。

建立網誌 :「 聯絡我們 」頁面設計完成!
建立網誌 :「 聯絡我們 」頁面設計完成!

以上就是在 WordPress 製作網站頁面的教學:)


剛學習了新增文章、文章分類、新增頁面,這樣就有一些東西,能讓我們製作網站選單囉。更多學習,可參考 WordPress 選單設計

首先,前往 WordPress 外觀 > 選單,填入選單名稱後,點 建立選單

WordPress 建立第一個選單
WordPress 建立第一個選單

WordPress 有提供許多選單類型,這邊先選擇「 頁面 」類型,點選新增至選單。

建立網誌 :新增頁面到選單
建立網誌 :新增頁面到選單

找到「 分類 」類型,把剛新增的文章分類加上去,再設定顯示位置(我是選 Primary Menu ,就是主要選單),最後儲存。

如何架設 Blog :新增分類,到選單中
如何架設 Blog :新增分類,到選單中

最後來看一下成果,太棒了選單出現了,個別點擊也會出現頁面。我們的「 如何架設 Blog 」又往前一小步了。

建立blog :選單設定成功!
建立blog :選單設定成功!

18. 網站小工具設定

這章節,來學習更改網站側邊欄,把它改為自己喜愛的樣式,還有會教怎麼更換側邊欄內的小工具。

設定側邊欄樣式

前往 WordPress 外觀 > 自訂,然後前往 Sidebar > General,在 Custom Sidebar Width 可調整側邊欄寬度。

至於 Sidebar Widget Heading Style 是調整樣式,可切換風格。

如何架設 Blog :設定 Sidebar 側邊欄
如何架設 Blog :設定 Sidebar 側邊欄

在 Sidebar > Colors,可調整側邊欄的相關顏色,都設定完成後,就進行儲存。

如何架設 Blog :設定側邊欄顏色
如何架設 Blog :設定側邊欄顏色

側邊欄小工具設定

前往 WordPress 外觀 > 小工具,會看到非常多可用的工具,有 Soledad 開頭的是 Soledad 主題的擴充功能。

把想要使用的放入到 Main Sidebar(主側邊欄),就可以囉。

以下圖,我分別使用搜尋、分類、最新文章、FB 粉專嵌入這幾個功能,點擊箭頭有更多設定項可調整。

建立blog :設定網站小工具
建立blog :設定網站小工具

小分享:

1. 用拖曳的方式,也能直接把工具放入到側邊欄中。

2. 已經放入側邊欄的小工具,可以使用拖曳排序唷。

3. 除了 Main Sidebar(主側邊欄以外),還有像是 Footer Column(頁尾欄位)、Custom Column(客製化欄位),也能放入小工具唷。

最後看一下實現效果吧,太棒囉!感覺比剛剛好太多了:)

建立blog :網站側邊欄,樣式設計成功!
建立blog :網站側邊欄,樣式設計成功!

這章節,我們來設計網站頁尾囉,讓它符合心中喜愛的感覺。

設定頁尾小工具

前往 WordPress 外觀 > 小工具(跟上面設定側邊小工具的地方一樣)。

這次可以把想要使用的工具,擺放到 Footer Column #1 ~ #3(依照個人需求),這是頁尾的展示區塊。

建立blog :設定頁尾小工具
建立blog :設定頁尾小工具

到網站前台,會看到原來的網站頁尾多一些功能了。

調整頁尾樣式

接下來,就來調整頁尾樣式。前往 WordPress 外觀 > 自訂,選擇 Footer > General。

我做了一些調整,可以往下學習。

建立blog :Footer 頁尾相關設定
建立blog :Footer 頁尾相關設定
  • Disable Footer Social Icons:取消預設的社群分享。
  • Disable Go To Top Button on Footer:取消預設的頁尾置頂按鈕。
  • Enable Go To Top Button Floating on The Bottom Right:在網站右下方,顯示回到頂端按鈕。
  • Footer Copyright Text:網站底端的版權文字。

前往 Footer > Colors,可設定頁尾配色。下面我把原白色背景,改為有點淺灰的感覺。

建立blog :設定頁尾,背景顏色
建立blog :設定頁尾,背景顏色

好囉,最後來看一下頁尾設計的簡單成果。當然,你也能依照自己的喜愛設計唷:)

建立blog :頁尾設計成功!
建立blog :頁尾設計成功!

太好了,我們的「 如何架設 Blog 」完成度,已經越來越高了。


20. 風格化設計

Soledad 預設的主視覺顏色、文字樣式、佈局功能都能做更換,可讓網站變得更加符合個人品牌的樣子!

更改文字樣式

前往 WordPress 外觀 > 自訂,點選 General > Typography,可做全網站文字的統一設定,我挑選其中幾個做介紹。

建立blog :設定網站文字樣式
建立blog :設定網站文字樣式
  • Font For Heading Titles:標題的字體。有非常多可以選,我是選擇 Noto Sans TC(思源黑體),可依自己喜愛選擇。
  • Font For Body Text:網站內文的字體。
  • General Font Size for Text:網站內文的文字大小。
  • General Line Height for Text:網站內文的文字行高。

更換網站配色

Soledad 的顏色設置,是建置在不同的區塊功能裡面,可以個別點選,然後把主視覺顏色,改為你的品牌顏色即可。

通常更改路徑,都是在不同區塊內的 Colors 選項。

架設blog:Soledad 功能一覽
架設blog:Soledad 功能一覽

舉例:把 General > Colors,裡面的 Accent Colors 改為自己的品牌色。

建立blog :更改網站配色
建立blog :更改網站配色

因為需調整的地方比較多,就交給大家自行作業囉:)

文章列表頁調整

有關文章列表頁,預設有滿多區塊功能的,也能設定是否開啟。

前往 Posts Layouts > Standard & Classic(或是 Other Layouts),把相對應的選項勾選即可。

如何架設 Blog :文章列表頁調整
如何架設 Blog :文章列表頁調整

從上圖來說,我是把 Hide Share Box(隱藏社群分享)& Hide Category(隱藏分類)打勾,所以在文章列表頁,就不會再出現了。

至於單一文章頁面,可以前往 Single Posts 分頁內設定。

以上就是風格化設計的分享啦,不知道大家操作的還順利嗎:)


21. 套用主題模板

經過上面一連串的學習,如果有堅持到這邊,相信你一定收穫不少吧:)

其實 Soledad 有提供多種現成的模板,可以直接套用(你可能會 OS 想說,怎麼不早說XD)。

但如果一開始就直接套用模板,很多功能還是得需熟悉,而且對功能的認識也不齊全,對未來的網站維護幫助不大,所以才想說從零開始帶大家逐步成長。

這章節是選讀的,如果已經滿意目前的網站設計,這就可以略過,也先恭喜你架站成功啦:)

如果你打算套用 Soledad 的現成版型,那我教你怎麼做。

Step1:前往模板匯入

前往 WordPress 外觀 > Import Demo Data(需有安裝此外掛),這裡就是匯入 Soledad 模板的地方。

建立blog :前往模板匯入
建立blog :前往模板匯入

Step2:閱讀官方的重要提示

在匯入前,有些很重要的地方須先了解,我簡單整理如下。

  1. 如果你是新網站,沒有任何重要的「 頁面 / 文章 」,可將 Import Demo Style &Import Demo Content 同時勾選匯入。反之,如果你是舊網站,請單獨勾選 Import Demo Style,並取消 Import Demo Content。
  2. 請確保在 WordPress 外觀 > Install Plugins,已經安裝必要的 Soledad 外掛。
  3. 如果要套用新的 Soledad 模板前,請先卸載舊的 Soledad 模板。
  4. 如果匯入後,如果選單有出現狀況,請前往 WordPress 外觀 > 選單,找到主選單並把 Primary Menu 打勾。
  5. 如果確認不再導入模板,可將 Penci Soledad Demo Importer 外掛,還有多餘的 Penci 外掛刪除,節省網站效能。

以上最重要的就是第一條,要特別留意唷!因為沒正確選擇的話,可能會讓原來製作好的「 頁面 」&「 文章 」都被洗掉。

Step3:選擇喜歡的模板,開始匯入溜!

確認要匯入的項目(下圖是用新網站的角度示範),點選 Import,然後靜待一些時間就搞定囉!

建立blog :匯入喜愛的模板
建立blog :匯入喜愛的模板

常見問題

WordPress 網頁製作平台,是什麼呢?

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

擁有上萬個佈景主題(樣板)和功能外掛,只需一鍵安裝即可成為多功能網站。WordPress 可完成多種網頁設計,如:部落格架設個人品牌或公司企業官網購物網站架設 等 ..

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

Soledad 主題是什麼,好用嗎?

Soledad 是一個功能強大且靈活的 WordPress 佈景主題,不需會任何編碼能力,能幫助短時間內自架網站。

它是熱門的部落格、雜誌、多功能的佈景主題,有多種不同風格的主題模板,同樣一鍵安裝即可使用。

購買一個 Soledad 主題,可以用在幾個網站?

一個 Soledad 主題的憑證,只能用在一個網站。如果有多個網站需使用,就需額外購買唷。

個人網域&主機租用,如果時間到期了要如何處理?

通常網域商 or 主機商都有提供自動續約的服務,就不用擔心忘記續約導致網站失效的事件。

但如果不想使用自動續約功能,也能前往廠商後台,將功能關閉即可。


WordPress 學習資源

學習 WordPress 網站架設流程中,或許會遇到一些解決不了問題,可以在下方留言給我,我會盡力協助解答!

接下來,額外分享 3 項架站資源,可有效幫助大家處理網站問題。

資源一:犬哥數位(專業 WordPress 網頁設計公司)

如果你沒時間自己架站、或是遇到解決不了的網站問題。歡迎洽詢 犬哥數位(WordPress 網頁設計公司),請專家製作會更有效率!

WordPress 網頁設計公司|犬哥數位

資源二:WP 精選模組攻略書

由於 WordPress 主題 / 外掛有非常多種,很多網友私訊我不知道安裝哪一款,才有辦法實現功能。或是已經試了很多款外掛,但始終找不到適合自己的。

對此我整理了 高達 100 多款精選主題&外掛大全(電子書),這些都是我們團隊協助客戶開發案件時,會搭配使用的。一來外掛品質優良,二來功能性也足夠強!

WordPress 模組指南書
WordPress 模組指南書

資源三:更多犬哥教學資源

如果你想學更多品牌設計知識,也歡迎追蹤 犬哥網站 IG,這裡面有很多精美圖文&短影片。

或是你比較喜歡看影片學習,也可關注 YouTube 頻道,幫助你更容易進入狀況。

當然,如果你在操作過程中遇到問題,也可以加入 WordPress 架站 x SEO 教學時光屋 – 犬哥網站 ,除了有網友一同幫你解惑外,犬哥團隊也會同步在社團幫助大家。

犬哥網站|交流社團
犬哥網站交流社團

關於作者

犬哥網站:網頁設計 x 網路行銷教學平台

犬哥網站

我們分享 WordPress 架站 x 網路行銷知識,不需會任何程式技術,就能自己建立各種網站。 搭配豐富的網路行銷教學,幫助你被更多人看到。 趕快跟著我們的腳步,開始學習吧:)

在〈如何架設 Blog?WordPress 網站建置+部落格設計(Soledad 主題)〉中有 26 則留言

  1. 你好,想請問ASTRA佈景主題要換成Soledad,該怎麼做才能讓ASTRA之前的設定消失,不要影響到後面的Soledad安裝呢?

    1. 嗨,基本上要切換主題,都是直接換過去就可以了。

      如果換過去有吃到一些原來的設定,再手動微調整就可以~

    1. 犬哥網站

      嗨,勝凱,

      我們是使用 Elementor 小工具來完成這項操作的唷。

      在想定位的區塊上新增「 選單錨點 」小工具 > 在「 ID 」輸入英文或數字 > 複製「 ID 」 > 新增「 按鈕 」小工具 > 在「 按鈕 」的「 連結 」貼上 「#設定ID」

      以上是新增導向按鈕的步驟,根據不同的頁面編輯器會有不同的操作,但基本上應該都會有類似的定向功能。

      希望有幫到你唷:)

  2. 您好
    看完之後也買了佈景主題
    但我發現網站圖示(Favicon) 剛開始有顯示出來
    但後來改了一次後就沒辦法顯示出來了,現在已經過了4個月超級懊惱…
    請問是什麼問題?要怎麼解決?

      1. 嗨!犬哥
        之前購買 Soledad 也用一陣子,但是網站 CLS 很嚴重,請問遇到這種狀況怎麼處理?是卸載佈景主題後重新安裝嗎?還是有另外的解決方法?謝謝您的協助

  3. 不好意思,就在剛剛我申請完網域,建立完Bluehost的帳號要登入時,也已確認帳密無誤,但卻不斷顯示無法登入,也曾點忘記密碼重新修改過新密碼,但仍舊無法順利登入,請問是什麼問題造成的?

  4. 謝謝犬哥的教學
    這是看過最仔細的教學
    犬哥的步驟很清楚也很好理解
    甘溫!

  5. 請問犬哥,關於Primary menu的字型與字體大小要去哪裡更改呢?我找了好久都沒有找到,不知道是在選單裡還是在自訂裡改,希望犬哥可以幫我解惑>.<

    1. 嗨,LIN,

      修改 Primary menu 字型與字體大小,可前往 WordPress 外觀 > 自訂,點選 Logo&Header > Main Bar & Primary Menu,找到「 Custom Font For Primary Menu Items 」選擇字體,「 Font Size for Menu Items Level 1 」修改字體大小。

      希望有幫助到你唷:)

  6. 犬哥您好,想請問如果是用 Soledad Child 這個佈景主題製作購物車網站,要如何讓購物車圖示出現在 Header 右上角呢?

    謝謝!

    1. 犬哥網站

      嗨,Eunice,

      8.1 版本以後的 Soledad,都會有 Header Builder 工具,可在 WordPress 後台左側欄中找到,

      編輯你的頁首時,在右上角的位置,選擇「 Button 」,應該就能指派購物車圖示按鈕於右上角,

      詳細可參考 Soledad 官方 Header Builder 教學影片,希望有幫助到你唷:)

  7. 犬哥您好,我目前還在第一階段申請網域及租用主機,但我對於方案的部分有點困惑,為什麼買12個月還比買36個月來的便宜呢?我現在點開那個網址,跟您上面的截圖有點不大一樣誒!想問問我是不是看錯了什麼部分><
    付款頁面的地方
    Basic 12 Month Price -$2.95/mo.
    Basic 36 Month Price -$4.95/mo.
    不是應該要36個月的每個月會比較優惠一點嗎?

    1. 犬哥網站

      嗨,Ting,

      Bluehost 的優惠,要結合時間來看唷,這邊簡單說明一下,

      12 Month – $2.95/mo. 購買一年的費用是:35.4 美元,但往後每年續訂,都要使用原價 $9.99/mo. ,若要加購兩年,也就是要付出 239.76 美元

      三年價格就會是:35.4+239.76=275.16 美元

      若是直接購買三年,就會是 $4.95/mo. x 36 =178 美元

      所以若要長時間使用,直接購買 3 年會更划算,但是要購買 12 個月方案,或 36 個月方案,就是依照站長自身需求決定囉!

  8. 想請問犬哥幾個問題
    1.在影片1:01,網站前面的logo有大跟小兩種(是在General-General setting做上傳),請問要怎麼製作小的呢?
    2.HTML錨點設定是指文章一開始有大綱形式,點進去換連結那個段落嗎?是否有教學文章?
    3.在網站右邊側邊欄,分類一直都只有顯示一項,但我在文章-分類那邊有新增滿多項的,要怎麼才能讓側邊欄的分類修改成多項呢?
    4.犬哥每一篇文章都有圖片,這是用canva設計的嗎?圖片大小是1170*443?想知道犬哥ig也是用canva設計嗎?
    5.在footer的地方,左半部關於網站,下面沒有一條線,但是在footer widget title text color跟footer widget title border color都已調成黑色?但在中間熱門文章中下面卻有顯示一條線,請問要怎麼調整呢?
    6.下面右半部文章分類只有顯示一種,可是分類已經設了4項,在上面分類中有顯示,請問要怎麼調整呢?

    1. 犬哥網站

      嗨,Hua,

      1. 網站 Logo 跟圖示分別製作完成後,上傳至媒體庫,在前往主題自訂,網站圖示相關設定,就可以指派囉
      2. 錨點設置,不清楚你想達成什麼功能,以犬哥網站的文章目錄來舉例,在目錄處指派連結「 #章節1 」,接著在前往第一章節標題處,找到「 HTML 錨點 」,輸入「 章節1 」即可
      3. 若要顯示分類,請新增文章指派至該分類,就會正常顯示
      4. 我們的文章圖片和 IG 都是使用 Adobe Illustrator 設計的唷
      5. 看不太懂你的疑問,能否請你前往 FB 社團,貼上截圖說明呢?這會更好幫助我們和廣大網友,一起討論解決你的疑惑唷!
      6. 同第三題的回答,需要指派文章至分類,分類項目才會在前台顯示

      希望有幫助你唷!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

返回頂端