官網架設：WordPress 形象網站設計＋網頁製作（打造公司 ...

這是一篇完整的「 官網架設」教學，幫助你完成個人、公司形象網站設計＋製作。

需要製作個人網站，或是想自架品牌官網？還是想幫公司架設形象網站， ... Skiptocontent 這是一篇完整的「官網架設」教學，幫助你完成個人、公司形象網站設計＋製作。

需要製作個人網站，或是想自架品牌官網？還是想幫公司架設形象網站，卻沒完整的網頁製作教學？又或是網頁設計公司，昂貴的網站建置費用，有點超出預算？ 不論個人或公司，只要想打造網路品牌力，或是想增加網路客源，可能都有網站建置需求。

相信這篇「官網架設」教學流程，一定可以幫助你用最少預算＆簡單流程，快速你網站設計成功。

★☆—重要資訊—☆★ 犬哥網站與Bluehost主機有長期合作關係，點擊網站上任一個Bluehost連結前往官網（包含點擊此連結），你可享有將近60%的讀者折扣優惠，我們也將得到少部分佣金（這能用來創作更多優質內容給你們）。

請一定要把握折扣優惠唷，也謝謝你對我們的支持：） 這篇文章非常完整，我會帶你從0到1打造自己的形象網站，章節如下： 1.如何自架網站？2.虛擬主機推薦3.Bluehost方案選擇4.網域申請＋租用虛擬主機5.建立WordPress網站6.Bluehost其他設定7.WordPress主題安裝＋使用形象模板8.更改網站頁首Header9.新增文章列表頁面＆側邊欄設定10.新增第一篇文章 11.網站分類＆標籤12.新增＆編輯網站頁面13.網頁區塊＋小工具設定14.更改網站頁尾Footer15.WordPress外掛安裝＋管理16.Astra主題＋Elementor外掛組合17.開始網站行銷（SEO優化）常見問題WordPress學習資源 如何打造品牌形象網站，影片學習 WordPress網頁設計教學：如何架設網站＋完整官網製作（不懂程式也做得到） 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可完成多種網頁設計，如：部落格架設、個人品牌或公司企業官網、購物網站架設等.. 最大好處是，它是免費開源的軟體，可完全掌握自己網站資料，不需被任何網路平台、網頁設計公司牽制。

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

2.虛擬主機推薦 Bluehost 是地球最大的虛擬主機公司之一，全球管理數百萬個網站並持續增加中。

可參考Bluehost心得評價，了解更多。

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

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

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

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

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

wordpress.org認證的虛擬主機公司（經過官方嚴格審核標準） Bluehost正常運行時間、網站速度，表現好嗎？ Bluehost全年有99.9%以上的正常運行時間（沒任何一家能保證100%），這是重要的數據，不然訪客無法連上你的網站。

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

Bluehost網站正常運行比例＆頁面載入時間 備註： Bluehost主機不會是最快的，在速度方面它只是中低價位主機的佼佼者，如果你對主機速度有比較高規格的需求，Bluehost可能會不適合你。

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

使用Cloudways（VPS主機）或是A2Hosting的TurboBoost方案，它們的主機速度更快，才會比較適合你的需求，但費用會稍微貴一點。

相關架站教學，可參考Cloudways教學、A2Hosting教學。

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

那使用Bluehost主機，絕對是最棒的選擇！ Bluehost主機安全性高嗎？ Bluehost 是全球最大的虛擬主機之一，它從2003年就開始營運至今，總部位於美國猶他州奧勒姆市，是一家領先的主機解決方案公司。

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

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

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

接下來，我將開始「Bluehost教學」課程，帶領你繼續架設網站囉：） 3.Bluehost方案選擇 了解完Bluehost這款優質的主機之後呢，這章節就來點評一下主機方案部分，幫助你選擇最適合自己的。

前往Bluehost，選擇WordPress>WordPressHosting（WordPress主機）。

使用Bluehost申請wordpress主機＋網域 點擊此處，獲得Bluehost的專屬優惠 往下滑，會看到BluehostWordPress主機方案。

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

Bluehost主機推薦：Basic入門方案功能 要選擇哪種Bluehost方案？ Bluehost的WordPress主機提供4種選擇，分別是Basic方案、Plus方案、ChoicePlus方案、Pro方案。

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

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

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

只有一個網站架設需求：選Basic方案。

多網站架設需求：選Plus方案。

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

如果是有多個網站架設需求，建議直接選擇Plus方案，且享有無限儲存空間。

Bluehost費用了解 Bluehost通常費用是，網址$14.99美元/年（一年約450台幣），和主機$8.99美元/月（一年約$3240台幣）。

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

下表是用台幣計算，美元台幣匯率用經常的1：30換算（P.S當前匯率更低，換算下來更優惠）。

