大家好,我是 Mack,是《網站迷谷》的園丁打雜,有超過 15 年網站設計經驗,經營 WordPress 教學社團 3 年之後,收集了大量關於新手遇上自己架站會遇上的疑難和擔心之處,從【 WordPress 社群生態普查 】的統計數據之中,結合國外和國內的情況和差異,我花了數個月的時間,制作了這個系列的《免費自學架站課程》和教學,保證您能用最少的時間和成本,用極短的時間就能完成一個部落格或形象網站,只需要跟著我們的步驟來學習,任何人都有擁有自己滿意的小天地!
2 個初學者最擔心的問題和疑難
我真的可以自己建立網站?
新手很多時會懷疑自己的實力,這是正常和務實的做法,但隨著互聯網和各類建立網站技術的不斷更新和演化,從前新手很難跨過的難題和疑難,只要跟著我們【網站迷谷】超過 100 小時的免費影音教學,加上堅實的學習社團,只怕您沒有恆心完成,不存在無法完成的疑難。
相較市場上的教學,我們較傾向優先打好初學者的根基和基本功,但不致於會讓您感到教學的節奏很緩慢,每一個基礎的知識,您都能在將來實際應用出來,不會教授您用不到的技巧。
只要願意立定志向完成一個部落格或形象網站,沒有辦不到的事情。
我真的沒有太多錢和預算
為了解決這個問題,我們分析了數十家網站主機商,對他們的服務、技術和價錢盡行了評估,我們當然知道第一次建立網站的新手或中小企老闆,很擔心費用這個問題,您們的聲音我平常在社團常常都有留意。
我們的結論是推薦 Cloudways 主機代管服務 是最適合亞洲地區的新手用戶,我們本身也換過不少主機商,直到用上 Cloudways 終於可以放下心來。
高品質的技術支援 + 每月結算費用就是最適合第一次自架站的朋友,您每個月只要支付約 $10 美金主機費用,就能擁有高效能的網站,請相信我們多年的經驗,這是不二之選。
學習的過程是怎樣?重複以下 3 個過程直至網站完成
觀看教學影片
超過 100 小時的中文教學影片,涵蓋網站設計各個領域的需要,但您必須要有恆必去逐一學習,我們沒有速成的教學,請從基本功去著手,一步一步研習,您必定能成功建立自己的網站!
親手實作和練習
有時候教學影片可能要看數次才明白,不竟每個人的資質和領悟能力不同。但最重要是願意親手去練習和嚐試,這是成功的起步點,世界上是沒有不勞而獲,但努力必然有成果。
學習社團交流
遇到疑難和卡關?請不要灰心和難過,這是每個初學者必經之路,只要您擁有一顆願意和別人交流的心,在我們友善的學習社團您可以找到強而有力的協助和資源,快加入吧?
您今天種了的小樹苗,往後會長成您的《未來》
前期準備工作環境
電腦系統: | Window 或 Mac |
瀏覽器: | 推薦 Chrome 或 Firefox |
設計軟件: | 沒有限制 |
信用卡: | 購買網域和主機 |
E-mail: | 請使用常用的電郵帳號 |
時間: | 盡量找一天空閒或放假天 |
構思網站的初步資料
網站名稱: | 簡短和有義意的名稱【暫定】 |
網域名稱: | 例如 http://您的網域名稱.com |
網站的配色: | 沒有限制,不多於 3 色 |
有 Logo 嗎? | 暫時沒有也可以 |
基礎資料: | 關於我們和聯絡我們的文案 |
圖片素材: | 如果能預先準備,過程會比較順暢 |
傳統的 WordPress 教學
- 課程價錢由數百至數萬不等
- 文章教學(比較難吸收)
- 推薦主機昂貴:預付數年(總費 $270+ 美金)
- 主機功能受限和欠缺擴充性
- 私密學習社團(只限付費學生)
- 走馬看花式教學方法
- 市場上的導師品質良莠不齊
小樹苗的 WordPress 教學
- $0 學費(無限次重看教學)
- 影片教學(附繁體中文字幕)
- 推薦主機便宜 : 逐月支付(每月約 $10 美金)
- 主機功能彈性強和擴充性高,限制少
- 免費公開學習社團
- 重視基礎教育和研習
- 導師擁有 15 年網站設計經驗
關於 WordPress 的基礎觀念(非必讀)
為什麼 WordPress 是免費?
WordPress 週邊有哪些方面【是免費 】?
- 免費的子域名 Free subdomain
- WordPress 的核心程式更新 Updates for core file
- 免費的主機託管 Free Hosting(例如 wordpress.com )
- 免費外掛 / 免費 佈景主題的【更新 】
Updates of free plugins / themes - 免費佈景主題 Free themes <— 功能受到限制
- 免費外掛程式 Free plugins <— 功能受到限制
- 免費服務支援?嚴格來說是沒有的,開發商謹提供有限度的支援,
但您可以加入 中文語系的 WordPress – Facebook 社團列表,
大部分熱心的社團成員都願意無私分享和協助解決問題。
WordPress 週邊有哪些方面【不是免費 】?
- 網域 Domain
- 主機託管 Hosting
- 進階客戶服務支援 Premium support
- 進階外掛程式 / 佈景主題的更新
Updates of premium plugins / themes - 進階佈景主題 Premium themes
- 進階外掛程式 Premium plugins
- 客制化的服務 Customized services
WordPress 官方統計數據
WordPress.com 和 WordPress.org 的分別是什麼?如果以現在來說,差異已經變得模糊,我們是親兄弟,但我們本質上有一些區別
從宏觀上來看,WordPress 是可以持續良好的發展和增長,也許部分的數據沒有反映在報表上,例如有多少網站仍然使用落後的 WordPress 版本和將會可能面對的風險等等。由於一個網站的整體規劃包含多方多面的因素,例如資料庫的安全性和效能,都值得大家關注。
部分網站主機商仍未能協助用戶升級到更安全的 PHP 版本,有的可能基於成本和框架未能配合,例如沒有足夠的資訊告知用戶,使用過舊的 PHP 版本會可能得到什麼風險和危機。
每個地區都有大量積極本地化和翻譯工作者,為大量的佈景主題和外掛積極貢獻自己的專業,好讓大家都能使用各自在地的語言版本,這對推廣每個地區的 WordPress 都發揮重大的貢獻。
WordPress 有兩種?有什麼差異?
WordPress.com 和 WordPress.org 的分別是什麼?如果以現在來說,差異已經變得模糊,我們是親兄弟,但我們本質上有一些區別和差異,初學者很常把我們混淆,試著放開您的內心,了解我們的另一個世界?
WordPress.com 是免費的線上架站程式,簡單地說,如果您俱備使用社交媒體的能力,例如玩了 Facebook 數年,或微博、Twitter等等的平台。恭喜您,您已經能夠透過官方託管的 WordPress 建立您的第一個網站,這是最低門欖的建站工具,提供接近100%中文介面的設定環境和後台控制室。您並不需要俱備編寫程式的基礎,也不需要維護伺服務和防禦黑客攻擊等技巧,您只專注在內容創作及訪客交流等業務即可。
您正在觀看這系統的教學主要是使用 WordPress.org 的版本,在往後的日子您會更能發現兩者的差異,現階段只需要有一個觀念和認知即可。
WordPress.org
網域名稱結尾的 .com 出現與否代表不同服務,它有著關鍵的區別。當你的意思是指 WordPress.com 時,省略「.com」是不正確的,如同你要說「洗車」時省略「洗」這個字。兩者不一樣。
WordPress 是一個自由軟體專案,
WordPress 在 WordPress.org 生根發芽。
數以千計的志願者為其開發、翻譯、社群活動和許多其他方面做出貢獻。軟體本身以 GNU 通用公眾授權條款釋出,且賦予使用者四種自由。
WordPress.com
WordPress.com 是基於 WordPress 的服務,相信你已經猜到了,它就在 WordPress.com。
WordPress.com 是基於 WordPress 自由軟體的服務,由 Automattic Inc. 持有,一家總部設在舊金山的公司。Automattic 擁有數百名員工和合作廠商,其中一部分也為自由軟體 WordPress 做出貢獻。
WordPress.com 是軟體即服務(SAAS)
你無法下載 WordPress.com,就如同你也無法下載 Facebook。
豐富的中文教學資源和活躍社群
活躍的社群互動,是我們社區的一大特色,全球每個地區都有活躍的愛好者組織不同的社團,中文用戶市場當然也不例外。他們以不同的核心目標分類和合作,這也足證 WordPress 提供不同的可能性和商業合作的機遇,在整個生態鏈每個人也飾演不同的角色,並在各自的領域努力和發光常亮。
WordPress 是一個安全的建立網站工具
由於有大量來自全球的志工和開發團隊,不停尋找 WordPress 的漏洞和錯誤,並快速發佈到不同的社區,大家盡力都去解決問題,所以面對全球日溢嚴重的資安風險,WordPress 可以迅速應變和尋求協助。加上大量免費的資安防護外掛和第三方服務,那怕是預算有限的站長,也能確保有足夠的防禦能力。
在開始課程之前,有一個誠懇的小請求!
國外的教學市場很發達,原本是想把整個【 WordPress 教學:小樹苗成長課程 】放在收費的線上教學平台售賣,例如 Hahow 好學校 和 Udemy 線上課程,為了推動中文的 WordPress 市場,決定還是以免費的方式釋出教學,因為我本身有線下的教學收入,但實在無法支撐我們長遠的免費教學和擴充的單元。
Cloudways
網站迷谷現在使用的主機商就是 Cloudways,使用了 3 年,各項服務、效能和強大的擴充性,讓我們可以放心長期定居在那裡,不會想隨時搬家的感覺,誠意推薦給第一次自學 WordPress 建立網站的朋友們。
Namecheap
我們推薦 Namecheap 的原因是他們的介面、使用難度和價錢是最合理,非常適合第一次自架站的朋友,您可以從我們下方的購買域名教學中體驗這個易用性高的服務供應商,這也是他們聞名海外的原因之一。
溫馨提醒
台灣加油!香港加油!
【教學 #01】為什麼我們推薦使用 Cloudways 作為您的主機?
Cloudways 是什麼? 提供一個管理介面,讓不懂程式的普通網網站站長,可以接觸更高階的【主機】,大部分新手都會使用【虛擬主機】作為架設網站的起步,這點非常正確,但隨著時間的過去,可能 2 年後就會發覺主機的資源無法再負擔高的流量,例如如果每日流量有 300 至 600 瀏覽次數,主機商可能會認為您使用過多資源,而要求您升級較貴的方案。
如果您舊的主機方案差不多到期,不再考慮續約,Cloudways 這個管理介面工具是非常適合您的,您將能夠掌握大部分主機的控制權,讓您的網站往更遠的未來前進和發展,我到現在都一直使用 Cloudways,誠意推薦!
前往建立免費帳戶
在申請時,如果有要求您是否擁有( 優惠碼 Promo Code )
請輸入我們下方的優惠碼,您可以享有首 2 個月 7折 的專屬優惠
【 WPVALLEY 】
替您管理複雜的 VPS 主機 優點:
您不需要懂程式 您不需要懂伺服器 您不需要懂安裝 WordPress 您不需要懂安裝 SSL 您不需要懂如何備份(Backup) 您不需要懂如何使用 CDN 您不需要懂如何使用快取功能 主機的位置可以選擇最接近您的客戶 主機效能可以隨時調整。
管理 VPS / 雲端主機是工程師才可以嗎?
絕對不是!透過 Cloudways 的管理工具,您也可以自己來管理自己的主機。實際操作很快就可以適應,和平常操作手機和電腦差不多,問題是需要時間適應。
Cloudways 費用很貴嗎?
Cloudways 會收取替您管理(您購買了的任意一台主機),簡單理解就是【管理費】。 這個管理費包含替您優化主機的效能和最佳化關於網站的配置,您什麼都不用做,他們背後的工程師會為您代勞,您也可以隨時透過線上的客服查詢您主機的狀況。
Cloudways 的付款方式是怎樣?
這個是他們的優勢,您不需要一次過支付 1 / 2 / 3 年的主機費用,例如一般的虛擬主機會要求新手購買 1 年(12 個月)的方案,您就必須付清所有主機費才可以開始使用,這對初次架站的新手,構成很大的經濟負擔。
Cloudways 是採用按(小時計費)
您用多少就付多少,例如您用 10 小時,就只需要支付 10 小時的收費,每一個月結帳一次,是不是很心動呢? 以最便宜的 $12 美金方案就可以開始您的 WordPress 網站,像手機電話費,只需要每月準時付費即可。
Cloudways 有沒有免費試用?
他們提供 3 天的試用 試用完後會詢問您是否使用他們的服務?如果是就繼續我們以下影片的流程,如果不想再用 Cloudways 就可以選擇取消續約,不需任何理由。
【教學 #02】從 Namecheap 域名商購買(網域 Domain)
選擇自己的網域(Domain)
- 考慮名稱的【識別性】和【獨特性】
- 是否容易記憶?不適宜過長和複雜
- 考慮價錢
- 建議用 .com .net 或 .org 比較正式,但沒有強制性
- 買 1年、5年還是 10 年?
如果保管網域(Domain)
- 需要設定 Whois 保護您的個人資料嗎?
- 需要設定自動續約嗎?
- 需要設定二步認證登入嗎?
- 確保填入的個人資料、地址是真實的
名稱伺服器(英語:Name Server)?
在網際網路中是指提供域名服務協定的程式或伺服器。它可以將「人類可辨識」的識別碼,對映為系統內部通常為數字形式的標識碼。域名系統(DNS)伺服器是最著名的名稱伺服器:域名是網際網路兩大主要命名空間之一。
網域名稱系統(英語:Domain Name System,縮寫:DNS)是網際網路的一項服務。它作為將域名和IP位址相互對映的一個分散式資料庫,能夠使人更方便地存取網際網路。
將難以記憶的 IP : 191.255.255.255 ——-> 您的網域 https://yourdomain.com
【教學 #03】建立您的 Cloudways 免費帳號
前往建立免費帳戶
在申請時,如果有要求您是否擁有( 優惠碼 Promo Code )
請輸入我們下方的優惠碼,您可以享有首 2 個月 7折 的專屬優惠
【 WPVALLEY 】
建立您的 Cloudways【3 天】 免費帳號
- 提交申請試用的表格
- 向客服人員領取免費試用資格
- 通過後要完成一系列的驗證程序
- 手機短訊驗證
- 電子郵件驗證
- 完成建立帳戶的所有程序
和客戶服務申請可複制貼上以下英文句子
Hello,
I would like try free Trial, thank you.
意思是:
您好,我有興趣申請使用免費 3 天的試用 Cloudways 服務,謝謝
如果遇上申請的任何困難?請聯絡我協助
【教學 #04】建立您的 Cloudways 主機(Hosting)
建立您的 Cloudways 主機(Hosting)
建立您的專案名稱(Project Name)
- 通常是您的網站英文縮寫
您架設主機的目的?
- 我們選擇【WordPress 5.3】即可
選擇託管的主機商、方案和主機位置
- DigitalOcean【推薦這家主機商】,價錢便宜和效能不錯
- Linode
- Vultr
- Amazon Cloud
- Google Cloud
地理位置選擇推薦:
- 新加坡
- 日本東京
【教學 #05】建立您的 WordPress 應用程式
新增一個 WordPress 的應用程式
- 選擇建立一個 WordPress 5.3 網站
如果是架設電子商務,請選擇 WordPress WooCommerce - 設定基礎 WordPress 的選項
- 串接網域(Domain)的 DNS 設定
- 新增免費的 SSL 加密證書
【教學 #06】初步調整 Cloudways 的主機設定
Breeze 快取外掛應用
Breeze 由 Cloudways 團隊所開發,是個輕巧、功能強大且方便使用的 WordPress 快取外掛。它提供了各種設定來為不同層級的 WordPress 效能進行最佳化,且同時適用於 WordPress、WooCommerce 及多站網路。
Breeze 在以下幾個方面表現優異:
- 效能:Breeze 除了能改進網站速度及主機資源最佳化外,還包含了檔案層級快取系統、資料庫清理、最小化、支援 Varnish 快取及簡化 CDN 整合設定等功能。
- 便利:在 WordPress 網站中,直接安裝及設定 Breeze 相當容易。設定 Breeze 相當簡單,且按照預設值便能在多數的環境中運作良好。建議設定應該能在全部 WordPress 網站上無痕般的運作。
- 簡單:Breeze 設計成要讓全部使用者都能輕鬆上手。僅需安裝並啟用這個外掛,便能立刻體驗到絕佳的效果。
Breeze 內建 Varnish 支援是它成為表現優異的 WordPress 快取外掛的主要原因。如果你的主機並未安裝 Varnish,Breeze 依舊能透過內部快取機制,大幅提昇 WordPress 網站的效能。
StackPath – CDN 基礎測試與設定
CDN 的服務供應商有很多,每家都有各自的支持者,本身我也非這領域的專家,算是「間接」地使用 StackPath 的 CDN 服務,感覺上沒有什麼不妥,價錢還是可以接受的水平。由於我本身是 Cloudways 的用戶和粉絲,除了使用他們的主機控制面板,還有他們的快取外掛 Breeze,當然還有他們的 CloudwaysCDN,所以他們的工程師協助我維護網站時,是非常得心應手的,因為接近 100% 都是他們自家的服務。但 Cloudways 這間公司通常只是提供操作和管理的支援,本身不是該服務的供應商,在最近一次和工程師的對話中才得知他們是使用 StackPath 的 CDN 服務。
【教學 #07】調整 WordPress 的基本設定
調整 WordPress 的基本設定
- 改變【網站的名稱 Site Name】和標語
- 改變網站後台的【語言 Language】
- 改變網站後台的【時區 Time Zone】
- 改變網址的【永久連結 Permalink】結構
- 勾選不允許搜尋引擎索引
100 個安裝 WordPress 後的小技巧
新手千辛萬苦從無到有,建立了一個標準的初步WordPress 網站,雖然您現在的網站什麼都沒有,但不竟這是一個好的開始,在您慶祝自己的網站誕生和小休一段時間後。您需要開始思考網站的下一步如何走下去,我們下方會整理一些小提醒供您參考,確保您不會錯過一些重要的細節和小心思!
【教學 #08】如何在一個主機之上,建立多個 WordPress 網站
優點:
- 省錢,買一個主機,建立多個不同品牌 / 商號的網站
- Cloudways 主機允許建立【無限】個 WordPress 網站
- 每個 WordPress 網站【共用】相同主機的資源,減少浪費
- 可以分享給經濟有困難的朋友使用
缺點:
- 如果主機無法正常運作,所有網站都會受到連累影響
- 如果單一網站佔用過多資源,其他網站會變得很慢
- 如果主機被黑客入侵,所有網站都受到影響
- 主機可以要使用更高級的方案,才能承受多個網站
恭喜您,完成了基礎的主機設定和調整
先休息一下吧!去社團分享您的經驗?
準備開始學習建立一個標準的部落格網站
這個基礎課程是【必修】的,不是推薦您使用這個佈景主題,而是希望您在進入【挑選佈景主題】之前,先有一個根基知識,您可能會感到疑惑,在其他地方學習 WordPress 看到是有一個推薦的佈景主題,然後匯入網站的【範本 Demo】,小修小改去完成第一個網站。但如果按這種學習方式,您的武術基本功是【不合格】的,練武還是從最基礎開始練起,請相信我,花掉這些基本功的時間是絕不會白費,在往後無論建立任何類型的網站,這些【基礎能力】都能應用和協助您。
不要使用【頁面編輯器】作起步
市場上有很多 WordPress 教學是使 Elementor 編輯器 作為起首式,然後就是套用 Elementor 的套版,雖然可以很快速建立一些頁面和內容,但新向對基礎的觀念並未打穩的情況下,這可能會對 WordPress 建站的觀念有錯誤的理解。我們較傾向把 Elementor 作為獨立的課程,而非必修課程。
不要匯入【Demo 範本】作起步
如果以匯入【Demo 範本】作為網站的開始,會讓新手錯過很多基礎的學習機會,有時得不償失。也會讓新手有一個錯覺,認為自己很強大,其實只是幻覺,所以不推薦用 Demo 作為起步點,總有一天您會感激自己從頭開起。
從較【空白】的主題開始
從空空如也的白紙開始,您會走得比較辛苦,但請相信我們,您的基礎功將會反映在將來的操作之上,您不會白白花費時間的。大部分資深前輩都喜歡簡單的佈景主題,反倒如果您剛開始,選擇了包山包海的肥大佈景主題,才是最壞的開始。
把基礎能力優先點滿
基礎、基礎,還是基礎,請在了解更多 WordPress 領域之前,先把您的基礎能力優先點滿,而非走馬看花地選擇性學習。現階段您無法理解這個原因,但慢慢您們發現自己的基礎能力會帶您走到很遠的地方。
【基礎能力教學 #01】為什麼推薦 GeneratePress 佈景主題
GeneratePress 佈景主題非常適合新手起步
第一次學習使用 WordPress 建立網站,您不需要太多功能和複雜的能力的主題,這些都不是太重要的,您最重要盡快了解 WordPress 的整個架構和運作原理,在您清楚了自己的需要之後,您隨時可以更換較強的佈景主題。
- 世界上最快的 WordPress 佈景主題之一
- 檔案極小,只有 30 kb,非常輕盈
- SEO 效果極佳,適合文字部落格創作者
- 功能簡單易用,沒有浮誇的功能和配置
- 提供版形(Demo)匯入
【基礎能力教學 #02】如何安裝和移除 GeneratePress 佈景主題
- 進入 WordPress 網站後台
- 在方選單 →【外觀】→【安裝佈景主題】
- 在搜尋欄位輸入【GeneratePress】
- 在佈景主題按下【安裝】
- 在佈景主題按下【啟用】
- 完成
【基礎能力教學 #03】調整 Logo / 公司網站名稱和標語
- 改變公司名稱
- 新增 Logo【非必要】
- 新增標語【非必要】
- 新增 Favicon 網站圖示(icon)
- 改變網站名稱的排版結構
【基礎能力教學 #04】安裝強化文章編輯器功能的區塊(Block)
WordPress 新版本使用的區塊編輯器(Block Editor)允許額外安裝不同的功能擴充,我們推薦如下:
- Stackable
- Ultimate Addons for Gutenberg
- Atomic Blocks
【基礎能力教學 #05】新增必要的頁面(Page)
了解基礎制作頁面的知識,我們不會使用複雜的技術和設計,以最簡單的設計為例。
- 新增【關於我們】頁面
- 新增【聯絡我們】頁面
- 新增【產品或服務我們】頁面
- 設定【永久網址 Permalink】
【基礎能力教學 #06】新增小量文章(Post)
文章是部落格的核心部分,我們嚐試制作數種樣式的文章,讓初學者了解基礎制作的步驟。
- 新增【標題 Title】
- 新增【永久網址 Permalink】
- 新增【標籤 Tag】
- 新增【分類 Category】
- 設定【精選圖片 Featured Image】
【基礎能力教學 #07】制作第一個選單(Menu)
文章是部落格的核心部分,我們嚐試制作數種樣式的文章,讓初學者了解基礎制作的步驟。
- 新增新的【選單 Menu】
- 從左方新增【選單項目】
- 加入外部連結
- 嚐試建立多層結構選單
- 了解【顯示項目設定】
【基礎能力教學 #08】側邊欄【Side bar】的配置和部署
側邊欄(資訊欄)一般在部落格的右方,提供額外補充資訊的用途,可以設置不同的小工具(Widget)
- 側邊欄【Side bar】是不必需?
- 常見顯示在左方或右方
- 新增、移除和管理側邊欄【Side bar】的內容
- 如何取得更多小工具(Widget)?
【基礎能力教學 #09】首頁設定【Home Page】的配置和部署
應該選擇什麼作為首頁,這取決於不同站長的決定,沒有固定的答案,依賴您網站的規劃和表現方式
- 設定任意靜態頁面(Page)為首頁
- 設定部落格文章列表為首頁
- 如何取捨?
如果學生有任何不明白的地方,歡迎在這裡發問,會盡力回覆大家。