如何架設 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 是全球知名的網頁設計軟體,全球有 40 % 以上的網站,都來自於 WordPress。

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

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

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

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

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

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


2. 虛擬主機推薦

Bluehost 是地球最大的虛擬主機公司之一,全球管理數百萬個網站並持續增加中。可參考 Bluehost 心得評價,了解更多。

不論網站空間、網站速度、價格便宜、客戶服務等 .. 多方面表現都令人滿意,對於剛入門的網站新手是最優質的選擇。

許多國內外的部落客、企業主、電商經營者,也都把網站建置在 Bluehost 主機。

Bluehost 的客群來自世界各地,所以不用擔心不懂英文,只要搭配 Google 翻譯,一樣能操作自如。

你也能參考下面影片,進行完整的網域 / 主機申請+ WordPress 架站。

Bluehost 主機教學(手把手,完整架站流程)

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

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

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

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

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

再來,我實測了幾個 WordPress 網站,在中低價位的各家主機速度評比,Bluehost 的網站速度是排行前幾的。

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

備註:

Bluehost 主機不會是最快的,在速度方面它只是中低價位主機的佼佼者,如果你對主機速度有比較高規格的需求,Bluehost 可能會不適合你。

像是經營一段時間有許多穩定流量的人、因為舊主機速度慢想搬家的人、有高網站流量的人,如果你符合這些狀況,建議你可以參考 WordPress 主機推薦 的其他主機。

使用 A2 Hosting 的 Drive 方案以上,或是使用 Cloudways(VPS 主機),它們的主機速度更快,才會比較適合你的需求,但費用會稍微多一點。

相關架站教學,可參考 A2 Hosting 教學Cloudways 教學

如果你沒有以上狀況,可能只是第一次架設網站的人、有預算考量的人(重視 CP 值)、想簡單快速架站的人 .. 。

那使用 Bluehost 主機,絕對是最棒的選擇!

Bluehost 主機安全性高嗎?

Bluehost 是全球最大的虛擬主機之一,它從 2003 年就開始營運至今,總部位於美國猶他州奧勒姆市,是一家領先的主機解決方案公司。

老字號的品牌&經營歷史表現了它的穩定度,到目前全球已經託管超過 200 萬個網域(網站),在全球聘請許多優質工程師打造主機安全性,防止你的網站受到攻擊。

搭配有優質的 24 / 7 線上客戶服務,如果怕語言不通,通常用 Google 翻譯就能搞定(他們有很多亞洲客戶)。

並且搭配有免費 Cloudflare CDN(Content Delivery Network)服務,加快網頁讀取速度,阻擋惡意連線攻擊。

有關 Bluehost 主機相關問題,也能直接向我詢問,因為我自己就有許多網站是放在 Bluehost 上,而且也用了好幾年。

接下來,我將開始「 Bluehost教學 」課程,帶領你繼續架設網站囉:)


3. Bluehost 方案價格

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

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

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

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

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

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

要選擇哪種 Bluehost 方案?

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

依照不同方案,全都享有免費的一年個人網域、SSL 免費憑證、WordPress 自動安裝和更新、24/7 全年無休客服,這是超值的功能服務。

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

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

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

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

如果是有多個網站架設需求,建議直接選擇 Plus 方案,且享有無限儲存空間,自動備份功能等 .. 。

Bluehost 費用了解

Bluehost 原價入門費用是,網址 $14.99 美元 / 年(一年約 $450 台幣)和主機 $9.99美元 / 月(一年約 $3,600 台幣)。

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

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

Basic 方案Plus 方案
買一年:特價約 1,062 元(原價 3,600 元買一年:特價約 1,962 元(原價 5,400 元
買三年:特價約 5,346 元(原價 10,800 元買三年:特價約 8,046 元(原價 16,200 元

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

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

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

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

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


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

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

Step1:選擇方案和申請網域

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

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

點選你想租用的方案,如果預算有限可從 Basic 方案開始,想架設多個網站就選 Plus 方案。

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

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

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

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

小提醒:如果「 網址 」和「 主機 」都是在 Bluehost 註冊申請,Bluehost 會附贈一年的網址(免繳網址費用),且 DNS 已經設定完成。

Step2:申請資料填寫

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

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

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

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

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

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

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

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

然後填入付款訊息並勾選服務條款,最後按下 Submit 送出。

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

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

Step3:創建 bluehost 帳戶

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

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

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

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

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

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

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

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


5. 建立 WordPress 網站

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

如果有跟上面流程走,Bluehost 帳戶申請完成,會有個 Login 按鈕,點擊可前往登入頁面。

或是前往 Bluehost 官網,點右上角的 Login 登入也可以。

Bluehost教學 :登入 Bluehost 帳戶
登入 Bluehost 帳戶

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

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

如果是第一次登入,Bluehost 會有個引導流程,協助你安裝 WordPress 網站。

會有多個步驟,都先點選 Skip this step 略過設定流程,直接進行網站安裝。

Bluehost 網站安裝引導
Bluehost 網站安裝引導

網站安裝完成後,會直接跳轉到 Bluehost 後台首頁,如果有任何加購選項,都先取消。

然後點 My Sites,就會出現剛架設完成的網站啦!這裡可進入 WordPress 網站前台&相關網站管理。

Bluehost教學 :前往網站前台&功能管理
前往網站前台&功能管理

備註:因為 Bluehost 是英文介面,中文標題在 Bluehost 後台可能呈現問號(除非英文命名),但這不會有任何影響。

如果要前往 WordPress 後台,可點 Manage Site 功能管理(上圖),進入點 Log in to WordPress,就可以囉。

Bluehost教學 :WordPress 後台登入路徑
WordPress 後台登入路徑

WordPress 網站前台

首度前往 WordPress 前台,會出現網頁準備中頁面(Coming Soon),這是 Bluehost 貼心幫忙製作的,等網頁設計完畢後,再切換 正式上線 即可。

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

那是因為 Bluehost 需把你的新網域,通報給全世界的主要伺服器基地,讓它們收錄你的網域,如此一來你的網域才會被找到(就是一種新生報到點名的感覺)。

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

WordPress 網站後台

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


6. Bluehost 其他設定

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

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

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

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

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

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


7. Soledad 主題介紹

wordpress 的 soledad 佈景主題推薦
wordpress 的 soledad 佈景主題推薦

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

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

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

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

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

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

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

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

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

Soledad 對 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 主題 / 外掛有非常多種,很多網友私訊我不知道安裝哪一款,才有辦法實現功能。或是已經試了很多款外掛,但始終找不到適合自己的。

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

WordPress 模組電子書

資源三:官方教學資源(含 FB 社群解答)

如果你偏愛自架網站,也歡迎持續關注 犬哥網站 Blog,我們都持續有發布新的網站架設、網路行銷教學。

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

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

犬哥網站:WordPress 架站 x SEO 優化技巧,一站式學習!

關於作者

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

犬哥網站

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

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

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

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

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

    1. 小犬網站 - Luna

      嗨,勝凱,

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

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

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

      希望有幫到你唷:)

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

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

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

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

    1. 犬哥網站 - Luna

      嗨,bluepia,

      不用客氣唷,謝謝你的鼓勵,我們會繼續加油的:)

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

    1. 犬哥網站 - Luna

      嗨,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. 犬哥網站 - Luna

      嗨,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. 犬哥網站 - Luna

      嗨,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. 犬哥網站 - Luna

      嗨,Hua,

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

      希望有幫助你唷!

發佈留言

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

Scroll to Top