WordPressBasic方案WordPressPlus方案買一年：特價約1062元（原價3600元）買一年：特價約1962元（原價5036元）買三年：特價約5346元（原價9709元）買三年：特價約8046元（原價12949元） 備註：新手可購買1年的WordPressBasic方案，用最少預算入門：） 如果網址同樣在Bluehost申請，Bluehost有提供首年網域免費和附帶免費的SSL憑證，請多加利用。

點擊此處，獲得Bluehost的專屬優惠 這等於說，在Bluehost申請個人網域和主機，最少可用不到2000台幣，就能開始啟動你的網路事業，並享有完整的主機規格服務。

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

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

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

Step1：選擇方案和申請網域 前往Bluehost，選擇WordPress>WordPressHosting（WordPress主機）。

使用Bluehost申請wordpress主機＋網域 點選你想租用的年限＆方案，如果預算有限可從Basic方案開始，想架設多個網站就選Plus方案。

Bluehost主機方案費用選擇 申請新網址選Createanewdomain，已經有網址選Useadomainyouown，確認點Next。

有建立新網址＆已經有網址，兩種選項 如果「網址」和「主機」都是在Bluehost註冊申請，Bluehost會附贈一年的網址（免繳網址費用），且DNS已經設定完成。

如果網域不是在Bluehost申請，都需進行DNS設定指向，這樣搜尋網址才找的到網站。

想申請第三方網域商，知名的NameCheap會是好選擇，請參考NameCheap教學，內有完整網域申請流程。

Step2：申請資料填寫 使用者資訊需都填寫英文，姓名可到外交部查詢，地址可用中華郵政查詢。

電話部分因為需輸入國際碼有+886，所以把開頭0去掉加上手機或市內電話就可（例如手機：886911000111）。

Email需填寫正確，申請完成Bluehost會寄網域確認信（需點擊啟用）＆購買收據等..敏感訊息。

bluehost教學：使用者資訊 主要留意租用多久、是否加購商品、確認消費金額，Bluehost會贈送一年網址和免費的SSL憑證。

加購商品只有DomainPrivacy（網域隱私保護）比較值得加購，其他可不勾選，省預算。

bluehost教學：方案選擇＆加購商品 然後填入付款訊息並勾選服務條款，最後按下Submit送出。

bluehost教學：付款方式 這樣一來，個人網域和Bluehost主機就都申請完成囉，太好了。

Step3：創建bluehost帳戶 申請完成後會看到歡迎訊息＆收據明細，可把收據保存下來，Bluehost也有同步傳到你的信箱。

接著註冊Bluehost帳戶，這是用來登入Bluehost後台的，點擊Createyouraccount創建帳戶。

bluehost教學：虛擬主機申請完成 下圖，DomainName（你的網域名稱）是未來登入Bluehost的帳號，並輸入你想申請的密碼，確認無誤後點CreateAccount建立帳號。

P.S這裡的資料請妥善保存，是未來登入Bluehost的帳密唷：） 創建bluehost帳戶：輸入密碼 到了這裡，恭喜完成了網域申請>主機申請>Bluehost帳戶註冊的重要流程。

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

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

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

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

登入Bluehost帳戶 輸入你的網域名稱（或信箱）＆密碼，登入Bluehost。

bluehost教學：後台登入 如果是第一次登入，Bluehost會有個引導流程，協助你安裝WordPress網站。

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

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

然後點MySites，就會出現剛架設完成的網站啦！這裡可進入WordPress網站前台＆相關網站管理。

前往網站前台＆功能管理 備註：因為Bluehost是英文介面，中文標題在Bluehost後台可能呈現問號（除非英文命名），但這不會有任何影響。

如果要前往WordPress後台，可點ManageSite功能管理（上圖），進入點LogintoWordPress，就可以囉。

WordPress後台登入路徑 WordPress網站前台 首度前往WordPress前台，會出現網頁準備中頁面（ComingSoon），這是Bluehost貼心幫忙製作的，等網頁設計完畢後，再切換正式上線即可。

還有，如果網址列出現臨時網域（非剛申請的網域）是正常的。

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

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

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

可參考WordPress後台教學。

點擊此處，獲得Bluehost的專屬優惠 6.Bluehost其他設定 如果有跟著上面的教學，你應該也順利建立WordPress網站了。

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

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

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

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

7.WordPress主題安裝＋使用形象模板 這章節，會教如何安裝WordPress佈景主題＋套用模板，讓網站看起來美觀且功能性更強。

Astra是一款熱門多功能的輕量級主題，主題執行速度快速，可拿來建立多種類型的網站。

為了方便接下來教學，建議先跟我一起安裝 Astra主題，有免費版可安裝。

更多可參考Astra主題入門、AstraPro進階教學。

WordPress佈景主題安裝 首先，前往WordPress後台>外觀>佈景主題，點選安裝佈景主題。

前往WordPress主題安裝 在搜尋欄位輸入Astra，我們安裝Astra提供的免費版本，安裝完成後請記得啟用，才會真正套用主題。

建立Blog：wordpress佈景主題安裝 主題啟用完成，前往網站前台看一下成果，看起來還不錯的WordPress主題，成功出現啦。

WordPress佈景主題安裝成功 使用Astra形象模板 Astra有提供多種現成模板，安裝模板匯入外掛就能直接使用，可節省網頁設計時間。

前往外觀>AstraOptions，點擊InstallImporterPlugins安裝模板匯入外掛。

或是安裝StarterTemplates外掛，這兩種方法都是一樣的。

安裝Astra起始樣板外掛 安裝並啟用模板外掛，會看到Astra支援多種頁面編輯器模板，選擇熱門的Elementor類型。

選擇頁面編輯器相關的模板 進入後，有多種免費模板可供安裝，但有些是進階版才能使用，更多AstraPro進階版教學。

搜尋DigitalAgency進行安裝。

（站長可選擇合適且喜歡的模板，也可以選擇跟我一樣的模板，繼續學習，後續都能再做更換）。

官網架設：安裝digitalagency樣板 這邊可簡單預覽樣式，點選下面的ImportCompleteSite完整匯入。

點選完整內容安裝 這邊用預設值即可，Astra會自動幫你安裝相關外掛和頁面內容，點擊Import就開始安裝。

備註：DeletePreviouslyImportedSite這是用來刪除先前匯入的樣板內容（包含文章、頁面），如果之後想更換樣板，可把這個勾選再進行安裝。

選擇匯入種類 安裝完成後，前往網站前台就會看到成果囉。

恭喜你，這樣架設網站速度快多了。

Astra主題樣板匯入完成囉 接下來呢，要做的就是把它改成我們想要的樣子，繼續學習吧。

8.更改網站頁首Header 有關於網站頁首的設計，Astra有開發很好用的HeaderBuilder頁首編輯器，可用它來處理大部分的頁首設計＋選單功能。

這章節，會用到這個工具編輯頁首，主要為更改網站Logo、網站選單，我會分步驟教學，幫助大家上手。

Step1：更換網站Logo 在會員登入狀態，點選WordPress網站上方的自訂。

點選上方的自訂按鈕 接著，會進入WordPress的視覺化編輯器，點選Logo旁邊的筆圖示就可修改頁首，然後更換自己的Logo。

也可針對不同裝置調整寬度＋瀏覽，完成後點發佈，這樣網站Logo就更換完成囉。

網頁設計：Astra調整網站Logo 小提醒：Astra有分為2種頁首類型，分別是原頁首（PrimaryHeader）＆透明頁首（TransparentHeader）。

如果發現修改某些頁首選項但都無反應，那就切換到另一個類型調整看看，應該就能順利修改成功了：） 然後，可以把選單名稱翻譯為中文，方便訪客閱讀瀏覽。

前往WordPress後台的頁面>全部頁面，在頁面下方點快速編輯。

WordPress點擊快速編輯功能 把「標題」翻譯為英文，至於「代稱」是頁面ID，會用這個名稱當作網址，建議填寫英文。

舉例：如果網址路徑想設定為https://frankknow.com/about，這裡只需輸入about即可，完成點更新。

更改WordPress頁面標題 其他頁面也用一樣方式修改，選單名稱會自動抓取這裡的頁面標題。

名稱修改完成後，可以參考WordPress選單，進行欄位順序調整。

前往網站前台看一下成果，看起來更完整了：） 選單標題更改成功 如果標題還是英文的話，可前往WordPress後台的外觀>選單，直接把選單改成中文就行了。

9.新增文章列表頁面＆側邊欄設定 這章節，我們來新增文章列表頁面，這頁面功用是將網站上的所有文章，都會在這裡顯示出現。

我主要拆成4步驟，完成後在網站主選單上就會看到「文章列表」選單，此頁面也有側邊欄佈局。

Step1：新增頁面 前往WordPress後台的頁面>新增頁面，任意輸入頁面標題，頁面內容可以空白，因為之後會被取代成一系列的文章。

設定網址連結、封面等..，完成後點發佈。

更多的WordPress新增頁面學習。

新增文章列表頁面 Step2：閱讀設定 前往設定>閱讀，把「文章頁面」設定成剛剛新增的「文章列表」頁面。

下面「資訊提供中的文章顯示方式」改為「內容摘要」避免頁面過長，完成後儲存。

WordPress閱讀設定 Step3：放入選單 設定完成的文章列表頁面，我們需把它放入選單中，WordPress網站前台才看得到。

前往外觀>選單，選單順序可拖曳排序也可排父子關係，完成後儲存。

更多WordPress選單教學參考。

WordPress網站選單調整 Step4：設定網站側邊欄（Sidebar） 套用的這個Astra沒有開啟側邊欄，我們來調整一下。

前往外觀>AstraOptions，點選SidebarOptions設定。

可參考Astra主題入門。

官網架設：編輯網站側邊欄 把DefaultLayout預設佈局改為RightSidebar右側邊欄。

Pages（單一頁面）調為NoSidebar。

BlogPosts（單一文章）和Archives（文章列表）調為Default預設，然後儲存即可。

官網設計：調整網站側邊欄佈局 備註：如果文章列表頁面的Logo需更換，點選上圖Logo旁的筆圖示，上傳更換即可。

這樣一來，文章列表和單一文章都有側邊欄了，WordPress頁面也順便調成無側邊欄模式（可全版設計），變得更好看了。

最後前往WordPress前台看一下成果。

Great！文章列表頁順利出現在選單上了，點擊進去也看得到文章。

文章列表頁面新增完成 如果點擊文章列表，但沒內容沒關係，可能是你的網站目前還沒有文章，下一章節會教大家如何新增文章。

10.新增第一篇文章 這章節實際寫一篇文章，讓網站多增加一些文章介紹，這有助於讓訪客更認識形象品牌，且能加強信任感。

首先，前往文章>新增文章。

在WordPress平台裡，文章和頁面是不同形式，可參考文章頁面差別。

WordPress預設是使用自訂的Gutenberg編輯器，進入後點左上角的加號，就可新增不同的區塊功能。

像是新增圖片影片、段落標題、清單列表、網站按鈕等..，可自由的編寫個人或公司文章。

新增第一篇文章 寫WordPress文章的過程中，可隨時點右上角的儲存草稿，保存目前的文章資料。

文章正式發佈前，我們會設定網址路徑、文章分類＆標籤、精選圖片（網站封面）、是否開啟留言等..，完成後點發佈上線。

可參考如何新增WordPress文章有完整教學。

前往網站前台，就會看到文章順利出現囉：） 形象網站設計：第一篇文章建立完成 備註：有關於「文章」不建議使用Elementor頁面編輯器編輯，因為WordPress預設編輯器來寫文章就很夠用了。

至於「頁面」再用Elementor編輯會比較適合。

11.網站分類＆標籤 WordPress有完整的網站分類和標籤功能，方便你統整文章和維護更新，且有助於訪客搜尋（下面僅示範教學，實際依照自己需求新增即可）。

WordPress文章分類 前往WordPress後台的文章>分類，這邊可新增多個文章分類。

更多分類排序功能。

備註：「代碼」是分類網址的設定（建議英文），文章分類可設定父子階層。

新增WordPress文章分類 可對現有的分類進行編輯，或是點快速編輯可直接修改重點。

WordPress分類編輯＆刪除 文章分類也可放入選單中，參考WordPress選單學習更多。

WordPress文章標籤 前往WordPress後台的文章>標籤，這邊也可新增多個文章標籤。

WordPress標籤編輯＆刪除 以上是簡單的WordPress分類和標籤教學，這有助於文章歸類和訪客搜尋。

12.新增＆編輯網站頁面 建置品牌形象網站，可能會想自行新增、編輯網站頁面，豐富整個網頁設計，這章節教大家如何做。

使用Elementor頁面編輯器（更多Elementor入門教學） 一開始安裝Astra模板時，Astra有自動幫我們安裝Elementor外掛，也新增幾個使用Elementor編輯器製作的頁面。

在新增頁面中，點擊上方的按鈕就可改用Elementor編輯頁面。

使用Elememtor頁面編輯器，編輯頁面 然後會看到Elementor的視覺化設計面板，免費版有提供許多功能可使用，用拖拉的方式就可以製作頁面，真的非常方便。

Elememtor頁面編輯器，設計面板 以上就是新增＆編輯頁面的簡單介紹，可自行新增網站頁面，或從現有的頁面做修改。

還有一種前往Elementor頁面編輯器比較快的方法，就是前往你想修改的頁面，點選上方的「使用Elementor編輯」，就能直接編輯指定頁面囉。

使用Elementor頁面編輯器 如何管理全部的WordPress頁面？ 至於如何完整管理全部的WordPress頁面。

前往頁面>全部頁面，這裡就是目前所有的頁面清單，你可以自由的編輯管理，而有Elementor標記的就代表是使用Elementor製作的頁面。

WordPress頁面管理列表 小提醒：已經使用Elementor編輯器設計的頁面，會建議就繼續使用，不要再改回到WordPress預設編輯器了，不然排版可能會亂掉。

使用WordPress預設的區塊編輯器（Gutenberg） Gutenberg區塊編輯器是WordPress系統預設的，如果沒安裝像Elementor之類的頁面編輯器，也能使用它設計頁面，只是功能比較少一點。

前往頁面>新增頁面，就可用WordPress區塊編輯器製作頁面，一樣點選左上角加號，就有多個區塊功能可使用。

詳細可參考WordPress新增頁面，有完整頁面教學。

使用WordPress區塊編輯器新增頁面 恭喜你，以上已經教會你大致上的WordPress頁面設計概念了。

接下來，你可用現有的頁面修改會比較快，然後新增或刪除多餘的頁面，就能完整你的官網架設囉：） 13.網頁區塊＋小工具設定 通常一個網站設計，都會有側邊欄的存在，可以多提供訪客一些功能使用。

WordPress預設就有許多小工具可使用，如果搭配不同的網站主題或外掛，可能會幫小工具增加額外功能。

WordPress5.8版本以後，進化為全站式小工具，可參考 WordPress新版小工具 繼續學習，如果想還原到舊版小工具介面，可安裝 ClassicWidgets 外掛處理。

這章節，將會用舊版小工具的介面，做為示範教學。

前往外觀>小工具，這裡示範新增搜尋、分類、近期文章，這3個小工具。

找到搜尋工具，選取放置在MainSidebar（主側邊欄），點擊新增小工具，其他功能依此類推。

備註：也可以用拖放方式，直接把工具拉到欄位中唷。

使用WordPress小工具，新增搜尋功能 完成後，我們會看到小工具都進到MainSidebar主側邊欄了。

這裡還會看到有多個欄位，像是Header（頁首）、FooterBar（頁尾底端）、FooterWidget（頁尾）等..，這是網站的其他欄位，如果有需要也能在裡面放工具。

WordPress側邊欄工具新增完成 最後，前往WordPress前台看成果，會發現側邊欄出現了剛設定的功能囉！太好了！ WordPress前台側邊欄工具顯示 有關更多的WordPress後台功能操作，也可參考WordPress後台教學學習。

備註：由於我們剛有在Astra做設定，只有在文章列表和單一文章，才會看得到側邊欄唷。

14.更改網站頁尾Footer 有關於網站頁尾的設計，可以使用Astra的FooterBuilder頁尾編輯器，能處理大部分的頁尾佈局＋功能設定。

由於Astra主題預設頁尾裡面，會有不需要的廣告標語，那要如何做更改呢？ 首先，前往網站前台的任一頁面，點選上方的自訂。

點選WordPress前台上方的自訂功能 接著，會進入WordPress的視覺化編輯器，往下滑到最底點擊筆的圖示，進行頁尾編輯。

（依此類推，也可點擊其他區塊進行編輯） 然後在FooterBuilder（頁尾編輯器）中，找到相對應的欄位修改，完成後發佈即可。

使用WordPress視覺編輯器，修改頁尾Footer 以上就是WordPress網站頁尾的設定分享囉。

15.WordPress外掛安裝＋管理 WordPress是完全開源軟體，任一個軟體工程師皆可在上面開發功能，所以讓WordPress生態圈非常豐富（有高達5w個可用外掛），可以幫助你擴充網站功能。

前往外掛>安裝外掛，可選擇喜歡的外掛安裝，有確定目標可善用搜尋安裝。

如果不知道如何選擇，我在WordPress最佳外掛推薦，有整理可幫你節省時間。

WordPress外掛搜尋＆安裝 對於新手來說，會先建議安裝WordPress基礎外掛即可，然後同一種類型裝一款即可，還有外掛不是越裝越多就好，需考量到網站效能。

多種WordPress基礎外掛（僅列舉部分） Akismet：垃圾留言防護外掛。

更多Akismet外掛教學。

Jetpack：官方綜合型外掛，範圍涵蓋安全性、備份、速度優化、工具強化..。

RankMath：優質SEO優化外掛，可參考RankMath教學。

WPForms：優質表單設計外掛。

有關於WordPress外掛的管理設定，可前往外掛>已安裝外掛，這邊可啟用或停用外掛，或是刪除不需要的外掛。

WordPress外掛管理面板 通常網站主隨著經營時間，網站外掛都會越來越多（因為可能有更多網站需求）。

所以一開始安裝必要外掛就好，然後暫時用不到外掛可以先停用，完全用不到的就直接刪除。

16.Astra主題＋Elementor外掛組合 Astra主題＆Elementor外掛，是很多WordPress玩家愛用的一種組合，它有很多優點像是： 新手容易上手有現成模板，不用從零開始設計網站客製化程度非常的高都有免費版可以用因為都是WordPress熱門軟件，所以有很多週邊外掛可搭配Astra主題快速，Elementor會有點吃主機效能，兩者剛好呈現一個平衡 這也是為什麼本文會用這個組合，做一個搭配教學。

但如果你對這個組合不感興趣，最佳主題推薦、電商主題推薦、優質頁面編輯器，這幾篇文章裡面，也有不同的選擇可以慢慢選。

下面我們對Astra＋Elementor更進一步認識，可讓你更掌握自己的網站功能。

Astra主題介紹 Astra是個輕量快速的多功能主題，有許多可設定功能（歡迎參考 Astra主題入門，或下面影片）。

前往外觀>AstraOptions，依照你喜愛的風格調整即可，如下圖。

Astra全站功能設定 如果體驗Astra免費版後，有更多的架站需求，需要用到Astra進階版的讀者們。

有關於Astra進階版，我寫了多篇使用教學，方便你認識和上手Astra進階功能，如下。

AstraPro：Astra進階版方案，強化功能詳細教學，可參考Astra進階教學。

AstraProWooCommerce：WooCommerce電商功能強化，可參考AstraProWooCommerce教學。

WPPortfolio：製作網站作品集、展示頁面、服務案例等..專用外掛，可參考WPPortfolio教學。

UltimateAddonsforElementor：在Elementor上新增40+個元素功能、100+網站模板、200+區塊模板，可參考UAE教學。

PremiumStarterTemplates：有更多Astra進階模板可使用，可參考PremiumStarterTemplates教學。

如果都看完，相信你對Astra主題的整體掌握度，大概也就如魚得水了吧，加油唷：） Elementor外掛介紹 Elementor是全球知名的頁面編輯器，有超過500w次下載量，提供視覺化的編輯模式，就算不懂程式也能網頁設計。

如果需設計網站頁面，這會是比較推薦的方法，因為功能比較多且完整，而且可以直接套模板下去用，就不需重新開始製作。

更多教學，歡迎參考Elementor入門教學、ElementorPro進階教學。

17.開始網站行銷（SEO優化） 官網架設完成後，需進行網路行銷 完成網站架設後，我們可以開始進行網路行銷囉！ 要進行網站行銷，就需要先了解SEO是什麼，讓自己在搜尋引擎結果頁面（SERP）展露頭角，就有機會提升網站能見度。

搜尋引擎每日需處理龐大的網站資料，如果主動提交自己的網站地圖（又稱Sitemap），可有效加速網站被搜尋引擎收錄的速度，有效提升WordPressSEO分數。

Google、Bing是台灣目前兩大搜尋引擎，Google可把Sitemap提交到GoogleSearchConsole，Bing則是提交到Bing WebmasterTool。

當網站被收錄到搜尋結果，網站才可以被訪客搜尋到，這時就會開始有網站流量進入。

有關於網站流量的分析統計，幾乎都會使用GoogleAnalytics軟體，需要把GA追蹤碼嵌入到WordPress網站，Google才會幫你統計分析。

通常網站剛開始，把這兩個設定好就可以了。

最後，我們可以安裝優質WordPressSEO外掛，搭配關鍵字行銷工具，幫助站長們更有效的規劃SEO行銷策略。

常見問題 自架網站需要準備什麼？網站能正常運作，就需有「個人網域」＋「虛擬主機」，這是基本配備。

這也是每個網站主都需負擔的小投資，沒有例外。

差別是，跟著我的架站教學，你可用最少的預算，建置你的網站：）網域如何取名呢？網域是什麼？「網域」是網站組成的第一步，就像家的門牌一樣，讓人可以順利找到你的網站。

網域取名時，注重幾個簡單原則即可，像是簡單好記、品牌名稱、與服務or產品有關、去除www、.com優先、勿用中文。

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

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

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

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

它可完成多種網頁設計，如：部落格架設、個人品牌或公司企業官網、購物網站架設 等..有推薦的WordPress優質虛擬主機嗎？Bluehost 是地球最大的虛擬主機公司之一，全球管理數百萬個網站並持續增加中。

可參考 Bluehost心得評價，了解更多。

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

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

可參考Bluehost教學，有完整教學。

如果對速度有一定程度的要求，則可以參考其他款進階主機，像是Cloudways（VPS）或是A2Hosting（中高階方案）。

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

如果你沒有時間自己架站，或是想委託專人服務，那可以參考我們的網站建置服務。

我最近也開啟了YouTube頻道，裡面有些影片教學，你也能搭配Blog一起學習，應該會來的更加順手（歡迎訂閱我＋開啟小鈴鐺，可收到第一手影片教學通知）。

當然，如果怕問題描述不清楚，也可以加入WordPress教學時光屋–犬哥網站，我同步也會在社團中幫忙解惑。

希望這些對你有所幫助，祝架站順利啦。

關於作者犬哥我是站長犬哥，長期關注：WordPress網站架設、WordPress後台教學、WordPress佈景主題、WordPress外掛、網路行銷等..：） 22thoughtson“官網架設：WordPress形象網站設計＋網頁製作（打造公司品牌）” 站長你好，你的教學文章對於身於中小企業的我來說非常棒 已一個只學過古早年代的網頁設計者來說，是時候該動手更新古早版公司網頁了 一直觀望著各種玲瑯滿目的網頁設計教學 又怕真的花了錢卻學到不是自己所想要的內容 你的教學網頁真的是太棒了 想請教一個問題，是否有教學下面這種情況 我已有買了網域也有買主機空間(公司古早網頁運作中繳費過的租約都還很長) 想大改版網站勢必要花一點時間設計與製作 是否有方法可以讓我先在平時用的主機上設計製作後 才用備份的外掛轉至外購的網站空間的方法? 再次非常感謝你的大方教學 Reply Hi鄭小姐： 謝謝你的鼓勵，我會繼續加油的：） 至於你提的問題，如果想在貴司原來的主機上先安裝WordPress， 首先可先確認主機是否有WordPress一鍵安裝功能，這樣的方式是最簡單。

如果沒有的話，就需自行手動安裝，可先至WordPress.org下載安裝包， 然後修改wp-config.php檔案的網站名稱、帳號、密碼、資料庫等資訊， 最後再上傳至主機跑安裝流程， 因為目前網站教學還沒出，所以大概也只能先教學到這， 希望有幫助到你唷：） Reply 小犬站長您好, 我從youtube按您的教學後， 由於想重新架站使用了WPreset清除重製， 現在卻無法登入WordPress後台， 且系統顯示沒有此註冊者與信箱… 請問是否有方法解決? Reply 嗨，因為你的網站感覺被影響比較大，既然要用到WPReset做清除了，會建議就直接重新架設一個網站會比較快，也省掉一些不必要的問題～ Reply 小犬站長您好： 非常感謝您用心的教學，對於新手註冊與架站幫助很大。

目前我嘗試選擇一款免費的佈景主題練習測試，但在下一次要修改時卻無法登入WordPress後台，顯示出三行訊息： 1.Notice:Undefinedindex:…… 2.Warning:Cannotmodifyheaderinformation-……phponline1340 3.Warning:Cannotmodifyheaderinformation-……phponline1343 請問要如何解決登入，從哪個步驟執行？ 或是重新製作主題(我目前還在測試版型中)？要從哪個步驟取消此佈景主題並重新設定呢？ 不知是否需要提供更詳細的資訊（可私訊您內容），也非常感謝您的指導！ Reply 嗨，來社團發問吧！有圖跟詳細資訊也比較好協助你處理～ WordPress社團：小犬社團 Reply 小犬你好, 你的教學非常清楚,對我有很大的幫助!感激~ 能不能麻煩請教,我剛開始使用WordPress設計我們的企業網站,但由於是創業初期只想要一個LandingPage,所以想把其他有關產品頁面都先隱藏,但是我找了很久還是不知道該怎麼隱藏其他首頁上的選單呢?(目前只想保留About&Contact) 很謝謝你的幫助~ Reply 嗨，Milly， 可到外觀>選單頁面，將暫時不想顯示的頁面移除即可，想新增回來時再添加頁面到選單就好囉。

具體操作可參考：WordPress選單教學。

Reply 謝謝您的即時回復~ 再請教一下,如果說我的產品頁面已經編輯設計好了,只是暫時不想上線，那我整個移除之後等到我想要正式上線時不就要再重做一個產品頁嗎?因為我知道在wix可以將其中不想公開頁面暫時隱藏,wordpress是不是沒有這個功能呢? 再次謝謝您的回覆與時間~ Reply 在主選單上的移除不會影響到頁面唷～ 頁面跟選單在WordPress是分開的兩個系統。

新增完頁面，在選單上進行上線，或是在側邊欄放入小工具，訪客才有辦法在前台網站找到造訪頁面的路徑。

或者是到頁面面板，將暫時不想上線的頁面狀態更改回草稿，前台就不會看見該頁面囉。

具體說明也可以參考：WordPress後台教學的頁面管理章節～ Reply 請教犬哥，我的網站打開的首頁不是我套用的主題的首頁，應該怎樣轉過去？ Reply 嗨，Brian， 請問你有在自訂>首頁設定指派首頁嗎？ 如果有指派，那可能主題/外掛衝突，建議你安裝HealthCheck&Troubleshooting外掛來進行檢查，排除衝突唷：） Reply 犬哥您好，這幾天拜讀了您4個小時的youtube教學，受益良多也成功建立了基礎網站，非常謝謝您的無私教學。

這邊有個小問題不知道是否能向您諮詢一下方向該往哪邊嘗試。

目前的訂單狀態基本上是根據整張訂單去顯示，似乎無法根據訂單中的每個項目去給予狀態。

此需求因為賣家網站的營運方式比較偏向客製化訂購，所以可能會有部分品項先準備好就會變為可配貨狀態，但部分品項可能仍在訂製中。

主要是想讓客戶可以自己在訂單狀態中就查詢到哪些已經可配貨，哪些尚未能夠出貨，如此一來若客戶想要先拿到部分款式可主動聯絡賣家；另一方面有時候客訂過程等太久，客人常常會想知道哪些先到了，就會一直私訊詢問，相信若能做到此功能也能減少此部分人工業務。

目前研究了是否有外掛可以讓項目各自出現狀態欄位，但好像沒有，只有教學是如何編輯狀態有哪些。

另外參考有些商家做法是在訂單裡的明細，每個項目前面多一個checkbox，此一來賣家可於後台去勾選哪些已屬於可配貨狀態，讓買家根據checkbox去判斷。

不知道這部分有沒有教學可以參考或您知道哪種外掛可實現，感謝您 Reply 嗨，Arthur， 這似乎是比較客製化的功能，這邊我找出一款類似功能外掛，希望能達到你想要的效果，可以參考看看： WooCommerceCustomOrderStatus外掛 Reply 犬哥老師好： 觀看您的網站與youtube影片學習到許多架站的實用內容，在此想先感謝您與您的團隊提供這麼多乾貨：） 這邊有個問題想請教犬哥：已執行到此篇文章第七步時， 不論是搜尋佈景主題或直接安裝Astra的佈景主題，都一直出現 “Warning:Anunexpectederroroccurred.SomethingmaybewrongwithWordPress.org” 「發生未預期的錯誤，應該是WordPress.org或這個網站伺服器的組態發生問題。

假如持續發生相同錯誤，請前往技術支援論壇尋求協助。

」 有安裝WPDebugging的插件，沒有看到錯誤訊息， google一下發現有人推薦安裝插件”SaFlyCurlPatch”來解決，但試著安裝依然無法解決QQ 想請問犬哥是否有解法能協助幫忙呢，非常感謝您的回答！ Reply 嗨，阿芷， 建議你直接詢問虛擬主機商，主題安裝的問題，或請他們協助你重新安裝WordPress試試看！ Reply 不好意思犬哥 謝謝你的教學！ 我的網站在登入情況下輸入網址是有辦法跑出頁面的 但我用無痕模式(未登入)的情況下卻出現 Thispagedoesn’tseemtoexist. Itlookslikethelinkpointingherewasfaulty.Maybetrysearching? 的訊息 請問該怎麼解決呢? bluehost那邊的commingsoonpage也關掉了 謝謝 Reply 嗨，柏志， 可能是DNS指向還未生效，建議可暫待1～2天，如果還無法查詢到網域，可詢問Bluehost客服，以及你的網域商協助你進行處理唷！ Reply 謝謝犬哥無私的分享教學，在犬哥網站學習到很多，受益良多，會持續努力經營與關注犬哥 Reply 嗨，Wendy， 謝謝你的肯定跟鼓勵，我們會持續創作更好的教學，希望能持續給予好的知識技能給大家學習，互相教學相長：） Reply 犬哥，謝謝您的教學！！從您的視頻中，我知道了如何導入astra主題后，在企業網站中增加一個部落格及如何新增文章！ 但是按以上方法的部落格頁面，顯示的樣式跟我們想要的有點不同。

假如想要的部落格樣式，跟犬哥網站的部落格類似，新增文章后是一個方塊一個方塊那樣出現的，請問如何可以做得到？謝謝！！ Reply 嗨，wendy， 我們是使用Elementor「文章」區塊小工具來製作的唷！ Reply LeaveaCommentCancelReply發佈留言必須填寫的電子郵件地址不會公開。

必填欄位標示為*Typehere..Name* Email* Website Δ 我想要找.. 搜尋 訂閱犬哥社群 Youtube Facebook Instagram 文章分類 分類 所有文章 如何架設網站 優質主機 WordPress基礎教學 WooCommerce電商系列 SEO技巧＋網站行銷 優質主題系列 優質外掛系列 WordPress速度性能 WordPress安全性 網站備份＋搬家 最新WordPress教學通知 姓名（暱稱） 電子信箱（Email） Leavethisfieldemptyifyou'rehuman: FB問題解答社團 如何自架網站MenuToggle 建立Blog形象網站架設形象網站架設（Divi主題）電商網站架設銷售漏斗架設線上課程架設預約網站設計多種架站方法 優質主機MenuToggle Bluehost平價主機A2Hosting中階主機Cloudways進階主機各家主機完整比較 部落格服務內容MenuToggle WordPress網站服務形象網站建置購物網站建置客製網站設計快速套版架站 聯絡我 影片教學影片教學 Starttypingandpressentertosearch 搜尋… 回到頂端